Adjust header styles

This commit is contained in:
Josh Buchea 2017-07-21 16:51:00 -07:00
parent 288820f235
commit bf7822b320
3 changed files with 43 additions and 25 deletions

View File

@ -1,17 +1,21 @@
<header class="site__header"> <header class="site__header">
<div class="container">
{% include share-page.html %} <h1 class="site__title">{{ site.title | xml_escape }}</h1>
{% include share-page.html %}
<div>
By <a href="http://joshbuchea.com/">Josh Buchea</a> / <a href="https://twitter.com/{{ site.twitter_username }}">@{{ site.twitter_username }}</a>
</div>
<a href="//github.com/joshbuchea/head" class="github" target="_blank">
<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 250 250" fill="#fff">
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#70B7FD"/>
<path class="github__arm" d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" style=""/>
<path class="github__body" d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"/>
</svg>
</a>
<div>
By <a href="http://joshbuchea.com/">Josh Buchea</a> / <a href="https://twitter.com/{{ site.twitter_username }}">@{{ site.twitter_username }}</a>
</div> </div>
<a href="//github.com/joshbuchea/head" class="github" target="_blank">
<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 250 250" fill="#fff">
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#70B7FD"/>
<path class="github__arm" d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" style=""/>
<path class="github__body" d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"/>
</svg>
</a>
</header> </header>

View File

@ -1,18 +1,17 @@
--- ---
--- ---
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
{% include head.html %} {% include head.html %}
<body> <body>
<div class="container"> {% include header.html %}
{% include header.html %} <div class="site__main">
<div class="site__main"> <div class="container">
<h1 class="site__title">{{ site.title | xml_escape }}</h1>
{{ content }} {{ content }}
</div> </div>
</div> </div>
<script> <script>
// open external links in new tab // open external links in new tab
var links = document.links; var links = document.links;

View File

@ -7,7 +7,8 @@
@import 'syntax'; @import 'syntax';
body { body {
padding: 20px 10px; margin: 0;
padding: 0;
font-family: $base-font-family, $base-font-family-fallback; font-family: $base-font-family, $base-font-family-fallback;
background-color: $base-bgcolor; background-color: $base-bgcolor;
color: $base-color; color: $base-color;
@ -38,11 +39,11 @@ a {
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
text-decoration: none; text-decoration: none;
}
a:hover, &:hover,
a:focus { &:focus {
border-bottom: 1px solid #70B7FD; border-bottom: 1px solid #70B7FD;
}
} }
img { img {
@ -51,7 +52,21 @@ img {
vertical-align: middle; vertical-align: middle;
} }
.container {} .container {
margin: 0 auto;
max-width: 800px;
padding: 8px 16px;
}
.site__header {
padding: 80px 0 40px;
background-color: #F2F2F2;
}
.site__title {
margin-top: 0;
font-size: 48px;
}
.site__main { .site__main {
margin: auto; margin: auto;