Skip to content

Commit ec0e404

Browse files
mathertelmathertel
committed
css updates
1 parent 86458bf commit ec0e404

13 files changed

+1190
-695
lines changed

‎css/base.scss

+48-98
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@
99

1010
// the u-hue value is the main color of the style
1111
$u-hue: 220deg;
12-
$u-background: #d4d6da;
13-
$u-background-darkmode: #111111;
14-
$u-text: #111111; // any text
15-
$u-text-darkmode: #eeeeee; // any text
1612

1713
$u-primary: hsl($u-hue 80% 30%); // active objects
1814
$u-primary-text: white;
@@ -21,12 +17,8 @@ $u-border-color: #555555;
2117
$u-border-color-active: hsl($u-hue 100% 30%);
2218

2319
$u-disabled: gray; // disabled objects
24-
$u-heading: $u-primary; // any headlines
2520
$u-connect: #00cc00; // connectivity / net
2621

27-
$u-on: color.scale(green, $lightness: 10%);
28-
$u-off: red;
29-
3022
$u-padding-text: 4px;
3123
$u-padding-block: calc(2 * $u-padding-text);
3224

@@ -36,7 +28,6 @@ $u-border-none: $u-border-size solid transparent;
3628
$u-border-active: $u-border-size solid $u-border-color-active;
3729

3830

39-
4031
// ===== Content Box Sizes =====
4132

4233
$u-white-space: 1rem;
@@ -57,17 +48,30 @@ $u-font-sans-serif: arial, ui-sans-serif, sans-serif;
5748
// ===== main =====
5849

