hugo.soucy.cc

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

commit 633f5af3272323f33ab2a4ddb4bd4dbd25fca958
parent 8af825b1c671f73e6e62ecbecd1ecee8a2aaaf34
Author: Hugo Soucy <hugo.soucy@equisoft.com>
Date:   Wed, 28 Aug 2019 09:48:01 -0400

Continue the design refactoring

Diffstat:
Astatic/src/css/global/_a11y.scss | 11+++++++++++
Mstatic/src/css/global/_base.scss | 34++++++++++++++++++++++++++++------
Mstatic/src/css/global/abstractions/_root.scss | 4++--
Astatic/src/css/modules/_index.scss | 8++++++++
Astatic/src/css/modules/_note-index.scss | 8++++++++
Mstatic/src/css/styles.scss | 5+++++
Mtemplates/index.mustache | 36+++++++++++++++++-------------------
Mtemplates/note-index.mustache | 66++++++++++++++++++++++++++++++++++++++++--------------------------
Mtemplates/note.mustache | 20++++++++++++++++++--
Rtemplates/partials/note-body.mustache -> templates/partials/note_body.mustache | 0
Rtemplates/partials/quote-body.mustache -> templates/partials/quote_body.mustache | 0
11 files changed, 137 insertions(+), 55 deletions(-)

