Skip to content

Commit 7ed5b06

Browse files
devonoeldevonoel
committed
Updated styles
1 parent b17122b commit 7ed5b06

5 files changed

Lines changed: 125 additions & 169 deletions

File tree

‎_layouts/default.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,20 @@
1010
</head>
1111

1212
<body>
13-
<header>
14-
<h1 class="title">{{ site.name }}</h1>
15-
<h2>Maker of Things</h2>
16-
</header>
13+
<div id="container">
14+
<header>
15+
<h1 class="title">{{ site.name }}</h1>
16+
<h2>Maker of Things</h2>
17+
</header>
1718

18-
{{ content }}
19+
{{ content }}
1920

20-
<footer>
21-
<a href="https://github.com/DevoNoel" target="_blank"><i class="fa fa-github"></i></a>
22-
<a href="http://codepen.io/DevoNoel/" target="_blank"><i class="fa fa-codepen"></i></a>
23-
<a href="https://twitter.com/NoelDevo" target="_blank"><i class="fa fa-twitter"></i></a>
24-
<a href="mailto:devon.noeldetilly@gmail.com"><i class="fa fa-envelope"></i></a>
25-
</footer>
21+
<footer>
22+
<a href="https://github.com/DevoNoel" target="_blank"><i class="fa fa-github"></i></a>
23+
<a href="http://codepen.io/DevoNoel/" target="_blank"><i class="fa fa-codepen"></i></a>
24+
<a href="https://twitter.com/NoelDevo" target="_blank"><i class="fa fa-twitter"></i></a>
25+
<a href="mailto:devon.noeldetilly@gmail.com"><i class="fa fa-envelope"></i></a>
26+
</footer>
27+
<div>
2628
</body>
2729
</html>

‎_site/css/main.css‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,19 @@ html {
99
min-height: 100%; }
1010

1111
body {
12-
margin: 0 0 100px 100px;
13-
max-width: 1200px;
14-
min-width: 800px;
15-
padding: 10px;
16-
background-color: #e05221;
17-
color: #3d210c;
12+
background-color: #2e3140;
13+
color: #ffc37a;
1814
font-family: "Open Sans", "sans-serif";
1915
-webkit-box-sizing: border-box;
2016
-moz-box-sizing: border-box;
2117
box-sizing: border-box; }
2218

19+
#container {
20+
max-width: 1200px;
21+
min-width: 800px;
22+
margin: 0 auto 100px auto;
23+
padding: 0 20px; }
24+
2325
header {
2426
padding-top: 50px; }
2527

@@ -30,15 +32,15 @@ footer {
3032
width: 230px;
3133
font-size: 40px; }
3234
footer a {
33-
color: #3d210c;
35+
color: #ffc37a;
3436
padding-right: 10px; }
3537

3638
a {
37-
color: #5f442e;
39+
color: #ffffd3;
3840
text-decoration: none; }
3941

4042
a:hover {
41-
color: #dddddd;
43+
color: #ffffba;
4244
text-decoration: none; }
4345

