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@import url("https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap")
$dark: #293241
$neutral: #394d69
$light: #98c1d9ff
$lightgrey: #f8f8f8
$white: #ffffff
$special: #ee6c4dff
$yellow: #E9C46A
$tank: #839788
$sidebar-width: 100px
$icon-width: $sidebar-width / 2
$icon-shrink-factor: 1.3
$transition-duration: 0.18s
a
color: $light
a:hover
color: $tank
body
color: $dark
background-color: $white
font-weight: 350
margin: 0
padding: 0
font-family: 'Fira Sans', sans-serif
.main
margin-left: $sidebar-width
padding: 1rem
.article
color: $neutral
background-color: $lightgrey
border-radius: 0.5rem
padding: 1rem
margin: 1rem 0
.sidebar
width: $sidebar-width
height: 100vh
position: fixed
position-left: 0
background-color: $dark
.sidebar ul
list-style-type: none
display: flex
flex-direction: column
align-items: center
padding: 0
margin: 0
height: 100%
.icon
padding: 0.7rem
margin: 0.5rem 0.3rem
background-color: $neutral
height: $icon-width
border-radius: 100%
transition: $transition-duration
img
width: $icon-width
.icon:hover
background-color: $yellow
border-radius: 35%
.icon:last-child
margin-top: auto
margin-bottom: 1rem
.icon:first-child
margin-top: 1rem