diff --git a/static/src/css/global/_a11y.scss b/static/src/css/global/_a11y.scss @@ -0,0 +1,11 @@ +// Accessibility Helpers + +.visuallyhidden { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px); + height: 1px !important; + overflow: hidden; + padding:0 !important; + position: absolute !important; + width: 1px !important; +} diff --git a/static/src/css/global/_base.scss b/static/src/css/global/_base.scss @@ -6,11 +6,6 @@ body { position:relative; } -body { - background: var(--base-bg-color) url("//assets.soucy.cc/images/noise.png") repeat; - margin: 0; -} - body, button, input, @@ -20,6 +15,33 @@ textarea { font: 1rem/1.6 var(--base-font-family); } +body { + background: var(--base-bg-color) url("//assets.soucy.cc/images/noise.png") repeat; + margin: 2rem; +} + +p, +pre { + margin: 1.25rem 0 1.25rem; +} + +pre { + background: var(--code-bg-color); + overflow: auto; + padding: 1rem; +} + +code { + background: var(--code-bg-color); + color: var(--code-fg-color); + font-size: .85rem; +} + +img { + max-width: 100%; + width: auto; +} + .logo { - font: 400 3rem/1 var(--logo-font-family); + } diff --git a/static/src/css/global/abstractions/_root.scss b/static/src/css/global/abstractions/_root.scss @@ -7,8 +7,8 @@ --base-fg-color: #{$color-alpha}; --base-link-color: #{$color-beta}; --base-visited-color: #{$color-zeta}; - --code-bg-color: #{$color-gamma}; - --code-fg-color: #{$color-delta}; + --code-bg-color: #{$color-omega}; + --code-fg-color: #{$color-zeta}; --shadow-color: #{$color-epsilon}; /* Fonts */ diff --git a/static/src/css/modules/_index.scss b/static/src/css/modules/_index.scss @@ -0,0 +1,8 @@ +// Home/Index + +.index { + .logo { + font: 400 3rem/1 var(--logo-font-family); + text-shadow: 3px 3px var(--shadow-color); + } +} diff --git a/static/src/css/modules/_note-index.scss b/static/src/css/modules/_note-index.scss @@ -0,0 +1,8 @@ +// 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/styles.scss b/static/src/css/styles.scss @@ -4,3 +4,8 @@ @import "global/abstractions/_font-faces.scss"; @import "global/abstractions/_root.scss"; @import "global/_base.scss"; +@import "global/_a11y.scss"; + +/* Modules */ +@import "modules/_index.scss"; +@import "modules/_note-index.scss"; diff --git a/templates/index.mustache b/templates/index.mustache @@ -2,32 +2,30 @@ <html lang="{{ site.language }}"> {{> head }} - <body id="index" - prefix="foaf: http://xmlns.com/foaf/0.1/ dc: http://purl.org/dc/terms/"> + <body + class="index" + id="index" + prefix="foaf: http://xmlns.com/foaf/0.1/ dc: http://purl.org/dc/terms/"> <div class="h-card" - id="hs" - resource="#hs" - typeof="Person" - vocab="http://schema.org/"> - <header> - <div class="layout"> - <h1 class="logo p-name" property="name">{{ site.author.name }}</h1> - <h2 class="visuallyhidden p-job-title" property="jobTitle">{{ site.author.jobtitle }}</h2> - <a class="u-url visuallyhidden" - href="{{{ site.baseurl }}}" - rel="me" - property="url">{{{ site.baseurl }}}</a> - </div> + id="hs" + resource="#hs" + typeof="Person" + vocab="http://schema.org/"> + <header role="banner"> + <h1 class="logo p-name" property="name">{{ site.author.name }}</h1> + <h2 class="visuallyhidden p-job-title" property="jobTitle">{{ site.author.jobtitle }}</h2> + <a class="u-url visuallyhidden" + href="{{{ site.baseurl }}}" + rel="me" + property="url">{{{ site.baseurl }}}</a> </header> <main> - <div class="layout"> - {{{ content }}} - </div> + {{{ content }}} </main> <footer> - <address class="layout"> + <address> <hr/> Vous pouvez communiquer avec moi par courriel à l'adresse <a href="mailto:{{ site.author.email }}" property="email" rel="me"> diff --git a/templates/note-index.mustache b/templates/note-index.mustache @@ -2,38 +2,52 @@ <html lang="{{ site.language }}"> {{> head }} - <body id="note" class="note"> - <main class="note__main"> + <body class="note-index"> + <main class="h-feed"> {{{ content }}} - <ol class="note__list"> - {{# entries }} - <li class="note__item h-entry hentry as-note" id="id{{{ shortlink }}}"> - {{# citeurl }} - {{> quote-body }} - {{/ citeurl }} + {{# 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"> + {{{ content }}} + </div> + {{# cite }} + <footer class="note-index__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> + {{/ citeurl }} - {{^ citeurl }} - {{> note-body }} - {{/ citeurl }} + {{^ citeurl }} + <div class="note__blocknote p-name e-content"> + {{{ content }}} + </div> + {{/ citeurl }} - <footer class="note__footer"> - Publié le - <a class="note__link u-url u-uid u-syndication" - {{# permalink }} - href="{{ permalink }}" - {{/ permalink }} - rel="syndication"> - <time class="dt-published dt-updated" {{# datetime }}datetime="{{ date }}T{{ datetime }}"{{/ datetime }}>{{ date }}</time></a>. - <span class="visuallyhidden">par <em class="p-author author h-card">{{ site.author.name }}</em></span> - </footer> - </li> - {{/entries}} - </ol> + <footer> + Publié le + <a class="u-url u-uid u-syndication" + {{# permalink }} + href="{{ permalink }}" + {{/ permalink }} + rel="syndication"> + <time class="dt-published dt-updated" {{# datetime }}datetime="{{ date }}T{{ datetime }}"{{/ datetime }}>{{ date }}</time></a>. + <span class="visuallyhidden">par <em class="p-author author h-card">{{ site.author.name }}</em></span> + </footer> + </article> + {{/entries}} </main> - <footer class="note_footer-banner footer-banner"> - <p class="layout"> + <footer class="footer-banner"> + <p> <a href="{{{ site.baseurl }}}/note/2018"><time>2018</time></a> | <a href="{{{ site.baseurl }}}/note/2017"><time>2017</time></a> | <a href="{{{ site.baseurl }}}/note/2016"><time>2016</time></a> diff --git a/templates/note.mustache b/templates/note.mustache @@ -8,11 +8,27 @@ <h1 class="visuallyhidden">{{ title }}</h1> {{^ citeurl }} - {{> note-body }} + <div class="note__blocknote p-name e-content"> + {{{ content }}} + </div> {{/ citeurl }} {{# citeurl }} - {{> quote-body }} + <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> {{/ citeurl }} <footer class="note__footer"> diff --git a/templates/partials/note-body.mustache b/templates/partials/note_body.mustache diff --git a/templates/partials/quote-body.mustache b/templates/partials/quote_body.mustache