Lokasi ngalangkungan proxy:   [ UP ]  
[Ngawartoskeun bug]   [Panyetelan cookie]                
Skip to content

Commit 6a87114

Browse files
zombieFoxzombieFox
authored
[refactor] improve state and control binding
1 parent 1aa9316 commit 6a87114

22 files changed

Lines changed: 1058 additions & 775 deletions

‎css/base.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,13 @@
5454
--breakpoint-xxl: 1600px;
5555
}
5656

57-
:root.is-link-block {
57+
:root.is-bookmarks-style-block {
5858
--link-height: 7em;
5959
--url-height: 20%;
6060
--edit-height: 30%;
6161
}
6262

63-
:root.is-link-list {
63+
:root.is-bookmarks-style-list {
6464
--link-height: 4em;
6565
--url-height: 30%;
6666
--edit-height: 50%;
@@ -71,7 +71,7 @@
7171
--root-font-size: 16px;
7272
}
7373

74-
:root.is-link-block {
74+
:root.is-bookmarks-style-block {
7575
--link-height: 9em;
7676
}
7777
}
@@ -96,19 +96,19 @@ body {
9696
height: 100vh;
9797
}
9898

99-
.is-alignment-vertical-top body {
99+
.is-header-alignment-vertical-top body {
100100
justify-content: flex-start;
101101
}
102102

103-
.is-alignment-vertical-center body {
103+
.is-header-alignment-vertical-center body {
104104
justify-content: center;
105105
}
106106

107-
.is-alignment-vertical-bottom body {
107+
.is-header-alignment-vertical-bottom body {
108108
justify-content: flex-end;
109109
}
110110

111-
.is-link body {
111+
.is-bookmarks-show-link body {
112112
display: inherit;
113113
height: inherit;
114114
}

‎css/container.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,40 @@
44
transition: all var(--animation-speed-fast) ease-in-out;
55
}
66

7-
.is-layout-fluid .container,
8-
.is-layout-wide .container,
9-
.is-layout-thin .container {
7+
.is-layout-width-fluid .container,
8+
.is-layout-width-wide .container,
9+
.is-layout-width-thin .container {
1010
width: calc(100vw - 4em);
1111
}
1212

1313
@media (min-width: 550px) {
14-
.is-layout-wide .container {
14+
.is-layout-width-wide .container {
1515
width: 80vw;
1616
}
1717

18-
.is-layout-thin .container {
18+
.is-layout-width-thin .container {
1919
width: 60vw;
2020
}
2121
}
2222

2323
@media (min-width: 900px) {}
2424

2525
@media (min-width: 1100px) {
26-
.is-layout-wide .container {
26+
.is-layout-width-wide .container {
2727
width: 75vw;
2828
}
2929

30-
.is-layout-thin .container {
30+
.is-layout-width-thin .container {
3131
width: 40vw;
3232
}
3333
}
3434

3535
@media (min-width: 1600px) {
36-
.is-layout-wide .container {
36+
.is-layout-width-wide .container {
3737
width: 70vw;
3838
}
3939

40-
.is-layout-thin .container {
40+
.is-layout-width-thin .container {
4141
width: 30vw;
4242
}
4343
}

‎css/header.css‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
z-index: var(--z-index-header);
44
}
55

6-
.is-link .header {
6+
.is-bookmarks-show-link .header {
77
position: fixed;
88
top: 0;
99
left: 0;
@@ -44,26 +44,26 @@
4444
right: 0;
4545
}
4646

47-
.is-alignment-horizontal-left .header-area {
47+
.is-header-alignment-horizontal-left .header-area {
4848
justify-content: flex-start;
4949
}
5050

51-
.is-alignment-horizontal-center .header-area {
51+
.is-header-alignment-horizontal-center .header-area {
5252
justify-content: center;
5353
}
5454

55-
.is-alignment-horizontal-right .header-area {
55+
.is-header-alignment-horizontal-right .header-area {
5656
justify-content: flex-end;
5757
}
5858

59-
.is-layout-thin.is-search-grow .header-search,
60-
.is-search-grow .header-search {
59+
.is-layout-width-thin.is-header-search-grow .header-search,
60+
.is-header-search-grow .header-search {
6161
flex-grow: 1;
6262
flex-basis: 100%;
6363
}
6464

6565
@media (min-width: 550px) {
66-
.is-search-grow .header-search {
66+
.is-header-search-grow .header-search {
6767
flex-basis: initial;
6868
}
6969
}
@@ -77,14 +77,16 @@
7777
.header-clock,
7878
.header-search,
7979
.header-edit-add,
80-
.header-accent {
80+
.header-accent,
81+
.header-menu {
8182
display: none;
8283
}
8384

84-
.is-search .header-search,
85-
.is-date .header-date,
86-
.is-clock .header-clock,
87-
.is-search-edit-add .header-edit-add,
88-
.is-search-accent .header-accent {
85+
.is-header-search-show .header-search,
86+
.is-header-date-show .header-date,
87+
.is-header-clock-show .header-clock,
88+
.is-header-edit-add .header-edit-add,
89+
.is-header-accent .header-accent,
90+
.is-menu .header-menu {
8991
display: flex;
9092
}

‎css/link.css‎

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
display: none;
77
}
88

9-
.is-link .link {
9+
.is-bookmarks-show-link .link {
1010
display: block;
1111
}
1212

13-
.is-scroll-past-end .link {
13+
.is-layout-scroll-past-end .link {
1414
margin-bottom: 60vh;
1515
}
1616

@@ -21,15 +21,15 @@
2121
grid-gap: calc(var(--gutter) * 2);
2222
}
2323

24-
.is-link-block .link-area {
24+
.is-bookmarks-style-block .link-area {
2525
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
2626
}
2727

28-
.is-link-list .link-area {
28+
.is-bookmarks-style-list .link-area {
2929
grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
3030
}
3131

32-
.is-layout-thin.is-link-list .link-area {
32+
.is-layout-width-thin.is-bookmarks-style-list .link-area {
3333
grid-template-columns: 1fr;
3434
}
3535

@@ -67,13 +67,13 @@
6767
transition: all var(--animation-speed-fast) ease-in-out;
6868
}
6969

70-
.is-link-block .link-panel-front {
70+
.is-bookmarks-style-block .link-panel-front {
7171
flex-direction: column;
7272
align-items: center;
7373
justify-content: center;
7474
}
7575

76-
.is-link-list .link-panel-front {
76+
.is-bookmarks-style-list .link-panel-front {
7777
flex-direction: row;
7878
align-items: center;
7979
justify-content: flex-start;
@@ -95,9 +95,9 @@
9595
box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4);
9696
}
9797

98-
.is-link-url .link-item:focus .link-panel-front,
99-
.is-link-url .link-item:focus-within .link-panel-front,
100-
.is-link-url .link-item:hover .link-panel-front {
98+
.is-bookmarks-show-url .link-item:focus .link-panel-front,
99+
.is-bookmarks-show-url .link-item:focus-within .link-panel-front,
100+
.is-bookmarks-show-url .link-item:hover .link-panel-front {
101101
height: calc(100% - var(--url-height));
102102
}
103103

@@ -159,13 +159,13 @@
159159

160160
.link-control-item:focus,
161161
.link-control-item:hover {
162-
color: rgb(var(--black));
163-
background-color: rgba(255, 255, 255, 0.2);
162+
color: rgb(var(--white));
163+
background-color: rgba(0, 0, 0, 0.2);
164164
}
165165

166166
.link-control-item:active {
167-
color: rgb(var(--black));
168-
background-color: rgba(255, 255, 255, 0.4);
167+
color: rgb(var(--white));
168+
background-color: rgba(0, 0, 0, 0.3);
169169
transition: none;
170170
}
171171

@@ -179,15 +179,15 @@
179179
transition: all var(--animation-speed-fast) ease-in-out;
180180
}
181181

182-
.is-link-url .link-url {
182+
.is-bookmarks-show-url .link-url {
183183
display: flex;
184184
}
185185

186-
.is-link-block .link-url {
186+
.is-bookmarks-style-block .link-url {
187187
justify-content: center;
188188
}
189189

190-
.is-link-list .link-url {
190+
.is-bookmarks-style-list .link-url {
191191
justify-content: flex-start;
192192
}
193193

@@ -216,14 +216,14 @@
216216
transition: all var(--animation-speed-fast) ease-in-out;
217217
}
218218

219-
.is-link-block .link-letter {
219+
.is-bookmarks-style-block .link-letter {
220220
margin: 0;
221221
font-size: 2em;
222222
text-align: center;
223223
max-width: 100%;
224224
}
225225

226-
.is-link-list .link-letter {
226+
.is-bookmarks-style-list .link-letter {
227227
margin: 0 0.5em 0 0;
228228
font-size: 1.5em;
229229
flex-shrink: 0;
@@ -252,7 +252,7 @@
252252
transition: all var(--animation-speed-fast) ease-in-out;
253253
}
254254

255-
.is-link-name .link-name {
255+
.is-bookmarks-show-name .link-name {
256256
display: block;
257257
}
258258

@@ -275,37 +275,43 @@
275275
color: rgb(var(--gray-16));
276276
}
277277

278-
.is-link-block .link-name {
278+
.is-bookmarks-style-block .link-name {
279279
text-align: center;
280280
}
281281

282-
.is-edit .link-panel-front,
283-
.is-edit .link-item:hover .link-panel-front,
284-
.is-edit .link-item:focus .link-panel-front {
282+
.is-bookmarks-edit .link-panel-front,
283+
.is-bookmarks-edit .link-item:hover .link-panel-front,
284+
.is-bookmarks-edit .link-item:focus .link-panel-front {
285285
height: calc(100% - var(--edit-height));
286286
box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4);
287287
}
288288

289-
.is-edit .link-control {
289+
.is-bookmarks-edit.is-bookmarks-show-url .link-item:focus .link-panel-front,
290+
.is-bookmarks-edit.is-bookmarks-show-url .link-item:focus-within .link-panel-front,
291+
.is-bookmarks-edit.is-bookmarks-show-url .link-item:hover .link-panel-front {
292+
height: calc(100% - var(--edit-height));
293+
}
294+
295+
.is-bookmarks-edit .link-control {
290296
height: var(--edit-height);
291297
}
292298

293-
.is-edit .link-item:hover .link-url,
294-
.is-edit .link-item:focus .link-url {
299+
.is-bookmarks-edit .link-item:hover .link-url,
300+
.is-bookmarks-edit .link-item:focus .link-url {
295301
height: 0;
296302
}
297303

298-
.is-edit .link-control-item {
304+
.is-bookmarks-edit .link-control-item {
299305
pointer-events: all;
300306
}
301307

302-
.is-link-block .link-panel-front {
308+
.is-bookmarks-style-block .link-panel-front {
303309
flex-direction: column;
304310
align-items: center;
305311
justify-content: center;
306312
}
307313

308-
.is-link-list .link-panel-front {
314+
.is-bookmarks-style-list .link-panel-front {
309315
flex-direction: row;
310316
align-items: center;
311317
justify-content: flex-start;

‎css/menu.css‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
right: 1em;
77
width: calc(100vw - 2em);
88
max-height: calc(80vh - 2em);
9-
overflow-y: scroll;
9+
overflow-y: auto;
1010
transform: translateY(calc(-100% - 2em));
1111
transition: transform var(--animation-speed-fast) ease-in-out;
1212
z-index: var(--z-index-menu);
@@ -43,15 +43,6 @@
4343
margin: 0;
4444
}
4545

46-
.menu-nav-item {
47-
flex-grow: 1;
48-
flex-basis: 0;
49-
}
50-
51-
.menu-nav-item:not(:last-child) {
52-
margin: 0;
53-
}
54-
5546
.menu-content {
5647
padding: 2em;
5748
}
@@ -78,7 +69,7 @@
7869
margin: 0;
7970
padding-top: 0.75em;
8071
padding-bottom: 0.75em;
81-
border-radius: 0;
72+
border-radius: 0 var(--radius) 0 0;
8273
}
8374

8475
.menu-nav-button {
@@ -87,6 +78,12 @@
8778
padding-top: 1em;
8879
padding-bottom: 1em;
8980
border-radius: 0;
81+
flex-grow: 1;
82+
flex-basis: 0;
83+
}
84+
85+
.menu-nav-button:first-child {
86+
border-radius: var(--radius) 0 0 0;
9087
}
9188

9289
.menu-nav-button [class^="icon-"],
@@ -98,6 +95,7 @@
9895

9996
@media (min-width: 550px) {
10097
.menu {
98+
overflow-y: inherit;
10199
max-height: inherit;
102100
}
103101

0 commit comments

Comments
 (0)