hugo.soucy.cc

The personnal website source code of Hugo Soucy. Creates from an homebrewed static website generator (Ferron).
Log | Files | Refs

commit 76584baded9c83969923463fd27143ec0bec1ddb
parent 633f5af3272323f33ab2a4ddb4bd4dbd25fca958
Author: Hugo Soucy <hugo.soucy@equisoft.com>
Date:   Sun,  8 Sep 2019 12:37:10 -0400

Continue the refactoring of the theme

Diffstat:
Mstatic/src/css/global/_base.scss | 11++++++-----
Astatic/src/css/global/_go-to-menu.scss | 30++++++++++++++++++++++++++++++
Astatic/src/css/global/_nav.scss | 21+++++++++++++++++++++
Astatic/src/css/modules/_as-note.scss | 8++++++++
Astatic/src/css/modules/_h-entry.scss | 6++++++
Mstatic/src/css/modules/_index.scss | 1-
Dstatic/src/css/modules/_note-index.scss | 8--------
Astatic/src/css/modules/_note.scss | 14++++++++++++++
Mstatic/src/css/styles.scss | 6+++++-
Mstatic/src/js/custom/init.js | 42+++++++++++++++++++++---------------------
Mtemplates/curriculum-vitae.mustache | 1-
Mtemplates/default-index.mustache | 1-
Mtemplates/default.mustache | 1-
Mtemplates/index.mustache | 1-
Mtemplates/note-index.mustache | 15+++++++++------
Mtemplates/note.mustache | 14+++++++-------
Mtemplates/partials/bottom_script.mustache | 21+++++++++++----------
Mtemplates/partials/nav.mustache | 43+++++++++----------------------------------
Dtemplates/partials/nav_button.mustache | 16----------------
Dtemplates/partials/note_body.mustache | 3---
Dtemplates/partials/quote_body.mustache | 15---------------
Mtemplates/tag.mustache | 1-
22 files changed, 147 insertions(+), 132 deletions(-)

