@font-face {
font-family: "BalooDa2";
src: url("/fonts/Baloo_Da_2/static/BalooDa2-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
--yellow: rgb(255, 217, 0);
--purple: blueviolet;
--yellow-hover: rgb(255, 229, 82);
--grey: hsl(0, 0%, 16%);
header {
.site-title {
font-family: "BalooDa2";
letter-spacing: -0.02em;
font-size: 2rem;
}
}
main {
#_top {
font-family: "BalooDa2";
font-size: 5rem;
letter-spacing: -0.03em;
}
img {
object-position: 0 -5px;
object-fit: cover;
height: calc(100% + 5px);
}
}
}
:root[data-theme="dark"] {
--sl-color-text-accent: var(--yellow);
--sl-color-bg-nav: black;
--sl-color-bg-sidebar: black;
html,
body {
scrollbar-color: var(--yellow) black;
}
header {
background-color: black;
.site-title {
color: var(--yellow);
}
.social-icons {
a {
color: white;
&:hover {
color: var(--purple);
opacity: 1;
}
}
}
dialog {
background-color: var(--grey);
color: white;
border: 2px solid black;
.pagefind-ui__result-nested {
::before {
color: blueviolet;
}
}
}
}
nav {
starlight-menu-button {
button {
background-color: var(--yellow);
color: black;
&:hover {
background-color: var(--purple);
color: white;
}
}
}
}
.sidebar-pane {
a:hover {
&[aria-current="page"] {
color: black;
background-color: var(--yellow-hover);
}
}
}
main {
color: hsl(224, 10, 23);
#_top {
color: var(--yellow);
}
.sl-link-button {
&.primary {
border: none;
background-color: var(--yellow);
&:hover {
background-color: var(--purple);
color: white;
}
}
&.minimal {
background-color: var(--grey);
}
}
.sl-markdown-content {
a:hover {
color: rgb(169, 107, 227);
}
}
}
}
:root[data-theme="light"] {
--yellow: #eec50f;
--purple-hover: rgb(176, 92, 255);
--sidebar-background: var(--yellow);
--sl-color-hairline: black;
--sl-color-gray-5: black;
--sl-color-gray-6: black;
--sl-color-text-accent: blueviolet;
--sl-color-bg-inline-code: var(--yellow);
html,
body {
background-color: var(--yellow);
scrollbar-color: blueviolet var(--yellow);
}
header {
background-color: var(--yellow);
.site-title {
color: black;
img {
background-color: var(--grey);
border-radius: 4px;
padding: 4px;
}
}
site-search {
kbd {
background-color: lightgrey;
}
dialog {
background-color: var(--yellow);
border: 2px solid black;
.pagefind-ui__result-nested {
::before {
color: blueviolet;
}
}
}
}
.social-icons {
a {
color: black;
&:hover {
color: var(--purple);
opacity: 1;
}
}
}
starlight-theme-select {
label {
&:hover {
color: var(--purple);
}
}
}
}
.sidebar-pane {
background-color: var(--sidebar-background);
a[aria-current="page"] {
color: white;
background-color: var(--purple);
&:hover {
color: white;
background-color: var(--purple-hover);
}
}
a:hover {
text-decoration: underline;
}
}
nav {
background-color: var(--sidebar-background);
starlight-menu-button {
button {
border: 1px solid black;
background-color: lightgrey;
color: black;
&:hover {
background-color: var(--purple);
color: white;
}
}
}
}
aside {
background-color: var(--sidebar-background);
}
main {
background-color: var(--yellow);
color: black;
border-color: black;
#_top {
font-family: "BalooDa2";
font-size: 5rem;
color: black;
letter-spacing: -0.03em;
}
.sl-link-button {
&.primary {
border: 2px solid black;
background-color: lightgrey;
color: black;
&:hover {
background-color: var(--purple);
color: white;
}
}
&.minimal {
background-color: var(--grey);
}
}
.sl-markdown-content {
a:hover {
color: rgb(169, 107, 227);
}
}
figcaption {
background: lightgrey;
}
img {
background-color: var(--grey);
padding: 10px;
border: 2px solid black;
border-radius: 20px;
}
code[dir="auto"] {
background-color: var(--yellow);
border: 1px solid black;
}
.copy {
button {
&:hover {
background-color: var(--yellow-hover);
}
div::before {
opacity: 1;
}
div {
opacity: 0;
}
div::after {
opacity: 1;
}
}
}
}
}