Skip to content

Commit 07483c7

Browse files
zombieFoxzombieFox
committed
[feature] adding link letter and icon size and position
1 parent f619ea7 commit 07483c7

File tree

8 files changed

+358
-109
lines changed

8 files changed

+358
-109
lines changed

‎css/base.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,8 @@
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;
8385
--background-image: none;
8486
--background-opacity:1;
8587
--background-accent-opacity:0;

‎css/link.css‎

Lines changed: 118 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,15 @@
4444
flex-wrap: wrap;
4545
}
4646

47-
.is-link-items-alignment-horizontal-left .link-area{
47+
.is-bookmarks-fit-custom.is-link-items-alignment-horizontal-left .link-area{
4848
justify-content: flex-start;
4949
}
5050

51-
.is-link-items-alignment-horizontal-center .link-area{
51+
.is-bookmarks-fit-custom.is-link-items-alignment-horizontal-center .link-area{
5252
justify-content: center;
5353
}
5454

55-
.is-link-items-alignment-horizontal-right .link-area{
55+
.is-bookmarks-fit-custom.is-link-items-alignment-horizontal-right .link-area{
5656
justify-content: flex-end;
5757
}
5858

@@ -61,18 +61,6 @@
6161
padding-top:calc(var(--gutter) *4);
6262
}
6363

64-
.is-link-alignment-horizontal-left .link-area{
65-
justify-content: flex-start;
66-
}
67-
68-
.is-link-alignment-horizontal-center .link-area{
69-
justify-content: center;
70-
}
71-
72-
.is-link-alignment-horizontal-right .link-area{
73-
justify-content: flex-end;
74-
}
75-
7664
.is-bookmarks-fit-best.is-bookmarks-style-block .link-area{
7765
grid-template-columns:repeat(auto-fill,minmax(11em,1fr));
7866
}
@@ -90,16 +78,6 @@
9078
direction: ltr;
9179
}
9280

93-
.is-bookmarks-fit-best .link-item{
94-
height:var(--link-items-height);
95-
}
96-
97-
.is-bookmarks-fit-custom .link-item{
98-
height:var(--link-items-height);
99-
width:var(--link-items-width);
100-
margin:var(--gutter);
101-
}
102-
10381
.link-item:focus-within,
10482
.link-item:focus,
10583
.link-item:hover{
@@ -111,31 +89,29 @@
11189
transition: none;
11290
}
11391

92+
.is-bookmarks-fit-best .link-item{
93+
height:var(--link-items-height);
94+
}
95+
96+
.is-bookmarks-fit-custom .link-item{
97+
height:var(--link-items-height);
98+
width:var(--link-items-width);
99+
margin:var(--gutter);
100+
}
101+
114102
.link-panel-front{
115103
background-color:rgb(var(--gray-02));
116104
border-radius:var(--radius);
117-
padding:01em;
118105
width:100%;
119106
height:calc(100%-var(--line-width));
120107
display: flex;
121108
z-index:3;
109+
overflow: hidden;
122110
position: relative;
123111
user-select: none;
124112
transition: all var(--animation-speed-fast) ease-in-out;
125113
}
126114

127-
.is-bookmarks-style-block .link-panel-front{
128-
flex-direction: column;
129-
align-items: center;
130-
justify-content: center;
131-
}
132-
133-
.is-bookmarks-style-list .link-panel-front{
134-
flex-direction: row;
135-
align-items: center;
136-
justify-content: flex-start;
137-
}
138-
139115
.link-panel-front:hover,
140116
.link-panel-front:focus{
141117
background-color:rgb(var(--gray-03));
@@ -152,6 +128,64 @@
152128
box-shadow:02px4px0rgba(0,0,0,0.4);
153129
}
154130

131+
.is-bookmarks-style-block .link-panel-front{
132+
padding:1em;
133+
flex-direction: column;
134+
}
135+
136+
.is-bookmarks-style-block.is-link-display-alignment-horizontal-left .link-panel-front{
137+
align-items: flex-start;
138+
}
139+
140+
.is-bookmarks-style-block.is-link-display-alignment-horizontal-center .link-panel-front{
141+
align-items: center;
142+
}
143+
144+
.is-bookmarks-style-block.is-link-display-alignment-horizontal-right .link-panel-front{
145+
align-items: flex-end;
146+
}
147+
148+
.is-bookmarks-style-block.is-link-display-alignment-vertical-top .link-panel-front{
149+
justify-content: flex-start;
150+
}
151+
152+
.is-bookmarks-style-block.is-link-display-alignment-vertical-center .link-panel-front{
153+
justify-content: center;
154+
}
155+
156+
.is-bookmarks-style-block.is-link-display-alignment-vertical-bottom .link-panel-front{
157+
justify-content: flex-end;
158+
}
159+
160+
.is-bookmarks-style-list .link-panel-front{
161+
padding:0.5em1em;
162+
flex-direction: row;
163+
}
164+
165+
.is-bookmarks-style-list.is-link-display-alignment-horizontal-left .link-panel-front{
166+
justify-content: flex-start;
167+
}
168+
169+
.is-bookmarks-style-list.is-link-display-alignment-horizontal-center .link-panel-front{
170+
justify-content: center;
171+
}
172+
173+
.is-bookmarks-style-list.is-link-display-alignment-horizontal-right .link-panel-front{
174+
justify-content: flex-end;
175+
}
176+
177+
.is-bookmarks-style-list.is-link-display-alignment-vertical-top .link-panel-front{
178+
align-items: flex-start;
179+
}
180+
181+
.is-bookmarks-style-list.is-link-display-alignment-vertical-center .link-panel-front{
182+
align-items: center;
183+
}
184+
185+
.is-bookmarks-style-list.is-link-display-alignment-vertical-bottom .link-panel-front{
186+
align-items: flex-end;
187+
}
188+
155189
.is-bookmarks-show-url .link-item:focus .link-panel-front,
156190
.is-bookmarks-show-url .link-item:focus-within .link-panel-front,
157191
.is-bookmarks-show-url .link-item:hover .link-panel-front{
@@ -240,12 +274,16 @@
240274
display: flex;
241275
}
242276

243-
.is-bookmarks-style-block .link-url{
277+
.is-link-display-alignment-horizontal-left .link-url{
278+
justify-content: flex-start;
279+
}
280+
281+
.is-link-display-alignment-horizontal-center .link-url{
244282
justify-content: center;
245283
}
246284

247-
.is-bookmarks-style-list .link-url{
248-
justify-content: flex-start;
285+
.is-link-display-alignment-horizontal-right .link-url{
286+
justify-content: flex-end;
249287
}
250288

251289
.link-item:focus-within .link-url,
@@ -271,12 +309,26 @@
271309
color:rgb(var(--white));
272310
}
273311

312+
.link-display{
313+
font-size:1rem;
314+
display: none;
315+
}
316+
317+
.is-bookmarks-show-display .link-display{
318+
display: block;
319+
}
320+
321+
.link-display-letter,
322+
.link-display-icon{
323+
margin:0;
324+
text-align: center;
325+
}
326+
274327
.link-display-letter{
275328
font-family:var(--font-fjalla);
276329
color:rgb(var(--accent));
330+
line-height:1;
277331
white-space: nowrap;
278-
overflow: hidden;
279-
text-overflow: ellipsis;
280332
transition: color var(--animation-speed-fast) ease-in-out;
281333
}
282334

@@ -285,37 +337,21 @@
285337
transition: color var(--animation-speed-fast) ease-in-out;
286338
}
287339

288-
.link-display-letter,
289-
.link-display-icon{
290-
margin:0;
291-
}
292-
293-
.is-bookmarks-style-block .link-display-letter{
294-
font-size:2em;
295-
text-align: center;
296-
max-width:100%;
340+
.is-bookmarks-style-block .link-display-letter,
341+
.is-bookmarks-style-list .link-display-letter{
342+
font-size:var(--link-display-letter-size);
297343
}
298344

299-
.is-bookmarks-style-block .link-display-icon{
300-
font-size:2.5em;
301-
text-align: center;
302-
max-width:100%;
303-
}
304-
305-
.is-bookmarks-style-list .link-display-letter,
345+
.is-bookmarks-style-block .link-display-icon,
306346
.is-bookmarks-style-list .link-display-icon{
307-
font-size:1.5em;
308-
flex-shrink:0;
309-
max-width:50%;
347+
font-size:var(--link-display-icon-size);
310348
}
311349

312-
.is-bookmarks-show-name.is-bookmarks-style-block .link-display-letter,
313-
.is-bookmarks-show-name.is-bookmarks-style-block .link-display-icon{
314-
margin-bottom:0.25em;
350+
.is-bookmarks-style-block.is-bookmarks-show-name.is-bookmarks-show-display .link-panel-front>*:not(:only-child):not(:last-child){
351+
margin-bottom:0.5em;
315352
}
316353

317-
.is-bookmarks-show-name.is-bookmarks-style-list .link-display-letter,
318-
.is-bookmarks-show-name.is-bookmarks-style-list .link-display-icon{
354+
.is-bookmarks-style-list.is-bookmarks-show-name.is-bookmarks-show-display .link-panel-front>*:not(:only-child):not(:last-child){
319355
margin-right:0.5em
320356
}
321357

@@ -336,14 +372,23 @@
336372
font-size:0.9em;
337373
font-family:var(--font-regular);
338374
color:rgb(var(--gray-12));
339-
white-space: nowrap;
340-
overflow: hidden;
341-
max-width:100%;
342-
text-overflow: ellipsis;
343375
display: none;
376+
text-align: center;
344377
transition: all var(--animation-speed-fast) ease-in-out;
345378
}
346379

380+
.is-link-display-alignment-horizontal-left .link-name{
381+
text-align: left;
382+
}
383+
384+
.is-link-display-alignment-horizontal-center .link-name{
385+
text-align: center;
386+
}
387+
388+
.is-link-display-alignment-horizontal-right .link-name{
389+
text-align: right;
390+
}
391+
347392
.is-bookmarks-show-name .link-name{
348393
display: block;
349394
}
@@ -374,8 +419,8 @@
374419
margin:1em;
375420
}
376421

377-
.is-bookmarks-style-block .link-name{
378-
text-align: center;
422+
.is-bookmarks-style-list .link-name{
423+
white-space: nowrap;
379424
}
380425

381426
.is-bookmarks-edit .link-panel-front,
@@ -404,18 +449,6 @@
404449
pointer-events: all;
405450
}
406451

407-
.is-bookmarks-style-block .link-panel-front{
408-
flex-direction: column;
409-
align-items: center;
410-
justify-content: center;
411-
}
412-
413-
.is-bookmarks-style-list .link-panel-front{
414-
flex-direction: row;
415-
align-items: center;
416-
justify-content: flex-start;
417-
}
418-
419452
.link-form-text-icon{
420453
position: relative;
421454
}

0 commit comments

Comments
(0)