Skip to content

Commit 29f14af

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

File tree

12 files changed

+496
-478
lines changed

12 files changed

+496
-478
lines changed

‎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:allvar(--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-shadowvar(--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:allvar(--animation-speed-fast) ease-in-out;
339+
transition:colorvar(--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)