4446
h1, h2 {

‎_site/index.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,25 @@
1010
</head>
1111

1212
<body>
13-
<header>
14-
<h1 class="title">DevoNoel</h1>
15-
<h2>Maker of Things</h2>
16-
</header>
13+
<div id="container">
14+
<header>
15+
<h1 class="title">DevoNoel</h1>
16+
<h2>Maker of Things</h2>
17+
</header>
1718

18-
<div id="index">
19+
<div id="index">
1920
<h3>QA Engineer at <a href="http://500px.com/">500px</a>.</h3>
2021
<h3>Developer and mercenary for hire.</h3>
2122
<h3>Wiener dog enthusiast.</h3>
2223
</div>
2324

2425

25-
<footer>
26-
<a href="https://github.com/DevoNoel" target="_blank"><i class="fa fa-github"></i></a>
27-
<a href="http://codepen.io/DevoNoel/" target="_blank"><i class="fa fa-codepen"></i></a>
28-
<a href="https://twitter.com/NoelDevo" target="_blank"><i class="fa fa-twitter"></i></a>
29-
<a href="mailto:devon.noeldetilly@gmail.com"><i class="fa fa-envelope"></i></a>
30-
</footer>
26+
<footer>
27+
<a href="https://github.com/DevoNoel" target="_blank"><i class="fa fa-github"></i></a>
28+
<a href="http://codepen.io/DevoNoel/" target="_blank"><i class="fa fa-codepen"></i></a>
29+
<a href="https://twitter.com/NoelDevo" target="_blank"><i class="fa fa-twitter"></i></a>
30+
<a href="mailto:devon.noeldetilly@gmail.com"><i class="fa fa-envelope"></i></a>
31+
</footer>
32+
<div>
3133
</body>
3234
</html>

‎css/main.css‎

Lines changed: 73 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,73 @@
1-
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700,900);
2-
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
3-
* {
4-
margin: 0;
5-
padding: 0; }
6-
7-
html {
8-
position: relative;
9-
min-height: 100%; }
10-
11-
body {
12-
margin: 0 0 100px 100px;
13-
max-width: 1200px;
14-
min-width: 800px;
15-
padding: 10px;
16-
background-color: #e05221;
17-
color: #3d210c;
18-
font-family: "Open Sans", "sans-serif";
19-
-webkit-box-sizing: border-box;
20-
-moz-box-sizing: border-box;
21-
box-sizing: border-box; }
22-
23-
header {
24-
padding-top: 50px; }
25-
26-
footer {
27-
position: absolute;
28-
bottom: 0;
29-
height: 100px;
30-
width: 230px;
31-
font-size: 40px; }
32-
footer a {
33-
color: #3d210c;
34-
padding-right: 10px; }
35-
36-
a {
37-
color: #5f442e;
38-
text-decoration: none; }
39-
40-
a:hover {
41-
color: #dddddd;
42-
text-decoration: none; }
43-
44-
h1, h2 {
45-
font-family: 'Raleway', 'sans-serif'; }
46-
47-
h1 {
48-
font-weight: 900;
49-
font-size: 60px; }
50-
51-
h2 {
52-
font-weight: 700;
53-
font-size: 35px; }
54-
55-
#index {
56-
font-size: 32px;
57-
line-height: 50px;
58-
margin-top: 150px;
59-
text-align: right; }
1+
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700,900)
2+
3+
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700)
4+
5+
$footer-height: 100px
6+
$background-color: #2e3140
7+
$text-color: #ffc37a
8+
$link-color: #ffffd3
9+
$hover-color: #ffffba
10+
$open-sans: "Open Sans", "sans-serif"
11+
12+
=box-sizing($box-model)
13+
-webkit-box-sizing: $box-model
14+
-moz-box-sizing: $box-model
15+
box-sizing: $box-model
16+
17+
*
18+
margin: 0
19+
padding: 0
20+
21+
html
22+
position: relative
23+
min-height: 100%
24+
25+
body
26+
background-color: $background-color
27+
color: $text-color
28+
font-family: $open-sans
29+
+box-sizing(border-box)
30+
31+
#container
32+
max-width: 1200px
33+
min-width: 800px
34+
margin: 0 auto $footer-height auto
35+
padding: 0 20px
36+
37+
header
38+
padding-top: $footer-height / 2
39+
40+
footer
41+
position: absolute
42+
bottom: 0
43+
height: $footer-height
44+
width: 230px
45+
font-size: 40px
46+
a
47+
color: $text-color
48+
padding-right: 10px
49+
50+
a
51+
color: $link-color
52+
text-decoration: none
53+
54+
a:hover
55+
color: $hover-color
56+
text-decoration: none
57+
58+
h1, h2
59+
font-family: 'Raleway', 'sans-serif'
60+
61+
h1
62+
font-weight: 900
63+
font-size: 60px
64+
65+
h2
66+
font-weight: 700
67+
font-size: 35px
68+
69+
#index
70+
font-size: 32px
71+
line-height: 50px
72+
margin-top: 150px
73+
text-align: right

