jcarrier-theme

A Grav CMS theme for <https://jacynthecarrier.com>.
git clone git://soucy.cc/jcarrier-theme.git
Log | Files | Refs | README | LICENSE

commit 65ffdbe777d9d9f8d2b3bf32dd14ff7632ceef64
parent 926397b7697c86d1af8fc1ebe5c41e105499b5cc
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Sat, 21 Nov 2020 21:20:23 -0500

Import new style sheets and process scss

Diffstat:
Mcss/index.css | 105++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
Msrc/scss/index.scss | 8++++++++
2 files changed, 109 insertions(+), 4 deletions(-)

diff --git a/css/index.css b/css/index.css @@ -1,18 +1,20 @@ /* Main SCSS */ :root { - --base-fontfamily: "Lucida Console", Courier, monospace; + --base-fontfamily: Arial, Helvetica, sans-serif; --base-fontsize: 16; --base-lineheight: 1.5; --grid-maxwidth: 1140px; } :root { + --base-blue: #27346D; --base-red: #e31d25; --base-darkest: #000000; --base-brightest: #ffffff; --base-brightest-grey: #eeeeee; + --base-grey: #666666; --base-bg: var(--base-brightest); --base-fg: var(--base-darkest); - --base-link: var(--base-red); } + --base-link: var(--base-blue); } html, body { @@ -75,12 +77,107 @@ nav ul { height: 100%; } .layout__aside { - background: aqua; flex-basis: 15rem; flex-grow: 1; } .layout__main { - background: aquamarine; flex-basis: 0; flex-grow: 999; min-width: calc(75% - 1rem); } + +.grid { + display: grid; + grid-gap: 1.5rem; } + +@supports (width: min(240px, 100%)) { + .grid { + grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } } + +.header-banner { + padding: 1rem; } + .header-banner > * + * { + margin-top: 1.5rem; } + +.main { + padding: 1rem; } + .main > header:first-child h1 { + margin-top: 0; } + +.footer-banner { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + font-size: 0.8125rem; + justify-content: space-between; + padding: 1rem; } + .footer-banner dd { + margin-left: 0; } + +.logo { + color: var(--base-fg); + display: block; + font: 2rem serif; + text-decoration: none; } + +.nav a { + display: block; + padding: 0.25rem 0; } + .nav a, .nav a:active { + text-decoration: none; } + .nav a[aria-current="page"], .nav a:focus, .nav a:hover { + text-decoration: underline; } + +.project-list__item { + display: flex; + flex-direction: column-reverse; + justify-content: flex-end; + position: relative; } + .project-list__item > * { + margin: 0; } + +.project-list__title { + font-size: 1rem; } + .project-list__title a { + all: inherit; } + .project-list__title a:after { + bottom: 0; + content: ''; + cursor: pointer; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; } + +.news-list > * + * { + border-top: 1px dotted var(--base-blue); + margin-top: 3rem; + padding-top: 3rem; } + +.news-list__item { + display: flex; + flex-direction: column; + position: relative; } + .news-list__item:focus-within, .news-list__item:hover { + background: var(--base-brightest-grey); + box-shadow: 0 0 0 0.625rem var(--base-brightest-grey); } + .news-list__item > * { + margin: 0; } + +.news-list__title a { + all: inherit; } + .news-list__title a:after { + bottom: 0; + content: ''; + cursor: pointer; + display: block; + left: 0; + position: absolute; + right: 0; + top: 0; } + +.news-list__date { + color: var(--base-blue); + font-size: 0.75rem; + order: -1; + margin: 0 0 1em; } diff --git a/src/scss/index.scss b/src/scss/index.scss @@ -5,3 +5,11 @@ @import "global/_base"; @import "modules/_layout"; +@import "modules/_grid"; +@import "modules/_header-banner"; +@import "modules/_main"; +@import "modules/_footer-banner"; +@import "modules/_logo"; +@import "modules/_nav"; +@import "modules/_project"; +@import "modules/_news";