Skip to content

Commit 29f14af

Browse files
zombieFoxzombieFox
authored
[feature] improve link size controls
1 parent b2a5e84 commit 29f14af

12 files changed

Lines changed: 496 additions & 478 deletions

File tree

‎css/base.css‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
--radius: 0.2em;
5050
--line-width: 0.2em;
5151
--background: rgb(var(--gray-01));
52-
--gutter: 0.5em;
52+
--gutter: 0.5rem;
5353
--animation-speed-fast: 0.2s;
5454
--animation-speed-medium: 0.4s;
5555
--animation-speed-slow: 0.6s;
@@ -80,8 +80,11 @@
8080
--header-border-width-multiplier-top: 1;
8181
--header-border-width-multiplier-bottom: 1;
8282
--link-area-width: 100%;
83-
--link-display-letter-size: 2em;
84-
--link-display-icon-size: 2.5em;
83+
--link-area-gutter-multiplier: 2;
84+
--link-item-size: 1em;
85+
--link-item-display-letter-size: 2em;
86+
--link-item-display-icon-size: 2.5em;
87+
--link-item-name-size: 0.9em;
8588
--background-image: none;
8689
--background-opacity: 1;
8790
--background-accent-opacity: 0;
@@ -104,15 +107,15 @@
104107
}
105108

106109
:root.is-link-style-block {
107-
--link-items-width: 20%;
108-
--link-items-height: 10em;
110+
--link-item-width: 11em;
111+
--link-item-height: 10em;
109112
--url-height: 20%;
110113
--edit-height: 30%;
111114
}
112115

113116
:root.is-link-style-list {
114-
--link-items-width: 20%;
115-
--link-items-height: 4em;
117+
--link-item-width: 20em;
118+
--link-item-height: 4em;
116119
--url-height: 30%;
117120
--edit-height: 50%;
118121
}

‎css/clock.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313
flex-wrap: wrap;
1414
}
1515

16-
.is-header-items-alignment-horizontal-left .clock {
16+
.is-header-item-alignment-horizontal-left .clock {
1717
justify-content: flex-start;
1818
}
1919

20-
.is-header-items-alignment-horizontal-center .clock {
20+
.is-header-item-alignment-horizontal-center .clock {
2121
justify-content: center;
2222
}
2323

24-
.is-header-items-alignment-horizontal-right .clock {
24+
.is-header-item-alignment-horizontal-right .clock {
2525
justify-content: flex-end;
2626
}
2727

@@ -50,17 +50,17 @@
5050
min-width: 1.25em;
5151
}
5252

53-
.is-header-items-alignment-horizontal-left .clock-item:not(:last-child) {
53+
.is-header-item-alignment-horizontal-left .clock-item:not(:last-child) {
5454
margin-right: 0.2em;
5555
}
5656

57-
.is-header-items-alignment-horizontal-center .clock-item:not(:first-child),
58-
.is-header-items-alignment-horizontal-center .clock-item:not(:last-child) {
57+
.is-header-item-alignment-horizontal-center .clock-item:not(:first-child),
58+
.is-header-item-alignment-horizontal-center .clock-item:not(:last-child) {
5959
margin-left: 0.1em;
6060
margin-right: 0.1em;
6161
}
6262

63-
.is-header-items-alignment-horizontal-right .clock-item:not(:first-child) {
63+
.is-header-item-alignment-horizontal-right .clock-item:not(:first-child) {
6464
margin-left: 0.2em;
6565
}
6666

‎css/date.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313
flex-wrap: wrap;
1414
}
1515

16-
.is-header-items-alignment-horizontal-left .date {
16+
.is-header-item-alignment-horizontal-left .date {
1717
justify-content: flex-start;
1818
}
1919

20-
.is-header-items-alignment-horizontal-center .date {
20+
.is-header-item-alignment-horizontal-center .date {
2121
justify-content: center;
2222
}
2323

24-
.is-header-items-alignment-horizontal-right .date {
24+
.is-header-item-alignment-horizontal-right .date {
2525
justify-content: flex-end;
2626
}
2727

@@ -49,17 +49,17 @@
4949
justify-content: center;
5050
}
5151

52-
.is-header-items-alignment-horizontal-left .date-item:not(:last-child) {
52+
.is-header-item-alignment-horizontal-left .date-item:not(:last-child) {
5353
margin-right: 0.2em;
5454
}
5555

56-
.is-header-items-alignment-horizontal-center .date-item:not(:first-child),
57-
.is-header-items-alignment-horizontal-center .date-item:not(:last-child) {
56+
.is-header-item-alignment-horizontal-center .date-item:not(:first-child),
57+
.is-header-item-alignment-horizontal-center .date-item:not(:last-child) {
5858
margin-left: 0.1em;
5959
margin-right: 0.1em;
6060
}
6161

62-
.is-header-items-alignment-horizontal-right .date-item:not(:first-child) {
62+
.is-header-item-alignment-horizontal-right .date-item:not(:first-child) {
6363
margin-left: 0.2em;
6464
}
6565

‎css/header.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,15 @@
6666
align-items: stretch;
6767
}
6868

69-
.is-header-items-alignment-horizontal-left .header-area {
69+
.is-header-item-alignment-horizontal-left .header-area {
7070
justify-content: flex-start;
7171
}
7272

73-
.is-header-items-alignment-horizontal-center .header-area {
73+
.is-header-item-alignment-horizontal-center .header-area {
7474
justify-content: center;
7575
}
7676

77-
.is-header-items-alignment-horizontal-right .header-area {
77+
.is-header-item-alignment-horizontal-right .header-area {
7878
justify-content: flex-end;
7979
}
8080

‎css/link.css‎

Lines changed: 15 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -25,80 +25,42 @@
2525
padding-bottom: calc(var(--gutter) * 4);
2626
padding-left: calc(var(--gutter) * 4);
2727
padding-right: calc(var(--gutter) * 4);
28+
font-size: calc(var(--link-item-size) * 1);
2829
position: relative;
2930
width: var(--link-area-width);
30-
}
31-
32-
.is-link-fit-best .link-area {
3331
display: grid;
3432
grid-auto-rows: 1fr;
35-
grid-gap: calc(var(--gutter) * 2);
36-
}
37-
38-
.is-link-fit-custom .link-area {
39-
margin-top: calc(var(--gutter) * -1);
40-
padding-bottom: calc(var(--gutter) * 3);
41-
padding-left: calc(var(--gutter) * 3);
42-
padding-right: calc(var(--gutter) * 3);
43-
display: flex;
44-
flex-wrap: wrap;
45-
}
46-
47-
.is-link-fit-custom.is-link-items-alignment-horizontal-left .link-area {
48-
justify-content: flex-start;
49-
}
50-
51-
.is-link-fit-custom.is-link-items-alignment-horizontal-center .link-area {
52-
justify-content: center;
53-
}
54-
55-
.is-link-fit-custom.is-link-items-alignment-horizontal-right .link-area {
56-
justify-content: flex-end;
33+
grid-gap: calc(var(--gutter) * var(--link-area-gutter-multiplier));
34+
grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
5735
}
5836

5937
.is-header-border-bottom-show .link-area,
6038
.is-header-shade-style-always .link-area {
6139
padding-top: calc(var(--gutter) * 4);
6240
}
6341

64-
.is-link-fit-best.is-link-style-block .link-area {
65-
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
66-
}
67-
68-
.is-link-fit-best.is-link-style-list .link-area {
69-
grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
70-
}
71-
7242
.link-item {
7343
font-size: 1em;
7444
position: relative;
45+
height: var(--link-item-height);
7546
display: block;
7647
transform: scale(1);
7748
transition: transform var(--animation-speed-fast) ease-in-out;
78-
direction: ltr;
49+
z-index: 1;
7950
}
8051

8152
.link-item:focus-within,
8253
.link-item:focus,
8354
.link-item:hover {
8455
transform: scale(1.06);
56+
z-index: 2;
8557
}
8658

8759
.link-item:active {
8860
transform: scale(1.04);
8961
transition: none;
9062
}
9163

92-
.is-link-fit-best .link-item {
93-
height: var(--link-items-height);
94-
}
95-
96-
.is-link-fit-custom .link-item {
97-
height: var(--link-items-height);
98-
width: var(--link-items-width);
99-
margin: var(--gutter);
100-
}
101-
10264
.link-panel-front {
10365
background-color: rgb(var(--gray-02));
10466
border-radius: var(--radius);
@@ -109,7 +71,7 @@
10971
overflow: hidden;
11072
position: relative;
11173
user-select: none;
112-
transition: all var(--animation-speed-fast) ease-in-out;
74+
transition: background-color var(--animation-speed-fast) ease-in-out, height var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
11375
}
11476

11577
.link-panel-front:hover,
@@ -310,7 +272,7 @@
310272
}
311273

312274
.link-display {
313-
font-size: 1rem;
275+
font-size: 1em;
314276
display: none;
315277
}
316278

@@ -339,12 +301,12 @@
339301

340302
.is-link-style-block .link-display-letter,
341303
.is-link-style-list .link-display-letter {
342-
font-size: var(--link-display-letter-size);
304+
font-size: var(--link-item-display-letter-size);
343305
}
344306

345307
.is-link-style-block .link-display-icon,
346308
.is-link-style-list .link-display-icon {
347-
font-size: var(--link-display-icon-size);
309+
font-size: var(--link-item-display-icon-size);
348310
}
349311

350312
.is-link-style-block.is-link-name-show.is-link-display-show .link-panel-front>*:not(:only-child):not(:last-child) {
@@ -369,12 +331,12 @@
369331

370332
.link-name {
371333
margin: 0;
372-
font-size: 0.9em;
334+
font-size: var(--link-item-name-size);
373335
font-family: var(--font-regular);
374336
color: rgb(var(--gray-12));
375337
display: none;
376338
text-align: center;
377-
transition: all var(--animation-speed-fast) ease-in-out;
339+
transition: color var(--animation-speed-fast) ease-in-out;
378340
}
379341

380342
.is-link-display-alignment-horizontal-left .link-name {
@@ -403,20 +365,14 @@
403365
}
404366

405367
.link-empty {
368+
grid-column-start: 1;
369+
grid-column-end: -1;
406370
text-align: center;
407371
}
408372

409373
.link-empty-heading {
410374
color: rgb(var(--gray-16));
411-
}
412-
413-
.is-link-fit-best .link-empty {
414-
grid-column-start: 1;
415-
grid-column-end: -1;
416-
}
417-
418-
.is-link-fit-custom .link-empty {
419-
margin: 1em;
375+
font-size: 1.5rem;
420376
}
421377

422378
.is-link-style-list .link-name {

0 commit comments

Comments
 (0)