diff --git a/static/src/css/global/_base.scss b/static/src/css/global/_base.scss @@ -17,7 +17,12 @@ textarea { body { background: var(--base-bg-color) url("//assets.soucy.cc/images/noise.png") repeat; - margin: 2rem; + margin: 0; + padding: 2rem; +} + +a { + color: var(--base-link-color); } p, @@ -41,7 +46,3 @@ img { max-width: 100%; width: auto; } - -.logo { - -} diff --git a/static/src/css/global/_go-to-menu.scss b/static/src/css/global/_go-to-menu.scss @@ -0,0 +1,30 @@ +// Go To Menu Button +.go-to-menu__ico { + color: #000; + position: absolute; + margin-left: 2px; + margin-top: 10px; + width: 17px; + height: 1px; + background-color: currentColor; +} + +.go-to-menu__ico:before { + content: ''; + position: absolute; + top: -5px; + left: 0; + width: 17px; + height: 1px; + background-color: currentColor; +} + +.go-to-menu__ico:after { + content: ''; + position: absolute; + top: 5px; + left: 0; + width: 17px; + height: 1px; + background-color: currentColor; +} diff --git a/static/src/css/global/_nav.scss b/static/src/css/global/_nav.scss @@ -0,0 +1,21 @@ +// Navigation +.nav { + align-items: center; + background: black; + top: 0; + display: flex; + flex-flow: row wrap; + justify-content: space-around; + left: 0; + position: fixed; + right: 0; + width: 100%; + + &__link { + color: white; + display: block; + line-height: 1; + padding: 1rem; + text-decoration: none; + } +} diff --git a/static/src/css/modules/_as-note.scss b/static/src/css/modules/_as-note.scss @@ -0,0 +1,8 @@ +// AS-NOTE +.as-note { + .note-index & { + border-bottom: 1px solid var(--shadow-color); + margin-bottom: 4rem; + padding-bottom: 4rem; + } +} diff --git a/static/src/css/modules/_h-entry.scss b/static/src/css/modules/_h-entry.scss @@ -0,0 +1,6 @@ +// H-ENTRY ĀµFORMAT +.h-entry { + footer { + font-size: 0.75rem; + } +} diff --git a/static/src/css/modules/_index.scss b/static/src/css/modules/_index.scss @@ -1,5 +1,4 @@ // Home/Index - .index { .logo { font: 400 3rem/1 var(--logo-font-family); diff --git a/static/src/css/modules/_note-index.scss b/static/src/css/modules/_note-index.scss @@ -1,8 +0,0 @@ -// Note Index -.note-index { - .as-note { - border-bottom: 1px solid var(--shadow-color); - margin-bottom: 4rem; - padding-bottom: 4rem; - } -} diff --git a/static/src/css/modules/_note.scss b/static/src/css/modules/_note.scss @@ -0,0 +1,14 @@ +// NOTE +.note { + padding-bottom: 0; + padding-top: 0; + + & > main { + align-items: center; + display: flex; + height: auto; + justify-content: center; + min-height: 100vh; + margin: auto; + } +} diff --git a/static/src/css/styles.scss b/static/src/css/styles.scss @@ -5,7 +5,11 @@ @import "global/abstractions/_root.scss"; @import "global/_base.scss"; @import "global/_a11y.scss"; +@import "global/_go-to-menu.scss"; +@import "global/_nav.scss"; /* Modules */ @import "modules/_index.scss"; -@import "modules/_note-index.scss"; +@import "modules/_h-entry.scss"; +@import "modules/_as-note.scss"; +@import "modules/_note.scss"; diff --git a/static/src/js/custom/init.js b/static/src/js/custom/init.js @@ -73,25 +73,25 @@ function setNavigation() { } } -function setCurrentPage() { - 'use strict'; - var navLinks = document.querySelectorAll('.nav__link'); - var lengthOf; - var pathname; - - if (navLinks.item(0)) { - pathname = window.location.pathname; - lengthOf = navLinks.length; - - while(lengthOf--) { - var navLinkHref = navLinks[lengthOf].getAttribute('href'); - - if (navLinkHref.indexOf(pathname.split('/')[1]) > 0) { - navLinks[lengthOf].removeAttribute('href'); - } - } - } -} - -setNavigation(); +// function setCurrentPage() { +// 'use strict'; +// var navLinks = document.querySelectorAll('.nav__link'); +// var lengthOf; +// var pathname; + +// if (navLinks.item(0)) { +// pathname = window.location.pathname; +// lengthOf = navLinks.length; + +// while(lengthOf--) { +// var navLinkHref = navLinks[lengthOf].getAttribute('href'); + +// if (navLinkHref.indexOf(pathname.split('/')[1]) > 0) { +// navLinks[lengthOf].removeAttribute('href'); +// } +// } +// } +// } + +// setNavigation(); //setCurrentPage(); diff --git a/templates/curriculum-vitae.mustache b/templates/curriculum-vitae.mustache @@ -40,7 +40,6 @@ </footer> </main> - {{> nav_button }} {{> nav }} {{> bottom_script }} </body> diff --git a/templates/default-index.mustache b/templates/default-index.mustache @@ -22,7 +22,6 @@ </div> </main> - {{> nav_button }} {{> nav }} {{> bottom_script }} </body> diff --git a/templates/default.mustache b/templates/default.mustache @@ -40,7 +40,6 @@ {{/ bridgy }} </article> - {{> nav_button }} {{> nav }} {{> bottom_script }} </body> diff --git a/templates/index.mustache b/templates/index.mustache @@ -37,7 +37,6 @@ </footer> </div> - {{> nav_button }} {{> nav }} {{> bottom_script }} </body> diff --git a/templates/note-index.mustache b/templates/note-index.mustache @@ -3,20 +3,24 @@ {{> head }} <body class="note-index"> + <a class="go-to-menu" href="#menu"> + <span class="visuallyhidden">Aller au </span>Menu <span class="visuallyhidden">principal</span> + <span class="go-to-menu__ico"></span> + </a> <main class="h-feed"> {{{ content }}} {{# entries }} <article class="h-entry hentry as-note" id="id{{{ shortlink }}}"> {{# citeurl }} - <blockquote class="note__blockquote p-name e-content"> - <div class="note__blockquote__quote"> + <blockquote class="p-name e-content"> + <div> {{{ content }}} </div> {{# cite }} - <footer class="note-index__footer"> + <footer> &mdash; - <cite class="note__blockquote__cite h-cite"> + <cite class="h-cite"> <a class="u-url p-author" href="{{ citeurl }}" rel="external nofollow"> {{ cite }} </a> @@ -27,7 +31,7 @@ {{/ citeurl }} {{^ citeurl }} - <div class="note__blocknote p-name e-content"> + <div class="p-name e-content"> {{{ content }}} </div> {{/ citeurl }} @@ -54,7 +58,6 @@ </p> </footer> - {{> nav_button }} {{> nav }} {{> bottom_script }} </body> diff --git a/templates/note.mustache b/templates/note.mustache @@ -8,20 +8,20 @@ <h1 class="visuallyhidden">{{ title }}</h1> {{^ citeurl }} - <div class="note__blocknote p-name e-content"> + <div class="p-name e-content"> {{{ content }}} </div> {{/ citeurl }} {{# citeurl }} - <blockquote class="note__blockquote p-name e-content"> - <div class="note__blockquote__quote"> + <blockquote class="p-name e-content"> + <div> {{{ content }}} </div> {{# cite }} - <footer class="note__blockquote__footer"> + <footer> &mdash; - <cite class="note__blockquote__cite h-cite"> + <cite class="h-cite"> <a class="u-url p-author" href="{{ citeurl }}" rel="external nofollow"> {{ cite }} </a> @@ -31,7 +31,7 @@ </blockquote> {{/ citeurl }} - <footer class="note__footer"> + <footer> {{# replyto }} <p> {{# permalink }} @@ -50,7 +50,7 @@ {{# repostof }} <p> - <a class="note__link--replyto u-repost u-repost-of" + <a class="u-repost u-repost-of" href="{{ repostof }}"> &#x2672; {{ repostof }}. </a> diff --git a/templates/partials/bottom_script.mustache b/templates/partials/bottom_script.mustache @@ -1,14 +1,15 @@ <script id="cuttingTheMustard"> - var cuttingTheMustard = ('querySelector' in document); - var bottomjs; + /* var cuttingTheMustard = ('querySelector' in document); + * var bottomjs; - if (cuttingTheMustard) { - bottomjs = document.createElement('script'); - bottomjs.src = '{{{ site.baseurl }}}/js/script.min.js'; - bottomjs.id = 'bottomjs'; + * if (cuttingTheMustard) { + * bottomjs = document.createElement('script'); + * /* bottomjs.src = '{{{ site.baseurl }}}/js/script.min.js'; */ + * bottomjs.src = '{{{ site.baseurl }}}/js/script.js'; + * bottomjs.id = 'bottomjs'; - document.body.appendChild(bottomjs); - document.querySelector('html').classList.remove('no-js'); - document.querySelector('html').classList.add('js'); - } + * document.body.appendChild(bottomjs); + * document.querySelector('html').classList.remove('no-js'); + * document.querySelector('html').classList.add('js'); + * } */ </script> diff --git a/templates/partials/nav.mustache b/templates/partials/nav.mustache @@ -1,35 +1,10 @@ -<nav class="nav"> - <div class="nav__panel" id="menu" tabindex="0"> - <div class="nav__panel__content layout"> - <h2 class="visuallyhidden">Navigation</h2> - - <ul class="nav__list" role="menubar"> - {{# navigation }} - <li class="nav__item"> - <a class="nav__link" - href="{{{ location }}}" {{# attributes }}{{{ . }}}{{/ attributes }}>{{ label }}</a> - </li> - {{/ navigation }} - </ul> - </div> - - <script id="navCloseTpl" type="text/tpl"> - <a class="nav__close" href="#" role="button"> - <span class="nav__close__text"> - Fermer <span class="visuallyhidden">le menu</span> - </span> - - <span class="nav__x"> - <svg class="nav__x__ico" fill="currentColor" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> - <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/> - <path d="M0 0h24v24H0z" fill="none"/> - </svg> - </span> - </a> - </script> - - <script id="navTrapTpl" type="text/tpl"> - <button class="nav__trap visuallyhidden">Focus Trap</button> - </script> - </div> +<nav class="nav" id="menu"> + <h2 class="visuallyhidden">Navigation</h2> + + {{# navigation }} + <a class="nav__link" + href="{{{ location }}}" {{# attributes }}{{{ . }}}{{/ attributes }}> + {{ label }} + </a> + {{/ navigation }} </nav> diff --git a/templates/partials/nav_button.mustache b/templates/partials/nav_button.mustache @@ -1,16 +0,0 @@ -<script id="navButtonTpl" type="text/tpl"> - <div class="layout"> - <a class="nav-button" href="#menu"> - <span class="nav-button__text"> - <span class="visuallyhidden">Aller au </span>Menu <span class="visuallyhidden">principal</span> - </span> - - <span class="nav-button__burger"> - <svg class="nav-button__burger__ico" fill="#fff" height="50" viewBox="0 0 24 24" width="50" xmlns="http://www.w3.org/2000/svg"> - <path d="M0 0h24v24H0z" fill="none"/> - <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> - </svg> - </span> - </a> - </div> -</script> diff --git a/templates/partials/note_body.mustache b/templates/partials/note_body.mustache @@ -1,3 +0,0 @@ -<div class="note__blocknote p-name e-content"> - {{{ content }}} -</div> diff --git a/templates/partials/quote_body.mustache b/templates/partials/quote_body.mustache @@ -1,15 +0,0 @@ -<blockquote class="note__blockquote p-name e-content"> - <div class="note__blockquote__quote"> - {{{ content }}} - </div> - {{# cite }} - <footer class="note__blockquote__footer"> - &mdash; - <cite class="note__blockquote__cite h-cite"> - <a class="u-url p-author" href="{{ citeurl }}" rel="external nofollow"> - {{ cite }} - </a> - </cite> - </footer> - {{/ cite }} -</blockquote> diff --git a/templates/tag.mustache b/templates/tag.mustache @@ -25,7 +25,6 @@ </footer> --> </article> - {{> nav_button }} {{> nav }} {{> bottom_script }} </body>