211 lines
14 KiB
CSS
211 lines
14 KiB
CSS
body {
|
|
background: #0d0a14;
|
|
padding: 40px 20px;
|
|
font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
|
color: #9d9aa4;
|
|
}
|
|
|
|
.bard {
|
|
margin: 0 auto 40px;
|
|
/* Remove fixed width in pixels */
|
|
width: 100%;
|
|
max-width: 65em; /* Keep the same max size for desktop */
|
|
height: auto;
|
|
aspect-ratio: 1 / 0.95; /* Maintains the proportion of the artwork */
|
|
font-size: 2px;
|
|
}
|
|
|
|
/* Adjust media queries for better scaling */
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 20px 10px; /* Smaller padding on mobile */
|
|
}
|
|
|
|
.bard {
|
|
font-size: 3px; /* Slightly larger base size for small screens */
|
|
}
|
|
|
|
p {
|
|
font-size: 0.8rem;
|
|
max-width: 320px;
|
|
}
|
|
}
|
|
|
|
/* For very small screens */
|
|
@media (max-width: 400px) {
|
|
.bard {
|
|
aspect-ratio: 1 / 1; /* Slightly different ratio for tiny screens */
|
|
}
|
|
|
|
p {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
.bard img {
|
|
width: 100%;
|
|
height: auto;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.strip {
|
|
overflow: hidden;
|
|
position: relative;
|
|
animation-iteration-count: infinite;
|
|
animation-direction: alternate;
|
|
animation-timing-function: linear;
|
|
image-rendering: pixelated;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
background-size: 100% auto;
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbwAAAG8CAYAAAClsBDfAAABMmVYSWZJSSoACAAAAAwACwACAA4AAACeAAAAAAEEAAEAAAC8AQAAAQEEAAEAAAC8AQAAAgEDAAMAAACsAAAAEgEDAAEAAAABAAAAGgEFAAEAAACyAAAAGwEFAAEAAAC6AAAAKAEDAAEAAAACAAAAMQECAA0AAADCAAAAMgECABQAAADQAAAAEwIDAAEAAAABAAAAaYcEAAEAAADkAAAAAAAAAGdUaHVtYiAzLjEyLjQACAAIAAgALAEAAAEAAAAsAQAAAQAAAEdJTVAgMi4xMC4zOAAAMjAyNDoxMToyNSAxOToyOTo1OQAGAACQBwAEAAAAMDIyMQGRBwAEAAAAAQIDAACgBwAEAAAAMDEwMAGgAwABAAAAAQAAAAKgBAABAAAAvAEAAAOgBAABAAAAvAEAAAAAAADMGVjUAAABg2lDQ1BJQ0MgcHJvZmlsZQAAeJx9kT1Iw0AcxV9TpaIVBztIUchQO9lFRRxrFYpQIdQKrTqYXPoFTRqSFBdHwbXg4Mdi1cHFWVcHV0EQ/ABxdnBSdJES/5cWWsR4cNyPd/ced+8AoVFhmtUTBzTdNtPJhJjNrYqBVwwgDGAMUZlZxpwkpeA5vu7h4+tdjGd5n/tzDKp5iwE+kTjODNMm3iCe2bQNzvvEIVaSVeJz4gmTLkj8yHWlxW+ciy4LPDNkZtLzxCFisdjFShezkqkRTxNHVE2nfCHbYpXzFmetUmPte/IXBvP6yjLXaY4iiUUsQYIIBTWUUYGNGK06KRbStJ/w8Iddv0QuhVxlMHIsoAoNsusH/4Pf3VqFqclWUjAB9L44zsc4ENgFmnXH+T52nOYJ4H8GrvSOv9oAZj9Jr3e0yBEwtA1cXHc0ZQ+43AFGngzZlF3JT1MoFID3M/qmHDB8C/SvtXpr7+P0AchQV6kb4OAQiBYpe93j3X3dvf17pt3fD6GhcrmeKfbWAAAOW2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAtRXhpdjIiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6R0lNUD0iaHR0cDovL3d3dy5naW1wLm9yZy94bXAvIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgIHhtcE1NOkRvY3VtZW50SUQ9ImdpbXA6ZG9jaWQ6Z2ltcDplMTdhZmQ4Ni1iYzkzLTQzMzYtOGY0NS1iNGQ4MjY0YzIzZWUiCiAgIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YjVhYzNjYWYtZjAwNS00OGFmLWIxODMtYmNhOWJkZDE4YzFkIgogICB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YmE1Yzk1NzUtYjRjOC00OGRjLTg5NzctZDMxMzZmODFjMmJlIgogICBkYzpGb3JtYXQ9ImltYWdlL3BuZyIKICAgR0lNUDpBUEk9IjIuMCIKICAgR0lNUDpQbGF0Zm9ybT0iTGludXgiCiAgIEdJTVA6VGltZVN0YW1wPSIxNzMyNTgxMDAwNzYyOTU0IgogICBHSU1QOlZlcnNpb249IjIuMTAuMzgiCiAgIHRpZmY6T3JpZW50YXRpb249IjEiCiAgIHhtcDpDcmVhdG9yVG9vbD0iR0lNUCAyLjEwIgogICB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0OjExOjI1VDE5OjI5OjU5LTA1OjAwIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyNDoxMToyNVQxOToyOTo1OS0wNTowMCI+CiAgIDx4bXBNTTpIaXN0b3J5PgogICAgPHJkZjpTZXE+CiAgICAgPHJkZjpsaQogICAgICBzdEV2dDphY3Rpb249InNhdmVkIgogICAgICBzdEV2dDpjaGFuZ2VkPSIvIgogICAgICBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmFjNmM3MmFkLTFlMGMtNDY1MC1iMTE5LTE0YWRmNmFhMzZiOSIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iR2ltcCAyLjEwIChMaW51eCkiCiAgICAgIHN0RXZ0OndoZW49IjIwMjMtMTItMTZUMTQ6Mjk6MzYtMDU6MDAiLz4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiCiAgICAgIHN0RXZ0OmNoYW5nZWQ9Ii8iCiAgICAgIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6Zjc2ZmJmODMtZjQ2OS00MWU2LWJlN2MtODg5ZDk0OGQzMjI3IgogICAgICBzdEV2dDpzb2Z0d2FyZUFnZW50PSJHaW1wIDIuMTAgKExpbnV4KSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyNC0xMS0yNVQxOTozMDowMC0wNTowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz7dK7T4AAAABmJLR0QAGgChAFhuGdrNAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH6AsaAB4AqvaKegAAColJ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);
|
|
}
|
|
|
|
@keyframes glitch-5 {
|
|
0.00%, 33.33%, 43.33%, 66.67%, 76.67%, 100.00% {
|
|
transform: none;
|
|
filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
|
|
}
|
|
33.43%, 43.23% {
|
|
transform: translateX(var(--glitch-x-1));
|
|
filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -4px 0 rgba(0, 0, 255, 0.1));
|
|
}
|
|
66.77%, 76.57% {
|
|
transform: translateX(var(--glitch-x-2));
|
|
filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-1px 0px 0 rgba(255, 0, 0, 0.1));
|
|
}
|
|
}
|
|
@keyframes glitch-6 {
|
|
0.00%, 33.33%, 41.67%, 66.67%, 75.00%, 100.00% {
|
|
transform: none;
|
|
filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
|
|
}
|
|
33.43%, 41.57% {
|
|
transform: translateX(var(--glitch-x-1));
|
|
filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-2px 3px 0 rgba(255, 0, 0, 0.1));
|
|
}
|
|
66.77%, 74.90% {
|
|
transform: translateX(var(--glitch-x-2));
|
|
filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px -2px 0 rgba(0, 0, 255, 0.1));
|
|
}
|
|
}
|
|
@keyframes glitch-7 {
|
|
0.00%, 33.33%, 40.48%, 66.67%, 73.81%, 100.00% {
|
|
transform: none;
|
|
filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
|
|
}
|
|
33.43%, 40.38% {
|
|
transform: translateX(var(--glitch-x-1));
|
|
filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -3px 0 rgba(0, 0, 255, 0.1));
|
|
}
|
|
66.77%, 73.71% {
|
|
transform: translateX(var(--glitch-x-2));
|
|
filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(4px 1px 0 rgba(255, 0, 0, 0.1));
|
|
}
|
|
}
|
|
@keyframes glitch-8 {
|
|
0.00%, 33.33%, 39.58%, 66.67%, 72.92%, 100.00% {
|
|
transform: none;
|
|
filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
|
|
}
|
|
33.43%, 39.48% {
|
|
transform: translateX(var(--glitch-x-1));
|
|
filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-1px -1px 0 rgba(0, 0, 255, 0.1));
|
|
}
|
|
66.77%, 72.82% {
|
|
transform: translateX(var(--glitch-x-2));
|
|
filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(3px -1px 0 rgba(0, 0, 255, 0.1));
|
|
}
|
|
}
|
|
@keyframes glitch-9 {
|
|
0.00%, 33.33%, 38.89%, 66.67%, 72.22%, 100.00% {
|
|
transform: none;
|
|
filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
|
|
}
|
|
33.43%, 38.79% {
|
|
transform: translateX(var(--glitch-x-1));
|
|
filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(1px -3px 0 rgba(255, 0, 0, 0.1));
|
|
}
|
|
66.77%, 72.12% {
|
|
transform: translateX(var(--glitch-x-2));
|
|
filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.1));
|
|
}
|
|
}
|
|
@keyframes glitch-10 {
|
|
0.00%, 33.33%, 38.33%, 66.67%, 71.67%, 100.00% {
|
|
transform: none;
|
|
filter: hue-rotate(0) drop-shadow(0 0 0 transparent);
|
|
}
|
|
33.43%, 38.23% {
|
|
transform: translateX(var(--glitch-x-1));
|
|
filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(3px -1px 0 rgba(255, 0, 0, 0.1));
|
|
}
|
|
66.77%, 71.57% {
|
|
transform: translateX(var(--glitch-x-2));
|
|
filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px 2px 0 rgba(255, 0, 0, 0.1));
|
|
}
|
|
}
|
|
p {
|
|
margin: 20px auto 0;
|
|
position: relative;
|
|
max-width: 400px;
|
|
text-align: center;
|
|
line-height: 1.3;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
a {
|
|
color: #6be1e9;
|
|
}
|
|
|
|
a:focus,
|
|
a:hover,
|
|
a:visited {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
a:focus-visible {
|
|
outline: 2px solid currentColor;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.debug {
|
|
margin: 40px auto 0;
|
|
position: relative;
|
|
max-width: 800px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.code {
|
|
margin: 10px auto 0;
|
|
}
|
|
@media (min-width: 600px) {
|
|
.code {
|
|
display: flex;
|
|
gap: 32px;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
.heading {
|
|
margin: 0 0 10px;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.column {
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
color: #e8c57d;
|
|
}
|
|
|
|
.column + .column {
|
|
color: #aa95bd;
|
|
} |