388 lines
7.4 KiB
CSS
388 lines
7.4 KiB
CSS
/* Yo, you're looking at my horrid CSS. Judge, let me know what I'm doing wrong because I sure as shit am NOT a web dev.
|
|
* Though maybe someday? For now, this is my cobbled together mess based on Mozilla's web developer documentation and a
|
|
* fuckton of fiddling. */
|
|
|
|
/* TODO: Split this up and improve some of our organization of classes. Ideally the delivered css should be no more than
|
|
* 4k in size so the article content can take up 10k. Stay within the TCP first roundtrip size to speed up loading.
|
|
* Granted the style SHOULD get cached so it's not that big of a deal, but something to resolve.
|
|
*
|
|
* TODO: Regardless of the size of this beast, I need to deduplicate some of the functionality of these classes. Lots of
|
|
* things are unecessarily repated that could be consolidated. <- DO THIS PART FIRST, IGNORE SIZE */
|
|
:root {
|
|
--fujiWhite: #dcd7ba;
|
|
--oldWhite: #c8c093;
|
|
--sumiInk0: #16161d;
|
|
--sumiInk1: #1f1f28;
|
|
--sumiInk2: #2a2a37;
|
|
--sumiInk3: #363646;
|
|
--sumiInk4: #54546d;
|
|
--waveBlue1: #223249;
|
|
--waveBlue2: #2d4f67;
|
|
--winterGreen: #2b3328;
|
|
--winterYellow: #49443c;
|
|
--winterRed: #43242b;
|
|
--winterBlue: #252535;
|
|
--autumnGreen: #76946a;
|
|
--autumnRed: #c34043;
|
|
--autumnYellow: #dca561;
|
|
--samuraiRed: #e82424;
|
|
--roninYellow: #ff9e3b;
|
|
--waveAqua1: #6a9589;
|
|
--dragonBlue: #658594;
|
|
--fujiGray: #727169;
|
|
--springViolet1: #938aa9;
|
|
--oniViolet: #957fb8;
|
|
--crystalBlue: #7e9cd8;
|
|
--springViolet2: #9cabca;
|
|
--springBlue: #7fb4ca;
|
|
--lightBlue: #a3d4d5;
|
|
--waveAqua2: #7aa89f;
|
|
--springGreen: #98bb6c;
|
|
--boatYellow1: #938056;
|
|
--boatYellow2: #c0a36e;
|
|
--carpYellow: #e6c384;
|
|
--sakuraPink: #d27e99;
|
|
--waveRed: #e46876;
|
|
--peachRed: #ff5d62;
|
|
--surimiOrange: #ffa066;
|
|
--navbar-height: 40px;
|
|
--navbar-bg-color: var(--sumiInk4);
|
|
--navbar-border-color: var(--sumiInk3);
|
|
}
|
|
|
|
::selection {
|
|
background: color-mix(in srgb, var(--lightBlue) 25%, transparent);
|
|
}
|
|
|
|
/* This ensures the page uses full width at all times. We have to do this because some elements (our images in
|
|
* particular) are wider than their parents and we couldn't use flex for that causing some alignment issues when the
|
|
* webpage was too narrow (Mobile devices). */
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 1.05rem;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
html {
|
|
background-color: var(--sumiInk0);
|
|
color: var(--fujiWhite);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
body {
|
|
padding-top: var(--navbar-height);
|
|
line-height: 1.8;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.body-wrapper {
|
|
display: flex;
|
|
max-width: min(700px, 90vw);
|
|
align-self: center;
|
|
flex-direction: column;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.footer-link-items {
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
footer {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--waveBlue1);
|
|
margin-top: auto;
|
|
min-height: 80px;
|
|
align-self: flex-start;
|
|
width: 100vw;
|
|
}
|
|
|
|
footer a,
|
|
footer a:visited {
|
|
color: var(--crystalBlue);
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-self: center;
|
|
background-color: color-mix(in srgb, var(--navbar-bg-color) 20%, transparent);
|
|
backdrop-filter: blur(12px);
|
|
/* HACK: Fucken safari doesn't support `backdrop-filter`, webkit has its own. D o g s h i t. */
|
|
-webkit-backdrop-filter: blur(12px);
|
|
font-size: 1.1rem;
|
|
font-family: sans-serif;
|
|
height: var(--navbar-height);
|
|
position: fixed;
|
|
top: 0;
|
|
width: 300px;
|
|
border-bottom-width: 4px;
|
|
border-style: solid;
|
|
border-top-style: none;
|
|
border-bottom-right-radius: 10px;
|
|
border-bottom-left-radius: 10px;
|
|
/* Set the navbar to have highest priority so it shows above all other elements */
|
|
z-index: 1000;
|
|
border-color: var(--sumiInk3);
|
|
}
|
|
|
|
|
|
.nav-item:first-child {
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
|
|
.nav-item:last-child {
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
nav a:link,
|
|
nav a:visited {
|
|
color: var(--fujiWhite);
|
|
background-color: unset;
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav a:hover,
|
|
nav a:visited:hover {
|
|
color: unset;
|
|
background-color: unset;
|
|
}
|
|
|
|
.nav-item {
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-item:not(:last-child) {
|
|
border-right: 2px solid var(--sumiInk3);
|
|
}
|
|
|
|
.nav-item:hover {
|
|
transition-duration: 0.3s;
|
|
letter-spacing: +.05em;
|
|
color: var(--roninYellow);
|
|
}
|
|
|
|
.nav-item a {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
img {
|
|
margin: 0;
|
|
overflow: scroll;
|
|
max-height: 75vh;
|
|
max-width: min(95vw, 125%);
|
|
margin-left: 50%;
|
|
transform: translateX(-50%);
|
|
border-radius: 4px;
|
|
outline-width: 1px;
|
|
outline-style: solid;
|
|
outline-color: var(--sumiInk2);
|
|
}
|
|
|
|
.anchor {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.anchor:visited,
|
|
.anchor:link,
|
|
.anchor:active {
|
|
color: var(--carpYellow);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
line-height: 1.2;
|
|
font-family: sans-serif;
|
|
margin-top: 10px;
|
|
margin-bottom: 0px;
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--boatYellow2);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
heading-level {
|
|
color: var(--autumnYellow);
|
|
font-weight: normal;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
a:link {
|
|
color: var(--crystalBlue);
|
|
}
|
|
|
|
a:active,
|
|
a:focus {
|
|
outline: none;
|
|
color: none;
|
|
}
|
|
|
|
a:hover,
|
|
a:visited:hover {
|
|
color: var(--fujiWhite);
|
|
background-color: color-mix(in srgb, var(--crystalBlue) 50%, transparent);
|
|
text-decoration-color: var(--crystalBlue);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--oniViolet);
|
|
}
|
|
|
|
/* Ensure header anchor, when clicked, is not hidden by Navbar */
|
|
a.anchor {
|
|
scroll-margin-top: 60px;
|
|
}
|
|
|
|
blockquote {
|
|
background-color: var(--sumiInk1);
|
|
padding: 10px;
|
|
min-width: 90%;
|
|
border-left-width: 5px;
|
|
border-left-style: solid;
|
|
border-left-color: var(--sumiInk4);
|
|
}
|
|
|
|
blockquote>p {
|
|
margin: 0;
|
|
}
|
|
|
|
pre {
|
|
border-radius: 4px;
|
|
overflow: auto;
|
|
outline-style: solid;
|
|
outline-color: var(--sumiInk2);
|
|
background-color: var(--sumiInk1);
|
|
outline-width: 2.5px;
|
|
width: min(90vw, 800px);
|
|
transition-duration: 0.25s;
|
|
align-self: center;
|
|
padding: 5px;
|
|
}
|
|
|
|
pre:hover {
|
|
outline-color: var(--sumiInk3);
|
|
/* NOTE: We have to set important because Comrak's default syntax adapter will ALWAYS set a color for the background
|
|
* here, no way to avoid it unless we want to rewrite chunks of the syntax adapter. Currently I'm too lazy to
|
|
* investigate that.*/
|
|
background-color: var(--sumiInk2) !important;
|
|
}
|
|
|
|
code {
|
|
border-radius: 6px;
|
|
padding: 2px;
|
|
font-family: monospace;
|
|
line-height: 22px;
|
|
background-color: var(--sumiInk2);
|
|
}
|
|
|
|
p>code {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
pre>code {
|
|
background-color: unset;
|
|
display: block;
|
|
}
|
|
|
|
dt {
|
|
display: list-item;
|
|
list-style-type: disc;
|
|
border-bottom: medium solid var(--sumiInk3);
|
|
}
|
|
|
|
dd {
|
|
margin-left: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
dl {
|
|
margin: 0;
|
|
}
|
|
|
|
li {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
dt::marker,
|
|
dd::marker,
|
|
dl::marker,
|
|
li::marker {
|
|
color: var(--crystalBlue);
|
|
}
|
|
|
|
.page-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 2.25rem;
|
|
font-style: bold;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.page-detail {
|
|
font-size: 0.95rem;
|
|
max-width: min(600px, 95vw);
|
|
text-align: center;
|
|
}
|
|
|
|
hr {
|
|
margin: 30px;
|
|
width: min(125%, 95vw);
|
|
align-self: center;
|
|
border: none;
|
|
border-top: thin solid;
|
|
}
|
|
|
|
.footnotes {
|
|
border-top: var(--fujiGray) thin solid;
|
|
color: var(--springViolet2);
|
|
font-size: 0.75rem;
|
|
}
|