commit d1e613430a034d6e4b0a79cfd6b6d355884684d7
parent e8ff782455641ae7ae5e4b38a48a5a69ca2b1e3d
Author: Oscar Benedito <oscar@oscarbenedito.com>
Date:   Wed, 29 Jul 2020 16:15:47 +0200

Major style.scss cleanup and design change

Diffstat:
Massets/css/style.scss | 545++++++++++++++++++++++++++++++-------------------------------------------------
Mlayouts/_default/single.html | 10+++++-----
Mlayouts/archive/single.html | 4++--
Mlayouts/page/single.html | 4++--
Mlayouts/partials/header.html | 2+-
5 files changed, 215 insertions(+), 350 deletions(-)

diff --git a/assets/css/style.scss b/assets/css/style.scss @@ -13,94 +13,67 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>. - -This file incorporates work covered by the following copyright and -permission notice: - - Copyright (c) 2019 nanxiaobei - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. */ -/* Variables --------------------------------------------------- */ +// variables {{{ + @mixin lightcolors { --text-color: hsl(0, 0%, 12%); --text-strong: hsl(0, 0%, 10%); - --secondary-text-color: hsl(0, 0%, 44%); - --tertiary: hsl(0, 0%, 94%); + --secondary-text: hsl(0, 0%, 44%); + --primary-bg: #7ec27b; + --primary-logo: #6dba6a; + --primary-active: #6dba6a; + --primary-dark: #50914a; + --primary-invert: #fff; + --hr-color: hsl(0, 0%, 94%); + --hr-dark: hsl(0, 0%, 88%); --button-color: hsl(0, 0%, 74%); - --card-background-color: #fff; - - --primary-color: #7ec27b; - --primary-invert-color: #fff; - --primary-color-darken: #6dba6a; - --links: #4b8c44; --background: #fff; - --hljs-bg: #1c1d21; --code-bg: hsl(0, 0%, 96%); - --border: hsl(0, 0%, 88%); } @mixin darkcolors { --text-color: hsl(0, 0%, 80%); --text-strong: hsl(0, 0%, 80%); - --secondary-text-color: hsl(0, 0%, 55%); - --tertiary: hsl(0, 0%, 15%); + --secondary-text: hsl(0, 0%, 55%); + --primary-bg: #233951; + --primary-logo: #385c81; + --primary-active: #1b2c3f; + --primary-dark: #4d80b3; + --primary-invert: hsl(0, 0%, 80%); + --hr-color: hsl(0, 0%, 20%); + --hr-dark: hsl(0, 0%, 20%); --button-color: hsl(0, 0%, 70%); - --card-background-color: hsl(0, 0%, 15%); - - --primary-color: #233951; - --primary-invert-color: hsl(0, 0%, 80%); - --primary-color-darken: #1b2c3f; - --links: hsl(210, 40%, 50%); --background: hsl(0, 0%, 11%); - --hljs-bg: #1c1d21; --code-bg: hsl(0, 0%, 11%); - --border: hsl(0, 0%, 20%); } :root { - --gap: 24px; - --content-gap: 25px; - --nav-width: 960px; - --main-width: 860px; - --post-list-width: 860px; - --navbar-height: 50px; - --footer-height: 60px; - --radius: 8px; + --gap: 1.5rem; + --content-gap: 1.5rem; + --main-width: 800px; @include lightcolors; @media (prefers-color-scheme: dark) { @include darkcolors; } } -/* Reset --------------------------------------------------- */ + +// variables }}} + +// defaults {{{ + *, *::before, *::after { box-sizing: border-box; } +html { + scrollbar-color: var(--primary-bg) transparent; +} body { margin: 0; color: var(--text-color); - font-family: 'FreeSans', sans-serif; - font-size: 18px; + font-family: sans-serif; line-height: 1.7; word-break: break-word; background: var(--background); @@ -129,9 +102,9 @@ h6 { line-height: 1.2; color: var(--text-strong); } -p { - margin-top: 0; - margin-bottom: 0; +h1 { + margin-bottom: 2px; + font-size: 2em; } p, li { @@ -140,8 +113,6 @@ li { strong, b { font-weight: 700; -} -strong { color: var(--text-strong); } ul { @@ -149,82 +120,69 @@ ul { padding: 0; } a { - color: var(--links); + color: var(--primary-dark); text-decoration: none; } a:hover { text-decoration: underline; } -figure { - margin: 0; -} table { width: 100%; border-collapse: collapse; border-spacing: 0; + margin-bottom: 2rem; + th, + td { + min-width: 80px; + padding: 0.75rem 0.5rem; + line-height: 1.5; + border-bottom: 1px solid var(--hr-dark); + } + th { + font-size: 0.9em; + text-align: left; + } } -button, -input, -textarea { - padding: 0; - font: inherit; - background: transparent; - border: 0; - -webkit-appearance: none; -} -button, -input[type="button"], -input[type="submit"] { - cursor: pointer; -} -input, -textarea { - padding: 0; - border: 0; - outline: 0; -} -input:-webkit-autofill, -textarea:-webkit-autofill { - box-shadow: 0 0 0 50px #fff inset; -} -img { - display: block; - max-width: 100%; -} -svg.basic-svg { - display: inline-block; - fill: var(--text-color); - stroke: var(--text-color); +svg { + fill: currentColor; + stroke: currentColor; max-width: 400px; } -/* Header --------------------------------------------------- */ + +// defaults }}} + +// header {{{ + header#page-header { - border-bottom: 2px solid var(--tertiary); + border-bottom: 2px solid var(--hr-color); padding: calc(1.5 * var(--gap)) var(--gap); .content { max-width: var(--main-width); margin-right: auto; margin-left: auto; - .logo { /* TODO Decide height */ - height: 25px; - fill: var(--primary-color); + .logo { + height: 1.6em; /* this is also specified using inline css */ + fill: var(--primary-logo); + stroke: none; } .logo:hover { - fill: var(--primary-color-darken); /* TODO This color should be darker */ + fill: var(--primary-dark); } nav { - color: #666; + color: var(--secondary-text); a { - color: #666; + color: var(--secondary-text); } } } } -/* Footer --------------------------------------------------- */ + +// header }}} + +// footer {{{ + footer#page-footer { - border-top: 2px solid var(--tertiary); + border-top: 2px solid var(--hr-color); padding: calc(1.5 * var(--gap)) var(--gap); .content { max-width: var(--main-width); @@ -232,56 +190,52 @@ footer#page-footer { margin-left: auto; text-align: center; nav { - color: #666; + color: var(--secondary-text); a { - color: #666; + color: var(--secondary-text); } } } } -/* Main --------------------------------------------------- */ + +// footer }}} + +// main {{{ + main { position: relative; max-width: calc(var(--main-width) + var(--gap) * 2); - margin-left: auto; - margin-right: auto; - padding: var(--gap); - padding-bottom: calc(var(--gap) * 2); -} -main.list { - max-width: calc(var(--post-list-width) + var(--gap) * 2); + padding: 0 var(--gap); + margin: var(--gap) auto calc(var(--gap) * 2) auto; } .pagination { display: flex; - margin-top: calc(var(--content-gap) * 2); } .button { - color: var(--secondary-text-color); - font-size: 13px; - line-height: 36px; + color: var(--secondary-text); + font-size: 0.8em; + line-height: 2.8em; background: var(--background); - border-radius: calc(36px / 2); - padding-left: 16px; - padding-right: 18px; + border-radius: calc(2.8em / 2); + padding-left: 1.2em; + padding-right: 1.2em; border: 1px solid transparent; border-color: var(--button-color); border-width: 1px; } .button:hover { color: var(--background); - border-color: rgba(0, 0, 0, 0); + border-color: transparent; background: var(--button-color); - text-decoration: none !important; + text-decoration: none; } - .button.right { - padding-left: 16px; - padding-right: 18px; margin-left: auto; } -/* Post entry summary --------------------------------------------------- */ + +// main }}} + +// post entry summary {{{ main.list > header { margin-bottom: var(--gap); @@ -293,233 +247,142 @@ article.summary { color: var(--text-color); } p { - margin: 0; + margin: 0 !important; } header { margin-bottom: 1rem; } .metadata { - color: var(--secondary-text-color); + color: var(--secondary-text); a { - color: var(--secondary-text-color); + color: var(--secondary-text); } } } article.summary:not(:first-of-type) { - border-top: 2px solid var(--tertiary); + border-top: 2px solid var(--hr-color); } -/* Article --------------------------------------------------- */ + +// post entry summary }}} + +// article {{{ + article { header { margin-bottom: var(--content-gap); } - .post-title { - margin-bottom: 2px; - font-size: 2em; - transform: translateX(-2px); - } - .post-meta { - color: var(--secondary-text-color); - font-size: 16px; - } - .post-content h1 { - margin-top: 40px; - margin-bottom: 32px; - } - .post-content h2 { - margin-top: 32px; - margin-bottom: 24px; - } - .post-content h3 { - margin-top: 24px; - margin-bottom: 16px; - } - .post-content h4, - .post-content h5, - .post-content h6 { - margin-top: 24px; - margin-bottom: 8px; - } - .post-content h1 { - font-size: 40px; - } - .post-content h2 { - font-size: 32px; - } - .post-content h3 { - font-size: 24px; - } - .post-content h4 { - font-size: 19px; - } - .post-content h5 { - font-size: 18px; - } - .post-content h6 { - font-size: 16px; - } - .post-content a code { - margin-left: 0; - margin-right: 0; - border-radius: 0; - box-shadow: 0 -1px 0 var(--text-color) inset; - } - .post-content del { - text-decoration: none; - background: linear-gradient(to right, var(--text-color) 100%, transparent 0) 0 - 50% / 1px 1px repeat-x; - } - .post-content p, - .post-content ul, - .post-content ol, - .post-content dl { - margin-bottom: var(--content-gap); - } - .post-content ul, - .post-content ol { - padding-left: 20px; - } - .post-content li { - margin-top: 5px; - } - .post-content li p { - margin-bottom: 0; - } - .post-content dl { - display: flex; - flex-wrap: wrap; - margin: 0; - } - .post-content dt { - width: 25%; - font-weight: 700; - } - .post-content dd { - width: 75%; - margin-left: 0; - padding-left: 10px; - } - .post-content dt ~ dt, - .post-content dd ~ dd { - margin-top: 10px; - } - .post-content table { - margin-bottom: 32px; - } - .post-content table th, - .post-content table:not(.highlighttable) td { - min-width: 80px; - padding: 12px 8px; - line-height: 1.5; - border-bottom: 1px solid var(--border); - } - .post-content table th { - font-size: 14px; - text-align: left; - } - .post-content table:not(.highlighttable) td code:only-child { - margin-left: 0; - margin-right: 0; - } - .post-content .highlight, - .post-content pre { - margin-bottom: 32px; - border-radius: var(--radius); - } - .post-content pre { - overflow-x: auto; - } - .post-content .highlight pre { - margin-left: 0; - margin-right: 0; - margin-bottom: 0; - border: 1px solid var(--border); - background-color: var(--code-bg) !important; - } - /* table */ - .post-content .highlighttable { - table-layout: fixed; - } - .post-content .highlighttable td:first-child { - width: 40px; - } - .post-content .highlighttable td .linenodiv { - padding-right: 0 !important; - } - .post-content .highlighttable td .linenodiv pre, - .post-content .highlighttable td .highlight { - margin-bottom: 0; - } - .post-content .highlighttable td .highlight pre code::-webkit-scrollbar { - display: none; - } - /* inline */ - .post-content .highlight span { - background: transparent !important; - } - - .post-content code { - border: 1px solid var(--border); - background-color: var(--code-bg); - margin-left: 4px; - margin-right: 4px; - padding: 4px 6px; - font-family: monospace; - line-height: 1.5; - border-radius: 2px; - } - .post-content pre code { - display: block; - margin-left: 0; - margin-right: 0; - padding: var(--gap); - border: none; - background: none; - } - .post-content blockquote { - padding: 0 0 0 21px; - border-left: 3px solid var(--secondary-text-color); - color: var(--secondary-text-color); - } - .post-content hr { - height: 2px; - margin-top: var(--content-gap); - margin-bottom: var(--content-gap); - background: var(--tertiary); - border-top: 0; - border-bottom: 0; - border: 0px; + .metadata { + color: var(--secondary-text); + a { + color: var(--secondary-text); + } } - .post-content iframe { - max-width: 100%; + .content { + h1 { + margin-top: 2.5rem; + margin-bottom: 2rem; + } + h2 { + margin-top: 2rem; + margin-bottom: 1.5rem; + } + h3 { + margin-top: 1.5rem; + margin-bottom: 1rem; + } + h4, + h5, + h6 { + margin-top: 1.5rem; + margin-bottom: 0.5rem; + } + p, + ul, + ol { + margin-bottom: var(--content-gap); + } + ul, + ol { + padding-left: 1.25rem; + } + li { + margin-top: 0.3rem; + } + li p { + margin-bottom: 0; + } + pre { + margin-bottom: var(--gap); + border-radius: 4px; + overflow-x: auto; + margin-left: 0; + margin-right: 0; + border: 1px solid var(--hr-dark); + background-color: var(--code-bg) !important; + } + code { + border: 1px solid var(--hr-dark); + background-color: var(--code-bg); + padding: 4px 6px; + font-family: monospace; + line-height: 1.5; + border-radius: 2px; + } + pre code { + display: block; + margin-left: 0; + margin-right: 0; + padding: calc(var(--gap) / 2); + border: none; + background: none; + } + blockquote { + padding: 0 0 0 1.2rem; + border-left: 3px solid var(--secondary-text); + color: var(--secondary-text); + } + hr { + height: 2px; + margin-top: var(--content-gap); + margin-bottom: var(--content-gap); + background: var(--hr-color); + border-top: 0; + border-bottom: 0; + border: 0; + } } footer { margin-top: var(--content-gap); + margin-bottom: var(--content-gap); } - .post-tags li { - display: inline-block; - margin-bottom: 8px; - } - .post-tags li:not(:last-child) { - margin-right: 8px; - } - .post-tags a { - display: block; - padding-left: 14px; - padding-right: 14px; - color: var(--primary-invert-color); - font-size: 14px; - line-height: 34px; - background: var(--primary-color); - border-radius: 2px; - } - .post-tags a:hover { - background: var(--primary-color-darken); + .tags { + li { + display: inline-block; + margin-bottom: 0.5rem; + } + li:not(:last-child) { + margin-right: 0.5rem; + } + a { + display: block; + padding-left: 14px; + padding-right: 14px; + color: var(--primary-invert); + font-size: 14px; + line-height: 34px; + background: var(--primary-bg); + border-radius: 2px; + } + a:hover { + background: var(--primary-active); + } } } -/* Others --------------------------------------------------- */ + +// article }}} + +// other {{{ + .table-container { overflow-x: auto; } @@ -527,3 +390,5 @@ article { overflow-x: auto; margin-top: -21.5px; } + +// other }}} diff --git a/layouts/_default/single.html b/layouts/_default/single.html @@ -2,14 +2,14 @@ <main> <article class="h-entry"> <header> - <h1 class="post-title p-name">{{ .Title }}</h1> - <div class="post-meta">{{ with .Params.categories }}<a class="p-category" style="color: var(--secondary-text-color)" href="{{ "blog/categories/" | relURL }}{{ . | urlize }}">{{ . }}</a> &middot; {{ end }}<data class="dt-published" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</data>{{ if ne .Lastmod .Date }} (last modified on <data class="dt-updated" datetime="{{ .Lastmod.Format "2006-01-02" }}">{{ .Lastmod.Format "January 2, 2006" }}</data>){{ end }} + <h1 class="p-name">{{ .Title }}</h1> + <div class="metadata">{{ with .Params.categories }}<a class="p-category" href="{{ "blog/categories/" | relURL }}{{ . | urlize }}">{{ . }}</a> &middot; {{ end }}<a class="u-url" href="{{ .RelPermalink }}"><data class="dt-published" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</data></a>{{ if ne .Lastmod .Date }} (last modified on <data class="dt-updated" datetime="{{ .Lastmod.Format "2006-01-02" }}">{{ .Lastmod.Format "January 2, 2006" }}</data>){{ end }} </div> </header> - <div class="post-content e-content">{{ .Content }}</div> + <div class="content e-content">{{ .Content }}</div> {{- if .Params.tags }} <footer> - <ul class="post-tags"> + <ul class="tags"> {{- range .Params.tags | sort }} <li><a class="p-category" href="{{ "blog/tags/" | relURL }}{{ . | urlize }}">{{ . }}</a></li> {{- end }} @@ -19,7 +19,7 @@ </article> {{- if or .NextInSection .PrevInSection }} - <nav class="pagination transparent"> + <nav class="pagination"> {{- if .NextInSection }} <a class="button" href="{{ .NextInSection.RelPermalink }}" title="{{ .NextInSection.Title }}">&larr; Newer Post</a> {{- end }} diff --git a/layouts/archive/single.html b/layouts/archive/single.html @@ -2,9 +2,9 @@ <main> <article> <header> - <h1 class="post-title">{{ .Title }}</h1> + <h1>{{ .Title }}</h1> </header> - <div class="post-content"> + <div class="content"> <h2>Posts ({{ len (where (where .Site.Pages "File.Dir" "==" "blog/") "IsPage" true) }})</h2> {{- range .Site.Params.active_years }} {{- $y := . }} diff --git a/layouts/page/single.html b/layouts/page/single.html @@ -2,9 +2,9 @@ <main> <article> <header> - <h1 class="post-title">{{ .Title }}</h1> + <h1>{{ .Title }}</h1> </header> - <div class="post-content">{{ .Content }}</div> + <div class="content">{{ .Content }}</div> </article> </main> {{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html @@ -1,7 +1,7 @@ <header id="page-header"> <div class="content"> {{- $logo := resources.Get "img/logo.svg" | fingerprint }} - <a href="/"><svg class="logo" viewBox="0 0 84.665 8.89"><use xlink:href="{{ $logo.RelPermalink }}#l"></use></svg></a> + <a href="/"><svg class="logo" style="height: 1.6em;" viewBox="0 0 84.665 8.89"><use xlink:href="{{ $logo.RelPermalink }}#l"></use></svg></a> <nav><a href="/blog/">Blog</a> &middot; <a href="/resources/">Resources</a> &middot; <a href="https://git.oscarbenedito.com">Git</a></nav> </div> </header>