Skip to content

Commit 9d6de3c

Browse files
barryclarkbarryclark
committed
Refactor of the nav, and added in new .clearfix
1 parent 5ec5d05 commit 9d6de3c

File tree

3 files changed

+89
-92
lines changed

3 files changed

+89
-92
lines changed

‎_layouts/default.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,18 @@
2020
<body>
2121
<div class="wrapper-masthead">
2222
<div class="container">
23-
<header class="masthead">
24-
<a href="{{ site.baseurl }}/" class="avatar"><img src="{{ site.avatar }}" /></a>
25-
<a href="{{ site.baseurl }}/" class="site-name">{{ site.name }}</a>
26-
<br><br>
27-
<p class="site-description">{{ site.description }}</p>
23+
<header class="masthead clearfix">
24+
<a href="{{ site.baseurl }}/" class="site-avatar"><img src="{{ site.avatar }}" /></a>
25+
26+
<div class="site-info">
27+
<h1 class="site-name"><a href="{{ site.baseurl }}/">{{ site.name }}</a></h1>
28+
<p class="site-description">{{ site.description }}</p>
29+
</div>
2830

2931
<nav>
3032
<a href="{{ site.baseurl }}/">Blog</a>
3133
<a href="{{ site.baseurl }}/about">About</a>
3234
</nav>
33-
34-
<div style="clear:both;"></div>
3535
</header>
3636
</div>
3737
</div>

‎scss/style.scss

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,17 @@ img {
127127
background: $lighterGray;
128128
}
129129

130+
// Nicolas Gallagher's micro clearfix hack
131+
// http://nicolasgallagher.com/micro-clearfix-hack/
132+
.clearfix:before,
133+
.clearfix:after {
134+
content: " ";
135+
display: table;
136+
}
137+
138+
.clearfix:after {
139+
clear: both;
140+
}
130141

