Skip to content

Commit 5059b8d

Browse files
botanicveliousbotanicvelious
committed
Archive GSoC 2022 files
1 parent b51bc44 commit 5059b8d

File tree

1 file changed

+251
-0
lines changed

1 file changed

+251
-0
lines changed

‎2022/css/side-menu.css‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
body {
2+
color: #666;
3+
}
4+
5+
.pure-img-responsive {
6+
max-width: 100%;
7+
height: auto;
8+
}
9+
10+
/*
11+
Add transition to containers so they can push in and out.
12+
*/
13+
#layout,
14+
#menu,
15+
.menu-link {
16+
-webkit-transition: all 0.2s ease-out;
17+
-moz-transition: all 0.2s ease-out;
18+
-ms-transition: all 0.2s ease-out;
19+
-o-transition: all 0.2s ease-out;
20+
transition: all 0.2s ease-out;
21+
}
22+
23+
/*
24+
This is the parent `<div>` that contains the menu and the content area.
25+
*/
26+
#layout {
27+
position: relative;
28+
left: 0;
29+
padding-left: 0;
30+
}
31+
#layout.active #menu {
32+
left: 150px;
33+
width: 150px;
34+
}
35+
36+
#layout.active .menu-link {
37+
left: 150px;
38+
}
39+
/*
40+
The content `<div>` is where all your content goes.
41+
*/
42+
.content {
43+
margin: 0 auto;
44+
padding: 0 2em;
45+
max-width: 800px;
46+
margin-bottom: 50px;
47+
line-height: 1.6em;
48+
}
49+
50+
.header {
51+
margin: 0;
52+
color: #333;
53+
text-align: center;
54+
padding: 2.5em 2em 0;
55+
border-bottom: 1px solid #eee;
56+
}
57+
.header h1 {
58+
margin: 0.2em 0;
59+
font-size: 3em;
60+
font-weight: 300;
61+
}
62+
.header h2 {
63+
font-weight: 300;
64+
color: #ccc;
65+
padding: 0;
66+
margin-top: 0;
67+
}
68+
69+
.content-subhead {
70+
margin: 50px 0 20px 0;
71+
font-weight: 300;
72+
color: #888;
73+
}
74+
75+
76+
77+
/*
78+
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
79+
appears on the left side of the page.
80+
*/
81+
82+
#menu {
83+
margin-left: -150px; /* "#menu" width */
84+
width: 150px;
85+
position: fixed;
86+
top: 0;
87+
left: 0;
88+
bottom: 0;
89+
z-index: 1000; /* so the menu or its navicon stays above all content */
90+
background: #191818;
91+
overflow-y: auto;
92+
-webkit-overflow-scrolling: touch;
93+
}
94+
/*
95+
All anchors inside the menu should be styled like this.
96+
*/
97+
#menu a {
98+
color: #999;
99+
border: none;
100+
padding: 0.6em 0 0.6em 0.6em;
101+
}
102+
103+
/*
104+
Remove all background/borders, since we are applying them to #menu.
105+
*/
106+
#menu .pure-menu,
107+
#menu .pure-menu ul {
108+
border: none;
109+
background: transparent;
110+
}
111+
112+
/*
113+
Add that light border to separate items into groups.
114+
*/
115+
#menu .pure-menu ul,
116+
#menu .pure-menu .menu-item-divided {
117+
border-top: 1px solid #333;
118+
}
119+
/*
120+
Change color of the anchor links on hover/focus.
121+
*/
122+
#menu .pure-menu li a:hover,
123+
#menu .pure-menu li a:focus {
124+
background: #333;
125+
}
126+
127+
/*
128+
This styles the selected menu item `<li>`.
129+
*/
130+
#menu .pure-menu-selected,
131+
#menu .pure-menu-heading {
132+
background: #1f8dd6;
133+
}
134+
/*
135+
This styles a link within a selected menu item `<li>`.
136+
*/
137+
#menu .pure-menu-selected a {
138+
color: #fff;
139+
}
140+
141+
/*
142+
This styles the menu heading.
143+
*/
144+
#menu .pure-menu-heading {
145+
font-size: 110%;
146+
color: #fff;
147+
margin: 0;
148+
}
149+
150+
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
151+
152+
/*
153+
The button to open/close the Menu is custom-made and not part of Pure. Here's
154+
how it works:
155+
*/
156+
157+
/*
158+
`.menu-link` represents the responsive menu toggle that shows/hides on
159+
small screens.
160+
*/
161+
.menu-link {
162+
position: fixed;
163+
display: block; /* show this only on small screens */
164+
top: 0;
165+
left: 0; /* "#menu width" */
166+
background: #000;
167+
background: rgba(0,0,0,0.7);
168+
font-size: 10px; /* change this value to increase/decrease button size */
169+
z-index: 10;
170+
width: 2em;
171+
height: auto;
172+
padding: 2.1em 1.6em;
173+
}
174+
175+
.menu-link:hover,
176+
.menu-link:focus {
177+
background: #000;
178+
}
179+
180+
.menu-link span {
181+
position: relative;
182+
display: block;
183+
}
184+
185+
.menu-link span,
186+
.menu-link span:before,
187+
.menu-link span:after {
188+
background-color: #fff;
189+
width: 100%;
190+
height: 0.2em;
191+
}
192+
193+
.menu-link span:before,
194+
.menu-link span:after {
195+
position: absolute;
196+
margin-top: -0.6em;
197+
content: " ";
198+
}
199+
200+
.menu-link span:after {
201+
margin-top: 0.6em;
202+
}
203+
204+
205+
/* -- Responsive Styles (Media Queries) ------------------------------------- */
206+
207+
/*
208+
Hides the menu at `48em`, but modify this based on your app's needs.
209+
*/
210+
@media (min-width: 48em) {
211+
212+
.header,
213+
.content {
214+
padding-left: 2em;
215+
padding-right: 2em;
216+
}
217+
218+
#layout {
219+
padding-left: 150px; /* left col width "#menu" */
220+
left: 0;
221+
}
222+
#menu {
223+
left: 150px;
224+
}
225+
226+
.menu-link {
227+
position: fixed;
228+
left: 150px;
229+
display: none;
230+
}
231+
232+
#layout.active .menu-link {
233+
left: 150px;
234+
}
235+
}
236+
237+
@media (max-width: 48em) {
238+
/* Only apply this when the window is small. Otherwise, the following
239+
case results in extra padding on the left:
240+
* Make the window small.
241+
* Tap the menu to trigger the active state.
242+
* Make the window large again.
243+
*/
244+
#layout.active {
245+
position: relative;
246+
left: 150px;
247+
}
248+
.menu-link.active{
249+
left:150px;
250+
}
251+
}

0 commit comments

Comments
 (0)