aria.coffee/src/styles/aria.css
BuyMyMojo 8978fbbb81 fix(aria.css): 🚑 Fix comic mono never being served from website
I messed up the format so it went to pull the file grom github instead of the server, oops
2024-12-20 18:25:58 +11:00

131 lines
2.5 KiB
CSS

/* @font-face {
font-family: "Noto Sans";
src: local("Noto Sans"), url("/static/fonts/NotoSansDisplay-Regular.ttf")
format("truetype"), url("/static/fonts/NotoSans-Regular.ttf")
format("truetype");
} */
@font-face {
font-family: "Comic Shanns";
src: local("Comic Shanns Regular");
/* ,url("/static/fonts/comic shanns.otf")
format("opentype"), url("/static/fonts/comic shanns 2.ttf")
format("truetype"); */
}
@font-face {
font-family: "Comic Mono";
src: local("Comic Mono"), url("/static/fonts/ComicMono.ttf")
format("truetype"),
url("https://dtinth.github.io/comic-mono-font/ComicMono.ttf")
format("truetype");
}
:root {
--first-colour: #16111a;
--second-colour: #21042c;
--third-colour: #2e236c;
--fourth-colour: #f5efff;
--border: #27272a;
}
html {
background-color: var(--first-colour);
font-family: "Comic Mono", "Comic Shanns", "Comic Sans", "Comic Sans MS",
"Chalkboard", "ChalkboardSE-Regular", "Noto Sans", sans-serif;
font-size: larger;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
body {
/* margin: 0 auto; */
/* width: 100%; */
/* max-width: 40em; */
padding: 2em;
/* padding: 1rem; */
/* line-height: 1.5; */
color: var(--fourth-colour);
}
@media screen and (max-width: 899px) {
body {
width: 95%;
padding-top: 0.5em;
padding-left: 0;
padding-right: 0;
flex-wrap: wrap;
}
}
a {
color: var(--fourth-colour);
text-decoration: underline 2px;
text-underline-offset: 2px;
text-decoration-color: #00000000;
}
a:hover {
text-decoration-color: #fff;
transition: text-decoration-color 0.25s;
}
/* h1 { */
/* margin: 1rem 0; */
/* font-size: 2.5rem; */
/* } */
/* footer { */
/* display: flex; */
/* gap: 1rem; */
/* margin-top: 2rem; */
/* background-color: var(--third-colour); */
/* border-radius: 4px; */
/* padding: 0.5rem; */
/* } */
.badge {
image-rendering: pixelated;
min-width: 88px;
min-height: 31px;
padding: 4px;
}
.linked-buttons {
outline-style: dashed;
width: fit-content;
display: inline-flex;
}
.container {
background-color: var(--second-colour);
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
/* flex: content; */
}
.greetButton {
color: var(--fourth-colour);
background-color: var(--second-colour);
border-color: var(--second-colour);
transition-duration: 0.4s;
}
.greetButton:hover {
color: var(--third-colour);
background-color: var(--fourth-colour);
border-color: var(--fourth-colour);
}
.svg-inline {
overflow: visible;
box-sizing: content-box;
display: inline-block;
height: 1em;
vertical-align: -0.125em;
}