‎css/main.scss‎

Lines changed: 15 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
66

77
$footer-height: 100px;
8-
$orange: #E05221;
9-
$dark-brown: #3D210C;
10-
$light-brown: #5F442E;
11-
$hover-color: #DDD;
8+
$background-color: #2E3140;
9+
$text-color: #ffc37a;
10+
$link-color: #ffffd3;
11+
$hover-color: #ffffba;
1212
$open-sans: 'Open Sans', 'sans-serif';
1313

1414
@mixin box-sizing($box-model) {
@@ -28,16 +28,19 @@ html {
2828
}
2929

3030
body {
31-
margin: 0 0 $footer-height 100px;
32-
max-width: 1200px;
33-
min-width: 800px;
34-
padding: 10px;
35-
background-color: $orange;
36-
color: $dark-brown;
31+
background-color: $background-color;
32+
color: $text-color;
3733
font-family: $open-sans;
3834
@include box-sizing(border-box);
3935
}
4036

37+
#container {
38+
max-width: 1200px;
39+
min-width: 800px;
40+
margin: 0 auto $footer-height auto;
41+
padding: 0 20px;
42+
}
43+
4144
header {
4245
padding-top: $footer-height / 2;
4346
}
@@ -50,12 +53,12 @@ footer {
5053
font-size: 40px;
5154

5255
a {
53-
color: $dark-brown;
56+
color: $text-color;
5457
padding-right: 10px;
5558
}
5659
}
5760

58-
a { color: $light-brown; text-decoration: none; }
61+
a { color: $link-color; text-decoration: none; }
5962
a:hover { color: $hover-color; text-decoration: none; }
6063

6164
h1, h2 {
@@ -78,70 +81,3 @@ h2 {
7881
margin-top: 150px;
7982
text-align: right;
8083
}
81-
82-
// /* Global Reset */
83-
// * {
84-
// margin: 0;
85-
// padding: 0;
86-
// }
87-
//
88-
// html, body { height: 100%; }
89-
//
90-
// /* Le Styles */
91-
//
92-
// body {
93-
// position: relative;
94-
// background-color: #E05221;
95-
// color: #3D210C;
96-
// font-family: 'Open Sans', 'sans-serif';
97-
// padding: 50px;
98-
// max-width: 1200px;
99-
// min-width: 800px;
100-
// height: 700px;
101-
// margin: auto;
102-
// box-sizing:border-box;
103-
// -moz-box-sizing:border-box; /* Firefox */
104-
// }
105-
//
106-
// a { color: #3D210C; text-decoration: none; }
107-
// a:hover { color: #DDD; text-decoration: none; }
108-
//
109-
// h1, h2 {
110-
// font-family: 'Raleway', 'sans-serif';
111-
// }
112-
//
113-
// h1 {
114-
// font-weight: 900;
115-
// font-size: 60px;
116-
// }
117-
//
118-
// h2 {
119-
// font-weight: 700;
120-
// font-size: 35px;
121-
// }
122-
//
123-
// footer {
124-
// position: absolute;
125-
// bottom: 50px;
126-
// font-size: 40px;
127-
// }
128-
//
129-
// footer a {
130-
// padding-right: 10px;
131-
// }
132-
//
133-
// #index {
134-
// margin: 100px auto;
135-
// padding: 50px 0;
136-
// font-size: 32px;
137-
// line-height: 50px;
138-
// text-align: right;
139-
// }
140-
//
141-
// #index a {
142-
// color: #5F442E;
143-
// }
144-
//
145-
// #index a:hover {
146-
// color: #DDD;
147-
// }

0 commit comments

Comments
 (0)