diff --git a/public/css/index.css b/public/css/index.css index 8aad6c5..34995fe 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -18,11 +18,12 @@ --text-color-link: var(--text-color); --text-color-tag: var(--contrast-color); - /* Space & Size */ - --syntax-tab-size: 2; + /* Corners */ --corner-radius: .3rem; - /* Spacing */ + /* Space & Size */ + --syntax-tab-size: 2; + --half-gap: .5rem; --single-gap: 1rem; --double-gap: 2rem; --triple-gap: 3rem; @@ -35,7 +36,7 @@ --font-xl: 2rem; --font-l: 1.5rem; --font-n: 1rem; - --font-s: .75rem; + --font-s: .85rem; --font-xs: .65rem; /* Font Weights */ @@ -66,6 +67,9 @@ @media(max-width: 556px) { :root { + /* Borders */ + --border-nav-currentpage: 15px solid var(--contrast-color); + /* Font Sizes */ --font-xxl: 2.25rem; --font-xl: 1.5rem; @@ -134,7 +138,8 @@ h3 { hr { border-top: var(--border-thin); } -main { +main { --border-nav-currentpage: 15px solid var(--contrast-color); + padding: var(--single-gap); } main > p > img, main > p > a > img { @@ -360,14 +365,10 @@ nav ul { } /* Tags */ -.post-tag, a.post-tag, .taglist li a { - align-items: center; +a.post-tag { color: var(--text-color-tag); - display: inline-flex; - justify-content: center; - padding: .2rem .4rem .2rem .4rem; + padding-right: var(--half-gap); text-decoration: none; - text-transform: capitalize; } a.post-tag:before { content: "#"; @@ -394,20 +395,20 @@ a.post-tag:hover { align-self: center; } -/* Tags list */ +/* Post Metadata */ .post-metadata { - align-items: center; - display: inline-flex; - flex-wrap: wrap; - font-size: var(--font-n); - gap: .5em; - list-style: none; margin-bottom: var(--triple-gap); - padding: 0 0 0 .4em; + margin-top: var(--single-gap); + padding: 0 0 0 .4rem; } -.post-metadata time { - margin-right: .5em; - font-size: var(--font-n); +.post-metadata p, .post-metadata ul, .post-metadata ul li, .post-metadata time { + display: flex; + flex-flow: row wrap; + font-size: var(--font-s); + font-weight: var(--weight-heavy); + list-style: none; + margin: 0; + padding-left: 0em; } /* Direct Links / Markdown Headers */ @@ -442,8 +443,9 @@ h2 + .header-anchor { } h1 { font-size: var(--font-xxl); - padding-top: 0; line-height: 2.75rem; + margin-top: var(--single-gap); + padding-top: 0; } h2, .postlist h2, main h2 { font-size: var(--font-xl); @@ -455,8 +457,8 @@ h2 + .header-anchor { /* Header */ header { - padding: 0rem .5rem var(--single-gap) .5rem; - margin-bottom: var(--single-gap); + padding: 0rem var(--half-gap) var(--single-gap) var(--half-gap); + margin-bottom: 0; } .home-link { max-width: 1rem; @@ -468,7 +470,7 @@ h2 + .header-anchor { flex-flow: row wrap; } .nav-item { - margin-right: .5rem; + margin-right: var(--half-gap); } .nav-item li { height: 2rem; @@ -477,15 +479,16 @@ h2 + .header-anchor { border-top: 2px solid var(--contrast-color); } nav ul { - display: flex; align-items: end; + display: flex; + flex-flow: row nowrap; justify-content: auto; width: auto; } /* Posts List */ .post-copy a h3 { - margin-top: .5em; + margin-top: var(--half-gap); } .postlist { padding-top: 0;