hugosoucycc

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

commit 300da3b5103c05a53ea38d41fa48473b8131d5ba
parent 98fc0b52296f19d36d12661efb35ef663e630dd5
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Mon,  3 Apr 2017 21:11:44 -0400

Put CSS vars for all the positioning properties

Diffstat:
Mstatic/dev/css/global/abstractions.css | 14+++++++++-----
Mstatic/dev/css/global/base.css | 18+++++++++---------
Mstatic/dev/css/global/grid.css | 6+++---
Mstatic/dev/css/modules/cv.css | 9---------
Mstatic/dev/css/modules/footer.css | 2+-
Mstatic/dev/css/modules/images.css | 11++++++++---
Mstatic/dev/css/modules/logo.css | 9+++++----
Mstatic/dev/css/modules/nav.css | 64+++++++++++++++++++++++++++++++++++-----------------------------
Mstatic/dev/css/modules/note.css | 18++++++------------
Mstatic/dev/css/modules/single.css | 4++--
Mstatic/dev/css/modules/webmention.css | 23++++++++---------------
11 files changed, 86 insertions(+), 92 deletions(-)

diff --git a/static/dev/css/global/abstractions.css b/static/dev/css/global/abstractions.css @@ -7,28 +7,32 @@ --base-fg-color: #111111; --base-link-color: #0000ff; --code-bg-color: rgba(255,255,255,0.4); - --code-fg-color: #444444; + --code-fg-color: #333333; --shadow-color: #cccccc; /* Typography */ --fontfamily-alpha: "Domine",Georgia,"Times New Roman",times,serif; --fontfamily-beta: "Leitura News","Domine", serif; - --base-size: 18; + --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-two-thirds: calc(var(--size-base) / 1.5); --size-quarter: calc(var(--size-base) / 4); + --size-and-quarter: calc(var(--size-base) * 1.25); --size-and-half: calc(var(--size-base) * 1.5); + --size-double: calc(var(--size-base) * 2); + --size-double-and-half: calc(var(--size-base) * 2.5); /* Layout */ --grid-max-width: 992px; @@ -37,6 +41,6 @@ @media screen and (min-width: {{ BREAKPOINTS.md }}) { :root { /* Typography */ - --base-fontsize: calc((24 / 16) * 100%); + --base-fontsize: calc((24 / 16) * 100%); } } diff --git a/static/dev/css/global/base.css b/static/dev/css/global/base.css @@ -35,37 +35,37 @@ h1, font-size:var(--size-h1); hyphens:none; margin:0 0 var(--size-and-half); - padding-top:var(--size-and-half); + padding-top:var(--size-double); } h2, .like-h2 { font-size:var(--size-h2); - margin:0.83em 0; + margin:var(--size-double-and-half) 0 var(--size-and-half); } h3, .like-h3 { font-size:var(--size-h3); - margin:var(--size-base) 0; + margin:var(--size-and-half) 0 var(--size-base); } h4, .like-h4 { font-size:var(--size-h4); - margin:1.33em 0; + margin:var(--size-base) 0; } h5, .like-h5 { font-size:var(--size-h5); - margin:1.67em 0; + margin:var(--size-base) 0; } h6, .like-h6 { font-size:var(--size-h6); - margin:2.33em 0; + margin:var(--size-base) 0; } a { @@ -140,14 +140,14 @@ nav ol { } blockquote { - border-left:10px solid #ccc; + border-left:var(--size-half) solid #ccc; display:block; margin:var(--size-base) 0; padding-left:var(--size-and-half); } blockquote span { - display:inline-block; + display:inline-block; } blockquote span:before, @@ -179,7 +179,7 @@ img { code { background:var(--code-bg-color); color:var(--code-fg-color); - font-size:var(--size-h6); + font-size:var(--size-h5); } pre { diff --git a/static/dev/css/global/grid.css b/static/dev/css/global/grid.css @@ -4,14 +4,14 @@ hyphens:auto; margin-left:auto; margin-right:auto; - max-width:var(--grid-max-width); - padding:0 1.6rem; + max-width:var(--grid-max-width); + padding-left:var(--size-base); + padding-right:var(--size-base); width:auto; } @media screen and (min-width: {{ BREAKPOINTS.sm }}) { .layout { - padding:0 2rem; text-align:left; } } diff --git a/static/dev/css/modules/cv.css b/static/dev/css/modules/cv.css @@ -1,9 +1,5 @@ /* CURRICULUM VITAE MODULE */ -.cv { - color:var(--base-fg-color); -} - .cv__title { font-size:1em; line-height:normal; @@ -26,8 +22,3 @@ .cv__main { text-align:left; } - -.cv__banner .job { - font-size:1.5em; - margin-top:0; -} diff --git a/static/dev/css/modules/footer.css b/static/dev/css/modules/footer.css @@ -1,5 +1,5 @@ /* FOOTER */ footer { - font-size:.7619047619em; + font-size:var(--size-h6); } diff --git a/static/dev/css/modules/images.css b/static/dev/css/modules/images.css @@ -1,17 +1,22 @@ /* IMAGES */ +:root { + --img-cache-size: calc(1rem * (150 / var(--base-size))); +} + .img-cache { border:1rem solid transparent; border-radius:100%; display:inline-block; float:right; - height:150px; + height:var(--img-cache-size); position:relative; overflow:hidden; - width:150px; + width:var(--img-cache-size); } .img-cache > .u-photo { - max-width:100%; + height:auto; position:relative; top:-20px; + width:auto; } diff --git a/static/dev/css/modules/logo.css b/static/dev/css/modules/logo.css @@ -1,10 +1,11 @@ /* LOGO */ + .logo { - font:normal 3.33333em/1.1 var(--fontfamily-beta); + font:normal 3.33333rem/1.1 var(--fontfamily-beta); hyphens:none; - margin:0 0 .333em; - padding-top:.333em; - padding-right:1.08333333333em; + margin:0 0 var(--size-and-quarter); + padding-top:var(--size-and-quarter); + padding-right:calc(1rem * (68 / var(--base-size))); text-shadow:3px 3px var(--shadow-color); } diff --git a/static/dev/css/modules/nav.css b/static/dev/css/modules/nav.css @@ -1,19 +1,17 @@ /* NAVIGATION */ + +:root { + --nav-btn-size: calc(1rem * (50 / var(--base-size))); +} + .nav-button, .nav__close { border:0; display:inline-block; position:absolute; - right:.9375rem; + right:var(--size-base); text-align:center; - top:.9375rem; -} - -@media screen and (min-width: {{ BREAKPOINTS.sm }}) { - .nav-button, - .nav__close { - right:1.25rem; - } + top:var(--size-base); } .nav-button:active, @@ -29,28 +27,35 @@ .nav__close:visited { background:transparent; border-bottom:0; - color:var(--base-bg-color); + color:var(--base-bg-color); } .nav-button__text, .nav__close__text { - font-size:.75em; + font-size:var(--size-h6); display:block; } .nav-button__burger, .nav__x { display:block; - height:50px; margin:0 auto; - position:relative; - width:50px; + position:relative; } .nav-button__burger { background:var(--base-fg-color); } +.nav-button__burger, +.nav-button__burger__ico, +.nav__x, +.nav__x__ico { + height:var(--nav-btn-size); + line-height:var(--nav-btn-size); + width:var(--nav-btn-size); +} + .nav__x { background:var(--code-fg-color); } @@ -81,28 +86,30 @@ width:100%; } -.mod_csstransitions .nav__panel.state--hidden, -.mod_csstransitions .nav__panel.state--visible { - transition:transform .25s ease-in-out; +@supports (transition:transform .25s ease-in-out) { + .nav__panel.state--hidden, + .nav__panel.state--visible { + transition:transform .25s ease-in-out; + } } .nav__panel.state--hidden { top:-100%; - -} - -.mod_csstransforms .nav__panel.state--hidden { - top:0; - transform:translateY(-100%); } .nav__panel.state--visible { top:0; - } -.mod_csstransforms .nav__panel.state--visible { - transform:translateY(0); +@supports (transform:translateY(-100%)) { + .nav__panel.state--hidden { + top:0; + transform:translateY(-100%); + } + + .nav__panel.state--visible { + transform:translateY(0); + } } .nav__panel__content { @@ -112,9 +119,8 @@ width:auto; } - .nav__list { - padding:1em 0; + padding:var(--size-base) 0; } .nav__link, @@ -123,7 +129,7 @@ } .nav__link { - font-size:.7619047619em; + font-size:var(--size-h6); } .no-js .nav__close { diff --git a/static/dev/css/modules/note.css b/static/dev/css/modules/note.css @@ -7,20 +7,14 @@ .note__item { border-bottom:1px solid var(--shadow-color); - margin-bottom:1.5em; - padding-bottom:1em; -} + margin-bottom:var(--size-and-half); + padding-bottom:var(--size-base); +} .note__blockquote__footer { - margin:1em 0 0; -} - -.note__footer { - font-size:14px; + margin:var(--size-base) 0 0; } -@media screen and (min-width: {{ BREAKPOINTS.sm }}) { - .note__footer { - font-size:16px; - } +.note__footer { + font-size:var(--size-h6); } diff --git a/static/dev/css/modules/single.css b/static/dev/css/modules/single.css @@ -4,6 +4,6 @@ text-align:left; } -.single h1 { - padding-right:66px; +.single h1:first-child { + padding-right:calc(1rem * (74 / var(--base-size))); } diff --git a/static/dev/css/modules/webmention.css b/static/dev/css/modules/webmention.css @@ -1,11 +1,11 @@ .webmention-container { background:rgba(9,9,9,0.1); - margin-top:1.5em; - padding:1em; + margin-top:var(--size-and-half); + padding:var(--size-base); } .webmention-mention { - margin-bottom:1em; + margin-bottom:var(--size-base); } .webmention-mention:last-child { @@ -14,14 +14,7 @@ .webmention-author, .webmention-summary { - font-size:14px; -} - -@media screen and (min-width: 48em) { - .webmention-author, - .webmention-summary { - font-size:16px; - } + font-size:var(--size-h6); } .webmention-author a { @@ -30,15 +23,15 @@ .webmention-author img { display:inline-block; - margin-right:.5em; - max-width:32px; + margin-right:var(--size-half); + max-width:calc(1rem * (32 / var(--base-size))); height:auto; } .webmention-summary { - margin:.5em 0 0; + margin:var(--size-half) 0 0; } .webmention-published { - font-size:12px; + font-size:var(--size-two-thirds); }