/* The :root is where you can change the colors */
:root {
color-scheme: light dark;
accent-color: var(--main);
--main: var(--gray);
--bg: hsl(from var(--main) h calc(s - 10) calc(l - 5));
--bg-image: var(--bones);
--link: light-dark(var(--main), hsl(from var(--main) h s calc(l + 50)));
--link-hover-text: light-dark(#dad4c9, #272a32);
--special-hover: hsl(from var(--main) calc(h - 7) s calc(l + 5)), hsl(from var(--main) calc(h + 5) s calc(l - 5));
--text-bg: light-dark(#dad4c9, #272a32);
--text: light-dark(#272a32, #dad4c9);
/* light-dark function: https://css-tricks.com/almanac/functions/l/light-dark/ */
/* Presets */
--blue: #152e83;
--teal: #005372;
--green: #073d07;
--gray: #323232;
--bones: url('data:image/svg+xml,');
}
/* In case you're wondering, the hideous code in the bones variable is an SVG code.
You can generate one of those from SVG files with a SVG-to-CSS converter: https://www.svgbackgrounds.com/tools/svg-to-css
This lets you get the background pattern without having to download any extra files outside of the code.
But if you're a beginner and want to add a pattern of your own, I recommend just using a normal image file. */
/* title font - w95fa */
@font-face {
font-family: "w95fa";
src:
url("../fonts/w95fa/w95fa.woff") format("woff"),
url("../fonts/w95fa/w95fa.woff2") format("woff2"),
url("../fonts/w95fa/w95fa.otf");
}
/* body font - DM mono */
@font-face {
font-family: "DM Mono";
font-style: normal;
src:
url("../fonts/DM Mono/dm-mono-v11-latin-regular.woff") format("woff"),
url("../fonts/DM Mono/dm-mono-v11-latin-regular.woff2") format("woff2"),
url("../fonts/DM Mono/dm-mono-v11-latin-regular.ttf");
}
@font-face {
font-family: "DM Mono";
font-style: italic;
src:
url("../fonts/DM Mono/dm-mono-v11-latin-italic.woff") format("woff"),
url("../fonts/DM Mono/dm-mono-v11-latin-italic.woff2") format("woff2"),
url("../fonts/DM Mono/dm-mono-v11-latin-italic.ttf");
}
@font-face {
font-family: "DM Mono";
font-style: normal;
font-weight: bold;
src:
url("../fonts/DM Mono/dm-mono-v11-latin-500.woff") format("woff"),
url("../fonts/DM Mono/dm-mono-v11-latin-500.woff2") format("woff2"),
url("../fonts/DM Mono/dm-mono-v11-latin-500.ttf");
}
@font-face {
font-family: "DM Mono";
font-style: italic;
font-weight: bold;
src:
url("../fonts/DM Mono/dm-mono-v11-latin-500.woff") format("woff"),
url("../fonts/DM Mono/dm-mono-v11-latin-500.woff2") format("woff2"),
url("../fonts/DM Mono/dm-mono-v11-latin-500.ttf");
}
/* Body sets the main defaults for the whole page */
body {
color: var(--text);
background-color: var(--bg);
background-image: var(--bg-image);
font-family:DM Mono;
text-align: center;
font-size: 1.1em;
}
/* Main is type of semantic area within a page.
More on Semantic HTML: https://www.w3schools.com/html/html5_semantic_elements.asp
By selecting main > div, this code says that all divs within the tag should follow these rules.
You can add more divs, but don't get rid of the tag without changing the code here or you'll break stuff. */
main > div {
background: var(--text-bg);
width: 95vw;
max-width: 700px;
margin: 2em auto;
padding: 15px 25px;
border-radius: 20px;
text-align: left;
box-sizing: border-box;
box-shadow: 4px 4px 2px #dad4c9;
} /* setting the side margins to auto is how you center a div: https://www.w3schools.com/csS/css_align.asp */
/* Headers */
h1, h2, h3 {
text-align: center;
}
h1 {font-size: 2em}
h2 {
margin-top: 1.5em;
padding-bottom: 3px;
border-bottom: 5px solid var(--link);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: w95fa;
}
/* Circle class can be added to images that you want to feature as a main icon or user avatar.
This is best suited to square images, not rectangular ones.
Change or get rid of the width if you want a different size. */
.circle {
clip-path: circle(50%);
width: 100px;
}
p:has(.circle) {text-align: center}
/* Links */
a {
color: var(--link);
text-decoration-style: dashed;
text-underline-offset: .1em;
}
a:hover {
color: var(--link-hover-text);
background: var(--link);
text-decoration: none;
}
/* Lists - this code makes the list items a little more spaced out */
li {margin: .5em auto}
/* Focus Outlines - essential accessibility feature for visitors navigating by keyboard */
*:focus-visible {outline: 3px solid var(--link); outline-offset: .2em; text-decoration: none;}
/* Selection controls click-and-drag highlighted text */
::selection {color: white; background: var(--main);}
/* Button Elements (elements that use Javascript, like the theme switch buttons) */
button {
background: none;
border: .1em solid var(--link);
font-size: 1rem;
color: var(--link);
cursor: pointer;
padding: .7em 2em;
margin: .2em .3em;
border-radius: 5px;
}
button:hover, button:focus {
color: white;
background: var(--link); /* fallback */
background: linear-gradient(90deg, var(--special-hover));
text-shadow: 1px 1px black;
}
.button:focus-visible {border-radius: 15px;}
p:has(button) {text-align: center; margin: 2em auto}
/* Featured Links */
.featured {
border: .1em solid var(--link);
text-decoration: none;
text-align: center;
padding: 1em;
margin: .5em auto;
display: inline-block;
box-sizing: border-box;
width: 100%;
box-shadow: 4px 4px var(--link);
}
.featured:hover, .featured:focus {
text-shadow: 1px 1px black;
color: white;
background: linear-gradient(90deg, var(--special-hover));
}
.featured:focus-visible {outline-offset: 0}
.featured-list {
text-align: center;
width: 80%;
margin: 2em auto;
}
/* Footer goes at the end of the page */
footer {
color: var(--text);
background: var(--text-bg);
text-align: center;
margin: 2em auto;
padding: 1em;
box-sizing: border-box;
width: 70vw;
max-width: 550px;
border-radius: 20px;
filter: opacity(80%);
}
/* Code elements change the look of how text is displayed on the page (to visually communicate "this is a piece of code"). You don't need to keep this. */
code {
color: var(--text);
background-color: rgba(0,0,0, .1);
padding: .05em .3em;
border-radius: 10px;
font-size: 1em;
font-family: "Courier New", monospace;
}