131142
//
132143
// LAYOUT / SECTIONS
@@ -137,24 +148,19 @@ img {
137148
//
138149

139150
.wrapper-masthead {
140-
//background-color: #e8e8f2;
141151
margin-bottom: 40px;
142152
}
143153

144154
.masthead {
145155
padding: 20px 0;
146156
border-bottom: 1px solid $lighterGray;
157+
147158
@include mobile {
148159
text-align: center;
149160
}
150-
151-
// @TODO: OMG this is so bad, I just can't
152-
br {
153-
visibility: none;
154-
}
155161
}
156162

157-
.avatar {
163+
.site-avatar {
158164
float: left;
159165
width: 70px;
160166
height: 70px;
@@ -171,66 +177,68 @@ img {
171177
}
172178
}
173179

174-
.site-name {
180+
.site-info {
175181
float: left;
176182

177-
font-family: $helveticaNeue;
178-
font-weight: 300;
179-
font-size: 28px;
180-
letter-spacing: 1px;
181183
@include mobile {
182184
float: none;
183185
display: block;
186+
margin: 0 auto;
184187
}
188+
}
185189

190+
.site-name {
191+
margin: 0;
192+
color: $darkGray;
186193
text-decoration: none;
187194
cursor: pointer;
188-
color: $darkGray;
189-
&:hover, &:active {
190-
text-decoration: none;
191-
195+
font-family: $helveticaNeue;
196+
font-weight: 300;
197+
font-size: 28px;
198+
letter-spacing: 1px;
199+
200+
a {
201+
&:hover, &:active {
202+
color: $blue;
203+
text-decoration: none;
204+
}
192205
}
193206
}
194207

195208
.site-description {
196-
float: left;
197-
font-size: 16px;
198-
margin: 0;
199-
margin-top: -5px;
209+
margin: -5px 0 0 0;
200210
color: #777;
201-
211+
font-size: 16px;
212+
202213
@include mobile {
203-
float: none;
204-
display: block;
205214
margin: 3px 0;
206215
}
207216
}
208217

209218
nav {
210219
float: right;
211-
margin-top: -25px; // @TODO - containers for nav and content blocks in header
212-
220+
margin-top: 23px; // @TODO: Vertically middle align
213221
font-family: $helveticaNeue;
214222
font-size: 18px;
223+
215224
@include mobile {
216225
float: none;
217-
display: block;
218226
margin-top: 15px;
227+
display: block;
219228
font-size: 16px;
220229
}
221230

222-
// nav has it's own link highlighting
223231
a {
224232
margin-left: 25px;
233+
color: $darkGray;
225234
text-align: right;
226235
font-weight: 300;
227236
letter-spacing: 1px;
228-
color: $darkGray;
229237

230238
&:hover, &:active {
239+
color: $darkGray;
231240
text-decoration: none;
232241
cursor: pointer;
233-
color: $darkGray;
234242
}
235243

236244
@include mobile {
@@ -239,22 +247,12 @@ nav {
239247
}
240248
}
241249

242-
.logo, nav {
243-
@include mobile {
244-
float: none;
245-
width: 100%;
246-
text-align: center;
247-
}
248-
}
250+
249251

250252
//
251253
// .main
252254
//
253255

254-
.wrapper-posts {
255-
256-
}
257-
258256
.posts > .post {
259257
padding-bottom: 2em;
260258
border-bottom: 1px solid $lighterGray;
@@ -275,19 +273,19 @@ nav {
275273
}
276274

277275
blockquote {
278-
border-left: 2px solid $gray;
279-
font-size: 22px;
280-
font-style: italic;
281276
margin: 1.8em .8em;
277+
border-left: 2px solid $gray;
282278
padding: 0.1em 1em;
283279
color: $gray;
280+
font-size: 22px;
281+
font-style: italic;
284282
}
285283
}
286284

287285
.wrapper-footer {
288286
margin-top: 50px;
289-
background-color: #eee;
290287
border-top: 1px solid #ddd;
288+
background-color: #eee;
291289
}
292290

293291
footer {

‎style.css

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -403,6 +403,13 @@ img {
403403
color: black;
404404
background: #eeeeee; }
405405

406+
.clearfix:before, .clearfix:after {
407+
content: " ";
408+
display: table; }
409+
410+
.clearfix:after {
411+
clear: both; }
412+
406413
.wrapper-masthead {
407414
margin-bottom: 40px; }
408415

@@ -412,82 +419,74 @@ img {
412419
@media screen and (max-width: 520px) {
413420
.masthead {
414421
text-align: center; } }
415-
.masthead br {
416-
visibility: none; }
417422

418-
.avatar {
423+
.site-avatar {
419424
float: left;
420425
width: 70px;
421426
height: 70px;
422427
margin-right: 15px; }
423428
@media screen and (max-width: 520px) {
424-
.avatar {
429+
.site-avatar {
425430
float: none;
426431
display: block;
427432
margin: 0 auto; } }
428-
.avatar img {
433+
.site-avatar img {
429434
border-radius: 5px; }
430435

436+
.site-info {
437+
float: left; }
438+
@media screen and (max-width: 520px) {
439+
.site-info {
440+
float: none;
441+
display: block;
442+
margin: 0 auto; } }
443+
431444
.site-name {
432-
float: left;
445+
margin: 0;
446+
color: #333333;
447+
text-decoration: none;
448+
cursor: pointer;
433449
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
434450
font-weight: 300;
435451
font-size: 28px;
436-
letter-spacing: 1px;
437-
text-decoration: none;
438-
cursor: pointer;
439-
color: #333333; }
440-
@media screen and (max-width: 520px) {
441-
.site-name {
442-
float: none;
443-
display: block; } }
444-
.site-name:hover, .site-name:active {
452+
letter-spacing: 1px; }
453+
.site-name a:hover, .site-name a:active {
454+
color: #4183c4;
445455
text-decoration: none; }
446456

447457
.site-description {
448-
float: left;
449-
font-size: 16px;
450-
margin: 0;
451-
margin-top: -5px;
452-
color: #777777; }
458+
margin: -5px 0 0 0;
459+
color: #777777;
460+
font-size: 16px; }
453461
@media screen and (max-width: 520px) {
454462
.site-description {
455-
float: none;
456-
display: block;
457463
margin: 3px 0; } }
458464

459465
nav {
460466
float: right;
461-
margin-top: -25px;
467+
margin-top: 23px;
462468
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
463469
font-size: 18px; }
464470
@media screen and (max-width: 520px) {
465471
nav {
466472
float: none;
467-
display: block;
468473
margin-top: 15px;
474+
display: block;
469475
font-size: 16px; } }
470476
nav a {
471477
margin-left: 25px;
478+
color: #333333;
472479
text-align: right;
473480
font-weight: 300;
474-
letter-spacing: 1px;
475-
color: #333333; }
481+
letter-spacing: 1px; }
476482
nav a:hover, nav a:active {
483+
color: #333333;
477484
text-decoration: none;
478-
cursor: pointer;
479-
color: #333333; }
485+
cursor: pointer; }
480486
@media screen and (max-width: 520px) {
481487
nav a {
482488
margin: 0 10px; } }
483489

484-
@media screen and (max-width: 520px) {
485-
.logo, nav {
486-
float: none;
487-
width: 100%;
488-
text-align: center; } }
489-
490-
491490
.posts > .post {
492491
padding-bottom: 2em;
493492
border-bottom: 1px solid #eeeeee; }
@@ -502,17 +501,17 @@ nav {
502501
color: #4183c4;
503502
text-decoration: none; }
504503
.post blockquote {
505-
border-left: 2px solid #666666;
506-
font-size: 22px;
507-
font-style: italic;
508504
margin: 1.8em 0.8em;
505+
border-left: 2px solid #666666;
509506
padding: 0.1em 1em;
510-
color: #666666; }
507+
color: #666666;
508+
font-size: 22px;
509+
font-style: italic; }
511510

512511
.wrapper-footer {
513512
margin-top: 50px;
514-
background-color: #eeeeee;
515-
border-top: 1px solid #dddddd; }
513+
border-top: 1px solid #dddddd;
514+
background-color: #eeeeee; }
516515

517516
footer {
518517
padding: 20px 0;

0 commit comments

Comments
 (0)