overhauled old theme
This commit is contained in:
parent
f18a342ae5
commit
fb24c6a302
82 changed files with 1378 additions and 1371 deletions
106
_src/assets/css/citrus/blog.css
Normal file
106
_src/assets/css/citrus/blog.css
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
#blog {
|
||||
background-attachment: local, fixed;
|
||||
background-color: var(--light);
|
||||
background-image: var(--dot),
|
||||
linear-gradient(var(--citrus-mix-dark) 0% 10%, var(--citrus-dark) 100%);
|
||||
background-size: 6px, contain;
|
||||
background-blend-mode: overlay, normal;
|
||||
animation: none;
|
||||
& article {
|
||||
border-radius: 0;
|
||||
background-color: var(--citrus-light);
|
||||
background-image: var(--noise);
|
||||
background-size: auto;
|
||||
background-repeat: repeat;
|
||||
box-shadow: inset 0 -2rem 3rem -4rem var(--dark), var(--shadow-heavy);
|
||||
& aside {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
background-color: var(--citrus-mix-light);
|
||||
border-color: var(--citrus-mix);
|
||||
border-radius: 0;
|
||||
}
|
||||
& pre {
|
||||
border-radius: 4px;
|
||||
color: var(--citrus-secondary);
|
||||
background-color: var(--citrus-dark-extra);
|
||||
background-size: 4px;
|
||||
}
|
||||
& [aria-label="Post warning"] {
|
||||
background-color: var(--citrus-primary);
|
||||
}
|
||||
& [aria-label="Addendum"] {
|
||||
border-image-source: linear-gradient(
|
||||
45deg,
|
||||
var(--citrus-primary),
|
||||
var(--citrus-secondary)
|
||||
);
|
||||
background-color: var(--citrus-primary);
|
||||
}
|
||||
& s {
|
||||
text-decoration-color: #d00;
|
||||
}
|
||||
& [aria-label="Postscript"] {
|
||||
& span:has([alt]) {
|
||||
&::after {
|
||||
content: "";
|
||||
width: calc(var(--avatar) - 10px);
|
||||
height: calc(var(--avatar) - 10px);
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
background-image: linear-gradient(
|
||||
color-mix(in lch, var(--light), transparent),
|
||||
transparent
|
||||
);
|
||||
box-shadow: inset 0 0 2px 0 var(--dark);
|
||||
}
|
||||
}
|
||||
& [alt="Profile picture"] {
|
||||
color: unset;
|
||||
border-radius: inherit;
|
||||
border: 2px solid;
|
||||
border-image-source: linear-gradient(
|
||||
to bottom,
|
||||
var(--citrus-mix-light),
|
||||
var(--citrus-secondary)
|
||||
);
|
||||
border-image-slice: 1;
|
||||
border-width: 3px;
|
||||
box-sizing: inherit;
|
||||
padding: 2px;
|
||||
background-image: radial-gradient(
|
||||
ellipse at 50% -0%,
|
||||
var(--light) 20%,
|
||||
var(--dark) 150%
|
||||
), var(--pansexual);
|
||||
background-blend-mode: overlay, normal;
|
||||
background-size: cover, 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: 0 0 0 2px var(--citrus-mix-dark),
|
||||
inset 0 0 0 2px var(--citrus-mix), var(--shadow-light);
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
& #posts {
|
||||
& a {
|
||||
border-width: 4px;
|
||||
box-shadow: var(--shadow-light);
|
||||
border-radius: 0;
|
||||
& p {
|
||||
color: initial;
|
||||
}
|
||||
& p:not(:last-child) {
|
||||
color: var(--citrus-dark);
|
||||
}
|
||||
&:not(:hover, :focus) {
|
||||
background-color: var(--citrus-light);
|
||||
border-color: var(--citrus-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#blog:not(:has(#posts)) header {
|
||||
text-align: initial !important;
|
||||
}
|
||||
|
|
@ -1,259 +0,0 @@
|
|||
@import url("./variables.css");
|
||||
@import url("../default/variables.css");
|
||||
@import url("./nav.css");
|
||||
|
||||
#bio,
|
||||
#interests,
|
||||
#badges,
|
||||
#artworks,
|
||||
#art {
|
||||
font-family: "Pangolin", sans-serif;
|
||||
}
|
||||
body {
|
||||
background-attachment: local, fixed;
|
||||
background-color: var(--citrus-primary);
|
||||
background-image: var(--checker),
|
||||
linear-gradient(var(--citrus-primary), var(--citrus-secondary));
|
||||
background-size: 32px, contain;
|
||||
background-blend-mode: overlay, normal;
|
||||
}
|
||||
body > nav {
|
||||
background-attachment: fixed;
|
||||
background-blend-mode: screen;
|
||||
background-image: var(--dot),
|
||||
linear-gradient(var(--citrus-primary), var(--citrus-secondary) 20%);
|
||||
background-size: 6px;
|
||||
background-blend-mode: screen;
|
||||
border-color: var(--citrus-dark);
|
||||
color: var(--citrus-dark);
|
||||
& a,
|
||||
button {
|
||||
background-image: linear-gradient(
|
||||
var(--citrus-light),
|
||||
var(--citrus-primary) 20%,
|
||||
var(--citrus-primary) 80%,
|
||||
var(--citrus-light) 100%
|
||||
);
|
||||
box-shadow: 0 0 0 2px var(--citrus-dark),
|
||||
inset 0 0 8px 2px var(--citrus-primary);
|
||||
border-radius: var(--pad-l);
|
||||
color: inherit;
|
||||
&[aria-current] {
|
||||
box-shadow: 0 0 0 2px var(--citrus-dark),
|
||||
inset 0 0 4px 2px var(--citrus-dark);
|
||||
background-image: linear-gradient(
|
||||
var(--citrus-mix),
|
||||
var(--citrus-dark) 10%,
|
||||
chocolate
|
||||
);
|
||||
color: var(--citrus-light);
|
||||
}
|
||||
&:is(:hover, :focus):not([aria-current="page"]) {
|
||||
box-shadow: 0 0 0 2px var(--citrus-dark);
|
||||
transition: background-image var(--trans), border-color var(--trans),
|
||||
box-shadow var(--trans);
|
||||
}
|
||||
}
|
||||
& details {
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
var(--citrus-primary),
|
||||
var(--citrus-secondary),
|
||||
var(--citrus-primary)
|
||||
);
|
||||
}
|
||||
}
|
||||
article {
|
||||
background-color: var(--citrus-light);
|
||||
border-radius: 0;
|
||||
background-image: var(--noise);
|
||||
box-shadow: var(--shadow);
|
||||
border: 0;
|
||||
& .header-anchor {
|
||||
border-radius: inherit;
|
||||
background-color: color-mix(in lch, magenta, white);
|
||||
&:is(:hover, :focus) {
|
||||
background-color: color-mix(in lch, magenta, white 30%);
|
||||
}
|
||||
}
|
||||
& code:not(pre *) {
|
||||
border-radius: inherit;
|
||||
background-color: yellow;
|
||||
box-shadow: 2px 2px 8px 0 color-mix(in lch, yellow, black 10%);
|
||||
}
|
||||
}
|
||||
/* home.css */
|
||||
#interests div:has(img)::after {
|
||||
display: none !important;
|
||||
}
|
||||
#interests li {
|
||||
& a {
|
||||
align-content: center;
|
||||
}
|
||||
&:has(div img) {
|
||||
margin: var(--pad-sm);
|
||||
box-shadow: var(--shadow);
|
||||
background: color-mix(in lch, yellow, white);
|
||||
&:nth-child(odd) {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
ul:not([role]) li::before {
|
||||
background-color: #000;
|
||||
}
|
||||
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
||||
filter: drop-shadow(4px 6px 0 var(--citrus-dark));
|
||||
}
|
||||
/* blog.css */
|
||||
#blog {
|
||||
background-color: #fff;
|
||||
background-image: var(--dot);
|
||||
background-size: 6px;
|
||||
background-attachment: local;
|
||||
background-repeat: repeat;
|
||||
background-blend-mode: difference;
|
||||
& main {
|
||||
&::before {
|
||||
background-image: var(--bg-sky);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
& article {
|
||||
border-radius: 0;
|
||||
background-color: #fff;
|
||||
background-image: var(--noise);
|
||||
background-size: auto;
|
||||
background-repeat: repeat;
|
||||
box-shadow: inset 0 0 2rem -0.5rem #ccc;
|
||||
& > [aria-label="Postscript"]::after {
|
||||
background-color: var(--citrus-primary);
|
||||
}
|
||||
& aside {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
background-color: var(--citrus-light);
|
||||
border-color: var(--citrus-primary);
|
||||
border-radius: 0;
|
||||
}
|
||||
& pre {
|
||||
border-radius: 4px;
|
||||
color: var(--citrus-secondary);
|
||||
background-color: color-mix(in lch, var(--citrus-secondary), black 90%);
|
||||
background-size: 4px;
|
||||
text-shadow: 2px 2px 0
|
||||
color-mix(in lch, var(--citrus-secondary), black 60%);
|
||||
}
|
||||
& [aria-label="Post warning"] {
|
||||
background-color: var(--citrus-primary);
|
||||
}
|
||||
& [aria-label="Addendum"] {
|
||||
border-image-source: linear-gradient(
|
||||
45deg,
|
||||
var(--citrus-primary),
|
||||
var(--citrus-secondary)
|
||||
);
|
||||
background-color: var(--citrus-primary);
|
||||
}
|
||||
& s {
|
||||
text-decoration-color: #d00;
|
||||
}
|
||||
}
|
||||
& #posts {
|
||||
& a {
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
border-width: 4px;
|
||||
box-shadow: var(--shadow);
|
||||
transition: border-color var(--trans), color var(--trans);
|
||||
& p {
|
||||
color: initial;
|
||||
}
|
||||
& p:not(:last-child) {
|
||||
color: color-mix(in lch, var(--dark), var(--light) 50%);
|
||||
}
|
||||
&:is(:hover, :focus) {
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* gallery.css */
|
||||
#gallery {
|
||||
& article {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
& a:has(figure) {
|
||||
transition: border-color var(--trans), background-color var(--trans);
|
||||
box-shadow: var(--shadow);
|
||||
&:is(:hover, :focus) {
|
||||
& figure {
|
||||
transition: inherit;
|
||||
background-color: currentColor;
|
||||
border-color: currentColor;
|
||||
}
|
||||
& figcaption,
|
||||
time {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
& figure {
|
||||
border-color: #fff;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
#artworks {
|
||||
article {
|
||||
margin: var(--pad-xl) 0 0 0;
|
||||
background-color: #fff;
|
||||
background-image: var(--noise), var(--lined);
|
||||
background-size: auto, 32px;
|
||||
&:last-child:not(:first-of-type) {
|
||||
margin: calc(var(--pad-xl) + var(--pad-xl)) 0 0 0;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
display: flex;
|
||||
height: 32px;
|
||||
width: calc(100% + var(--pad-xl) * 2);
|
||||
margin: -4rem 0 var(--pad-l) calc(var(--pad-xl) * -1);
|
||||
background-image: var(--border), var(--lined), var(--noise);
|
||||
background-size: 32px, 32px;
|
||||
background-blend-mode: darken;
|
||||
}
|
||||
}
|
||||
}
|
||||
#art {
|
||||
background-image: var(--noise);
|
||||
& p,
|
||||
time {
|
||||
padding: 0;
|
||||
line-height: 32px;
|
||||
}
|
||||
& img {
|
||||
border-radius: 0;
|
||||
}
|
||||
& figcaption {
|
||||
font-family: "Urbanist", sans-serif;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
body > nav {
|
||||
border-right: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
body::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
#artworks & article {
|
||||
&::before {
|
||||
width: calc(100% + var(--pad-l) * 2) !important;
|
||||
margin: -3rem 0 0 -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
80
_src/assets/css/citrus/default.css
Normal file
80
_src/assets/css/citrus/default.css
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
@import url("./blog.css");
|
||||
@import url("./gallery.css");
|
||||
@import url("./home.css");
|
||||
@import url("./nav.css");
|
||||
@import url("./variables.css");
|
||||
|
||||
:is(a, button):not(span *, [aria-label="Postscript"] *, body nav *),
|
||||
span:has(a),
|
||||
#posts a {
|
||||
color: var(--citrus-dark);
|
||||
transition: background-color var(--trans);
|
||||
background-color: var(--citrus-primary);
|
||||
&:is(:hover, :focus) {
|
||||
color: var(--citrus-dark-extra);
|
||||
background-color: var(--citrus-secondary);
|
||||
}
|
||||
& a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
body {
|
||||
color: var(--citrus-dark-extra);
|
||||
background-color: var(--citrus-primary);
|
||||
background-image: var(--paw-tiled);
|
||||
background-size: 128px;
|
||||
background-attachment: local;
|
||||
background-repeat: repeat;
|
||||
background-blend-mode: soft-light;
|
||||
animation: mainbg 10s linear infinite;
|
||||
}
|
||||
header {
|
||||
color: var(--citrus-dark);
|
||||
}
|
||||
ul:not([role]) li::before {
|
||||
background-color: var(--citrus-dark-extra);
|
||||
}
|
||||
article {
|
||||
background: var(--noise),
|
||||
linear-gradient(
|
||||
var(--citrus-light) 70%,
|
||||
color-mix(in lch, var(--citrus-mix-light), var(--citrus-light)) 100%
|
||||
);
|
||||
border-radius: 0;
|
||||
box-shadow: var(--shadow-heavy);
|
||||
border: 0;
|
||||
& .header-anchor {
|
||||
border-radius: 0;
|
||||
}
|
||||
& code:not(pre *) {
|
||||
border-radius: 0;
|
||||
background-color: var(--citrus-dark);
|
||||
color: var(--citrus-primary);
|
||||
}
|
||||
&:not(pre,code,a) {
|
||||
font-family: "Nosey Rodent", sans-serif;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
body > nav {
|
||||
border: 0;
|
||||
}
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
body::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
#artworks & article {
|
||||
&::before {
|
||||
width: calc(100% + var(--pad-l) * 2) !important;
|
||||
margin: -3rem 0 0 -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
_src/assets/css/citrus/gallery.css
Normal file
45
_src/assets/css/citrus/gallery.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
#gallery {
|
||||
& article {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
& a:has(figure) {
|
||||
font-family: "Urbanist", sans-serif;
|
||||
transition: border-color var(--trans), background-color var(--trans);
|
||||
box-shadow: var(--shadow-light);
|
||||
&:is(:hover, :focus) {
|
||||
& figure {
|
||||
transition: inherit;
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
& figure {
|
||||
border-width: 4px;
|
||||
&:is(:not(a:hover *, a:focus *)) {
|
||||
border-color: var(--light);
|
||||
background-color: var(--light);
|
||||
}
|
||||
}
|
||||
}
|
||||
#artworks {
|
||||
article {
|
||||
margin: var(--pad-xl) 0 0 0;
|
||||
background-color: var(--light);
|
||||
background-image: var(--noise), var(--lined);
|
||||
background-size: auto, 32px;
|
||||
&:last-child:not(:first-of-type) {
|
||||
margin: calc(var(--pad-xl) + var(--pad-xl)) 0 0 0;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
display: flex;
|
||||
height: 32px;
|
||||
width: calc(100% + var(--pad-xl) * 2);
|
||||
margin: -4rem 0 var(--pad-l) calc(var(--pad-xl) * -1);
|
||||
background-image: var(--border), var(--lined), var(--noise);
|
||||
background-size: 32px, 32px;
|
||||
background-blend-mode: darken;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
_src/assets/css/citrus/home.css
Normal file
21
_src/assets/css/citrus/home.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
article#badges {
|
||||
& a:is(:hover,:focus) {
|
||||
transition: box-shadow var(--trans), background-color var(--trans);
|
||||
box-shadow: 0 0 0 2px var(--citrus-secondary), 0 0 0 4px var(--citrus-dark-extra);
|
||||
background-color: var(--citrus-secondary);
|
||||
}
|
||||
}
|
||||
#interests li {
|
||||
margin: var(--pad-sm);
|
||||
box-shadow: var(--shadow-light);
|
||||
background: color-mix(in lch, #ff0, #fff);
|
||||
&:nth-child(odd) {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
& a {
|
||||
align-content: center;
|
||||
& span:has(img)::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,58 @@
|
|||
body > nav {
|
||||
border-right: 4px solid;
|
||||
border-bottom: 4px solid;
|
||||
height: auto;
|
||||
border-bottom-right-radius: var(--round);
|
||||
& a, button {
|
||||
border: 0;
|
||||
margin: 0 0 var(--pad-sm) 0 ;
|
||||
color: var(--citrus-dark);
|
||||
& summary {
|
||||
filter: drop-shadow(2px 0 var(--citrus-dark))
|
||||
drop-shadow(-2px 0 var(--citrus-dark))
|
||||
drop-shadow(0 2px var(--citrus-dark))
|
||||
drop-shadow(0px -2px var(--citrus-dark));
|
||||
color: var(--citrus-light);
|
||||
}
|
||||
& a,
|
||||
button {
|
||||
background: var(--button-bg);
|
||||
box-shadow: var(--button-shine);
|
||||
border: var(--button-border);
|
||||
border-radius: var(--round);
|
||||
color: inherit;
|
||||
&[aria-current] {
|
||||
background: var(--button-current-bg);
|
||||
box-shadow: var(--button-current-shine);
|
||||
border: var(--button-current-border);
|
||||
color: var(--citrus-light);
|
||||
}
|
||||
&:is(:hover, :focus):not([aria-current="page"]) {
|
||||
background: var(--button-hover-bg);
|
||||
box-shadow: var(--button-hover-shine);
|
||||
border: var(--button-hover-border);
|
||||
transition: background-image var(--trans), border-color var(--trans),
|
||||
box-shadow var(--trans);
|
||||
color: var(--citrus-mix-dark);
|
||||
}
|
||||
}
|
||||
& details,
|
||||
details[open] {
|
||||
background: var(--details-bg);
|
||||
box-shadow: var(--details-shine);
|
||||
border: var(--details-border);
|
||||
}
|
||||
}
|
||||
body > nav,
|
||||
header {
|
||||
background-attachment: fixed;
|
||||
background-blend-mode: screen;
|
||||
background-image: var(--nav-bg);
|
||||
background-size: 6px;
|
||||
border-color: var(--citrus-dark);
|
||||
}
|
||||
header {
|
||||
width: var(--view);
|
||||
border-right-width: 4px;
|
||||
border-right-style: solid;
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-right-radius: 100px;
|
||||
margin-left: calc(var(--view) - 4px);
|
||||
position: relative;
|
||||
padding: calc(var(--pad-m) - 2px) var(--pad-sm);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,30 @@
|
|||
--citrus-secondary: var(--secondary);
|
||||
--citrus-light: color-mix(in lch, var(--citrus-primary), var(--light) 70%);
|
||||
--citrus-dark: color-mix(in lch, var(--citrus-secondary), var(--dark) 60%);
|
||||
--citrus-light-extra: color-mix(in lch, var(--citrus-light), var(--light));
|
||||
--citrus-dark-extra: color-mix(in lch, var(--citrus-dark), var(--dark));
|
||||
--citrus-mix: color-mix(in lch,var(--citrus-primary),var(--citrus-secondary));
|
||||
--shadow: 0.2rem 0.2rem 0.4rem 0.2rem #0003;
|
||||
--citrus-mix-light: color-mix(in lch, var(--citrus-light), var(--citrus-mix));
|
||||
--citrus-mix-dark: color-mix(in lch, var(--citrus-dark), var(--citrus-mix));
|
||||
--shadow-light: 0.2rem 0.2rem 0.2rem 0.1rem #0002;
|
||||
--shadow-heavy: 0.2rem 0.2rem 0.4rem 0.2rem #0004;
|
||||
--checker: url("/assets/img/theme/citrus/checker.png");
|
||||
--dot: url("/assets/img/theme/citrus/dot.png");
|
||||
--lined: url("/assets/img/theme/citrus/line.png");
|
||||
--paper: url("/assets/img/theme/citrus/paper.png");
|
||||
--noise: url("/assets/img/theme/citrus/imagedoc-lightnoise.png");
|
||||
--border: url("/assets/img/theme/citrus/border.png");
|
||||
--bg-sky: url("/assets/img/pkmn/bg/plat_trade1.png");
|
||||
--bg-ilex: url("/assets/img/pkmn/bg/ilex_day.png");
|
||||
--bg-ilex-noon: url("/assets/img/pkmn/bg/ilex_noon.png");
|
||||
--bg-ilex-night: url("/assets/img/pkmn/bg/ilex_night.png");
|
||||
}
|
||||
--nav-bg: var(--dot), linear-gradient(var(--citrus-primary), var(--citrus-secondary) 60%, var(--citrus-primary) 120%);
|
||||
--button-bg: linear-gradient(var(--citrus-primary) 30%, var(--citrus-mix) 80%);
|
||||
--button-border: 2px solid var(--citrus-dark);
|
||||
--button-shine: inset 0px 2px var(--citrus-light), inset 0px -2px var(--citrus-mix);
|
||||
--button-hover-bg: linear-gradient(var(--citrus-light),var(--citrus-primary),var(--citrus-mix-light));
|
||||
--button-hover-border: 2px solid var(--citrus-light);
|
||||
--button-hover-shine: inset 0 -2px 0 0 var(--citrus-mix);
|
||||
--button-current-bg: linear-gradient(var(--citrus-mix-dark),var(--citrus-dark-extra) 200%);
|
||||
--button-current-border: 2px solid var(--citrus-dark-extra);
|
||||
--button-current-shine: inset 0px 2px 0 var(--citrus-mix-light), inset 0 -2px 0 var(--citrus-mix-dark);
|
||||
--details-bg: linear-gradient(-45deg,var(--citrus-primary),var(--citrus-mix),var(--citrus-primary));
|
||||
--details-shine: inset 0 2px 0 var(--citrus-light-extra), inset 2px 0 0 var(--citrus-light), inset 0 -2px 0 var(--citrus-primary), inset -2px 0 0 var(--citrus-primary);
|
||||
--details-border: 2px solid var(--citrus-dark);
|
||||
}
|
||||
|
|
@ -6,8 +6,10 @@
|
|||
}
|
||||
article {
|
||||
margin: 0 auto;
|
||||
font-family: "Rubik", sans-serif;
|
||||
max-width: var(--post);
|
||||
& > [aria-label="Postscript"]::after {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
& section:not(section:has(p)) {
|
||||
display: flex;
|
||||
gap: var(--pad-l);
|
||||
|
|
@ -17,7 +19,12 @@ article {
|
|||
border-radius: var(--round);
|
||||
width: 66%;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-bottom: var(--pad-m);
|
||||
}
|
||||
& [aria-label="Post warning"] {
|
||||
|
|
@ -26,7 +33,6 @@ article {
|
|||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-family: monospace;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
|
|
@ -36,14 +42,16 @@ article {
|
|||
}
|
||||
}
|
||||
}
|
||||
[aria-label="Addendum"], [aria-label="Post warning"], article aside {
|
||||
[aria-label="Addendum"],
|
||||
[aria-label="Post warning"],
|
||||
article aside {
|
||||
margin: var(--pad-l) 0;
|
||||
padding: var(--pad-l);
|
||||
}
|
||||
article > [aria-label="Addendum"] {
|
||||
border-image-slice: 1;
|
||||
border-image-width: 2px;
|
||||
border-image-outset: 4px;
|
||||
border-image-slice: 1;
|
||||
border-image-width: 2px;
|
||||
border-image-outset: 4px;
|
||||
}
|
||||
|
||||
article > [aria-label="Postscript"] {
|
||||
|
|
@ -66,48 +74,46 @@ article > [aria-label="Postscript"] {
|
|||
margin-top: inherit;
|
||||
margin-left: inherit;
|
||||
margin-right: var(--avatar);
|
||||
margin-bottom: var(--pad-l);
|
||||
border-radius: var(--round);
|
||||
border-bottom-right-radius: 0;
|
||||
width: fit-content;
|
||||
padding: var(--pad-m);
|
||||
background-color: #0060df;
|
||||
color: #fff;
|
||||
font-family: "Rubik", sans-serif;
|
||||
font-size: 0.8rem;
|
||||
word-wrap: anywhere;
|
||||
|
||||
&:hover {
|
||||
background-color: #3a76f0;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: var(--pad-l);
|
||||
& a:has(img:nth-child(n + 2)) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr));
|
||||
align-items: center;
|
||||
gap: var(--pad-m);
|
||||
}
|
||||
& > img {
|
||||
transition: height var(--trans), border-radius var(--trans),
|
||||
background-color var(--trans);
|
||||
border-radius: var(--round);
|
||||
min-height: fit-content;
|
||||
max-height: var(--image);
|
||||
}
|
||||
}
|
||||
& a {
|
||||
background: unset;
|
||||
}
|
||||
|
||||
& p a:has(img:nth-child(n + 2)) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 40%), 1fr));
|
||||
align-items: center;
|
||||
gap: var(--pad-m);
|
||||
}
|
||||
& p > img {
|
||||
transition: height var(--trans), border-radius var(--trans),
|
||||
background-color var(--trans);
|
||||
border-radius: var(--round);
|
||||
min-height: fit-content;
|
||||
max-height: var(--image);
|
||||
}
|
||||
& img:not(p a > img) {
|
||||
display: flex;
|
||||
box-sizing: content-box;
|
||||
margin: 0 0 0 auto;
|
||||
border-radius: 100%;
|
||||
& span:has([alt]) {
|
||||
width: var(--avatar);
|
||||
height: var(--avatar);
|
||||
display: flex;
|
||||
float: right;
|
||||
& [alt="Profile picture"] {
|
||||
display: flex;
|
||||
box-sizing: content-box;
|
||||
margin: 0 0 0 auto;
|
||||
border-radius: 100%;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -165,4 +171,15 @@ article > [aria-label="Postscript"] {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
article > [aria-label="Postscript"] {
|
||||
& p,
|
||||
p > img {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
#blog #posts a {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@import url("./variables.css");
|
||||
@import url("./nav.css");
|
||||
@import url("./motion.css");
|
||||
|
||||
:root {
|
||||
--view: 18rem;
|
||||
|
|
@ -12,6 +13,7 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Rubik", sans-serif;
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
margin-block-start: 0;
|
||||
|
|
@ -26,10 +28,10 @@ body {
|
|||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& a,
|
||||
button {
|
||||
cursor: pointer;
|
||||
transition: background-color var(--trans);
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
outline: 0;
|
||||
|
|
@ -38,8 +40,8 @@ body {
|
|||
}
|
||||
svg {
|
||||
fill: currentColor;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
stroke-width: 0;
|
||||
}
|
||||
header {
|
||||
padding-top: var(--pad-xl);
|
||||
|
|
@ -47,12 +49,31 @@ header {
|
|||
& svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: var(--pad-m);
|
||||
}
|
||||
& h1 {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
overflow-y: hidden;
|
||||
word-break: break-all;
|
||||
flex-wrap: wrap;
|
||||
font-family: "Nosey Rodent", sans-serif;
|
||||
display: flex;
|
||||
margin-left: var(--view);
|
||||
width: calc(100% - var(--view));
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
inset-block: 100%;
|
||||
text-align: center;
|
||||
& span {
|
||||
background-image: var(--transgender);
|
||||
padding: 0 var(--pad-sm);
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
padding: var(--pad-xl);
|
||||
padding-left: calc(var(--view) + var(--pad-xl));
|
||||
|
|
@ -78,14 +99,6 @@ details {
|
|||
border-radius: 0 var(--round) var(--round) 0;
|
||||
}
|
||||
|
||||
main article[id] {
|
||||
|
||||
& p,
|
||||
li {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
|
|
@ -93,10 +106,6 @@ article {
|
|||
height: max-content;
|
||||
padding: var(--pad-xl);
|
||||
|
||||
& a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
& a:has(figure) {
|
||||
border-radius: var(--round);
|
||||
|
||||
|
|
@ -139,11 +148,11 @@ article {
|
|||
word-break: break-word;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
transition: background-color var(--trans), border-color var(--trans);
|
||||
}
|
||||
|
||||
& pre,
|
||||
code:not(pre *) {
|
||||
transition: background-color var(--trans), border-color var(--trans);
|
||||
border-radius: var(--round);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -153,22 +162,37 @@ article {
|
|||
border-style: solid;
|
||||
border-width: 2px;
|
||||
padding: var(--pad-m);
|
||||
border-radius: var(--round);
|
||||
border-radius: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& img {
|
||||
border-radius: inherit;
|
||||
}
|
||||
& ul:not([role="list"]):is(#art *) {
|
||||
padding: 0;
|
||||
margin: 0 0 var(--pad-sm) var(--pad-xl);
|
||||
}
|
||||
& li:is(#art *, #bio *) {
|
||||
display: flex;
|
||||
&::marker {
|
||||
content: none;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
mask-image: var(--paw);
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
margin: 0 0 0 calc(var(--pad-xl) * -1);
|
||||
}
|
||||
}
|
||||
|
||||
& section {
|
||||
& a:has(figure) {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
& figure img {
|
||||
border-radius: var(--round);
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
|
|
@ -178,7 +202,7 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
&>:first-child>code {
|
||||
& > :first-child > code {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
margin: var(--pad-sm) 0;
|
||||
|
|
@ -191,18 +215,31 @@ article {
|
|||
|
||||
img[src*="/assets/img/flag/"] {
|
||||
height: 32px;
|
||||
border-radius: 0.2rem;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: #fff;
|
||||
border-radius: 2px;
|
||||
&:first-child {
|
||||
margin-left: var(--pad-m);
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-right: var(--pad-m);
|
||||
}
|
||||
}
|
||||
|
||||
a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
||||
transform: translateY(-4px);
|
||||
transition: var(--trans);
|
||||
span:has(img[src*="https://www.google.com/s2/favicons"]) img
|
||||
{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
footer {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
header {
|
||||
padding-left: 0;
|
||||
padding-top: var(--pad-m);
|
||||
|
|
@ -213,16 +250,11 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
|||
padding: var(--pad-l);
|
||||
}
|
||||
|
||||
body>nav {
|
||||
position: initial;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main>section {
|
||||
main > section {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main>section {
|
||||
main > section {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
|
|
@ -230,35 +262,4 @@ a:has(img[src*="/assets/img/button"]):is(:hover, :focus) img {
|
|||
max-width: initial;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
body>nav::before,
|
||||
body>nav::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
body>nav {
|
||||
flex-direction: row;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
||||
& details {
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
body>nav {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
|
||||
& details[open] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,9 +8,6 @@
|
|||
}
|
||||
}
|
||||
#artworks {
|
||||
& p {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
& ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(
|
||||
|
|
@ -27,20 +24,17 @@
|
|||
|
||||
& figure {
|
||||
margin: 0;
|
||||
padding: var(--pad-sm);
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
& img {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: var(--thumb);
|
||||
border-bottom: unset;
|
||||
object-fit: contain;
|
||||
border-radius: var(--round);
|
||||
}
|
||||
|
||||
& figcaption {
|
||||
font-family: Urbanist, sans-serif;
|
||||
font-size: var(--pad-lm);
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
|
@ -55,7 +49,6 @@
|
|||
flex-direction: column;
|
||||
width: fit-content;
|
||||
h3 {
|
||||
font-family: "Urbanist", sans-serif;
|
||||
display: flex;
|
||||
gap: var(--pad-sm);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,133 +7,95 @@
|
|||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
@keyframes slide {
|
||||
0% {
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 200% 100%;
|
||||
}
|
||||
}
|
||||
article#bio {
|
||||
& ul {
|
||||
margin: 0 var(--pad-xl);
|
||||
}
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& span[id] {
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
background-repeat: repeat;
|
||||
background-size: 200% 100%;
|
||||
background-position: 0% 50%;
|
||||
animation: slide 5s linear infinite;
|
||||
transition: var(--trans);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: var(--dark);
|
||||
background-clip: initial;
|
||||
}
|
||||
}
|
||||
|
||||
& img[alt] {
|
||||
& .emoji {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
display: inline-flex;
|
||||
margin: 0 0 0 var(--pad-sm);
|
||||
align-self: center;
|
||||
&::after,
|
||||
img {
|
||||
filter: drop-shadow(0 0 0.5px #000a);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article#badges {
|
||||
& ul {
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--pad-sm);
|
||||
}
|
||||
|
||||
& a {
|
||||
display: flex;
|
||||
padding: inherit;
|
||||
margin: 0;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
article#bio ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article#bio ul li {
|
||||
&::before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
mask-image: var(--paw);
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
margin: var(--pad-sm) 0 0 calc(var(--pad-xl)*-1);
|
||||
& img {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
&::marker {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
article#interests ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
article#interests {
|
||||
& details ul {
|
||||
& ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: var(--pad-l) 0;
|
||||
}
|
||||
|
||||
& details:last-child ul {
|
||||
padding: var(--pad-l) 0 0 0
|
||||
}
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
width: 14ch;
|
||||
flex-wrap: wrap;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
& a {
|
||||
padding: var(--pad-sm);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
& span {
|
||||
display: flex;
|
||||
width: 14ch;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
padding: var(--pad-sm);
|
||||
width: inherit;
|
||||
&:not(:hover, :focus) {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .music img,
|
||||
.games img {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
& .manga img {
|
||||
height: 128px;
|
||||
}
|
||||
& span:has(img) {
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
&::after {
|
||||
content: "";
|
||||
background-image: url("/assets/img/icon/shortcut.png");
|
||||
background-size: 100%;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: -1.5rem 0 0 -0.5rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
& details:last-child ul {
|
||||
padding: var(--pad-l) 0 0 0;
|
||||
}
|
||||
|
||||
& details h3 {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
& div:has(img) {
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.music img {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.manga img {
|
||||
height: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
#pkmn {
|
||||
|
|
@ -150,54 +112,39 @@ article#interests {
|
|||
border-width: 3px;
|
||||
border-style: solid;
|
||||
margin: var(--pad-l) 0 0 0;
|
||||
&>* {
|
||||
|
||||
& li {
|
||||
display: flex;
|
||||
margin-top: -8px;
|
||||
margin-left: -12px;
|
||||
|
||||
&:hover {
|
||||
filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 3px #0006);
|
||||
& span:hover {
|
||||
filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff)
|
||||
drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
|
||||
drop-shadow(0 2px 3px #000a);
|
||||
animation: jump 200ms infinite alternate;
|
||||
}
|
||||
}
|
||||
& li:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
#agender {
|
||||
background-image: 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);
|
||||
background-image: var(--agender)
|
||||
}
|
||||
|
||||
#aromantic {
|
||||
background-image: linear-gradient(var(--flag),
|
||||
#0a2 20%,
|
||||
#7d6 0 40%,
|
||||
#fff 0 60%,
|
||||
#a9a9a9 0 80%,
|
||||
#000 0);
|
||||
background-image: var(--aromantic)
|
||||
}
|
||||
|
||||
#pansexual {
|
||||
background-image: linear-gradient(var(--flag), #f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
|
||||
background-image: var(--pansexual)
|
||||
}
|
||||
|
||||
#interests div:has(img)::after {
|
||||
content: "";
|
||||
background-image: url("/assets/img/icon/shortcut.png");
|
||||
background-size: 100%;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: -1.5rem 0 0 -0.5rem;
|
||||
pointer-events: none;
|
||||
#badges img {
|
||||
max-height: 31px;
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 920px) {
|
||||
article#interests {
|
||||
display: flex;
|
||||
|
|
@ -211,4 +158,4 @@ article#interests {
|
|||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import url("./variables.css");
|
||||
|
||||
#index {
|
||||
font-family: "Nosey Rodent", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--primary-dark-300);
|
||||
|
|
@ -9,7 +10,7 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: var(--sunny);
|
||||
background-image: url("/assets/img/theme/citrus/sundae.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
|
|
|
|||
82
_src/assets/css/default/motion.css
Normal file
82
_src/assets/css/default/motion.css
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* Scrolling pride flag text */
|
||||
article#bio span[id],
|
||||
footer span {
|
||||
font-family: "Nosey Rodent", sans-serif;
|
||||
font-weight: bold;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
filter: var(--outlined);
|
||||
background-repeat: repeat;
|
||||
background-size: 200% 100%;
|
||||
background-position: 0% 50%;
|
||||
animation: slide 5s linear infinite;
|
||||
transition: color var(--trans);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
body {
|
||||
animation: none !important;
|
||||
}
|
||||
/* Buttons */
|
||||
:is(a, button),
|
||||
span:has(a) {
|
||||
transition: none !important;
|
||||
}
|
||||
/* Permalinks */
|
||||
.header-anchor,
|
||||
article pre {
|
||||
transition: none !important;
|
||||
}
|
||||
/* Images */
|
||||
#gallery a:has(figure),
|
||||
#blog article figure,
|
||||
a img {
|
||||
transition: none !important;
|
||||
}
|
||||
.emoji:has(img[alt*="🐇"]) {
|
||||
& img {
|
||||
opacity: 0;
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "🐇";
|
||||
}
|
||||
}
|
||||
/* Scrolling pride flag text */
|
||||
article#bio span[id], footer span {
|
||||
transition: none !important;
|
||||
animation: none !important;
|
||||
color: inherit;
|
||||
background-clip: initial !important;
|
||||
background: initial !important;
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-flex;
|
||||
width: 2rem;
|
||||
height: 1.25rem;
|
||||
margin: 0 2px;
|
||||
background-repeat: repeat-x;
|
||||
border-radius: 2px;
|
||||
top: 4px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
#aromantic::before {
|
||||
background-image: url("/assets/img/flag/aromantic.svg");
|
||||
}
|
||||
#agender::before {
|
||||
background-image: url("/assets/img/flag/agender.svg");
|
||||
}
|
||||
#pansexual::before {
|
||||
background-image: url("/assets/img/flag/pansexual.svg");
|
||||
}
|
||||
footer span::before {
|
||||
background-image: url("/assets/img/flag/trans.svg");
|
||||
}
|
||||
/* Jumping critters */
|
||||
#pkmn span:hover {
|
||||
animation: none !important;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
body>nav::before,
|
||||
body > nav::before,
|
||||
body::after {
|
||||
z-index: -1;
|
||||
content: "";
|
||||
|
|
@ -11,7 +11,7 @@ body::after {
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
body>nav::before {
|
||||
body > nav::before {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
mask-size: 160%;
|
||||
|
|
@ -19,20 +19,6 @@ body>nav::before {
|
|||
-webkit-mask-position-y: 90%;
|
||||
}
|
||||
|
||||
body>nav::after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--view);
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
mask-image: var(--paw-tiled);
|
||||
animation: navbg 10s linear infinite;
|
||||
mask-size: 128px;
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: none;
|
||||
mask-size: 100%;
|
||||
|
|
@ -42,15 +28,16 @@ body::after {
|
|||
-webkit-mask-position-y: bottom;
|
||||
}
|
||||
|
||||
body>nav {
|
||||
body > nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 1rem;
|
||||
overflow-x: hidden;
|
||||
padding: var(--pad-l);
|
||||
position: fixed;
|
||||
width: var(--view);
|
||||
height: 100%;
|
||||
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
& * svg,
|
||||
li img {
|
||||
margin: 0 8px 0 8px;
|
||||
|
|
@ -88,15 +75,13 @@ body>nav {
|
|||
font-size: 1.125rem;
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
height: var(--pad-xl);
|
||||
height: 36px;
|
||||
line-height: var(--pad-xl);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Rubik", sans-serif;
|
||||
|
||||
&>nav {
|
||||
& > nav {
|
||||
gap: var(--pad-m);
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
|
|
@ -114,31 +99,50 @@ body {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
& details>summary {
|
||||
& details > summary {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 var(--pad-lm) 0 0;
|
||||
padding: 0;
|
||||
height: var(--pad-xl);
|
||||
|
||||
&>svg {
|
||||
transform: rotate(0deg);
|
||||
transition: transform var(--trans);
|
||||
}
|
||||
}
|
||||
|
||||
& details:not([open])>summary {
|
||||
border-radius: var(--round);
|
||||
& details[open], details:not([open]) {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
|
||||
&>summary svg {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 920px) {
|
||||
body > nav {
|
||||
position: initial;
|
||||
width: 100%;
|
||||
overflow: initial;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
& a, button {
|
||||
line-height: initial;
|
||||
}
|
||||
& details {
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
}
|
||||
}
|
||||
body > nav::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 620px) {
|
||||
body > nav {
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
||||
& details {
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
body::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
@import url("./theme-light.css");
|
||||
@import url("./theme-dark.css");
|
||||
@import url("./theme-dark.css");
|
||||
@import url("./theme-light.css");
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
article,
|
||||
body,
|
||||
header svg {
|
||||
|
|
@ -26,7 +25,6 @@
|
|||
}
|
||||
|
||||
& pre {
|
||||
transition: background-color var(--trans), border-color var(--trans);
|
||||
background-color: var(--secondary-100);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -41,10 +39,6 @@
|
|||
}
|
||||
|
||||
/* blog.css */
|
||||
& [aria-label="Postscript"]::after {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
& [aria-label="Post warning"] {
|
||||
background-color: var(--secondary);
|
||||
color: var(--secondary-100);
|
||||
|
|
@ -57,10 +51,12 @@
|
|||
|
||||
& [aria-label="Addendum"] {
|
||||
box-shadow: inset 0 0 0 2px var(--secondary);
|
||||
border-image-source: linear-gradient(45deg,
|
||||
var(--secondary),
|
||||
var(--secondary-600),
|
||||
var(--secondary));
|
||||
border-image-source: linear-gradient(
|
||||
45deg,
|
||||
var(--secondary),
|
||||
var(--secondary-600),
|
||||
var(--secondary)
|
||||
);
|
||||
background-color: var(--secondary-400);
|
||||
}
|
||||
}
|
||||
|
|
@ -70,17 +66,14 @@
|
|||
color: var(--secondary-light-700);
|
||||
}
|
||||
}
|
||||
|
||||
/* default.css */
|
||||
body {
|
||||
background-color: var(--secondary-100);
|
||||
|
||||
/* this is cursed */
|
||||
& :is(a, button) {
|
||||
& :is(a, button):not(span *, [aria-label="Postscript"] *),
|
||||
span:has(a) {
|
||||
color: var(--secondary-light-400);
|
||||
border-color: var(--secondary-600);
|
||||
background-color: var(--secondary-300);
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
color: var(--secondary-light-500);
|
||||
border-color: currentColor;
|
||||
|
|
@ -93,14 +86,16 @@
|
|||
box-shadow: 0 0 0 2px var(--secondary-300);
|
||||
}
|
||||
}
|
||||
& span a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&>nav {
|
||||
& > nav {
|
||||
background-color: inherit;
|
||||
border-color: var(--secondary);
|
||||
|
||||
& details {
|
||||
background-color: var(--secondary-100);
|
||||
|
||||
&:not([open]) summary {
|
||||
&:not([open]) {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
|
@ -117,16 +112,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: linear-gradient(to bottom, var(--secondary-600) 0%, transparent 30vw);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--secondary-600) 0%,
|
||||
transparent 30vw
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
&::after, & > nav::before {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
|
@ -143,7 +138,8 @@
|
|||
}
|
||||
|
||||
& img {
|
||||
box-shadow: 0 0 0 1px color-mix(in lch, transparent, var(--secondary-500) 70%);
|
||||
box-shadow: 0 0 0 1px
|
||||
color-mix(in lch, transparent, var(--secondary-500) 70%);
|
||||
}
|
||||
|
||||
& details h3 {
|
||||
|
|
@ -153,9 +149,5 @@
|
|||
|
||||
a:has(img[src*="/assets/img/button"]) {
|
||||
background-color: unset;
|
||||
|
||||
&:is(:hover, :focus) img {
|
||||
filter: drop-shadow(4px 6px 0 var(--secondary-500));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@media (prefers-color-scheme: light) {
|
||||
|
||||
article,
|
||||
body,
|
||||
header svg {
|
||||
|
|
@ -26,7 +25,6 @@
|
|||
}
|
||||
|
||||
& pre {
|
||||
transition: background-color var(--trans), border-color var(--trans);
|
||||
background-color: var(--primary-100);
|
||||
|
||||
&:hover {
|
||||
|
|
@ -41,10 +39,6 @@
|
|||
}
|
||||
|
||||
/* blog.css */
|
||||
& [aria-label="Postscript"]::after {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
& [aria-label="Post warning"] {
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-dark-100);
|
||||
|
|
@ -57,10 +51,12 @@
|
|||
|
||||
& [aria-label="Addendum"] {
|
||||
box-shadow: inset 0 0 0 2px var(--primary);
|
||||
border-image-source: linear-gradient(45deg,
|
||||
var(--primary),
|
||||
var(--primary-600),
|
||||
var(--primary));
|
||||
border-image-source: linear-gradient(
|
||||
45deg,
|
||||
var(--primary),
|
||||
var(--primary-600),
|
||||
var(--primary)
|
||||
);
|
||||
background-color: var(--primary-400);
|
||||
}
|
||||
}
|
||||
|
|
@ -70,21 +66,18 @@
|
|||
color: var(--primary-dark-700);
|
||||
}
|
||||
}
|
||||
|
||||
/* default.css */
|
||||
body {
|
||||
background-color: var(--primary-100);
|
||||
|
||||
/* this is cursed */
|
||||
& :is(a, button) {
|
||||
& :is(a, button):not(span *, [aria-label="Postscript"] *),
|
||||
span:has(a) {
|
||||
color: var(--primary-dark-400);
|
||||
border-color: var(--primary-600);
|
||||
background-color: var(--primary-400);
|
||||
|
||||
&:is(:hover, :focus) {
|
||||
color: var(--primary-dark-500);
|
||||
border-color: currentColor;
|
||||
background-color: var(--primary-500);
|
||||
background-color: var(--primary-600);
|
||||
}
|
||||
|
||||
&:is(.header-anchor):is(:hover, :focus) {
|
||||
|
|
@ -93,20 +86,22 @@
|
|||
box-shadow: 0 0 0 2px var(--primary-300);
|
||||
}
|
||||
}
|
||||
& span a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&>nav {
|
||||
border-color: var(--primary);
|
||||
|
||||
& > nav {
|
||||
background-color: inherit;
|
||||
border-color: var(--primary-dark-500);
|
||||
& details {
|
||||
background-color: var(--primary-100);
|
||||
|
||||
&:not([open]) summary {
|
||||
color: var(--primary);
|
||||
&:not([open]) {
|
||||
color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
||||
& details[open] {
|
||||
border-color: var(--primary);
|
||||
border-color: var(--primary-dark-800);
|
||||
background-color: var(--primary-300);
|
||||
color: var(--primary-dark-300);
|
||||
|
||||
|
|
@ -117,17 +112,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: linear-gradient(to bottom, var(--primary-600) 0%, transparent 30vw);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
var(--primary-600) 0%,
|
||||
transparent 30vw
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: var(--primary);
|
||||
&::after,
|
||||
& > nav::before {
|
||||
background-color: var(--primary-dark-500);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -143,7 +139,8 @@
|
|||
}
|
||||
|
||||
& img {
|
||||
box-shadow: 0 0 0 1px color-mix(in lch, transparent, var(--primary-dark-500) 30%);
|
||||
box-shadow: 0 0 0 1px
|
||||
color-mix(in lch, transparent, var(--primary-dark-500) 30%);
|
||||
}
|
||||
|
||||
& details h3 {
|
||||
|
|
@ -153,9 +150,5 @@
|
|||
|
||||
a:has(img[src*="/assets/img/button"]) {
|
||||
background-color: unset;
|
||||
|
||||
&:is(:hover, :focus) img {
|
||||
filter: drop-shadow(4px 6px 0 var(--primary-500));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
|
|
|||
BIN
_src/assets/fonts/noseyrodent.ttf
Normal file
BIN
_src/assets/fonts/noseyrodent.ttf
Normal file
Binary file not shown.
BIN
_src/assets/img/art/sundae_funny.png
Normal file
BIN
_src/assets/img/art/sundae_funny.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 942 B |
BIN
_src/assets/img/button/catshaped.gif
Normal file
BIN
_src/assets/img/button/catshaped.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
_src/assets/img/button/okesska_8831_final2.gif
Normal file
BIN
_src/assets/img/button/okesska_8831_final2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
_src/assets/img/button/powered-by-linux.png
Normal file
BIN
_src/assets/img/button/powered-by-linux.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
_src/assets/img/button/yummy-cricket_krita.png
Normal file
BIN
_src/assets/img/button/yummy-cricket_krita.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
_src/assets/img/changelog/ver7.png
Normal file
BIN
_src/assets/img/changelog/ver7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
_src/assets/img/opengraph/site.png
Normal file
BIN
_src/assets/img/opengraph/site.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
|
|
@ -1,6 +1,8 @@
|
|||
import { audioPath } from './path.js'
|
||||
import { audioPath } from "./path.js";
|
||||
|
||||
let bob = document.getElementById("bob");
|
||||
let help = document.createElement("audio");
|
||||
|
||||
help.src = `${audioPath}bob.ogg`;
|
||||
help.loop = true;
|
||||
bob.appendChild(help);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
import { audioPath } from "./path.js";
|
||||
|
||||
let pipe = document.getElementById("meow");
|
||||
let preload = new Image();
|
||||
preload.src = "/assets/img/button/braixdragon-cat2.gif";
|
||||
|
||||
let audio = new Audio(`${audioPath}anvil_land_low.ogg`);
|
||||
let hoverTimeout;
|
||||
let hovered = false;
|
||||
let played = localStorage.getItem("audioPlayed") === "true";
|
||||
let audio = new Audio(`${audioPath}anvil_land_low.ogg`);
|
||||
let preload = new Image();
|
||||
preload.src = "/assets/img/button/braixdragon-cat2.gif";
|
||||
|
||||
window.addEventListener("beforeunload", () => {
|
||||
localStorage.removeItem("catflattened");
|
||||
|
|
|
|||
14
_src/assets/js/details-save.js
Normal file
14
_src/assets/js/details-save.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
const detailsElements = document.getElementsByTagName("details");
|
||||
const dropdown = Array.from(detailsElements);
|
||||
|
||||
const save = () => {
|
||||
dropdown.forEach((details, i) => {
|
||||
localStorage.setItem(`details${i}`, details.hasAttribute("open"));
|
||||
});
|
||||
};
|
||||
|
||||
dropdown.forEach((details, i) => {
|
||||
const isOpen = JSON.parse(localStorage.getItem(`details${i}`)) || false;
|
||||
details.toggleAttribute("open", isOpen);
|
||||
details.addEventListener("toggle", save);
|
||||
});
|
||||
|
|
@ -172,7 +172,7 @@ let favorites = [
|
|||
{ className: "togekiss" },
|
||||
{ className: "leafeon" },
|
||||
{ className: "glaceon" },
|
||||
{ className: "porygon-z" },
|
||||
{ className: "porygon-z", title: "Porygon-Z" },
|
||||
{ className: "gallade" },
|
||||
{ className: "froslass" },
|
||||
{ className: "uxie" },
|
||||
|
|
@ -347,10 +347,9 @@ let favorites = [
|
|||
{ className: "snom" },
|
||||
{ className: "indeedee" },
|
||||
{ className: "indeedee-female", title: "Female Indeedee" },
|
||||
{ className: "dragapult" }
|
||||
{ className: "dragapult" },
|
||||
];
|
||||
|
||||
|
||||
function capitalizeFirstLetter(string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
|
|
@ -370,14 +369,19 @@ function getRandomUniquePkmn(pkmnArray, count) {
|
|||
}
|
||||
|
||||
const party = getRandomUniquePkmn(favorites, 6);
|
||||
const pkmnList = document.getElementById("pkmn");
|
||||
|
||||
party.forEach((pkmnData) => {
|
||||
const listItem = document.createElement("li");
|
||||
const critter = document.createElement("span");
|
||||
critter.className = `${spriteClassBase}${pkmnData.className}`;
|
||||
critter.title = capitalizeFirstLetter(getClassName(pkmnData));
|
||||
document.getElementById("pkmn").appendChild(critter);
|
||||
listItem.appendChild(critter);
|
||||
critter.addEventListener("mouseover", () => {
|
||||
const select = document.createElement("audio");
|
||||
select.src = `${audioPath}select.ogg`;
|
||||
select.play();
|
||||
});
|
||||
|
||||
pkmnList.appendChild(listItem);
|
||||
});
|
||||
|
|
|
|||
27
_src/assets/js/footer.js
Normal file
27
_src/assets/js/footer.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
const messages = [
|
||||
"*paws at you*",
|
||||
"[object Object]",
|
||||
"Be kind, or else",
|
||||
"Be nice to others",
|
||||
"byeah",
|
||||
"Coded with my own two paws!",
|
||||
"coffee cheetos chicken",
|
||||
"Did you know? A rabbit is a type of creature",
|
||||
"hop hop",
|
||||
"Hope you're doing all right!",
|
||||
"iPod iPad iPaid iPeed",
|
||||
"let's go refreshing!\n*refreshes, repeat message*\naw dang it\n*refreshes, repeat message*\naw dang it\n*refreshes, repeat message*\naw dan—",
|
||||
"Made with love ❤️",
|
||||
"pyon pyon",
|
||||
"Sunny is a bunny that is funny",
|
||||
"Thanks for stopping by!",
|
||||
"the girl reading this",
|
||||
"This website is gay",
|
||||
"Tricked you, it's Egypt and we're both Phlog Pyros",
|
||||
"U ' x ' U",
|
||||
"Website built by whatever this thing is → 🐇",
|
||||
"You're telling me that a queer coded this?",
|
||||
];
|
||||
const randomize = messages[Math.floor(Math.random() * messages.length)];
|
||||
const footerMessage = document.getElementById("message");
|
||||
footerMessage.innerText = randomize;
|
||||
|
|
@ -1,16 +1,18 @@
|
|||
import { audioPath } from './path.js'
|
||||
import { audioPath } from "./path.js";
|
||||
|
||||
let fox = document.getElementById("fox");
|
||||
let music = document.createElement("audio");
|
||||
|
||||
music.src = `${audioPath}fox.ogg`;
|
||||
music.loop = true;
|
||||
fox.appendChild(music);
|
||||
window.addEventListener("load", function () {
|
||||
music.play();
|
||||
music.muted = true;
|
||||
music.play();
|
||||
music.muted = true;
|
||||
});
|
||||
fox.onmouseover = () => {
|
||||
music.muted = false;
|
||||
music.muted = false;
|
||||
};
|
||||
fox.onmouseout = () => {
|
||||
music.muted = true;
|
||||
music.muted = true;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
const detailsElements = document.getElementsByTagName('details');
|
||||
const dropdown = Array.from(detailsElements);
|
||||
|
||||
const save = () => {
|
||||
dropdown.forEach((details, i) => {
|
||||
localStorage.setItem(`details${i}`, details.hasAttribute('open'));
|
||||
});
|
||||
};
|
||||
|
||||
dropdown.forEach((details, i) => {
|
||||
const isOpen = JSON.parse(localStorage.getItem(`details${i}`)) || false;
|
||||
details.toggleAttribute('open', isOpen);
|
||||
details.addEventListener('toggle', save);
|
||||
|
||||
const svg = details.querySelector('summary svg');
|
||||
if (svg) {
|
||||
svg.style.transition = isOpen ? 'none' : '';
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
dropdown.forEach(details => {
|
||||
const svg = details.querySelector('summary svg');
|
||||
if (svg) svg.style.transition = '';
|
||||
});
|
||||
}, 100);
|
||||
|
|
@ -1,16 +1,17 @@
|
|||
import { audioPath } from './path.js'
|
||||
import { audioPath } from "./path.js";
|
||||
|
||||
let secret = document.getElementById("piss");
|
||||
let baby = new Image();
|
||||
baby.src = "/assets/img/button/piss-baby2.gif";
|
||||
|
||||
secret.addEventListener("mouseover", func, true);
|
||||
|
||||
function func() {
|
||||
secret.src = baby.src;
|
||||
}
|
||||
|
||||
let flashlight = document.createElement("audio");
|
||||
let baby = new Image();
|
||||
|
||||
baby.src = "/assets/img/button/piss-baby2.gif";
|
||||
flashlight.src = `${audioPath}flashlight.ogg`;
|
||||
secret.appendChild(flashlight);
|
||||
|
||||
secret.addEventListener("mouseover", () => flashlight.play(), { once: true });
|
||||
secret.addEventListener(
|
||||
"mouseover",
|
||||
() => {
|
||||
secret.src = baby.src;
|
||||
flashlight.play();
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,371 +0,0 @@
|
|||
import { audioPath } from './path.js'
|
||||
const imgBasePath = "/assets/img/pkmn/";
|
||||
let favorites = [
|
||||
{ img: `${imgBasePath}1.png`, title: "Bulbasaur"},
|
||||
{ img: `${imgBasePath}2.png`, title: "Ivysaur"},
|
||||
{ img: `${imgBasePath}3.png`, title: "Venusaur"},
|
||||
{ img: `${imgBasePath}4.png`, title: "Charmander"},
|
||||
{ img: `${imgBasePath}5.png`, title: "Charmeleon"},
|
||||
{ img: `${imgBasePath}6.png`, title: "Charizard"},
|
||||
{ img: `${imgBasePath}7.png`, title: "Squirtle"},
|
||||
{ img: `${imgBasePath}8.png`, title: "Wartortle"},
|
||||
{ img: `${imgBasePath}9.png`, title: "Blastoise"},
|
||||
{ img: `${imgBasePath}15.png`, title: "Beedrill"},
|
||||
{ img: `${imgBasePath}25.png`, title: "Pikachu"},
|
||||
{ img: `${imgBasePath}26.png`, title: "Raichu"},
|
||||
{ img: `${imgBasePath}28.png`, title: "Sandslash"},
|
||||
{ img: `${imgBasePath}29.png`, title: "Nidoran (Female)"},
|
||||
{ img: `${imgBasePath}30.png`, title: "Nidorina"},
|
||||
{ img: `${imgBasePath}31.png`, title: "Nidoqueen"},
|
||||
{ img: `${imgBasePath}32.png`, title: "Nidoran (Male)"},
|
||||
{ img: `${imgBasePath}33.png`, title: "Nidorino"},
|
||||
{ img: `${imgBasePath}34.png`, title: "Nidoking"},
|
||||
{ img: `${imgBasePath}37.png`, title: "Vulpix"},
|
||||
{ img: `${imgBasePath}38.png`, title: "Ninetales"},
|
||||
{ img: `${imgBasePath}52.png`, title: "Meowth"},
|
||||
{ img: `${imgBasePath}58.png`, title: "Growlithe"},
|
||||
{ img: `${imgBasePath}59.png`, title: "Arcanine"},
|
||||
{ img: `${imgBasePath}79.png`, title: "Slowpoke"},
|
||||
{ img: `${imgBasePath}81.png`, title: "Magnemite"},
|
||||
{ img: `${imgBasePath}82.png`, title: "Magneton"},
|
||||
{ img: `${imgBasePath}87.png`, title: "Dewgong"},
|
||||
{ img: `${imgBasePath}90.png`, title: "Shellder"},
|
||||
{ img: `${imgBasePath}92.png`, title: "Gastly"},
|
||||
{ img: `${imgBasePath}93.png`, title: "Haunter"},
|
||||
{ img: `${imgBasePath}94.png`, title: "Gengar"},
|
||||
{ img: `${imgBasePath}96.png`, title: "Drowzee"},
|
||||
{ img: `${imgBasePath}104.png`, title: "Cubone"},
|
||||
{ img: `${imgBasePath}112.png`, title: "Rhydon"},
|
||||
{ img: `${imgBasePath}115.png`, title: "Kangaskhan"},
|
||||
{ img: `${imgBasePath}131.png`, title: "Lapras"},
|
||||
{ img: `${imgBasePath}133.png`, title: "Eevee"},
|
||||
{ img: `${imgBasePath}134.png`, title: "Vaporeon"},
|
||||
{ img: `${imgBasePath}135.png`, title: "Jolteon"},
|
||||
{ img: `${imgBasePath}136.png`, title: "Flareon"},
|
||||
{ img: `${imgBasePath}137.png`, title: "Porygon"},
|
||||
{ img: `${imgBasePath}138.png`, title: "Omanyte"},
|
||||
{ img: `${imgBasePath}147.png`, title: "Dratini"},
|
||||
{ img: `${imgBasePath}148.png`, title: "Dragonair"},
|
||||
{ img: `${imgBasePath}149.png`, title: "Dragonite"},
|
||||
{ img: `${imgBasePath}150.png`, title: "Mewtwo"},
|
||||
{ img: `${imgBasePath}151.png`, title: "Mew"},
|
||||
{ img: `${imgBasePath}155.png`, title: "Cyndaquil"},
|
||||
{ img: `${imgBasePath}156.png`, title: "Quilava"},
|
||||
{ img: `${imgBasePath}157.png`, title: "Typhlosion"},
|
||||
{ img: `${imgBasePath}158.png`, title: "Totodile"},
|
||||
{ img: `${imgBasePath}159.png`, title: "Croconaw"},
|
||||
{ img: `${imgBasePath}160.png`, title: "Feraligatr"},
|
||||
{ img: `${imgBasePath}162.png`, title: "Furret"},
|
||||
{ img: `${imgBasePath}166.png`, title: "Ledian"},
|
||||
{ img: `${imgBasePath}167.png`, title: "Spinarak"},
|
||||
{ img: `${imgBasePath}172.png`, title: "Pichu"},
|
||||
{ img: `${imgBasePath}175.png`, title: "Togepi"},
|
||||
{ img: `${imgBasePath}176.png`, title: "Togetic"},
|
||||
{ img: `${imgBasePath}177.png`, title: "Natu"},
|
||||
{ img: `${imgBasePath}178.png`, title: "Xatu"},
|
||||
{ img: `${imgBasePath}179.png`, title: "Mareep"},
|
||||
{ img: `${imgBasePath}180.png`, title: "Flaaffy"},
|
||||
{ img: `${imgBasePath}181.png`, title: "Ampharos"},
|
||||
{ img: `${imgBasePath}182.png`, title: "Bellossom"},
|
||||
{ img: `${imgBasePath}183.png`, title: "Marill"},
|
||||
{ img: `${imgBasePath}184.png`, title: "Azumarill"},
|
||||
{ img: `${imgBasePath}187.png`, title: "Hoppip"},
|
||||
{ img: `${imgBasePath}190.png`, title: "Aipom"},
|
||||
{ img: `${imgBasePath}194.png`, title: "Wooper"},
|
||||
{ img: `${imgBasePath}195.png`, title: "Quagsire"},
|
||||
{ img: `${imgBasePath}196.png`, title: "Espeon"},
|
||||
{ img: `${imgBasePath}197.png`, title: "Umbreon"},
|
||||
{ img: `${imgBasePath}198.png`, title: "Murkrow"},
|
||||
{ img: `${imgBasePath}200.png`, title: "Misdreavus"},
|
||||
{ img: `${imgBasePath}202.png`, title: "Girafarig"},
|
||||
{ img: `${imgBasePath}203.png`, title: "Wobbuffet"},
|
||||
{ img: `${imgBasePath}206.png`, title: "Dunsparce"},
|
||||
{ img: `${imgBasePath}212.png`, title: "Scizor"},
|
||||
{ img: `${imgBasePath}213.png`, title: "Shuckle"},
|
||||
{ img: `${imgBasePath}215.png`, title: "Sneasel"},
|
||||
{ img: `${imgBasePath}216.png`, title: "Teddiursa"},
|
||||
{ img: `${imgBasePath}218.png`, title: "Slugma"},
|
||||
{ img: `${imgBasePath}222.png`, title: "Corsola"},
|
||||
{ img: `${imgBasePath}225.png`, title: "Delibird"},
|
||||
{ img: `${imgBasePath}227.png`, title: "Skarmory"},
|
||||
{ img: `${imgBasePath}228.png`, title: "Houndour"},
|
||||
{ img: `${imgBasePath}229.png`, title: "Houndoom"},
|
||||
{ img: `${imgBasePath}231.png`, title: "Phanpy"},
|
||||
{ img: `${imgBasePath}233.png`, title: "Porygon2"},
|
||||
{ img: `${imgBasePath}235.png`, title: "Smeargle"},
|
||||
{ img: `${imgBasePath}241.png`, title: "Miltank"},
|
||||
{ img: `${imgBasePath}245.png`, title: "Suicune"},
|
||||
{ img: `${imgBasePath}248.png`, title: "Tyranitar"},
|
||||
{ img: `${imgBasePath}249.png`, title: "Lugia"},
|
||||
{ img: `${imgBasePath}250.png`, title: "Ho-oh"},
|
||||
{ img: `${imgBasePath}251.png`, title: "Celebi"},
|
||||
{ img: `${imgBasePath}252.png`, title: "Treecko"},
|
||||
{ img: `${imgBasePath}253.png`, title: "Grovyle"},
|
||||
{ img: `${imgBasePath}254.png`, title: "Sceptile"},
|
||||
{ img: `${imgBasePath}255.png`, title: "Torchic"},
|
||||
{ img: `${imgBasePath}257.png`, title: "Blaziken"},
|
||||
{ img: `${imgBasePath}258.png`, title: "Mudkip"},
|
||||
{ img: `${imgBasePath}260.png`, title: "Swampert"},
|
||||
{ img: `${imgBasePath}261.png`, title: "Poochyena"},
|
||||
{ img: `${imgBasePath}262.png`, title: "Mightyena"},
|
||||
{ img: `${imgBasePath}263.png`, title: "Zigzagoon"},
|
||||
{ img: `${imgBasePath}265.png`, title: "Wurmple"},
|
||||
{ img: `${imgBasePath}274.png`, title: "Nuzleaf"},
|
||||
{ img: `${imgBasePath}280.png`, title: "Ralts"},
|
||||
{ img: `${imgBasePath}281.png`, title: "Kirlia"},
|
||||
{ img: `${imgBasePath}282.png`, title: "Gardevoir"},
|
||||
{ img: `${imgBasePath}286.png`, title: "Breloom"},
|
||||
{ img: `${imgBasePath}287.png`, title: "Slakoth"},
|
||||
{ img: `${imgBasePath}298.png`, title: "Azurill"},
|
||||
{ img: `${imgBasePath}300.png`, title: "Skitty"},
|
||||
{ img: `${imgBasePath}301.png`, title: "Delcatty"},
|
||||
{ img: `${imgBasePath}302.png`, title: "Sableye"},
|
||||
{ img: `${imgBasePath}303.png`, title: "Mawile"},
|
||||
{ img: `${imgBasePath}304.png`, title: "Aron"},
|
||||
{ img: `${imgBasePath}306.png`, title: "Aggron"},
|
||||
{ img: `${imgBasePath}311.png`, title: "Plusle"},
|
||||
{ img: `${imgBasePath}312.png`, title: "Minun"},
|
||||
{ img: `${imgBasePath}315.png`, title: "Roselia"},
|
||||
{ img: `${imgBasePath}322.png`, title: "Numel"},
|
||||
{ img: `${imgBasePath}327.png`, title: "Spinda"},
|
||||
{ img: `${imgBasePath}328.png`, title: "Trapinch"},
|
||||
{ img: `${imgBasePath}329.png`, title: "Vibrava"},
|
||||
{ img: `${imgBasePath}330.png`, title: "Flygon"},
|
||||
{ img: `${imgBasePath}334.png`, title: "Altaria"},
|
||||
{ img: `${imgBasePath}335.png`, title: "Zangoose"},
|
||||
{ img: `${imgBasePath}336.png`, title: "Seviper"},
|
||||
{ img: `${imgBasePath}337.png`, title: "Lunatone"},
|
||||
{ img: `${imgBasePath}338.png`, title: "Solrock"},
|
||||
{ img: `${imgBasePath}350.png`, title: "Milotic"},
|
||||
{ img: `${imgBasePath}352.png`, title: "Kecleon"},
|
||||
{ img: `${imgBasePath}354.png`, title: "Banette"},
|
||||
{ img: `${imgBasePath}359.png`, title: "Absol"},
|
||||
{ img: `${imgBasePath}360.png`, title: "Wynaut"},
|
||||
{ img: `${imgBasePath}363.png`, title: "Spheal"},
|
||||
{ img: `${imgBasePath}373.png`, title: "Salamence"},
|
||||
{ img: `${imgBasePath}380.png`, title: "Latias"},
|
||||
{ img: `${imgBasePath}381.png`, title: "Latios"},
|
||||
{ img: `${imgBasePath}384.png`, title: "Rayquaza"},
|
||||
{ img: `${imgBasePath}385.png`, title: "Jirachi"},
|
||||
{ img: `${imgBasePath}387.png`, title: "Turtwig"},
|
||||
{ img: `${imgBasePath}389.png`, title: "Torterra"},
|
||||
{ img: `${imgBasePath}393.png`, title: "Piplup"},
|
||||
{ img: `${imgBasePath}403.png`, title: "Shinx"},
|
||||
{ img: `${imgBasePath}404.png`, title: "Luxio"},
|
||||
{ img: `${imgBasePath}405.png`, title: "Luxray"},
|
||||
{ img: `${imgBasePath}407.png`, title: "Roserade"},
|
||||
{ img: `${imgBasePath}418.png`, title: "Buizel"},
|
||||
{ img: `${imgBasePath}419.png`, title: "Floatzel"},
|
||||
{ img: `${imgBasePath}423.png`, title: "Gastrodon"},
|
||||
{ img: `${imgBasePath}424.png`, title: "Ambipom"},
|
||||
{ img: `${imgBasePath}427.png`, title: "Buneary"},
|
||||
{ img: `${imgBasePath}428.png`, title: "Lopunny"},
|
||||
{ img: `${imgBasePath}429.png`, title: "Mismagius"},
|
||||
{ img: `${imgBasePath}430.png`, title: "Honchkrow"},
|
||||
{ img: `${imgBasePath}431.png`, title: "Glameow"},
|
||||
{ img: `${imgBasePath}432.png`, title: "Purugly"},
|
||||
{ img: `${imgBasePath}445.png`, title: "Garchomp"},
|
||||
{ img: `${imgBasePath}447.png`, title: "Riolu"},
|
||||
{ img: `${imgBasePath}448.png`, title: "Lucario"},
|
||||
{ img: `${imgBasePath}453.png`, title: "Croagunk"},
|
||||
{ img: `${imgBasePath}461.png`, title: "Weavile"},
|
||||
{ img: `${imgBasePath}468.png`, title: "Togekiss"},
|
||||
{ img: `${imgBasePath}470.png`, title: "Leafeon"},
|
||||
{ img: `${imgBasePath}471.png`, title: "Glaceon"},
|
||||
{ img: `${imgBasePath}474.png`, title: "Porygon-Z"},
|
||||
{ img: `${imgBasePath}475.png`, title: "Gallade"},
|
||||
{ img: `${imgBasePath}478.png`, title: "Froslass"},
|
||||
{ img: `${imgBasePath}480.png`, title: "Uxie"},
|
||||
{ img: `${imgBasePath}481.png`, title: "Mesprit"},
|
||||
{ img: `${imgBasePath}482.png`, title: "Azelf"},
|
||||
{ img: `${imgBasePath}487.png`, title: "Giratina"},
|
||||
{ img: `${imgBasePath}488.png`, title: "Cresselia"},
|
||||
{ img: `${imgBasePath}490.png`, title: "Manaphy"},
|
||||
{ img: `${imgBasePath}492.png`, title: "Shaymin"},
|
||||
{ img: `${imgBasePath}493.png`, title: "Arceus"},
|
||||
{ img: `${imgBasePath}494.png`, title: "Victini"},
|
||||
{ img: `${imgBasePath}495.png`, title: "Snivy"},
|
||||
{ img: `${imgBasePath}496.png`, title: "Servine"},
|
||||
{ img: `${imgBasePath}497.png`, title: "Serperior"},
|
||||
{ img: `${imgBasePath}498.png`, title: "Tepig"},
|
||||
{ img: `${imgBasePath}501.png`, title: "Oshawott"},
|
||||
{ img: `${imgBasePath}502.png`, title: "Dewott"},
|
||||
{ img: `${imgBasePath}503.png`, title: "Samurott"},
|
||||
{ img: `${imgBasePath}509.png`, title: "Purrloin"},
|
||||
{ img: `${imgBasePath}510.png`, title: "Liepard"},
|
||||
{ img: `${imgBasePath}515.png`, title: "Panpour"},
|
||||
{ img: `${imgBasePath}516.png`, title: "Simipour"},
|
||||
{ img: `${imgBasePath}529.png`, title: "Drilbur"},
|
||||
{ img: `${imgBasePath}530.png`, title: "Excadrill"},
|
||||
{ img: `${imgBasePath}531.png`, title: "Audino"},
|
||||
{ img: `${imgBasePath}540.png`, title: "Sewaddle"},
|
||||
{ img: `${imgBasePath}541.png`, title: "Swadloon"},
|
||||
{ img: `${imgBasePath}542.png`, title: "Leavanny"},
|
||||
{ img: `${imgBasePath}545.png`, title: "Scolipede"},
|
||||
{ img: `${imgBasePath}546.png`, title: "Cottonee"},
|
||||
{ img: `${imgBasePath}547.png`, title: "Whimsicott"},
|
||||
{ img: `${imgBasePath}548.png`, title: "Petilil"},
|
||||
{ img: `${imgBasePath}549.png`, title: "Lilligant"},
|
||||
{ img: `${imgBasePath}556.png`, title: "Maractus"},
|
||||
{ img: `${imgBasePath}559.png`, title: "Scraggy"},
|
||||
{ img: `${imgBasePath}560.png`, title: "Scrafty"},
|
||||
{ img: `${imgBasePath}566.png`, title: "Archen"},
|
||||
{ img: `${imgBasePath}567.png`, title: "Archeops"},
|
||||
{ img: `${imgBasePath}570.png`, title: "Zorua"},
|
||||
{ img: `${imgBasePath}571.png`, title: "Zoroark"},
|
||||
{ img: `${imgBasePath}572.png`, title: "Minccino"},
|
||||
{ img: `${imgBasePath}573.png`, title: "Cinccino"},
|
||||
{ img: `${imgBasePath}577.png`, title: "Solosis"},
|
||||
{ img: `${imgBasePath}578.png`, title: "Duosion"},
|
||||
{ img: `${imgBasePath}579.png`, title: "Reuniclus"},
|
||||
{ img: `${imgBasePath}580.png`, title: "Ducklett"},
|
||||
{ img: `${imgBasePath}585.png`, title: "Deerling"},
|
||||
{ img: `${imgBasePath}587.png`, title: "Emolga"},
|
||||
{ img: `${imgBasePath}595.png`, title: "Joltik"},
|
||||
{ img: `${imgBasePath}612.png`, title: "Haxorus"},
|
||||
{ img: `${imgBasePath}616.png`, title: "Shelmet"},
|
||||
{ img: `${imgBasePath}619.png`, title: "Mienfoo"},
|
||||
{ img: `${imgBasePath}620.png`, title: "Mienshao"},
|
||||
{ img: `${imgBasePath}633.png`, title: "Deino"},
|
||||
{ img: `${imgBasePath}634.png`, title: "Zweilous"},
|
||||
{ img: `${imgBasePath}637.png`, title: "Volcarona"},
|
||||
{ img: `${imgBasePath}638.png`, title: "Cobalion"},
|
||||
{ img: `${imgBasePath}640.png`, title: "Virizion"},
|
||||
{ img: `${imgBasePath}643.png`, title: "Reshiram"},
|
||||
{ img: `${imgBasePath}644.png`, title: "Zekrom"},
|
||||
{ img: `${imgBasePath}647.png`, title: "Keldeo"},
|
||||
{ img: `${imgBasePath}648.png`, title: "Meloetta"},
|
||||
{ img: `${imgBasePath}3-mega.png`, title: "Mega Venusaur"},
|
||||
{ img: `${imgBasePath}6-mega-x.png`, title: "Mega Charizard X"},
|
||||
{ img: `${imgBasePath}6-mega-y.png`, title: "Mega Charizard Y"},
|
||||
{ img: `${imgBasePath}9-mega.png`, title: "Mega Blastoise"},
|
||||
{ img: `${imgBasePath}15-mega.png`, title: "Mega Beedrill"},
|
||||
{ img: `${imgBasePath}115-mega.png`, title: "Mega Kangaskhan"},
|
||||
{ img: `${imgBasePath}150-mega-x.png`, title: "Mega Mewtwo X"},
|
||||
{ img: `${imgBasePath}150-mega-y.png`, title: "Mega Mewtwo Y"},
|
||||
{ img: `${imgBasePath}181-mega.png`, title: "Mega Ampharos"},
|
||||
{ img: `${imgBasePath}212-mega.png`, title: "Mega Scizor"},
|
||||
{ img: `${imgBasePath}229-mega.png`, title: "Mega Houndoom"},
|
||||
{ img: `${imgBasePath}248-mega.png`, title: "Mega Tyranitar"},
|
||||
{ img: `${imgBasePath}254-mega.png`, title: "Mega Sceptile"},
|
||||
{ img: `${imgBasePath}257-mega.png`, title: "Mega Blaziken"},
|
||||
{ img: `${imgBasePath}260-mega.png`, title: "Mega Swampert"},
|
||||
{ img: `${imgBasePath}282-mega.png`, title: "Mega Gardevoir"},
|
||||
{ img: `${imgBasePath}302-mega.png`, title: "Mega Sableye"},
|
||||
{ img: `${imgBasePath}306-mega.png`, title: "Mega Aggron"},
|
||||
{ img: `${imgBasePath}334-mega.png`, title: "Mega Altaria"},
|
||||
{ img: `${imgBasePath}354-mega.png`, title: "Mega Banette"},
|
||||
{ img: `${imgBasePath}359-mega.png`, title: "Mega Absol"},
|
||||
{ img: `${imgBasePath}373-mega.png`, title: "Mega Salamence"},
|
||||
{ img: `${imgBasePath}428-mega.png`, title: "Mega Lopunny"},
|
||||
{ img: `${imgBasePath}445-mega.png`, title: "Mega Garchomp"},
|
||||
{ img: `${imgBasePath}448-mega.png`, title: "Mega Lucario"},
|
||||
{ img: `${imgBasePath}475-mega.png`, title: "Mega Gallade"},
|
||||
{ img: `${imgBasePath}531-mega.png`, title: "Mega Audino"},
|
||||
{ img: `${imgBasePath}650.png`, title: "Chespin"},
|
||||
{ img: `${imgBasePath}651.png`, title: "Quilladin"},
|
||||
{ img: `${imgBasePath}652.png`, title: "Chesnaught"},
|
||||
{ img: `${imgBasePath}653.png`, title: "Fennekin"},
|
||||
{ img: `${imgBasePath}654.png`, title: "Braixen"},
|
||||
{ img: `${imgBasePath}655.png`, title: "Delphox"},
|
||||
{ img: `${imgBasePath}656.png`, title: "Froakie"},
|
||||
{ img: `${imgBasePath}657.png`, title: "Frogadier"},
|
||||
{ img: `${imgBasePath}658.png`, title: "Greninja"},
|
||||
{ img: `${imgBasePath}674.png`, title: "Pancham"},
|
||||
{ img: `${imgBasePath}676.png`, title: "Furfrou"},
|
||||
{ img: `${imgBasePath}677.png`, title: "Espurr"},
|
||||
{ img: `${imgBasePath}678-male.png`, title: "Meowstic (Male)"},
|
||||
{ img: `${imgBasePath}678-female.png`, title: "Meowstic (Female)"},
|
||||
{ img: `${imgBasePath}694.png`, title: "Helioptile"},
|
||||
{ img: `${imgBasePath}695.png`, title: "Heliolisk"},
|
||||
{ img: `${imgBasePath}699.png`, title: "Aurorus"},
|
||||
{ img: `${imgBasePath}700.png`, title: "Sylveon"},
|
||||
{ img: `${imgBasePath}701.png`, title: "Hawlucha"},
|
||||
{ img: `${imgBasePath}704.png`, title: "Goomy"},
|
||||
{ img: `${imgBasePath}705.png`, title: "Sliggoo"},
|
||||
{ img: `${imgBasePath}706.png`, title: "Goodra"},
|
||||
{ img: `${imgBasePath}708.png`, title: "Phantump"},
|
||||
{ img: `${imgBasePath}714.png`, title: "Noibat"},
|
||||
{ img: `${imgBasePath}715.png`, title: "Noivern"},
|
||||
{ img: `${imgBasePath}716.png`, title: "Xerneas"},
|
||||
{ img: `${imgBasePath}717.png`, title: "Yveltal"},
|
||||
{ img: `${imgBasePath}722.png`, title: "Rowlet"},
|
||||
{ img: `${imgBasePath}723.png`, title: "Dartrix"},
|
||||
{ img: `${imgBasePath}724.png`, title: "Decidueye"},
|
||||
{ img: `${imgBasePath}725.png`, title: "Litten"},
|
||||
{ img: `${imgBasePath}726.png`, title: "Torracat"},
|
||||
{ img: `${imgBasePath}728.png`, title: "Popplio"},
|
||||
{ img: `${imgBasePath}729.png`, title: "Brionne"},
|
||||
{ img: `${imgBasePath}730.png`, title: "Primarina"},
|
||||
{ img: `${imgBasePath}731.png`, title: "Pikipek"},
|
||||
{ img: `${imgBasePath}743.png`, title: "Ribombee"},
|
||||
{ img: `${imgBasePath}744.png`, title: "Rockruff"},
|
||||
{ img: `${imgBasePath}745.png`, title: "Lycanroc"},
|
||||
{ img: `${imgBasePath}745-dusk.png`, title: "Lycanroc (Dusk Form)"},
|
||||
{ img: `${imgBasePath}745-midnight.png`, title: "Lycanroc (Midnight Form)"},
|
||||
{ img: `${imgBasePath}747.png`, title: "Mareanie"},
|
||||
{ img: `${imgBasePath}748.png`, title: "Toxapex"},
|
||||
{ img: `${imgBasePath}753.png`, title: "Fomantis"},
|
||||
{ img: `${imgBasePath}754.png`, title: "Lurantis"},
|
||||
{ img: `${imgBasePath}757.png`, title: "Salandit"},
|
||||
{ img: `${imgBasePath}758.png`, title: "Salazzle"},
|
||||
{ img: `${imgBasePath}759.png`, title: "Stufful"},
|
||||
{ img: `${imgBasePath}760.png`, title: "Bewear"},
|
||||
{ img: `${imgBasePath}762.png`, title: "Steenee"},
|
||||
{ img: `${imgBasePath}763.png`, title: "Tsareena"},
|
||||
{ img: `${imgBasePath}771.png`, title: "Pyukumuku"},
|
||||
{ img: `${imgBasePath}775.png`, title: "Komala"},
|
||||
{ img: `${imgBasePath}778.png`, title: "Mimikyu"},
|
||||
{ img: `${imgBasePath}782.png`, title: "Jangmo-o"},
|
||||
{ img: `${imgBasePath}784.png`, title: "Kommo-o"},
|
||||
{ img: `${imgBasePath}786.png`, title: "Tapu Lele"},
|
||||
{ img: `${imgBasePath}789.png`, title: "Cosmog"},
|
||||
{ img: `${imgBasePath}791.png`, title: "Solgaleo"},
|
||||
{ img: `${imgBasePath}792.png`, title: "Lunala"},
|
||||
{ img: `${imgBasePath}797.png`, title: "Celesteela"},
|
||||
{ img: `${imgBasePath}802.png`, title: "Marshadow"},
|
||||
{ img: `${imgBasePath}803.png`, title: "Poipole"},
|
||||
{ img: `${imgBasePath}807.png`, title: "Zeraora"},
|
||||
{ img: `${imgBasePath}810.png`, title: "Grookey"},
|
||||
{ img: `${imgBasePath}813.png`, title: "Scorbunny"},
|
||||
{ img: `${imgBasePath}814.png`, title: "Raboot"},
|
||||
{ img: `${imgBasePath}815.png`, title: "Cinderace"},
|
||||
{ img: `${imgBasePath}816.png`, title: "Sobble"},
|
||||
{ img: `${imgBasePath}817.png`, title: "Drizzile"},
|
||||
{ img: `${imgBasePath}818.png`, title: "Inteleon"},
|
||||
{ img: `${imgBasePath}823.png`, title: "Corviknight"},
|
||||
{ img: `${imgBasePath}827.png`, title: "Nickit"},
|
||||
{ img: `${imgBasePath}828.png`, title: "Thievul"},
|
||||
{ img: `${imgBasePath}831.png`, title: "Wooloo"},
|
||||
{ img: `${imgBasePath}835.png`, title: "Yamper"},
|
||||
{ img: `${imgBasePath}858.png`, title: "Hatterene"},
|
||||
{ img: `${imgBasePath}859.png`, title: "Impidimp"},
|
||||
{ img: `${imgBasePath}862.png`, title: "Obstagoon"},
|
||||
{ img: `${imgBasePath}869.png`, title: "Alcremie"},
|
||||
{ img: `${imgBasePath}870.png`, title: "Falinks"},
|
||||
{ img: `${imgBasePath}872.png`, title: "Snom"},
|
||||
{ img: `${imgBasePath}876-male.png`, title: "Indeedee (Male)"},
|
||||
{ img: `${imgBasePath}876-female.png`, title: "Indeedee (Female)"},
|
||||
{ img: `${imgBasePath}887.png`, title: "Dragapult"}
|
||||
];
|
||||
function getRandomUniquePkmn(pkmnArray, count) {
|
||||
const uniquePkmn = new Set();
|
||||
const totalPkmn = pkmnArray.length;
|
||||
while (uniquePkmn.size < count && uniquePkmn.size < totalPkmn) {
|
||||
const randomIndex = Math.floor(Math.random() * totalPkmn);
|
||||
uniquePkmn.add(pkmnArray[randomIndex]);
|
||||
}
|
||||
return Array.from(uniquePkmn).slice(0, count);
|
||||
}
|
||||
const party = getRandomUniquePkmn(favorites, 6);
|
||||
party.forEach(pkmnData => {
|
||||
const critter = document.createElement("img");
|
||||
critter.src = pkmnData.img;
|
||||
critter.title = pkmnData.title;
|
||||
document.getElementById("pkmn").appendChild(critter);
|
||||
critter.addEventListener("mouseover", () => {
|
||||
const select = document.createElement("audio");
|
||||
select.src = `${audioPath}select.ogg`;
|
||||
select.play();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
const basePath = "/assets/css";
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const themeStylesheet = document.getElementById("custom");
|
||||
const themeStylesheet = document.getElementById("themed");
|
||||
|
||||
const themes = [
|
||||
{ name: "system", file: "default/system.css" },
|
||||
{ name: "citrus", file: "citrus/citrus.css" },
|
||||
{ name: "citrus", file: "citrus/default.css" },
|
||||
];
|
||||
|
||||
let currentTheme = localStorage.getItem("theme") || themes[0].name;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue