Add support for extra social icons!
The catch is we will no longer have a secondary footer menu at the bottom - but hey, we can put the socials there as well ;)
This commit is contained in:
Badri Sunderarajan
parent
68e2208a4b
commit
033a36c35c
6 changed files with 85 additions and 20 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -63,6 +63,11 @@ body {
|
||||||
font-family: var(--font-sans-serif);
|
font-family: var(--font-sans-serif);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Hide things that are meant to be hidden */
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 2. Layout - Page building blocks
|
/* 2. Layout - Page building blocks
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
@ -294,16 +299,11 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-social svg {
|
.gh-social svg {
|
||||||
height: 22px;
|
height: 1em;
|
||||||
width: 22px;
|
width: 1em;
|
||||||
fill: #fff;
|
fill: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gh-social-facebook svg {
|
|
||||||
height: 20px;
|
|
||||||
width: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.gh-head-button {
|
a.gh-head-button {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 8px 15px;
|
padding: 8px 15px;
|
||||||
|
|
@ -1800,6 +1800,10 @@ Ghost editor. */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.site-footer .gh-social {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* 12. Dark Mode
|
/* 12. Dark Mode
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
|
||||||
38
default.hbs
38
default.hbs
|
|
@ -25,6 +25,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body class="{{body_class}}">
|
<body class="{{body_class}}">
|
||||||
<div class="viewport">
|
<div class="viewport">
|
||||||
|
{{> "icons/social-sprites"}}
|
||||||
|
|
||||||
<header id="gh-head" class="gh-head {{#if @site.cover_image}}has-cover{{/if}}">
|
<header id="gh-head" class="gh-head {{#if @site.cover_image}}has-cover{{/if}}">
|
||||||
<nav class="gh-head-inner inner gh-container">
|
<nav class="gh-head-inner inner gh-container">
|
||||||
|
|
@ -47,14 +48,18 @@
|
||||||
{{navigation}}
|
{{navigation}}
|
||||||
</div>
|
</div>
|
||||||
<div class="gh-head-actions">
|
<div class="gh-head-actions">
|
||||||
<div class="gh-social">
|
{{#if @site.secondary_navigation}}
|
||||||
{{#if @site.facebook}}
|
{{navigation type="secondary"}}
|
||||||
<a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
|
{{else}}
|
||||||
{{/if}}
|
<div class="gh-social">
|
||||||
{{#if @site.twitter}}
|
{{#if @site.facebook}}
|
||||||
<a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
|
<a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
{{#if @site.twitter}}
|
||||||
|
<a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
{{#unless @member}}
|
{{#unless @member}}
|
||||||
<a class="gh-head-button" href="#/portal/signup">Subscribe</a>
|
<a class="gh-head-button" href="#/portal/signup">Subscribe</a>
|
||||||
|
|
@ -74,9 +79,20 @@
|
||||||
<footer class="site-footer outer">
|
<footer class="site-footer outer">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> © {{date format="YYYY"}}</section>
|
<section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> © {{date format="YYYY"}}</section>
|
||||||
<nav class="site-footer-nav">
|
<div class="gh-social">
|
||||||
{{navigation type="secondary"}}
|
{{#if @site.secondary_navigation}}
|
||||||
</nav>
|
{{navigation type="secondary"}}
|
||||||
|
{{else}}
|
||||||
|
<div class="gh-social">
|
||||||
|
{{#if @site.facebook}}
|
||||||
|
<a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
|
||||||
|
{{/if}}
|
||||||
|
{{#if @site.twitter}}
|
||||||
|
<a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
<div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
|
<div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
26
partials/icons/social-sprites.hbs
Normal file
26
partials/icons/social-sprites.hbs
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<svg width="0" height="0" class="hidden">
|
||||||
|
<symbol role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="facebook">
|
||||||
|
<title>Facebook</title>
|
||||||
|
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="instagram">
|
||||||
|
<title>Instagram</title>
|
||||||
|
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="liberapay">
|
||||||
|
<title>Liberapay</title>
|
||||||
|
<path d="M2.32 0A2.321 2.321 0 0 0 0 2.32v19.36A2.321 2.321 0 0 0 2.32 24h19.36A2.32 2.32 0 0 0 24 21.68V2.32A2.32 2.32 0 0 0 21.68 0zm9.208 3.98l-2.27 9.405a2.953 2.953 0 0 0-.073.539.853.853 0 0 0 .09.432.7.7 0 0 0 .334.302c.157.077.378.126.661.147l-.49 2.008c-.772 0-1.38-.1-1.82-.3-.441-.203-.757-.477-.947-.826a2.391 2.391 0 0 1-.278-1.2c.005-.452.068-.933.188-1.445l2.074-8.67zm3.9 3.888c.61 0 1.135.092 1.576.277.44.185.802.438 1.085.76.283.32.493.696.629 1.126.136.43.204.89.204 1.379v.001c0 .794-.13 1.52-.392 2.179a5.16 5.16 0 0 1-1.086 1.706 4.84 4.84 0 0 1-1.665 1.118c-.648.267-1.353.4-2.114.4-.37 0-.74-.033-1.11-.098l-.735 2.956H9.403l2.71-11.298c.435-.13.934-.248 1.494-.351a10.045 10.045 0 0 1 1.821-.155zm-.31 2.041a4.67 4.67 0 0 0-.98.098l-1.143 4.752c.185.044.413.065.685.065.425 0 .812-.079 1.16-.237a2.556 2.556 0 0 0 .89-.661c.244-.283.435-.623.571-1.02a4.03 4.03 0 0 0 .204-1.315c0-.468-.104-.865-.31-1.192-.207-.326-.566-.49-1.077-.49z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="mastodon">
|
||||||
|
<title>Mastodon</title>
|
||||||
|
<path d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="rss">
|
||||||
|
<title>RSS</title>
|
||||||
|
<path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="twitter">
|
||||||
|
<title>Twitter</title>
|
||||||
|
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.4 KiB |
19
partials/navigation.hbs
Normal file
19
partials/navigation.hbs
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{{#if isSecondary}}
|
||||||
|
<div class="gh-social">
|
||||||
|
{{#foreach navigation}}
|
||||||
|
<a class="gh-social-{{slug}}" href="{{url}}" title="{{slug}}" target="_blank" rel="noopener">
|
||||||
|
<svg width="16" height="16" role="img" aria-label="{{slug}} icon">
|
||||||
|
<use xlink:href="#{{slug}}"></use>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
{{/foreach}}
|
||||||
|
</div>
|
||||||
|
{{else}}
|
||||||
|
<ul class="nav">
|
||||||
|
{{#foreach navigation}}
|
||||||
|
<li class="{{link_class for=(url) class=(concat "nav-" slug)}}">
|
||||||
|
<a href="{{url absolute="true"}}">{{label}}</a>
|
||||||
|
</li>
|
||||||
|
{{/foreach}}
|
||||||
|
</ul>
|
||||||
|
{{/if}}
|
||||||
Loading…
Reference in a new issue