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">
<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>
<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>

View File

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

View File

@ -7,7 +7,8 @@
@import 'syntax';
body {
padding: 20px 10px;
margin: 0;
padding: 0;
font-family: $base-font-family, $base-font-family-fallback;
background-color: $base-bgcolor;
color: $base-color;
@ -38,11 +39,11 @@ a {
transition: all .2s ease-in-out;
border-bottom: 1px solid #ddd;
text-decoration: none;
}
a:hover,
a:focus {
border-bottom: 1px solid #70B7FD;
&:hover,
&:focus {
border-bottom: 1px solid #70B7FD;
}
}
img {
@ -51,7 +52,21 @@ img {
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 {
margin: auto;