Something went wrong. Try again.
Files for my website bwc9876.dev
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326@import "@fontsource/maple-mono/index.css";@import "@fontsource/charis-sil/index.css";/* Breakpoint Queries, Using Bootstrap's *//* Smallest: 576px */
@custom-media --sm (width >=576px);@custom-media --md (width >=768px);@custom-media --lg (width >=1200px);@custom-media --xl (width >=1700px);
.container { --gutter: var(--2); margin: 0 var(--gutter);}
@media (--md) { .container { --gutter: var(--10); }}
@media (--xl) { .container { --gutter: var(--14); }}
/* Color Definitions */:root { --text: #cecece; --background: #110f12; --primary: #0ee19b; --secondary: #012d1e; --accent: #53d164;
--font-maple-mono: "Maple Mono", "monospace"; --font-charis-sil: "Charis", "serif";}
/* Color Aliases */
h1,h2,h3,h4,h5,h6 { text-wrap: balance; font-family: var(--font-maple-mono);}
nav a,pre,code { font-family: var(--font-maple-mono);}
:root { font-family: var(--font-charis);}
/* Spacing Scale, Major Third */:root { /* 1rem = 16px */ --scale: 1.25; --small: calc(1rem * pow(var(--scale), -1)); --half: calc(1rem * pow(var(--scale), -0.5)); --1: calc(1rem * pow(var(--scale), 0)); --2: calc(1rem * pow(var(--scale), 1)); --3: calc(1rem * pow(var(--scale), 2)); --4: calc(1rem * pow(var(--scale), 3)); --5: calc(1rem * pow(var(--scale), 4)); --6: calc(1rem * pow(var(--scale), 5)); --7: calc(1rem * pow(var(--scale), 6)); --8: calc(1rem * pow(var(--scale), 7)); --9: calc(1rem * pow(var(--scale), 8)); --10: calc(1rem * pow(var(--scale), 9)); --11: calc(1rem * pow(var(--scale), 10)); --12: calc(1rem * pow(var(--scale), 11)); --14: calc(1rem * pow(var(--scale), 13)); --component-padding: var(--small) var(--1);}
/* Element Defaults */
small { font-size: var(--small); color: var(--text-disabled);}
body { color: var(--text); background-color: var(--background);}
a { color: var(--accent);
&:hover { text-decoration: underline; }}
button,button.primary,[role="button"] { padding: var(--component-padding); color: var(--text); border-radius: 10px; border: solid 2px transparent; background-color: var(--secondary); cursor: pointer; transition: background-color 100ms linear; text-decoration: none;}
button:active,[role="button"]:active { filter: hue-rotate(50deg);}
button:hover,[role="button"]:hover { filter: saturate(150%);}
.gradient-text { background: linear-gradient(120deg, var(--primary), var(--accent) 70%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
/* Tooltips */[data-tooltip] { position: relative;
&[data-placement="top"]::before, &[data-placement="top"]::after, &::before, &::after { display: block; z-index: 99; position: absolute; bottom: 100%; left: 50%; padding: 0.25rem 0.5rem; overflow: hidden; transform: translate(-50%, -0.25rem); border-radius: 5px; background: var(--secondary); content: attr(data-tooltip); color: var(--text); font-style: normal; font-size: var(--small); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; opacity: 0; pointer-events: none; }
&[data-placement="top"]::after, &::after { padding: 0; transform: translate(-50%, 0rem); border-top: 0.3rem solid; border-right: 0.3rem solid transparent; border-left: 0.3rem solid transparent; border-radius: 0; background-color: transparent; content: ""; color: var(--secondary); }
&[data-placement="bottom"] { &::before, &::after { top: 100%; bottom: auto; transform: translate(-50%, 0.25rem); }
&:after { transform: translate(-50%, -0.3rem); border: 0.3rem solid transparent; border-bottom: 0.3rem solid; } }
&[data-placement="left"] { &::before, &::after { top: 50%; right: 100%; bottom: auto; left: auto; transform: translate(-0.25rem, -50%); }
&:after { transform: translate(0.3rem, -50%); border: 0.3rem solid transparent; border-left: 0.3rem solid; } }
&[data-placement="right"] { &::before, &::after { top: 50%; right: auto; bottom: auto; left: 100%; transform: translate(0.25rem, -50%); }
&:after { transform: translate(-0.3rem, -50%); border: 0.3rem solid transparent; border-right: 0.3rem solid; } }
&:focus, &:hover { &::before, &::after { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { &:focus, &:hover { &::before, &::after { --tooltip-slide-to: translate(-50%, -0.25rem); transform: translate(-50%, 0.75rem); animation-duration: 0.2s; animation-fill-mode: forwards; animation-name: tooltip-slide; opacity: 0; }
&::after { --tooltip-caret-slide-to: translate(-50%, 0rem); transform: translate(-50%, -0.25rem); animation-name: tooltip-caret-slide; } }
&[data-placement="bottom"] { &:focus, &:hover { &::before, &::after { --tooltip-slide-to: translate(-50%, 0.25rem); transform: translate(-50%, -0.75rem); animation-name: tooltip-slide; }
&::after { --tooltip-caret-slide-to: translate(-50%, -0.3rem); transform: translate(-50%, -0.5rem); animation-name: tooltip-caret-slide; } } }
&[data-placement="left"] { &:focus, &:hover { &::before, &::after { --tooltip-slide-to: translate(-0.25rem, -50%); transform: translate(0.75rem, -50%); animation-name: tooltip-slide; }
&::after { --tooltip-caret-slide-to: translate(0.3rem, -50%); transform: translate(0.05rem, -50%); animation-name: tooltip-caret-slide; } } }
&[data-placement="right"] { &:focus, &:hover { &::before, &::after { --tooltip-slide-to: translate(0.25rem, -50%); transform: translate(-0.75rem, -50%); animation-name: tooltip-slide; }
&::after { --tooltip-caret-slide-to: translate(-0.3rem, -50%); transform: translate(-0.05rem, -50%); animation-name: tooltip-caret-slide; } } } }}
@keyframes tooltip-slide { to { transform: var(--tooltip-slide-to); opacity: 1; }}
@keyframes tooltip-caret-slide { 50% { opacity: 0; }
to { transform: var(--tooltip-caret-slide-to); opacity: 1; }}