Skip to content

Commit 90fa411

Browse files
zombieFoxzombieFox
authored
[feature] add size controls to header items
1 parent 3fbbc5b commit 90fa411

27 files changed

Lines changed: 677 additions & 422 deletions

‎css/auto-suggest.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
left: 0;
1414
width: 100%;
1515
max-height: 40vh;
16-
border-radius: var(--radius);
16+
border-radius: var(--theme-radius);
1717
overflow-y: auto;
1818
z-index: var(--z-index-auto-suggest-list);
1919
display: flex;
@@ -35,7 +35,7 @@
3535
border-width: var(--form-input-border);
3636
border-style: solid;
3737
border-color: transparent;
38-
border-radius: var(--radius);
38+
border-radius: var(--theme-radius);
3939
width: 100%;
4040
height: 100%;
4141
display: flex;
@@ -64,7 +64,7 @@
6464
color: rgb(var(--form-input-text-focus));
6565
outline: none;
6666
text-decoration: none;
67-
box-shadow: 0 0 0 var(--line-width) rgb(var(--accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25);
67+
box-shadow: 0 0 0 var(--line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--theme-accent), 0.25);
6868
}
6969

7070
.auto-suggest-link:active {

‎css/background.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
}
2727

2828
.background-accent {
29-
background-color: rgba(var(--accent), var(--background-accent-opacity));
29+
background-color: rgba(var(--theme-accent), var(--background-accent-opacity));
3030
position: absolute;
3131
top: 0;
3232
left: 0;

‎css/base.css‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
:root {
2-
--accent: 250, 130, 0;
2+
--root-font-size: 14px;
33
--black: 0, 0, 0;
44
--white: 255, 255, 255;
55
--shade-01: 38, 40, 49;
@@ -45,40 +45,33 @@
4545
--form-checkbox-radio-chcked-label: var(--gray-16);
4646
--form-checkbox-radio-disabled-label: var(--gray-04);
4747
--form-range-thumb: var(--gray-12);
48-
--root-font-size: 14px;
49-
--radius: 0.2em;
48+
--theme-accent: 250, 130, 0;
49+
--theme-radius: 0.2rem;
5050
--line-width: 0.2em;
5151
--background: rgb(var(--gray-01));
5252
--gutter: 0.5rem;
53-
--animation-speed-fast: 0.2s;
54-
--animation-speed-medium: 0.4s;
55-
--animation-speed-slow: 0.6s;
5653
--font-regular: "Open Sans Regular", sans-serif;
5754
--font-bold: "Open Sans Bold", sans-serif;
5855
--font-light: "Open Sans Light", sans-serif;
5956
--font-fjalla: "Fjalla One Regular", sans-serif;
60-
--z-index-background: 1000;
61-
--z-index-link: 2000;
62-
--z-index-header: 3000;
63-
--z-index-tip: 4000;
64-
--z-container-edge: 5000;
65-
--z-index-shade: 6000;
66-
--z-index-modal: 7000;
67-
--z-index-menu: 8000;
68-
--z-index-auto-suggest-list: 8000;
69-
--z-index-edge: 9000;
7057
--header-area-width: 100%;
7158
--header-shade-color: transparent;
7259
--header-shade-opacity: none;
7360
--header-search-width: 0%;
74-
--header-padding-top: calc(var(--line-width) * var(--header-padding-multiplier-top));
75-
--header-padding-bottom: calc(var(--line-width) * var(--header-padding-multiplier-bottom));
76-
--header-padding-multiplier-top: 4;
77-
--header-padding-multiplier-bottom: 4;
78-
--header-border-width-top: calc(var(--line-width) * var(--header-border-width-multiplier-top));
79-
--header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-multiplier-bottom));
80-
--header-border-width-multiplier-top: 1;
81-
--header-border-width-multiplier-bottom: 1;
61+
--header-padding-top: calc(var(--line-width) * var(--header-padding-top-multiplier));
62+
--header-padding-bottom: calc(var(--line-width) * var(--header-padding-bottom-multiplier));
63+
--header-padding-top-multiplier: 4;
64+
--header-padding-bottom-multiplier: 4;
65+
--header-border-width-top: calc(var(--line-width) * var(--header-border-width-top-multiplier));
66+
--header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-bottom-multiplier));
67+
--header-border-width-top-multiplier: 1;
68+
--header-border-width-bottom-multiplier: 1;
69+
--header-date-size: 1em;
70+
--header-clock-size: 1em;
71+
--header-search-size: 1em;
72+
--header-button-size: 1em;
73+
--header-greeting-size: 1em;
74+
--header-transitional-size: 1em;
8275
--link-area-width: 100%;
8376
--link-area-gutter-multiplier: 2;
8477
--link-item-size: 1em;
@@ -90,13 +83,24 @@
9083
--background-accent-opacity: 0;
9184
--background-blur: 0;
9285
--layout-width: 80%;
93-
--menu-border: calc(var(--line-width) * 1) solid rgb(var(--gray-03));
86+
--animation-speed-fast: 0.2s;
87+
--animation-speed-medium: 0.4s;
88+
--animation-speed-slow: 0.6s;
9489
--shadow-small: 0 2px 1px rgba(0, 0, 0, 0.1), 0 3px 2px rgba(0, 0, 0, 0.1);
9590
--shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 15px rgba(0, 0, 0, 0.1);
9691
--shadow-large: 0 4px 10px rgba(0, 0, 0, 0.1), 0 6px 30px rgba(0, 0, 0, 0.1);
9792
--shadow-small-inset: inset 0 1px 1px rgba(0, 0, 0, 0.05);
9893
--shadow-medium-inset: inset 0 2px 2px rgba(0, 0, 0, 0.1);
9994
--shadow-large-inset: inset 0 3px 3px rgba(0, 0, 0, 0.15);
95+
--z-index-background: 1000;
96+
--z-index-link: 2000;
97+
--z-index-header: 3000;
98+
--z-index-tip: 4000;
99+
--z-index-shade: 5000;
100+
--z-index-modal: 6000;
101+
--z-index-menu: 7000;
102+
--z-index-auto-suggest-list: 8000;
103+
--z-index-edge: 9000;
100104
/* breakpoint reference */
101105
/* can not be used in @media as of yet */
102106
--breakpoint-sm: 550px;
@@ -109,15 +113,15 @@
109113
:root.is-link-style-block {
110114
--link-item-width: 11em;
111115
--link-item-height: 10em;
112-
--url-height: 20%;
113-
--edit-height: 30%;
116+
--link-item-url-height: 20%;
117+
--link-item-edit-height: 30%;
114118
}
115119

