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:
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">
+ —
+ <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">
+ —
+ <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
