Skip to content

Commit 0774765

Browse files
travisneilsontravisneilson
committed
Initial Push
1 parent 836241c commit 0774765

6 files changed

+457
-0
lines changed

‎css/sidebar-style-bonus.css

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
html, body {
2+
margin: 0;
3+
padding: 0; }
4+
5+
.unit {
6+
height: 100px;
7+
width: 30%;
8+
margin: 1.5%;
9+
background: #cccccc;
10+
float: left; }
11+
12+
.page-content {
13+
position: relative;
14+
z-index: 1;
15+
-webkit-transition: all 0.15s ease-out 0;
16+
-moz-transition: all 0.15s ease-out 0;
17+
transition: all 0.15s ease-out 0;
18+
-webkit-transform: scale(1);
19+
-moz-transform: scale(1);
20+
-ms-transform: scale(1);
21+
-o-transform: scale(1);
22+
transform: scale(1);
23+
-webkit-transform-origin: right center;
24+
-moz-transform-origin: right center;
25+
-ms-transform-origin: right center;
26+
-o-transform-origin: right center;
27+
transform-origin: right center;
28+
height: 100%;
29+
overflow: scroll;
30+
background: #eeeeee; }
31+
32+
.toggle {
33+
text-decoration: none;
34+
font-size: 30px;
35+
color: black;
36+
-webkit-transition: all 0.15s ease-out 0;
37+
-moz-transition: all 0.15s ease-out 0;
38+
transition: all 0.15s ease-out 0;
39+
position: fixed;
40+
top: 20px;
41+
left: 20px;
42+
z-index: 2;
43+
cursor: pointer; }
44+
45+
.sidebar {
46+
position: fixed;
47+
top: 0px;
48+
bottom: 0px;
49+
left: 0px;
50+
width: 120px;
51+
padding: 30px;
52+
background: #333333;
53+
z-index: 0; }
54+
.sidebar ul {
55+
list-style: none;
56+
margin: 0;
57+
padding: 0; }
58+
.sidebar li {
59+
color: rgba(255, 255, 255, 0.8);
60+
font-family: "Ubuntu", sans-serif;
61+
font-size: 16px;
62+
margin: 0;
63+
margin-bottom: 16px;
64+
-webkit-font-smoothing: antialiased;
65+
cursor: pointer; }
66+
.sidebar li:hover {
67+
color: white; }
68+
69+
#sidebartoggler {
70+
display: none; }
71+
#sidebartoggler:checked + .page-wrap .toggle {
72+
left: 200px; }
73+
#sidebartoggler:checked + .page-wrap .page-content {
74+
-webkit-transform: scale(0.7);
75+
-moz-transform: scale(0.7);
76+
-ms-transform: scale(0.7);
77+
-o-transform: scale(0.7);
78+
transform: scale(0.7);
79+
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); }

‎css/sidebar-style-bonus.sass

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@import 'bourbon'
2+
3+
html, body
4+
margin: 0
5+
padding: 0
6+
7+
.unit
8+
height: 100px
9+
width: 30%
10+
margin: 1.5%
11+
background: #ccc
12+
float: left
13+
14+
.page-content
15+
position: relative
16+
z-index: 1
17+
+transition()
18+
+transform(scale(1))
19+
+transform-origin(right center)
20+
height: 100%
21+
overflow: scroll
22+
background: #eee
23+
24+
.toggle
25+
text-decoration: none
26+
font-size: 30px
27+
color: black
28+
+transition()
29+
+position(fixed, 20px 0 0 20px)
30+
z-index: 2
31+
cursor: pointer
32+
33+
34+
.sidebar
35+
+position(fixed, 0px 0 0px 0px)
36+
width: 120px
37+
padding: 30px
38+
background: #333
39+
z-index: 0
40+
41+
ul
42+
list-style: none
43+
margin: 0
44+
padding: 0
45+
46+
li
47+
color: rgba(255,255,255,0.8)
48+
font-family: "Ubuntu", sans-serif
49+
font-size: 16px
50+
margin: 0
51+
margin-bottom: 16px
52+
-webkit-font-smoothing: antialiased
53+
cursor: pointer
54+
55+
&:hover
56+
color: rgba(255,255,255,1)
57+
58+
#sidebartoggler
59+
display: none
60+
61+
&:checked + .page-wrap
62+
63+
.toggle
64+
left: 200px
65+
66+
.page-content
67+
+transform(scale(0.7))
68+
box-shadow: 0px 4px 20px rgba(0,0,0,0.2)

