Icons and ting
This commit is contained in:
John O'Nolan
parent
70e61e9fa1
commit
839d6c3224
10 changed files with 135 additions and 46 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,11 @@
|
|||
/* Global Header
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head {
|
||||
padding: 20px 4vw;
|
||||
padding: 3vw 4vw;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.3em;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.gh-head a {
|
||||
|
|
@ -17,6 +20,35 @@
|
|||
grid-auto-flow: row dense;
|
||||
}
|
||||
|
||||
|
||||
/* Brand
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-brand {
|
||||
grid-column-start: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.gh-head-logo {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
font-weight: 600;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.gh-head-logo img {
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
|
||||
/* Primary Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -43,26 +75,9 @@
|
|||
box-shadow: 0 -1px 0 0 currentcolor inset;
|
||||
}
|
||||
|
||||
.gh-head-brand {
|
||||
grid-column-start: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.gh-head-logo {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
font-weight: 600;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.gh-head-logo img {
|
||||
max-height: 40px;
|
||||
}
|
||||
/* Secondary Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-actions {
|
||||
display: flex;
|
||||
|
|
@ -86,7 +101,7 @@
|
|||
}
|
||||
|
||||
|
||||
/* Menu
|
||||
/* Mobile Menu Trigger
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-burger {
|
||||
|
|
@ -119,7 +134,7 @@
|
|||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
background: currentcolor;
|
||||
transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
|
@ -135,7 +150,7 @@
|
|||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
background: currentcolor;
|
||||
transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
|
@ -171,19 +186,50 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Layout Variants
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-head-brandnavactions .gh-head-brand {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.gh-head-brandnav .gh-container {
|
||||
grid-gap: 0;
|
||||
grid-template-columns: auto max-content max-content;
|
||||
}
|
||||
.gh-head-brandnav .gh-head-brand {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
.gh-head-brandnav .gh-head-menu {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.gh-head-brandnav .gh-head-menu .nav li {
|
||||
margin: 0 0 0 1.5vw;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Mobile Menu
|
||||
/* ---------------------------------------------------------- */
|
||||
/* IDs needed to ensure sufficient specificity */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.gh-burger {
|
||||
display: inline-block;
|
||||
}
|
||||
.gh-head {
|
||||
#gh-head {
|
||||
transition: all 0.4s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
.gh-head .gh-container {
|
||||
#gh-head .gh-container {
|
||||
height: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.gh-head-brand {
|
||||
#gh-head .gh-head-brand {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
grid-column-start: auto;
|
||||
|
|
@ -193,39 +239,39 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
|||
justify-content: space-between;
|
||||
user-select: none;
|
||||
}
|
||||
.gh-head-menu {
|
||||
#gh-head .gh-head-menu {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 0 0 10vh;
|
||||
margin: 0 0 10vh 0;
|
||||
font-weight: 300;
|
||||
font-size: 3.6rem;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
.gh-head-menu .nav li {
|
||||
#gh-head .gh-head-menu .nav li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.gh-head-menu .nav a {
|
||||
#gh-head .gh-head-menu .nav a {
|
||||
padding: 8px 0;
|
||||
}
|
||||
.gh-head-menu .nav {
|
||||
#gh-head .gh-head-menu .nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.gh-head-actions {
|
||||
#gh-head .gh-head-actions {
|
||||
padding: 20px 0;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
}
|
||||
.gh-head-actions a {
|
||||
#gh-head .gh-head-actions a {
|
||||
margin: 0 10px;
|
||||
}
|
||||
/* Hide collapsed content */
|
||||
.gh-head-actions,
|
||||
.gh-head-menu {
|
||||
#gh-head .gh-head-actions,
|
||||
#gh-head .gh-head-menu {
|
||||
display: none;
|
||||
}
|
||||
/* Open the menu */
|
||||
|
|
@ -233,7 +279,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
|||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
.gh-head-open .gh-head {
|
||||
.gh-head-open #gh-head {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -241,16 +287,16 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
|
|||
left: 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.gh-head-open .gh-head .gh-container {
|
||||
.gh-head-open #gh-head .gh-container {
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
.gh-head-open .gh-head-actions,
|
||||
.gh-head-open .gh-head-menu {
|
||||
.gh-head-open #gh-head .gh-head-actions,
|
||||
.gh-head-open #gh-head .gh-head-menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.gh-head-menu {
|
||||
#gh-head .gh-head-menu {
|
||||
font-size: 6vmin;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,11 @@ production stylesheet in assets/built/screen.css using: gulp dev
|
|||
/* Main - Your styles here! Edit below
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
html,
|
||||
.gh-viewport {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Global */
|
||||
.gh-container {
|
||||
width: 100%;
|
||||
|
|
@ -37,6 +42,27 @@ production stylesheet in assets/built/screen.css using: gulp dev
|
|||
}
|
||||
|
||||
|
||||
.gh-head-actions a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.gh-head-actions a svg {
|
||||
height: 1.8rem;
|
||||
fill: currentcolor;
|
||||
}
|
||||
|
||||
.gh-head-actions a:first-child svg {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.gh-head-actions a:last-child svg {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
|
||||
/* Footer
|
||||
/* ---------------------------------------------------------- */
|
||||
.gh-foot {
|
||||
|
|
|
|||
10
default.hbs
10
default.hbs
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{@site.lang}}">
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
|
|
@ -8,6 +9,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
|
||||
|
||||
<title>{{meta_title}}</title>
|
||||
|
||||
{{ghost_head}}
|
||||
{{!-- Outputs SEO meta+structured data and important settings, should always be in <head> --}}
|
||||
|
||||
|
|
@ -15,7 +17,7 @@
|
|||
<body class="{{body_class}}">
|
||||
<div class="gh-viewport">
|
||||
|
||||
<header class="gh-head">
|
||||
<header id="gh-head" class="gh-head">
|
||||
<nav class="gh-container">
|
||||
|
||||
<div class="gh-head-brand">
|
||||
|
|
@ -38,12 +40,12 @@
|
|||
<div class="gh-head-actions">
|
||||
<div class="gh-head-actions-list">
|
||||
{{#if @site.facebook}}
|
||||
<a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">Facebook</a>
|
||||
<a href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
|
||||
{{/if}}
|
||||
{{#if @site.twitter}}
|
||||
<a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">Twitter</a>
|
||||
<a href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
|
||||
{{/if}}
|
||||
<a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">RSS</a>
|
||||
<a href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
1
partials/icons/avatar.hbs
Normal file
1
partials/icons/avatar.hbs
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg>
|
||||
|
After Width: | Height: | Size: 308 B |
1
partials/icons/facebook.hbs
Normal file
1
partials/icons/facebook.hbs
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm5.204 4.911h-3.546c-2.103 0-4.443.885-4.443 3.934.01 1.062 0 2.08 0 3.225h-2.433v3.872h2.509v11.147h4.61v-11.22h3.042l.275-3.81h-3.397s.007-1.695 0-2.187c0-1.205 1.253-1.136 1.329-1.136h2.054V4.911z" /></svg>
|
||||
|
After Width: | Height: | Size: 350 B |
11
partials/icons/loader.hbs
Normal file
11
partials/icons/loader.hbs
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
|
||||
<path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
|
||||
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
|
||||
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
|
||||
<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
|
||||
C22.32,8.481,24.301,9.057,26.013,10.047z">
|
||||
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
|
||||
dur="0.5s" repeatCount="indefinite" />
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 923 B |
1
partials/icons/rss.hbs
Normal file
1
partials/icons/rss.hbs
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>
|
||||
|
After Width: | Height: | Size: 263 B |
1
partials/icons/twitter.hbs
Normal file
1
partials/icons/twitter.hbs
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
|
||||
|
After Width: | Height: | Size: 888 B |
Loading…
Add table
Add a link
Reference in a new issue