Skip to content

Commit d69eead

Browse files
zombieFoxzombieFox
authored
[feature] [refactor] improve controls and add controls for layout padding and gutter size
1 parent 019d82f commit d69eead

21 files changed

Lines changed: 683 additions & 407 deletions

‎css/background.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,16 @@
77
pointer-events: none;
88
z-index: var(--z-index-background);
99
animation: appear var(--animation-speed-slow) 1;
10+
display: none;
11+
}
12+
13+
.is-background-image-show .background {
14+
display: block;
1015
}
1116

1217
.background-image {
1318
background-image: var(--background-image);
19+
/* background-image: url(/api/public/proxy/source.unsplash.com/random/1920x1080/?night); */
1420
background-attachment: fixed;
1521
background-size: cover;
1622
background-position: center;
@@ -22,7 +28,8 @@
2228
pointer-events: none;
2329
display: block;
2430
opacity: var(--background-opacity);
25-
/* filter: blur(var(--background-blur)) grayscale(var(--background-grayscale)); */
31+
transform: scale(var(--background-scale));
32+
filter: blur(var(--background-blur)) grayscale(var(--background-grayscale));
2633
}
2734

2835
.background-accent {

‎css/base.css‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,8 @@
5858
--header-shade-color: transparent;
5959
--header-shade-opacity: none;
6060
--header-search-width: 0%;
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;
61+
--header-border-top: 0;
62+
--header-border-bottom: 0;
6963
--header-date-size: 1em;
7064
--header-clock-size: 1em;
7165
--header-search-size: 1em;
@@ -80,9 +74,12 @@
8074
--link-item-name-size: 0.9em;
8175
--background-image: none;
8276
--background-opacity: 1;
77+
--background-scale: 1;
8378
--background-accent-opacity: 0;
8479
--background-blur: 0;
8580
--layout-width: 80%;
81+
--layout-padding-multiplier: 4;
82+
--layout-gutter-multiplier: 4;
8683
--animation-speed-fast: 0.2s;
8784
--animation-speed-medium: 0.4s;
8885
--animation-speed-slow: 0.6s;

‎css/clock.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.clock {
22
margin: 0;
33
padding: 0;
4-
border-radius: var(--theme-radius);
54
font-size: 1em;
65
font-family: var(--font-fjalla);
76
color: rgb(var(--style-neutral-text));

‎css/date.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.date {
22
margin: 0;
33
padding: 0;
4-
border-radius: var(--theme-radius);
54
font-size: 1em;
65
font-family: var(--font-fjalla);
76
color: rgb(var(--style-neutral-text));

‎css/edge.css‎

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

‎css/greeting.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.greeting {
22
margin: 0;
33
padding: 0;
4-
border-radius: var(--theme-radius);
54
font-size: 1em;
65
font-family: var(--font-fjalla);
76
color: rgb(var(--style-neutral-text));
@@ -13,6 +12,18 @@
1312
flex-wrap: nowrap;
1413
}
1514

15+
.is-header-item-alignment-horizontal-left .greeting {
16+
justify-content: flex-start;
17+
}
18+
19+
.is-header-item-alignment-horizontal-center .greeting {
20+
justify-content: center;
21+
}
22+
23+
.is-header-item-alignment-horizontal-right .greeting {
24+
justify-content: flex-end;
25+
}
26+
1627
.greeting-item {
1728
font-size: 1.5em;
1829
max-width: 100%;

‎css/header.css‎

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,7 @@
2323
left: 0;
2424
}
2525

26-
.header-shade,
27-
.header-border {
26+
.header-shade {
2827
content: "";
2928
display: block;
3029
position: absolute;
@@ -35,47 +34,35 @@
3534
pointer-events: none;
3635
}
3736

38-
.is-header-shade-style-scroll .header-shade {
39-
transition: background-color var(--animation-speed-slow) ease-in-out;
40-
animation: none;
37+
.is-header-radius .header-shade {
38+
border-radius: calc(var(--theme-radius) * 4);
4139
}
4240

4341
.is-header-shade-show .header-shade {
44-
background-color: rgb(var(--header-shade-color));
45-
opacity: var(--header-shade-opacity);
46-
}
47-
48-
.is-header-border-top-show .header-border {
49-
border-top: var(--header-border-width-top) solid rgb(var(--theme-accent));
50-
}
51-
52-
.is-header-border-bottom-show .header-border {
53-
border-bottom: var(--header-border-width-bottom) solid rgb(var(--theme-accent));
42+
background-color: rgba(var(--header-shade-color), var(--header-shade-opacity));
5443
}
5544

5645
.header-area {
57-
padding-top: calc(var(--gutter) * 3 + var(--header-padding-top));
58-
padding-bottom: calc(var(--gutter) * 3 + var(--header-padding-bottom));
59-
padding-left: calc(var(--gutter) * 3);
60-
padding-right: calc(var(--gutter) * 3);
46+
padding: calc(var(--gutter) * var(--layout-padding-multiplier));
6147
position: relative;
6248
width: var(--header-area-width);
63-
display: flex;
64-
flex-direction: row;
65-
flex-wrap: wrap;
66-
align-items: stretch;
6749
}
6850

69-
.is-header-item-alignment-horizontal-left .header-area {
70-
justify-content: flex-start;
51+
.is-header-border-top .header-area {
52+
border-top: calc(var(--line-width) * var(--header-border-top)) solid rgb(var(--theme-accent));
7153
}
7254

73-
.is-header-item-alignment-horizontal-center .header-area {
74-
justify-content: center;
55+
.is-header-border-bottom .header-area {
56+
border-bottom: calc(var(--line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
7557
}
7658

77-
.is-header-item-alignment-horizontal-right .header-area {
78-
justify-content: flex-end;
59+
.is-header-radius .header-area {
60+
border-radius: calc(var(--theme-radius) * 4);
61+
}
62+
63+
.is-header-shade-style-scroll .header-area {
64+
transition: background-color var(--animation-speed-slow) ease-in-out;
65+
animation: none;
7966
}
8067

8168
.is-header-search-text-align-left .header-search-input {
@@ -100,13 +87,35 @@
10087
right: 0;
10188
}
10289

90+
.header-item-grid {
91+
margin: calc(-1 * calc(var(--gutter) * calc(var(--layout-gutter-multiplier) / 2)));
92+
display: flex;
93+
flex-direction: row;
94+
flex-wrap: wrap;
95+
align-items: stretch;
96+
pointer-events: none;
97+
}
98+
99+
.is-header-item-alignment-horizontal-left .header-item-grid {
100+
justify-content: flex-start;
101+
}
102+
103+
.is-header-item-alignment-horizontal-center .header-item-grid {
104+
justify-content: center;
105+
}
106+
107+
.is-header-item-alignment-horizontal-right .header-item-grid {
108+
justify-content: flex-end;
109+
}
110+
103111
.header-item {
104-
margin: var(--gutter);
112+
margin: calc(var(--gutter) * calc(var(--layout-gutter-multiplier) / 2));
105113
display: flex;
106114
flex-wrap: nowrap;
107115
justify-content: flex-start;
108116
align-items: center;
109117
position: relative;
118+
pointer-events: all;
110119
}
111120

112121
.is-header-search-style-auto .header-search {

‎css/link.css‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,21 @@
2222
}
2323

2424
.link-area {
25-
padding-bottom: calc(var(--gutter) * 4);
26-
padding-left: calc(var(--gutter) * 4);
27-
padding-right: calc(var(--gutter) * 4);
25+
padding-bottom: calc(var(--gutter) * var(--layout-padding-multiplier));
26+
padding-left: calc(var(--gutter) * var(--layout-padding-multiplier));
27+
padding-right: calc(var(--gutter) * var(--layout-padding-multiplier));
2828
font-size: calc(var(--link-item-size) * 1);
2929
position: relative;
3030
width: var(--link-area-width);
3131
display: grid;
3232
grid-auto-rows: 1fr;
33-
grid-gap: calc(var(--gutter) * var(--link-area-gutter-multiplier));
33+
grid-gap: calc(var(--gutter) * var(--layout-gutter-multiplier));
3434
grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
3535
}
3636

37-
.is-header-border-bottom-show .link-area,
37+
.is-header-border-bottom .link-area,
3838
.is-header-shade-style-always .link-area {
39-
padding-top: calc(var(--gutter) * 4);
39+
padding-top: calc(var(--gutter) * var(--layout-padding-multiplier));
4040
}
4141

4242
.link-item {
@@ -52,7 +52,7 @@
5252
.link-item:focus-within,
5353
.link-item:focus,
5454
.link-item:hover {
55-
transform: scale(1.06);
55+
transform: scale(1.05);
5656
z-index: 2;
5757
}
5858

@@ -178,18 +178,14 @@
178178
height: calc(100% - var(--line-width));
179179
}
180180

181+
.is-link-edit .link-panel-back,
181182
.is-link-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back,
182183
.is-link-url-show:not(.is-link-item-line-show) .link-item:focus-within .link-panel-back,
183184
.is-link-url-show:not(.is-link-item-line-show) .link-item:hover .link-panel-back {
184-
top: calc(var(--line-width) * 2);
185+
top: 0;
186+
height: 100%;
185187
}
186188

187-
/* .is-link-item-line-show.is-link-url-show .link-item:focus .link-panel-back,
188-
.is-link-item-line-show.is-link-url-show .link-item:focus-within .link-panel-back,
189-
.is-link-item-line-show.is-link-url-show .link-item:hover .link-panel-back {
190-
top: var(--line-width);
191-
} */
192-
193189
.link-control {
194190
margin: 0;
195191
padding: 0;

‎css/menu.css‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@
5454
margin: 0;
5555
}
5656

57+
.menu-content {
58+
padding: 0 3em;
59+
}
60+
5761
.menu-content-area {
5862
display: grid;
5963
grid-template-columns: 1fr;
@@ -65,19 +69,19 @@
6569
}
6670

6771
.menu-item:not(:last-child) {
68-
border-bottom: calc(var(--line-width) * 2) solid rgb(var(--gray-03));
72+
border-bottom: 2px solid rgb(var(--gray-03));
6973
}
7074

7175
.menu-item-header {
72-
padding: 2em;
76+
padding: 2em 0;
7377
}
7478

7579
.menu-item-header-text {
7680
margin-bottom: 0;
7781
}
7882

7983
.menu-item-form {
80-
padding: 0 2em 2em 4em;
84+
padding: 0 2em 2em 3em;
8185
}
8286

8387
.menu-close {
@@ -121,7 +125,7 @@
121125

122126
@media (min-width: 700px) {
123127
.menu {
124-
width: 60vw;
128+
width: 70vw;
125129
height: 100%;
126130
overflow-y: inherit;
127131
max-height: inherit;
@@ -149,21 +153,21 @@
149153
}
150154

151155
.menu-item-header {
152-
padding: 2em 0 2em 2em;
156+
padding: 2em 0;
153157
position: sticky;
154158
top: 0;
155159
z-index: 3;
156160
}
157161

158162
.menu-item-form {
159-
padding: 2em 2em 2em 0;
163+
padding: 2em 0;
160164
z-index: 2;
161165
}
162166
}
163167

164168
@media (min-width: 900px) {
165169
.menu {
166-
width: 60vw;
170+
width: 70vw;
167171
}
168172

169173
.menu-item {
@@ -173,6 +177,6 @@
173177

174178
@media (min-width: 1600px) {
175179
.menu {
176-
width: 40vw;
180+
width: 50vw;
177181
}
178182
}

‎css/transitional.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.transitional {
22
margin: 0;
33
padding: 0;
4-
border-radius: var(--theme-radius);
54
font-size: 1em;
65
font-family: var(--font-fjalla);
76
color: rgb(var(--gray-14));
@@ -20,3 +19,15 @@
2019
justify-content: center;
2120
align-items: center;
2221
}
22+
23+
.is-header-item-alignment-horizontal-left .transitional {
24+
text-align: left;
25+
}
26+
27+
.is-header-item-alignment-horizontal-center .transitional {
28+
text-align: center;
29+
}
30+
31+
.is-header-item-alignment-horizontal-right .transitional {
32+
text-align: right;
33+
}

0 commit comments

Comments
 (0)