Distribute all the main.css styles to their own stylesheets and remove main.css
This commit is contained in:
parent
37ff53bd94
commit
d1171e992f
5 changed files with 146 additions and 310 deletions
|
|
@ -1,288 +0,0 @@
|
|||
/* main.css
|
||||
* Global stylesheet for erynwells.me
|
||||
* Eryn Wells <eryn@erynwells.me>
|
||||
*/
|
||||
|
||||
:root {
|
||||
--header: 8rem;
|
||||
--footer: calc(8rem + var(--safe-bottom));
|
||||
|
||||
--light-dim: #888;
|
||||
--highlight-color: rgb(50, 186, 228);
|
||||
--hljs-bg: #111;
|
||||
|
||||
--safe-bottom: 0;
|
||||
|
||||
--body-padding: 4rem;
|
||||
--body-width: 80rem;
|
||||
|
||||
--heading-color: var(--body-foreground-color);
|
||||
--link-color: var(--highlight-color);
|
||||
|
||||
--menu-icon-size: 20px;
|
||||
--social-menu-padding: 1rem;
|
||||
|
||||
--tag-text-color: var(--dark);
|
||||
--tag-background-color: #eee;
|
||||
--tag-hover-background-color: #bbb;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--tag-text-color: var(--light-dim);
|
||||
--tag-background-color: rgb(40, 40, 40);
|
||||
--tag-hover-background-color: rgb(73, 73, 73);
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 4px solid var(--separator-color);
|
||||
padding-inline-start: 2rem;
|
||||
margin-inline-start: 2rem;
|
||||
}
|
||||
|
||||
figure.bordered {
|
||||
padding: 0.5rem;
|
||||
border: 2px solid #eee;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
|
||||
.header {
|
||||
align-items: baseline;
|
||||
border-bottom: 1px solid var(--separator-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
margin-right: 2rem;
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
|
||||
.header h1 a {
|
||||
color: var(--heading-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header h1 a:hover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.p5-sketch {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.social menu li + li {
|
||||
margin-left: var(--social-menu-padding);
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
letter-spacing: 2px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.social a {
|
||||
background-image: var(--url);
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--menu-icon-size);
|
||||
display: block;
|
||||
height: var(--menu-icon-size);
|
||||
width: var(--menu-icon-size);
|
||||
}
|
||||
|
||||
.social a span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
color: var(--dark);
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.title-and-menu {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.youtube iframe {
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-bottom: -3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 475px) {
|
||||
:root {
|
||||
--menu-icon-size: 18px;
|
||||
--social-menu-padding: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.menu {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.social {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.title-and-menu {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
.header h1 {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Main
|
||||
*/
|
||||
|
||||
.main > header {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: 3.5rem 0;
|
||||
}
|
||||
|
||||
.main :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.main h1 {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.main h1,
|
||||
.main h2,
|
||||
.main h3,
|
||||
.main h4,
|
||||
.main h5,
|
||||
.main h6 {
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.main figcaption h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.main p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.main .main-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
margin-top: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.post-list h1,
|
||||
.post-list h2,
|
||||
.post-list h3,
|
||||
.post-list h4,
|
||||
.post-list h5,
|
||||
.post-list h6 {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post-list h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.post-list article {
|
||||
color: gray;
|
||||
font-style: oblique;
|
||||
font-size: 1.8rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.post-nav .next {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.post-single footer {
|
||||
margin-block-start: 3.5rem;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.post-title > h1 {
|
||||
flex-grow: 1;
|
||||
margin-block-end: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.post-title > .post-date {
|
||||
color: var(--light-dim);
|
||||
display: inline-block;
|
||||
font-size: 1.75rem;
|
||||
inline-size: min-content;
|
||||
letter-spacing: 1px;
|
||||
margin-block-start: 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.main h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
padding-inline-start: 4rem;
|
||||
}
|
||||
|
||||
.post-list h2 {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.post-list time {
|
||||
font-size: 1.8rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 704px) {
|
||||
:root {
|
||||
--body-padding: 2rem;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 7px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,26 @@
|
|||
.chroma { line-height: 1.4; }
|
||||
:root {
|
||||
--highlight-background-color: rgb(var(--super-lt-gray));
|
||||
--highlight-foreground-color: var(--foreground-body-color);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
}
|
||||
}
|
||||
|
||||
.chroma {
|
||||
line-height: var(--body-line-height);
|
||||
}
|
||||
|
||||
.bg {
|
||||
color: var(--highlight-foreground-color);
|
||||
background-color: var(--highlight-background-color);
|
||||
}
|
||||
|
||||
.chroma {
|
||||
color: var(--highlight-foreground-color);
|
||||
background-color: var(--highlight-background-color);
|
||||
}
|
||||
|
||||
/* Background */ .bg { color: #272822; background-color: #fafafa }
|
||||
/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
|
||||
/* Other */ .chroma .x { }
|
||||
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
||||
/* CodeLine */ .chroma .cl { }
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
:root {
|
||||
--black: 0, 0, 0;
|
||||
--sub-dk-gray: 16, 16, 16;
|
||||
--dk-gray: 32, 32, 32;
|
||||
--mid-gray: 128, 128, 128;
|
||||
--lt-gray: 223, 223, 223;
|
||||
--super-lt-gray: 240, 240, 240;
|
||||
--white: 255, 255, 255;
|
||||
|
||||
--lt-blue: 69, 212, 243;
|
||||
|
|
@ -24,18 +26,23 @@
|
|||
--header-box-shadow-color: var(--box-shadow-color);
|
||||
|
||||
--font-family-body: Verdana, Helvetica, sans-serif;
|
||||
--font-family-monospace: monospace;
|
||||
--font-family-monospace: "Courier New", Courier, monospace;
|
||||
--font-family-heading: Museo_Slab, Tahoma, sans-serif;
|
||||
--font-family-site-heading: /*Krungthep,*/ Museo_Slab, Tahoma, sans-serif;
|
||||
--font-family-site-heading: Museo_Slab, Tahoma, sans-serif;
|
||||
--font-size-min: 7px;
|
||||
--font-size-max: 8px;
|
||||
|
||||
--body-item-spacing: 1em;
|
||||
--body-line-height: 1.4;
|
||||
--body-header-line-height: 1.1;
|
||||
--body-code-background-color: rgb(var(--super-lt-gray));
|
||||
|
||||
--content-width: 80rem;
|
||||
|
||||
--transition-duration: 0.7s;
|
||||
|
||||
--social-menu-padding: 1rem;
|
||||
--menu-icon-size: 20px;
|
||||
--twitter-icon: url(/icons/twitter.svg);
|
||||
--github-icon: url(/icons/github.svg);
|
||||
--instagram-icon: url(/icons/instagram.svg);
|
||||
|
|
@ -48,6 +55,7 @@
|
|||
--foreground-header-color: rgb(var(--white));
|
||||
--separator-color: rgb(var(--dk-gray));
|
||||
--box-shadow-color: rgba(var(--dk-gray), 0.8);
|
||||
--body-code-background-color: rgb(var(--dk-gray));
|
||||
|
||||
--twitter-icon: url(/icons/twitter-dark.svg);
|
||||
--github-icon: url(/icons/github-dark.svg);
|
||||
|
|
@ -66,10 +74,24 @@ a:hover {
|
|||
}
|
||||
a:visited { color: none; }
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 4px solid var(--separator-color);
|
||||
padding-inline-start: 2rem;
|
||||
margin-inline-start: 2rem;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground-body-color);
|
||||
font-size: 2rem;
|
||||
line-height: 1.2;
|
||||
line-height: var(--body-line-height);
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--body-code-background-color);
|
||||
border-radius: 0.25rem;
|
||||
font-family: var(--font-family-monospace);
|
||||
display: inline-block;
|
||||
padding-inline: 0.6rem;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
|
|
@ -89,6 +111,11 @@ figure {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
figure.bordered {
|
||||
padding: 0.5rem;
|
||||
border: 2px solid #eee;
|
||||
}
|
||||
|
||||
figure a,
|
||||
figure a:hover {
|
||||
border: 0;
|
||||
|
|
@ -159,7 +186,8 @@ footer.site p + p {
|
|||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--foreground-header-color);
|
||||
font-family: var(--font-family-heading);
|
||||
margin-block: 1em 0.25em;
|
||||
margin-block: 3.5rem 1rem;
|
||||
line-height: var(--body-header-line-height);
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -188,6 +216,7 @@ h1.site {
|
|||
radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
|
||||
radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
|
||||
radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
|
@ -234,7 +263,7 @@ header.site .grid {
|
|||
display: grid;
|
||||
gap: 0.5em;
|
||||
grid-template-columns: max-content auto max-content;
|
||||
grid-template-rows: max-content;
|
||||
grid-template-rows: minmax(2em, min-content);
|
||||
grid-template-areas:
|
||||
"title menu social";
|
||||
max-width: var(--content-width);
|
||||
|
|
@ -306,13 +335,58 @@ nav.bulleted li::before {
|
|||
|
||||
p {
|
||||
letter-spacing: 0.025em;
|
||||
line-height: 1.4;
|
||||
line-height: var(--body-line-height);
|
||||
}
|
||||
p { margin-block-end: var(--body-item-spacing); }
|
||||
p:last-child { margin-block-end: 0; }
|
||||
|
||||
.social menu li + li {
|
||||
margin-left: var(--social-menu-padding);
|
||||
}
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
letter-spacing: 2px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.social a {
|
||||
background-image: var(--url);
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--menu-icon-size);
|
||||
display: block;
|
||||
height: var(--menu-icon-size);
|
||||
width: var(--menu-icon-size);
|
||||
}
|
||||
|
||||
.social a span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
color: var(--dark);
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.youtube iframe {
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-bottom: -3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p5-sketch {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/** SYNTAX HIGHLIGHTING **/
|
||||
|
||||
.highlight code {
|
||||
background-color: inherit;
|
||||
margin-block: 0.5em;
|
||||
}
|
||||
|
||||
.highlight .line {
|
||||
display: grid;
|
||||
grid-template-columns: max-content auto;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue