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 2021-11-07 00:31:52 +05:30
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

View file

@ -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
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

View file

@ -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,6 +48,9 @@
{{navigation}} {{navigation}}
</div> </div>
<div class="gh-head-actions"> <div class="gh-head-actions">
{{#if @site.secondary_navigation}}
{{navigation type="secondary"}}
{{else}}
<div class="gh-social"> <div class="gh-social">
{{#if @site.facebook}} {{#if @site.facebook}}
<a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a> <a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
@ -55,6 +59,7 @@
<a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a> <a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}} {{/if}}
</div> </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> &copy; {{date format="YYYY"}}</section> <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
<nav class="site-footer-nav"> <div class="gh-social">
{{#if @site.secondary_navigation}}
{{navigation type="secondary"}} {{navigation type="secondary"}}
</nav> {{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>

View 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
View 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}}