thatonelutenist/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor post styling code

Browse source
This commit is contained in:
Nathan McCarty 2025-02-05 22:36:10 -05:00
parent 278f5a8390
commit f46ca670fe
2 changed files with 145 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
resources/colors.css
View file

@ -7,7 +7,7 @@
--dim-0: light-dark(#878787,#777777); --dim-0: light-dark(#878787,#777777);
--fg-0: light-dark(#474747,#b9b9b9); --fg-0: light-dark(#474747,#b9b9b9);
--fg-1: light-dark(#282828,#dedede); --fg-1: light-dark(#282828,#dedede);
--red: light-dark(#d6000c,#ed4a46) --red: light-dark(#d6000c,#ed4a46);
--green: light-dark(#1d9700,#70b433); --green: light-dark(#1d9700,#70b433);
--yellow: light-dark(#c49700,#dbb32d); --yellow: light-dark(#c49700,#dbb32d);
--blue: light-dark(#0064e4,#368aeb); --blue: light-dark(#0064e4,#368aeb);
@ -30,4 +30,38 @@
--code-cyan: light-dark(#009c8f,#41c7b9); --code-cyan: light-dark(#009c8f,#41c7b9);
--code-orange: light-dark(#c25d1e,#ed8649); --code-orange: light-dark(#c25d1e,#ed8649);
--code-violet: light-dark(#8762c6,#af88eb); --code-violet: light-dark(#8762c6,#af88eb);
/* Set basic colors */
color: var(--fg-0);
background-color: var(--bg-1);
}
/* Set link colors */
a:link {
color: var(--cyan);
}
a:visited {
color: var(--magenta);
}
/* Color our main content elements */
.site-header {
background-color: var(--bg-0);
}
.site-logo {
color: var(--red);
}
.site-tagline {
color: var(--dim-0);
}
.post-body, .post-header, .post-blurbs {
background-color: var(--bg-0);
}
.post-blurb {
background-color: var(--bg-1);
}
.post-title, .post-blurbs > h1 {
color: var(--green);
}
.post-body > h3, .post-body > h3, .post-body > h4 {
color: var(--fg-1);
} }

110
resources/main.css
View file

@ -0,0 +1,110 @@
:root {
font-family: "Open Sans", sans-serif, serif;
/* Variables */
--content-width: 60rem;
--header-width: 35rem;
--box-padding-vert: 1rem;
--box-padding-horz: 1rem;
--box-margin-vert: 0.5rem;
--box-margin-horz: 1rem;
--box-gap: 0.5rem;
--box-radius: 1rem;
}
/* Main Body and Post Flexboxs */
body, .post {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--box-gap);
}
/* Style the site header */
.site-header {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: var(--header-width);
padding: var(--box-padding-vert) var(--box-padding-horz);
border-radius: var(--box-radius);
box-sizing: border-box;
}
.site-logo {
font-size: 2.5rem;
font-weight: bold;
}
.site-tagline {
font-size: 0.9rem;
font-style: italic;
}
.header-links {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--box-gap);
font-size: 1.1rem;
flex-wrap: wrap;
margin-top: var(--box-margin-vert);
}
.header-links > a > span {
text-decoration: underline;
}
.header-links > a {
text-decoration: none;
}
/* Style the post header, body, and blurbs */
/* TODO: Style footnotes and get footnote hover working */
.post-header, .post-body {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--box-gap);
width: 100%;
max-width: var(--content-width);
padding: var(--box-padding-vert) var(--box-padding-horz);
margin: var(--box-margin-vert) var(--box-margin-horz);
border-radius: var(--box-radius);
box-sizing: border-box;
}
.post-title > h1 {
margin-top: 0px;
margin-bottom: 0px;
}
.post-info {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--box-gap);
font-size: 0.9rem;
flex-wrap: wrap;
}
.post-read-time {
text-decoration: underline dotted;
}
.post-body > h3, .post-body > h3, .post-body > h4 {
text-align: center;
}
.post-blurbs {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--box-gap);
width: 100%;
max-width: var(--content-width);
padding: var(--box-padding-vert) var(--box-padding-horz);
border-radius: var(--box-radius);
}
.post-blurb {
width: 100%;
display: block;
border-radius: var(--box-radius);
padding: var(--box-padding-vert) var(--box-padding-horz);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
}