5950
:root {
60-
--color: #{$u-text};
61-
--back: #{$u-background};
62-
--focus: #{hsl($u-hue, 50%, 50%)};
63-
--text-spacing: #{$u-text-spacing};
51+
color-scheme: light dark;
52+
53+
// standard colors used for <html>
54+
--back: light-dark(hsl(#{$u-hue} 2% 85%), hsl(#{$u-hue} 2% 15%));
55+
--color: light-dark(hsl(#{$u-hue} 0 10%), hsl(#{$u-hue} 0 90%));
56+
57+
--success-hue: 80deg;
58+
--success-back: hsl(var(--success-hue) 90% 75%);
59+
--success-line: hsl(var(--success-hue) 90% 40%);
60+
61+
--warning-hue: 40deg;
62+
--warning-back: hsl(var(--warning-hue) 90% 75%);
63+
--warning-line: hsl(var(--warning-hue) 90% 40%);
64+
--warning-color: black;
65+
66+
--error-hue: 0deg;
67+
--error-back: hsl(var(--error-hue) 90% 75%);
68+
--error-line: hsl(var(--error-hue) 90% 40%);
69+
--error-color: color;
6470

65-
color-scheme: dark light;
71+
--focus: #{hsl($u-hue, 50%, 50%)};
6672

67-
@media (prefers-color-scheme: dark) {
68-
--color: #{$u-text-darkmode};
69-
--back: #{$u-background-darkmode};
70-
}
73+
--text-spacing: #{$u-text-spacing};
74+
--transition: 0.3s ease;
7175
}
7276

7377
html,
@@ -76,19 +80,12 @@ body {
7680
margin: 0;
7781
padding: 0;
7882
font-family: $u-font-sans-serif;
79-
font-size: 1em;
83+
font-size: 1rem;
84+
line-height: 1.2rem;
8085
color: var(--color);
8186
background-color: var(--back);
8287
}
8388

84-
85-
86-
@media (width > 800px) {
87-
body {
88-
padding: 2 * $u-padding-text;
89-
}
90-
}
91-
9289
// apply a natural box layout model to all elements, but allowing components to change
9390
*,
9491
*::before,
@@ -101,6 +98,13 @@ img {
10198
height: auto;
10299
}
103100

101+
a,
102+
a:any-link {
103+
color: inherit;
104+
text-decoration: underline;
105+
cursor: pointer;
106+
}
107+
104108
// use-cases of svg icons
105109

106110
svg {
@@ -127,75 +131,11 @@ svg {
127131
}
128132

129133

130-
// ===== Text containers =====
131-
p,
132-
pre,
133-
h1,
134-
h2,
135-
h3,
136-
h4,
137-
.text {
138-
margin: 0;
139-
min-height: 1rem;
140-
141-
>img,
142-
>svg {
143-
// assume image in text containers to be inline icons
144-
height: 1em;
145-
height: auto;
146-
147-
&:first-child {
148-
margin-right: 0.2em;
149-
}
150-
}
151-
}
152-
153-
p:not(:first-child),
154-
pre:not(:first-child),
155-
.text:not(:first-child) {
156-
margin-top: var(--text-spacing);
157-
}
158-
159-
h1:not(:first-child),
160-
h2:not(:first-child),
161-
h3:not(:first-child),
162-
h4:not(:first-child) {
163-
margin-top: calc(var(--text-spacing) * 3);
134+
// Title us used everywhere
135+
h1 {
136+
font-size: 2em;
164137
}
165138

166-
a,
167-
a:any-link {
168-
color: inherit;
169-
text-decoration: underline;
170-
cursor: pointer;
171-
}
172-
173-
h1,
174-
h2,
175-
h3,
176-
h4 {
177-
text-wrap: balance;
178-
font-family: $u-font-sans-serif;
179-
font-weight: bold;
180-
}
181-
182-
// Chapter
183-
h2 {
184-
font-size: 1.6em;
185-
min-height: 1.6em;
186-
}
187-
188-
// Topic
189-
h3 {
190-
font-size: 1.25em;
191-
min-height: 1.25em;
192-
}
193-
194-
// Subtitle
195-
h4 {
196-
font-size: 1em;
197-
min-height: 1em;
198-
}
199139

200140

201141
// form elements
@@ -304,18 +244,28 @@ dialog {
304244
}
305245
}
306246

307-
.error,
308-
.warning,
247+
.warning {
248+
border: 2px solid var(--warning-line);
249+
background-color: var(--warning-back);
250+
color: var(--warning-color);
251+
}
252+
253+
.error {
254+
border: 2px solid var(--error-line);
255+
background-color: var(--error-back);
256+
color: var(--error-color);
257+
}
258+
309259
.invalid {
310260
border: 2px solid #ff1111 !important;
311261
background-color: #ffcccc !important;
312-
color: $u-text;
262+
color: var(--color);
313263
}
314264

315265
.valid {
316266
border: 2px solid #00cc00 !important;
317267
background-color: #ccffcc !important;
318-
color: $u-text;
268+
color: var(--color);
319269
}
320270

321271
.noprint {

‎css/card.scss

+13-22
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// CSS for HTML cards and card design without any dependencies.
22

33
@use "base";
4+
@use "page";
45

56
// ===== card Layout settings =====
67
// The card layout is based on a grid of cards with a fixed width and height.
@@ -15,9 +16,6 @@
1516
$u-card-width: 280px;
1617
$u-card-gap: 16px;
1718

18-
$u-card-radius: 1em;
19-
$u-card-border: none;
20-
2119
// ===== card style settings =====
2220

2321
// $u-card-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.2);
@@ -30,22 +28,17 @@ $u-card-border: none;
3028
// cards can have fixed or variable height specified by the --card-height variable.
3129
--card-height: 320px;
3230

33-
/* horizontal cards have fixed height and are stretched to the total width of the card-container. See below */
31+
// horizontal cards have fixed height and are stretched to the total width of the card-container.
3432

35-
/* Design of cards, colors borders, paddings, */
36-
--card-back: #fcfcfc;
37-
--card-head: hsl(#{base.$u-hue 20% 80%});
38-
--card-head-active: #{hsl(base.$u-hue, 80%, 70%)};
39-
--card-border: $u-card-border;
33+
// Design of cards, colors borders, paddings
34+
--card-back: light-dark(white, black);
35+
--card-color: var(--main-color);
36+
--card-head: hsl(#{base.$u-hue} 20% 80%);
37+
--card-head-active: #{hsl(base.$u-hue, 80%, 80%)};
38+
--card-border: none;
4039
--card-padding: 0.5em;
4140
--card-image-size: 120px;
42-
--card-radius: $u-card-radius;
43-
44-
@media (prefers-color-scheme: dark) {
45-
--card-back: rgb(55 55 55);
46-
--card-head: hsl(220deg 20% 30%);
47-
--card-head-active: #{hsl(base.$u-hue 80% 30%)};
48-
}
41+
--card-radius: 1em;
4942
}
5043

5144
// ===== card container =====
@@ -81,15 +74,15 @@ $u-card-border: none;
8174
border-radius: var(--card-radius);
8275

8376
@media print {
84-
border: 1px solid base.$u-text;
77+
border: 1px solid var(--color);
8578
}
8679

87-
/* cards can be marked with class='wide' covering 2 columns */
80+
// cards can be marked with class='wide' covering 2 columns
8881
&.wide {
8982
width: calc(var(--card-width) * 2 + var(--card-gap));
9083
}
9184

92-
/* cards can be marked with class='wide' covering 2 columns */
85+
// cards can be marked with class='small' covering 1/2 column
9386
&.small {
9487
width: calc((var(--card-width) - var(--card-gap)) / 2);
9588
height: calc((var(--card-height) - var(--card-gap)) / 2);
@@ -140,8 +133,6 @@ $u-card-border: none;
140133
.body {
141134
grid-area: main;
142135
flex: 1;
143-
144-
/* background-color: lime; */
145136
padding: var(--card-padding);
146137
}
147138

@@ -283,4 +274,4 @@ $u-card-border: none;
283274
width: 9.6rem;
284275
max-height: 7.2rem;
285276
}
286-
}
277+
}

‎css/code.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ pre:has(>code) {
3939

4040
code {
4141
display: block;
42-
color: var(--code-text);
42+
color: black;
4343

4444
// font-family: Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;
4545
font-size: 1rem;
@@ -63,4 +63,5 @@ p > code {
6363
font-size: 1rem;
6464
padding: 0 var(--text-spacing);
6565
background-color: var(--code-back);
66+
color: black;
6667
}

0 commit comments

Comments
 (0)