116120
:root.is-link-style-list {
117121
--link-item-width: 20em;
118122
--link-item-height: 4em;
119-
--url-height: 30%;
120-
--edit-height: 50%;
123+
--link-item-url-height: 30%;
124+
--link-item-edit-height: 50%;
121125
}
122126

123127
@media (min-width: 700px) {
@@ -127,7 +131,7 @@
127131
}
128132

129133
::selection {
130-
background-color: rgb(var(--accent));
134+
background-color: rgb(var(--theme-accent));
131135
color: rgb(var(--white));
132136
}
133137

‎css/button.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@ input[type="submit"] {
1616
border-bottom-width: var(--line-width);
1717
border-style: solid;
1818
border-color: transparent;
19-
border-radius: var(--radius);
19+
border-radius: var(--theme-radius);
2020
text-align: center;
2121
text-decoration: none;
2222
white-space: nowrap;
2323
cursor: pointer;
2424
box-shadow: none;
25-
transition: all var(--animation-speed-fast) ease-in-out;
25+
transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border var(--animation-speed-fast) ease-in-out;
2626
display: inline-flex;
2727
flex-direction: row;
2828
justify-content: center;
@@ -51,7 +51,7 @@ input[type="button"]:active,
5151
input[type="reset"]:active,
5252
input[type="submit"]:active {
5353
background-color: rgb(var(--gray-04));
54-
border-bottom-color: rgb(var(--accent));
54+
border-bottom-color: rgb(var(--theme-accent));
5555
color: rgb(var(--button-text-active));
5656
transition: none;
5757
}
@@ -83,7 +83,7 @@ button [class*=" icon-"],
8383
}
8484

8585
.button.active {
86-
border-bottom-color: rgb(var(--accent));
86+
border-bottom-color: rgb(var(--theme-accent));
8787
color: rgb(var(--button-text-active));
8888
}
8989

‎css/clock.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.clock {
22
margin: 0;
33
padding: 0;
4-
border-radius: var(--radius);
4+
border-radius: var(--theme-radius);
55
font-size: 1em;
66
font-family: var(--font-fjalla);
77
color: rgb(var(--style-neutral-text));
@@ -39,7 +39,7 @@
3939

4040
.clock-separator {
4141
justify-content: center;
42-
color: rgb(var(--accent));
42+
color: rgb(var(--theme-accent));
4343
}
4444

4545
.clock-hours,

‎css/date.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.date {
22
margin: 0;
33
padding: 0;
4-
border-radius: var(--radius);
4+
border-radius: var(--theme-radius);
55
font-size: 1em;
66
font-family: var(--font-fjalla);
77
color: rgb(var(--style-neutral-text));
@@ -39,7 +39,7 @@
3939

4040
.date-separator {
4141
justify-content: center;
42-
color: rgb(var(--accent));
42+
color: rgb(var(--theme-accent));
4343
}
4444

4545
.date-date,

‎css/edge.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.edge {
2-
background-color: rgba(var(--accent), 0.10);
2+
background-color: rgba(var(--theme-accent), 0.10);
33
width: 0;
44
height: 0;
55
position: absolute;
66
top: 0;
77
left: 0;
88
opacity: 0;
9-
border-radius: calc(var(--radius) * 2);
10-
box-shadow: inset 0 0 0 var(--line-width) rgb(var(--accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25), inset 0 0 0 calc(var(--line-width) * 3) rgba(var(--accent), 0.25);
9+
border-radius: var(--theme-radius);
10+
box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--theme-accent), 0.25), inset 0 0 0 calc(var(--line-width) * 3) rgba(var(--theme-accent), 0.25);
1111
z-index: var(--z-index-edge);
1212
pointer-events: none;
1313
transition: opacity var(--animation-speed-fast) ease-in-out;

0 commit comments

Comments
 (0)