n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor CSS

Browse Source
This commit is contained in:
N-Upchurch 2023-08-21 18:27:24 -05:00
parent f48cfb997c
commit 0e991b1dee
1 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
public/css/index.css
View File

@ -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 */