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

+683
-407
lines changed

‎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(https://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 000var(--line-width) rgb(var(--theme-accent)), inset 000calc(var(--line-width) *2) rgba(var(--theme-accent),0.25), inset 000calc(var(--line-width) *3) rgba(var(--theme-accent),0.25);
10+
box-shadow: inset 000var(--line-width) rgb(var(--theme-accent)), inset 000calc(var(--line-width) *4) rgba(var(--theme-accent),0.1), inset 000calc(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:03em;
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:2em0;
7377
}
7478

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

7983
.menu-item-form{
80-
padding:02em2em4em;
84+
padding:02em2em3em;
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:2em02em2em;
156+
padding:2em0;
153157
position: sticky;
154158
top:0;
155159
z-index:3;
156160
}
157161

158162
.menu-item-form{
159-
padding:2em2em2em0;
163+
padding:2em0;
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)