129 lines
2.9 KiB
CSS
129 lines
2.9 KiB
CSS
@font-face {
|
|
font-family: 'Comic Code';
|
|
src: url('https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff2') format('woff2'),
|
|
url('https://fonts.doughmination.co.uk/ComicCode-Regular_2022-05-24-151938_hsmz.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Comic Code';
|
|
src: url('https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff2') format('woff2'),
|
|
url('https://fonts.doughmination.co.uk/ComicCode-Italic_2022-05-24-151939_rdtu.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Comic Code';
|
|
src: url('https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff2') format('woff2'),
|
|
url('https://fonts.doughmination.co.uk/ComicCode-Medium_2022-05-24-151941_ugqm.woff') format('woff');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Comic Code';
|
|
src: url('https://fonts.doughmination.co.uk/ComicCode-Bold_2022-05-24-152309_zqkm.woff2') format('woff2'),
|
|
url('https://fonts.doughmination.co.uk/ComicCode-Bold_2022-05-24-152309_zqkm.woff') format('woff');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
/* https://catppuccin.com/palette/ */
|
|
/* Catppuccin Mocha */
|
|
/* accents */
|
|
--rosewater: #f5e0dc;
|
|
--flamingo: #f2cdcd;
|
|
--pink: #f5c2e7;
|
|
--mauve: #cba6f7;
|
|
--red: #f38ba8;
|
|
--maroon: #eba0ac;
|
|
--peach: #fab387;
|
|
--yellow: #f9e2af;
|
|
--green: #a6e3a1;
|
|
--teal: #94e2d5;
|
|
--sky: #89dceb;
|
|
--saphire: #74c7ec;
|
|
--blue: #89b4fa; /* a lovely new blue passport */
|
|
--lavender: #b4befe;
|
|
/* Text */
|
|
--text: #cdd6f4;
|
|
--subtext-0: #a6adc8;
|
|
--subtext-1: #bac2de;
|
|
--overlay-0: #6c7086;
|
|
--overlay-1: #7f849c;
|
|
--overlay-2: #9399b2;
|
|
--surface-0: #313244;
|
|
--surface-1: #45475a;
|
|
--surface-2: #585b70;
|
|
/* Backgrounds */
|
|
--base: #1e1e2e;
|
|
--mantle: #181825;
|
|
--crust: #11111b; /* Is this the crusty crab? */
|
|
}
|
|
|
|
html, body {
|
|
background-color: var(--base);
|
|
color: var(--text);
|
|
font-family: 'Comic Code', sans-serif;
|
|
overflow-x: hidden;
|
|
max-width: 100vw;
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.intro {
|
|
margin-top: 25vh;
|
|
color: var(--text);
|
|
text-align: center;
|
|
padding: 5vh
|
|
}
|
|
|
|
.intro-header {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.HiIm {
|
|
color: var(--text);
|
|
display: inline-block;
|
|
}
|
|
|
|
.name {
|
|
color: var(--mauve);
|
|
display: inline-block;
|
|
}
|
|
|
|
.pronouns {
|
|
font-size: 1.75rem;
|
|
color: var(--overlay-1);
|
|
display: inline-block;
|
|
margin-left: -1rem;
|
|
}
|
|
|
|
.intro-text {
|
|
padding: 1vh;
|
|
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.intro {
|
|
margin-top: 10vh;
|
|
color: var(--text);
|
|
text-align: center;
|
|
padding: 5vh
|
|
}
|
|
|
|
.intro-text {
|
|
margin-top: 1vh;
|
|
padding: 1vh;
|
|
}
|
|
}
|