‎css/sidebar-style.css

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
html, body {
2+
margin: 0;
3+
padding: 0; }
4+
5+
.unit {
6+
height: 100px;
7+
width: 30%;
8+
margin: 1.5%;
9+
background: #cccccc;
10+
float: left; }
11+
12+
.page-content {
13+
position: relative;
14+
z-index: 0;
15+
-webkit-transition: all 0.15s ease-out 0;
16+
-moz-transition: all 0.15s ease-out 0;
17+
transition: all 0.15s ease-out 0;
18+
background: #eeeeee; }
19+
20+
.toggle {
21+
text-decoration: none;
22+
font-size: 30px;
23+
color: black;
24+
-webkit-transition: all 0.15s ease-out 0;
25+
-moz-transition: all 0.15s ease-out 0;
26+
transition: all 0.15s ease-out 0;
27+
position: fixed;
28+
top: 20px;
29+
left: 20px;
30+
z-index: 1;
31+
cursor: pointer; }
32+
33+
.sidebar {
34+
position: fixed;
35+
top: 0px;
36+
bottom: 0px;
37+
left: -190px;
38+
-webkit-transition: all 0.15s ease-out 0;
39+
-moz-transition: all 0.15s ease-out 0;
40+
transition: all 0.15s ease-out 0;
41+
width: 120px;
42+
padding: 30px;
43+
background: #333333;
44+
z-index: 0; }
45+
.sidebar ul {
46+
list-style: none;
47+
margin: 0;
48+
padding: 0; }
49+
.sidebar li {
50+
color: rgba(255, 255, 255, 0.8);
51+
font-family: "Ubuntu", sans-serif;
52+
font-size: 16px;
53+
margin: 0;
54+
margin-bottom: 16px;
55+
-webkit-font-smoothing: antialiased;
56+
cursor: pointer; }
57+
.sidebar li:hover {
58+
color: white; }
59+
60+
#sidebartoggler {
61+
display: none; }
62+
#sidebartoggler:checked + .page-wrap .sidebar {
63+
left: 0px; }
64+
#sidebartoggler:checked + .page-wrap .toggle {
65+
left: 200px; }
66+
#sidebartoggler:checked + .page-wrap .page-content {
67+
padding-left: 180px; }

‎css/sidebar-style.sass

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@import 'bourbon'
2+
3+
html, body
4+
margin: 0
5+
padding: 0
6+
7+
.unit
8+
height: 100px
9+
width: 30%
10+
margin: 1.5%
11+
background: #ccc
12+
float: left
13+
14+
.page-content
15+
position: relative
16+
z-index: 0
17+
+transition()
18+
background: #eee
19+
20+
.toggle
21+
text-decoration: none
22+
font-size: 30px
23+
color: black
24+
+transition()
25+
+position(fixed, 20px 0 0 20px)
26+
z-index: 1
27+
cursor: pointer
28+
29+
30+
.sidebar
31+
+position(fixed, 0px 0 0px -190px)
32+
+transition()
33+
width: 120px
34+
padding: 30px
35+
background: #333
36+
z-index: 0
37+
38+
ul
39+
list-style: none
40+
margin: 0
41+
padding: 0
42+
43+
li
44+
color: rgba(255,255,255,0.8)
45+
font-family: "Ubuntu", sans-serif
46+
font-size: 16px
47+
margin: 0
48+
margin-bottom: 16px
49+
-webkit-font-smoothing: antialiased
50+
cursor: pointer
51+
52+
&:hover
53+
color: rgba(255,255,255,1)
54+
55+
#sidebartoggler
56+
display: none
57+
58+
&:checked + .page-wrap
59+
60+
.sidebar
61+
left: 0px
62+
63+
.toggle
64+
left: 200px
65+
66+
.page-content
67+
padding-left: 180px

‎sidebar-markup-bonus.html

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width">
6+
7+
<title>Let's make a sidebar!!</title>
8+
9+
<link rel="stylesheet" href="css/sidebar-style-bonus.css" />
10+
11+
</head>
12+
13+
<body>
14+
15+
16+
<input type="checkbox" id="sidebartoggler" name="" value="">
17+
18+
<div class="page-wrap">
19+
20+
<label for="sidebartoggler" class="toggle">☰</label>
21+
22+
<div class="page-content">
23+
24+
<div class="unit"></div>
25+
<div class="unit"></div>
26+
<div class="unit"></div>
27+
28+
<div class="unit"></div>
29+
<div class="unit"></div>
30+
<div class="unit"></div>
31+
32+
<div class="unit"></div>
33+
<div class="unit"></div>
34+
<div class="unit"></div>
35+
36+
<div class="unit"></div>
37+
<div class="unit"></div>
38+
<div class="unit"></div>
39+
40+
<div class="unit"></div>
41+
<div class="unit"></div>
42+
<div class="unit"></div>
43+
44+
<div class="unit"></div>
45+
<div class="unit"></div>
46+
<div class="unit"></div>
47+
48+
<div class="unit"></div>
49+
<div class="unit"></div>
50+
<div class="unit"></div>
51+
52+
<div class="unit"></div>
53+
<div class="unit"></div>
54+
<div class="unit"></div>
55+
56+
<div class="unit"></div>
57+
<div class="unit"></div>
58+
<div class="unit"></div>
59+
60+
<div class="unit"></div>
61+
<div class="unit"></div>
62+
<div class="unit"></div>
63+
64+
<div class="unit"></div>
65+
<div class="unit"></div>
66+
<div class="unit"></div>
67+
68+
<div class="unit"></div>
69+
<div class="unit"></div>
70+
<div class="unit"></div>
71+
72+
</div>
73+
74+
<div class="sidebar">
75+
<ul>
76+
<li>Home</li>
77+
<li>Projects</li>
78+
<li>Clients</li>
79+
<li>Blog</li>
80+
<li>Contact</li>
81+
</ul>
82+
</div>
83+
84+
</div>
85+
86+
87+
</body>
88+
</html>

0 commit comments

Comments
 (0)