style: Try biome

This commit is contained in:
BuyMyMojo 2024-12-19 11:53:42 +11:00
parent 54b4349667
commit 7ed39cd0df
Signed by: aria
GPG key ID: 19AB7AA462B8AB3B
11 changed files with 180 additions and 152 deletions

View file

@ -1,124 +1,120 @@
@font-face {
font-family: "Noto Sans";
src:
local("Noto Sans"),
url("/static/fonts/NotoSans-Regular.ttf") format("truetype");
font-family: "Noto Sans";
src: local("Noto Sans"), 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-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("ttf"),
url("https://dtinth.github.io/comic-mono-font/ComicMono.ttf") format("truetype")
font-family: "Comic Mono";
src: local("Comic Mono"), url("/static/fonts/ComicMono.ttf") format("ttf"),
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;
--first-colour: #16111a;
--second-colour: #21042c;
--third-colour: #2e236c;
--fourth-colour: #f5efff;
--border: #27272a;
--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;
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);
/* 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;
}
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;
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;
text-decoration-color: #fff;
transition: text-decoration-color 0.25s;
}
/* h1 { */
/* margin: 1rem 0; */
/* font-size: 2.5rem; */
/* 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; */
/* 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;
image-rendering: pixelated;
min-width: 88px;
min-height: 31px;
padding: 4px;
}
.linked-buttons {
outline-style: dashed;
width:fit-content;
display: inline-flex;
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; */
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;
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);
}
color: var(--third-colour);
background-color: var(--fourth-colour);
border-color: var(--fourth-colour);
}