hugosoucycc

[ARCHIVED] Another old source code of <hugo.soucy.cc>.
Log | Files | Refs | Submodules

commit cf10fafd0f6322fbb7fab092082d86018b5992f6
parent 118398a981f951c59e915be2f2fcd6fc597fdef3
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Fri, 31 Mar 2017 06:23:08 -0400

Create an apply new typography vars.

Diffstat:
Mstatic/dev/css/global/abstractions.css | 21++++++++++++++++-----
Mstatic/dev/css/global/base.css | 42+++++++++++++++++++++---------------------
2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/static/dev/css/global/abstractions.css b/static/dev/css/global/abstractions.css @@ -14,8 +14,21 @@ --fontfamily-alpha: "Domine",Georgia,"Times New Roman",times,serif; --fontfamily-beta: "Leitura News","Domine", serif; - /* 18px / 16px */ - --base-fontsize: 112.5%; + --base-size: 18; + --base-fontsize: calc((var(--base-size) / 16) * 100%); + --base-lineheight: 1.5; + + --size-h1: calc(1rem * (36 / var(--base-size))); + --size-h2: calc(1rem * (27 / var(--base-size))); + --size-h3: calc(1rem * (21 / var(--base-size))); + --size-h4: calc(1rem * (18 / var(--base-size))); + --size-h5: calc(1rem * (16 / var(--base-size))); + --size-h6: calc(1rem * (14 / var(--base-size))); + + --size-base: calc(1rem * (var(--base-size) / var(--base-size))); + --size-half: calc(var(--size-base) / 2); + --size-quarter: calc(var(--size-base) / 4); + --size-and-half: calc(var(--size-base) * 1.5); /* Layout */ --grid-max-width: 992px; @@ -24,8 +37,6 @@ @media screen and (min-width: {{ BREAKPOINTS.md }}) { :root { /* Typography */ - - /* 24px / 16px */ - --base-fontsize: 150%; + --base-fontsize: calc((24 / 16) * 100%); } } diff --git a/static/dev/css/global/base.css b/static/dev/css/global/base.css @@ -7,7 +7,7 @@ textarea { color:var(--base-fg-color); font-family:var(--fontfamily-alpha); font-size:var(--base-fontsize); - line-height:1.5; + line-height:var(--base-lineheight); } html, @@ -26,45 +26,45 @@ hr { height:1px; border:0; border-top:1px solid var(--base-fg-color); - margin:1em 0; + margin:var(--size-base) 0; padding:0; } h1, .like-h1 { - font-size: {{ SIZES.36 }}; + font-size:var(--size-h1);; hyphens:none; - margin:0 0 .67em; - padding-top:.67em; + margin:0 0 var(--size-and-half); + padding-top:var(--size-and-half); } h2, .like-h2 { - font-size: {{ SIZES.27 }}; + font-size:var(--size-h2); margin:0.83em 0; } h3, .like-h3 { - font-size: {{ SIZES.21 }}; - margin:1em 0 1em; + font-size:var(--size-h3);; + margin:var(--size-base) 0; } h4, .like-h4 { - font-size:1em; + font-size:var(--size-h4);; margin:1.33em 0; } h5, .like-h5 { - font-size:0.83em; + font-size:var(--size-h5);; margin:1.67em 0; } h6, .like-h6 { - font-size:0.67em; + font-size:var(--size-h6);; margin:2.33em 0; } @@ -89,17 +89,17 @@ a:hover { ol, ul { - margin-left:1em; + margin-left:var(--size-base); padding:0; } ul ul { - margin-bottom:.5em; - margin-top:.5em; + margin-bottom:var(--size-half); + margin-top:var(--size-half); } li { - margin-bottom:.25em; + margin-bottom:var(--size-quarter); } address { @@ -111,8 +111,8 @@ dl, menu, ol, ul { - margin-bottom:1em; - margin-top:1em; + margin-bottom:var(--size-base); + margin-top:var(--size-base); } dd { @@ -142,8 +142,8 @@ nav ol { blockquote { border-left:10px solid #ccc; display:block; - margin:1em 0; - padding-left:1.5em; + margin:var(--size-base) 0; + padding-left:var(--size-and-half); } blockquote span { @@ -179,13 +179,13 @@ img { code { background:var(--code-bg-color); color:var(--code-fg-color); - font-size:.85em; + font-size:var(--size-h6);; } pre { background:var(--code-bg-color); overflow-x:auto; - padding:.5em; + padding:var(--size-half); } pre code {