Reformatting header nav links

This commit is contained in:
Jeff Avallone 2014-12-26 14:57:13 -05:00
parent aa6c792867
commit efbd3aa762
3 changed files with 26 additions and 52 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -28,6 +28,10 @@ a {
margin-right: rhythm(1/4); margin-right: rhythm(1/4);
} }
h1 {
@include adjust-font-size-to(48px, 2);
}
ul.inline-list { ul.inline-list {
@include adjust-font-size-to(14px, 2/3); @include adjust-font-size-to(14px, 2/3);
@include inline-block-list; @include inline-block-list;
@ -53,11 +57,6 @@ ul.inline-list {
@include box-shadow; @include box-shadow;
@include clearfix; @include clearfix;
h1 {
@include adjust-font-size-to(48px, 2);
font-family: 'Bangers', 'cursive';
}
p { p {
margin-top: rhythm(1); margin-top: rhythm(1);
} }
@ -71,56 +70,27 @@ header {
@include clearfix; @include clearfix;
.logo { .logo {
float: left; display: inline-block;
a {
@include unstyled-link;
}
h1 {
@include adjust-font-size-to(48px, 2);
font-family: 'Bangers', 'cursive';
}
span { span {
color: $gray; color: $gray;
} }
} }
h1 {
font-family: 'Bangers', 'cursive';
}
nav { nav {
overflow: hidden; @include adjust-font-size-to(18px, 1);
display: inline-block;
margin-left: rhythm(1/4);
padding-left: rhythm(1/4);
border-left: 1px solid $black;
}
ul { a {
display: inline-block; @include unstyled-link;
li {
margin: 0 0 rhythm(1/4) rhythm(1);
padding: 0 rhythm(1/4);
&::before {
content: '\00BB';
font-weight: bold;
margin-right: rhythm(1/4);
}
}
}
a {
@include adjust-font-size-to($base-font-size, 1);
@include unstyled-link;
}
.source {
@include adjust-font-size-to($base-font-size, 2);
float: right;
img {
vertical-align: middle;
margin-right: rhythm(1/4);
width: 32px;
height: 32px;
}
}
} }
} }

View File

@ -35,12 +35,16 @@
<nav> <nav>
<ul> <ul>
<li><a href="/changelog.html">Changelog</a></li> <li>
<li><a href="/documentation.html">Documentation</a></li> <a class="oi with-text" data-glyph="list-rich" href="/changelog.html">Changelog</a>
</li>
<li>
<a class="oi with-text" data-glyph="document" href="/documentation.html">Documentation</a>
</li>
<li>
<a class="oi with-text" data-glyph="code" href="https://github.com/javallone/regexper">Source on GitHub</a>
</li>
</ul> </ul>
<a class="source" href="https://github.com/javallone/regexper">
<img src="/images/GitHub-Mark-32px.png" />Source on GitHub
</a>
</nav> </nav>
</header> </header>