Skip to content

Commit 3eb8264

Browse files
jonathanmonneyjonathanmonney
authored
Add files via upload
1 parent 9b8a8d8 commit 3eb8264

1 file changed

Lines changed: 215 additions & 0 deletions

File tree

‎css/style.css‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
:root{
3+
--base-clr: #11121a;
4+
--line-clr: #42434a;
5+
--hover-clr: #222533;
6+
--text-clr: #e6e6ef;
7+
--accent-clr: #5e63ff;
8+
--secondary-text-clr: #b0b3c1;
9+
}
10+
*{
11+
margin: 0;
12+
padding: 0;
13+
}
14+
html{
15+
font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
line-height: 1.5rem;
17+
}
18+
body{
19+
min-height: 100vh;
20+
min-height: 100dvh;
21+
background-color: var(--base-clr);
22+
color: var(--text-clr);
23+
display: grid;
24+
grid-template-columns: auto 1fr;
25+
}
26+
#sidebar{
27+
box-sizing: border-box;
28+
height: 100vh;
29+
width: 250px;
30+
padding: 5px 1em;
31+
background-color: var(--base-clr);
32+
border-right: 1px solid var(--line-clr);
33+
34+
position: sticky;
35+
top: 0;
36+
align-self: start;
37+
transition: 300ms ease-in-out;
38+
overflow: hidden;
39+
text-wrap: nowrap;
40+
}
41+
#sidebar.close{
42+
padding: 5px;
43+
width: 60px;
44+
}
45+
#sidebar ul{
46+
list-style: none;
47+
}
48+
#sidebar > ul > li:first-child{
49+
display: flex;
50+
justify-content: flex-end;
51+
margin-bottom: 16px;
52+
.logo{
53+
font-weight: 600;
54+
}
55+
}
56+
#sidebar ul li.active a{
57+
color: var(--accent-clr);
58+
59+
svg{
60+
fill: var(--accent-clr);
61+
}
62+
}
63+
64+
#sidebar a, #sidebar .dropdown-btn, #sidebar .logo{
65+
border-radius: .5em;
66+
padding: .85em;
67+
text-decoration: none;
68+
color: var(--text-clr);
69+
display: flex;
70+
align-items: center;
71+
gap: 1em;
72+
}
73+
.dropdown-btn{
74+
width: 100%;
75+
text-align: left;
76+
background: none;
77+
border: none;
78+
font: inherit;
79+
cursor: pointer;
80+
}
81+
#sidebar svg{
82+
flex-shrink: 0;
83+
fill: var(--text-clr);
84+
}
85+
#sidebar a span, #sidebar .dropdown-btn span{
86+
flex-grow: 1;
87+
}
88+
#sidebar a:hover, #sidebar .dropdown-btn:hover{
89+
background-color: var(--hover-clr);
90+
}
91+
#sidebar .sub-menu{
92+
display: grid;
93+
grid-template-rows: 0fr;
94+
transition: 300ms ease-in-out;
95+
96+
> div{
97+
overflow: hidden;
98+
}
99+
}
100+
#sidebar .sub-menu.show{
101+
grid-template-rows: 1fr;
102+
}
103+
.dropdown-btn svg{
104+
transition: 200ms ease;
105+
}
106+
.rotate svg:last-child{
107+
rotate: 180deg;
108+
}
109+
#sidebar .sub-menu a{
110+
padding-left: 2em;
111+
}
112+
#toggle-btn{
113+
margin-left: auto;
114+
padding: 1em;
115+
border: none;
116+
border-radius: .5em;
117+
background: none;
118+
cursor: pointer;
119+
120+
svg{
121+
transition: rotate 150ms ease;
122+
}
123+
}
124+
#toggle-btn:hover{
125+
background-color: var(--hover-clr);
126+
}
127+
128+
main{
129+
padding: min(30px, 7%);
130+
}
131+
main p{
132+
color: var(--secondary-text-clr);
133+
margin-top: 5px;
134+
margin-bottom: 15px;
135+
}
136+
.container{
137+
border: 1px solid var(--line-clr);
138+
border-radius: 1em;
139+
margin-bottom: 20px;
140+
padding: min(3em, 15%);
141+
142+
h2, p { margin-top: 1em }
143+
}
144+
145+
@media(max-width: 800px){
146+
body{
147+
grid-template-columns: 1fr;
148+
}
149+
main{
150+
padding: 2em 1em 60px 1em;
151+
}
152+
.container{
153+
border: none;
154+
padding: 0;
155+
}
156+
#sidebar{
157+
height: 60px;
158+
width: 100%;
159+
border-right: none;
160+
border-top: 1px solid var(--line-clr);
161+
padding: 0;
162+
position: fixed;
163+
top: unset;
164+
bottom: 0;
165+
166+
> ul{
167+
padding: 0;
168+
display: grid;
169+
grid-auto-columns: 60px;
170+
grid-auto-flow: column;
171+
align-items: center;
172+
overflow-x: scroll;
173+
}
174+
ul li{
175+
height: 100%;
176+
}
177+
ul a, ul .dropdown-btn{
178+
width: 60px;
179+
height: 60px;
180+
padding: 0;
181+
border-radius: 0;
182+
justify-content: center;
183+
}
184+
185+
ul li span, ul li:first-child, .dropdown-btn svg:last-child{
186+
display: none;
187+
}
188+
189+
ul li .sub-menu.show{
190+
position: fixed;
191+
bottom: 60px;
192+
left: 0;
193+
box-sizing: border-box;
194+
height: 60px;
195+
width: 100%;
196+
background-color: var(--hover-clr);
197+
border-top: 1px solid var(--line-clr);
198+
display: flex;
199+
justify-content: center;
200+
201+
> div{
202+
overflow-x: auto;
203+
}
204+
li{
205+
display: inline-flex;
206+
}
207+
a{
208+
box-sizing: border-box;
209+
padding: 1em;
210+
width: auto;
211+
justify-content: center;
212+
}
213+
}
214+
}
215+
}

0 commit comments

Comments
 (0)