@use "@styles/abstracts/functions" as fun; @use "@styles/abstracts/placeholders"; .meta { flex-flow: column wrap; } .list { @extend %flex-list; } .item { &:not(:last-child) { margin-right: var(--spacing-2xs); } } .link { display: flex; align-items: center; gap: var(--spacing-2xs); padding: fun.convert-px(3) var(--spacing-xs); position: relative; background: linear-gradient( to right, var(--color-primary) 50%, var(--color-bg) 50% ) 100% 0 / 210% 100%; border: fun.convert-px(2) solid var(--color-primary); border-radius: fun.convert-px(5); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) 0 var(--color-shadow-light); font-weight: 600; text-decoration: none; transition: all 0.5s ease-in-out 0s, color 0.5s ease-in-out 0s; &:hover, &:focus { background-position: 0 0; color: var(--color-fg-inverted); transition: all 0.4s ease-in-out 0s, color 0.3s ease-in-out 0.1s; } &:active { background-position: 100% 0; border-color: var(--color-primary-dark); color: var(--color-primary-dark); } } >The frontend of my personal website.Armand Philippot
summaryrefslogtreecommitdiffstats
path: root/src/utils/helpers/pages.ts
blob: 773d45414acb9c7c7b943b6acc36689e4712b2ab (plain) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85