overhauled old theme
This commit is contained in:
parent
f18a342ae5
commit
fb24c6a302
82 changed files with 1378 additions and 1371 deletions
|
|
@ -1,79 +1,145 @@
|
|||
:root {
|
||||
--primary: rgb(255, 190, 0);
|
||||
--secondary: rgb(255, 100, 0);
|
||||
--light: rgb(255, 252, 245);
|
||||
--dark: rgb(6, 2, 0);
|
||||
--primary-100: color-mix(in lch, var(--primary), var(--light) 90%);
|
||||
--primary-200: color-mix(in lch, var(--primary), var(--light) 80%);
|
||||
--primary-300: color-mix(in lch, var(--primary), var(--light) 70%);
|
||||
--primary-400: color-mix(in lch, var(--primary), var(--light) 60%);
|
||||
--primary-500: color-mix(in lch, var(--primary), var(--light));
|
||||
--primary-600: color-mix(in lch, var(--primary), var(--light) 40%);
|
||||
--primary-700: color-mix(in lch, var(--primary), var(--light) 30%);
|
||||
--primary-800: color-mix(in lch, var(--primary), var(--light) 20%);
|
||||
--primary-900: color-mix(in lch, var(--primary), var(--light) 10%);
|
||||
--primary-dark-100: color-mix(in lch, var(--primary), var(--dark) 90%);
|
||||
--primary-dark-200: color-mix(in lch, var(--primary), var(--dark) 80%);
|
||||
--primary-dark-300: color-mix(in lch, var(--primary), var(--dark) 70%);
|
||||
--primary-dark-400: color-mix(in lch, var(--primary), var(--dark) 60%);
|
||||
--primary-dark-500: color-mix(in lch, var(--primary), var(--dark));
|
||||
--primary-dark-600: color-mix(in lch, var(--primary), var(--dark) 40%);
|
||||
--primary-dark-700: color-mix(in lch, var(--primary), var(--dark) 30%);
|
||||
--primary-dark-800: color-mix(in lch, var(--primary), var(--dark) 20%);
|
||||
--primary-dark-900: color-mix(in lch, var(--primary), var(--dark) 10%);
|
||||
--secondary-light-100: color-mix(in lch, var(--secondary), var(--light) 90%);
|
||||
--secondary-light-200: color-mix(in lch, var(--secondary), var(--light) 80%);
|
||||
--secondary-light-300: color-mix(in lch, var(--secondary), var(--light) 70%);
|
||||
--secondary-light-400: color-mix(in lch, var(--secondary), var(--light) 60%);
|
||||
--secondary-light-500: color-mix(in lch, var(--secondary), var(--light));
|
||||
--secondary-light-600: color-mix(in lch, var(--secondary), var(--light) 40%);
|
||||
--secondary-light-700: color-mix(in lch, var(--secondary), var(--light) 30%);
|
||||
--secondary-light-800: color-mix(in lch, var(--secondary), var(--light) 20%);
|
||||
--secondary-light-900: color-mix(in lch, var(--secondary), var(--light) 10%);
|
||||
--secondary-100: color-mix(in lch, var(--secondary), var(--dark) 90%);
|
||||
--secondary-200: color-mix(in lch, var(--secondary), var(--dark) 80%);
|
||||
--secondary-300: color-mix(in lch, var(--secondary), var(--dark) 70%);
|
||||
--secondary-400: color-mix(in lch, var(--secondary), var(--dark) 60%);
|
||||
--secondary-500: color-mix(in lch, var(--secondary), var(--dark));
|
||||
--secondary-600: color-mix(in lch, var(--secondary), var(--dark) 40%);
|
||||
--secondary-700: color-mix(in lch, var(--secondary), var(--dark) 30%);
|
||||
--secondary-800: color-mix(in lch, var(--secondary), var(--dark) 20%);
|
||||
--secondary-900: color-mix(in lch, var(--secondary), var(--dark) 10%);
|
||||
--trans: 300ms;
|
||||
--primary: rgb(255, 190, 0);
|
||||
--secondary: rgb(255, 100, 0);
|
||||
--light: rgb(255, 252, 245);
|
||||
--dark: rgb(6, 2, 0);
|
||||
--primary-100: color-mix(in lch, var(--primary), var(--light) 90%);
|
||||
--primary-200: color-mix(in lch, var(--primary), var(--light) 80%);
|
||||
--primary-300: color-mix(in lch, var(--primary), var(--light) 70%);
|
||||
--primary-400: color-mix(in lch, var(--primary), var(--light) 60%);
|
||||
--primary-500: color-mix(in lch, var(--primary), var(--light));
|
||||
--primary-600: color-mix(in lch, var(--primary), var(--light) 40%);
|
||||
--primary-700: color-mix(in lch, var(--primary), var(--light) 30%);
|
||||
--primary-800: color-mix(in lch, var(--primary), var(--light) 20%);
|
||||
--primary-900: color-mix(in lch, var(--primary), var(--light) 10%);
|
||||
--primary-dark-100: color-mix(in lch, var(--primary), var(--dark) 90%);
|
||||
--primary-dark-200: color-mix(in lch, var(--primary), var(--dark) 80%);
|
||||
--primary-dark-300: color-mix(in lch, var(--primary), var(--dark) 70%);
|
||||
--primary-dark-400: color-mix(in lch, var(--primary), var(--dark) 60%);
|
||||
--primary-dark-500: color-mix(in lch, var(--primary), var(--dark));
|
||||
--primary-dark-600: color-mix(in lch, var(--primary), var(--dark) 40%);
|
||||
--primary-dark-700: color-mix(in lch, var(--primary), var(--dark) 30%);
|
||||
--primary-dark-800: color-mix(in lch, var(--primary), var(--dark) 20%);
|
||||
--primary-dark-900: color-mix(in lch, var(--primary), var(--dark) 10%);
|
||||
--secondary-light-100: color-mix(in lch, var(--secondary), var(--light) 90%);
|
||||
--secondary-light-200: color-mix(in lch, var(--secondary), var(--light) 80%);
|
||||
--secondary-light-300: color-mix(in lch, var(--secondary), var(--light) 70%);
|
||||
--secondary-light-400: color-mix(in lch, var(--secondary), var(--light) 60%);
|
||||
--secondary-light-500: color-mix(in lch, var(--secondary), var(--light));
|
||||
--secondary-light-600: color-mix(in lch, var(--secondary), var(--light) 40%);
|
||||
--secondary-light-700: color-mix(in lch, var(--secondary), var(--light) 30%);
|
||||
--secondary-light-800: color-mix(in lch, var(--secondary), var(--light) 20%);
|
||||
--secondary-light-900: color-mix(in lch, var(--secondary), var(--light) 10%);
|
||||
--secondary-100: color-mix(in lch, var(--secondary), var(--dark) 90%);
|
||||
--secondary-200: color-mix(in lch, var(--secondary), var(--dark) 80%);
|
||||
--secondary-300: color-mix(in lch, var(--secondary), var(--dark) 70%);
|
||||
--secondary-400: color-mix(in lch, var(--secondary), var(--dark) 60%);
|
||||
--secondary-500: color-mix(in lch, var(--secondary), var(--dark));
|
||||
--secondary-600: color-mix(in lch, var(--secondary), var(--dark) 40%);
|
||||
--secondary-700: color-mix(in lch, var(--secondary), var(--dark) 30%);
|
||||
--secondary-800: color-mix(in lch, var(--secondary), var(--dark) 20%);
|
||||
--secondary-900: color-mix(in lch, var(--secondary), var(--dark) 10%);
|
||||
--trans: 300ms;
|
||||
--image: 24rem;
|
||||
--post: 75ch;
|
||||
--round: 16px;
|
||||
--pad-xl: 2rem;
|
||||
--pad-lm: 1.4rem;
|
||||
--pad-l: 1rem;
|
||||
--pad-m: 0.8rem;
|
||||
--pad-sm: 0.4rem;
|
||||
--flag: 45deg;
|
||||
--paw: url("/assets/img/theme/paw.svg");
|
||||
--paw-tiled: url("/assets/img/theme/paw-tiled.png");
|
||||
--sunny: url("/assets/img/theme/citrus/sundae.png")
|
||||
--round: 16px;
|
||||
--pad-xl: 2rem;
|
||||
--pad-lm: 1.4rem;
|
||||
--pad-l: 1rem;
|
||||
--pad-m: 0.8rem;
|
||||
--pad-sm: 0.4rem;
|
||||
--flag: 45deg;
|
||||
--paw: url("/assets/img/theme/paw.svg");
|
||||
--paw-tiled: url("/assets/img/theme/paw-tiled.png");
|
||||
--outlined: drop-shadow(0 0.5px var(--dark)) drop-shadow(0 -0.5px var(--dark))
|
||||
drop-shadow(0.5px 0 var(--dark)) drop-shadow(-0.5px 0 var(--dark))
|
||||
drop-shadow(0 1px var(--light)) drop-shadow(0 -1px var(--light))
|
||||
drop-shadow(1px 0 var(--light)) drop-shadow(-1px 0 var(--light));
|
||||
--rainbow: linear-gradient(
|
||||
var(--flag),
|
||||
red 16.66%,
|
||||
orange 0 33.33%,
|
||||
yellow 0 50%,
|
||||
green 0 66.66%,
|
||||
blue 0 83.33%,
|
||||
indigo 0
|
||||
);
|
||||
--agender: linear-gradient(
|
||||
var(--flag),
|
||||
#000 0 14.28%,
|
||||
#c0c0c0 0 28.57%,
|
||||
#fff 0 42.85%,
|
||||
#a3fa73 0 57.14%,
|
||||
#fff 0 71.42%,
|
||||
#c0c0c0 0 85.71%,
|
||||
#000 0
|
||||
);
|
||||
--aromantic: linear-gradient(
|
||||
var(--flag),
|
||||
#0a2 20%,
|
||||
#7d6 0 40%,
|
||||
#fff 0 60%,
|
||||
#a9a9a9 0 80%,
|
||||
#000 0
|
||||
);
|
||||
--pansexual: linear-gradient(
|
||||
var(--flag),
|
||||
#f09 33.33%,
|
||||
#ffd700 0 66.66%,
|
||||
#00bfff 0
|
||||
);
|
||||
--transgender: linear-gradient(
|
||||
var(--flag),
|
||||
#00d2ff 20%,
|
||||
#ffa6b9 0 40%,
|
||||
white 0 60%,
|
||||
#ffa6b9 0 80%,
|
||||
#00d2ff 0
|
||||
);
|
||||
}
|
||||
@keyframes navbg {
|
||||
|
||||
@keyframes mainbg {
|
||||
0% {
|
||||
mask-position: 0rem 0rem;
|
||||
background-position: 0rem 0rem;
|
||||
}
|
||||
|
||||
100% {
|
||||
mask-position: 16rem 16rem;
|
||||
background-position: 256px 256px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 200% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Rubik;
|
||||
src: url("/assets/fonts/Rubik.ttf") format("truetype");
|
||||
font-family: Rubik;
|
||||
src: url("/assets/fonts/Rubik.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Urbanist;
|
||||
src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype");
|
||||
font-family: Urbanist;
|
||||
src: url("/assets/fonts/Urbanist-Bold.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Pangolin;
|
||||
src: url("/assets/fonts/Pangolin-Regular.ttf") format("truetype");
|
||||
font-family: Pangolin;
|
||||
src: url("/assets/fonts/Pangolin-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Terminess;
|
||||
src: url("/assets/fonts/TerminessNerdFont-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: Nosey Rodent;
|
||||
src: url("/assets/fonts/noseyrodent.ttf") format("truetype");
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue