diff --git a/public/css/index.css b/public/css/index.css index 6553438..8aad6c5 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -16,7 +16,7 @@ --background-color: #FAF5F5; --text-color: var(--color-gray-90); --text-color-link: var(--text-color); - --text-color-tag: rgba(255,255,255,1); + --text-color-tag: var(--contrast-color); /* Space & Size */ --syntax-tab-size: 2; @@ -25,9 +25,10 @@ /* Spacing */ --single-gap: 1rem; --double-gap: 2rem; + --triple-gap: 3rem; - /* Animation Timing */ - --transition-time: .3s; + /* Transitions */ + --transition-normal: all .3s; /* Font Sizes */ --font-xxl: 3.75rem; @@ -80,13 +81,13 @@ html, body { - padding: 0; - margin: 0 auto; - font-family: var(--font-family); - font-weight: var(--weight-normal); - font-variant-Ligatures: normal; - color: var(--text-color); background-color: var(--background-color); + color: var(--text-color); + font-family: var(--font-family); + font-variant-Ligatures: normal; + font-weight: var(--weight-normal); + margin: 0 auto; + padding: 0; } html { overflow-y: scroll; @@ -97,7 +98,7 @@ body { a { text-decoration-color: var(--contrast-color); text-decoration-thickness: .1rem; - transition: all .5s; + transition: var(--transition-normal); } /* https://www.a11yproject.com/posts/how-to-hide-content/ */ .visually-hidden { @@ -118,7 +119,7 @@ h1 { font-size: var(--font-xxl); font-style: normal; line-height: 4rem; - margin-top: 3rem; + margin-top: var(--triple-gap); margin-bottom: 0; } h2 { @@ -130,6 +131,9 @@ h3 { font-size: var(--font-l); line-height: 1.25; } +hr { + border-top: var(--border-thin); +} main { padding: var(--single-gap); } @@ -159,8 +163,7 @@ figcaption { padding-top: var(--single-gap); } .page-block { - margin-top: 3rem; - margin-bottom: 3rem; + margin-top: var(--triple-gap); } a[href] { color: var(--text-color-link); @@ -251,7 +254,7 @@ nav ul { height: .8rem; margin-right: .25rem; padding-bottom: .3rem; - transition: all .5s; + transition: var(--transition-normal); width: var(--single-gap); } .nav-item { @@ -269,7 +272,7 @@ nav ul { margin-right: .5em; margin-bottom: 0; text-transform: uppercase; - transition: all .5s; + transition: var(--transition-normal); letter-spacing: .15rem; } .nav-item li:hover { @@ -361,21 +364,20 @@ nav ul { align-items: center; color: var(--text-color-tag); display: inline-flex; - font-size: .75rem; justify-content: center; padding: .2rem .4rem .2rem .4rem; text-decoration: none; text-transform: capitalize; } - +a.post-tag:before { + content: "#"; +} a.post-tag:visited { color: var(--text-color-tag); } - a.post-tag:hover { color: var(--text-color-tag); } - .taglist { display: flex; flex-flow: row wrap; @@ -387,12 +389,6 @@ a.post-tag:hover { } .taglist li a { font-size: var(--font-l); - font-weight: var(--weight-extraheavy); - padding: .4rem .8rem .4rem .8rem; - text-decoration-color: var(--contrast-color); - text-decoration-thickness: .1rem; - text-decoration-skip: none; - transition: all .5s; } .postlist-item > .post-tag { align-self: center; @@ -403,15 +399,15 @@ a.post-tag:hover { align-items: center; display: inline-flex; flex-wrap: wrap; - font-size: var(--font-s); + font-size: var(--font-n); gap: .5em; list-style: none; - margin-bottom: 5em; + margin-bottom: var(--triple-gap); padding: 0 0 0 .4em; } .post-metadata time { - font-size: var(--font-n); margin-right: .5em; + font-size: var(--font-n); } /* Direct Links / Markdown Headers */