+11 -9

app/assets/components/border-alttp.css

··· 1 1 - .border-alttp { 2 2 - border-image-source: url('/images/sprites/alttp-textbox-css-sprite.png'); 3 3 - border-image-slice: 7 6; 4 4 - border-image-width: 21px 18px; 5 5 - border-image-repeat: stretch; 6 6 - border-style: solid; 7 7 - border-width: 21px 18px; 8 8 - image-rendering: crisp-edges; 9 9 - image-rendering: pixelated; 1 1 + @layer utilities { 2 2 + .border-alttp { 3 3 + border-image-source: url('/images/sprites/alttp-textbox-css-sprite.png'); 4 4 + border-image-slice: 7 6; 5 5 + border-image-width: 21px 18px; 6 6 + border-image-repeat: stretch; 7 7 + border-style: solid; 8 8 + border-width: 21px 18px; 9 9 + image-rendering: crisp-edges; 10 10 + image-rendering: pixelated; 11 11 + } 10 12 }

+13 -11

app/assets/components/img-link-da-flute-boi.css

··· 1 1 - /* 1 1 + @layer utilities { 2 2 + /* 2 3 This is a little hacky, but it works. 3 4 4 5 ContentSurround expects you use an icon, but we're not and we're using 5 6 an image instead. 6 7 */ 7 7 - .link-da-flute-boi-img { 8 8 - background: url('/images/link-da-flute-boi.png') no-repeat; 9 9 - background-color: initial; 10 10 - background-size: contain; 11 11 - width: 100px; 12 12 - height: 156px; 13 13 - mask-image: none; 14 14 - -webkit-mask-image: none; 8 8 + .link-da-flute-boi-img { 9 9 + background: url('/images/link-da-flute-boi.png') no-repeat; 10 10 + background-color: initial; 11 11 + background-size: contain; 12 12 + width: 100px; 13 13 + height: 156px; 14 14 + mask-image: none; 15 15 + -webkit-mask-image: none; 15 16 16 16 - &:where(.i-lucide\:arrow-left) { 17 17 - transform: scaleX(-1); 17 17 + &:where(.i-lucide\:arrow-left) { 18 18 + transform: scaleX(-1); 19 19 + } 18 20 } 19 21 }

+27 -25

app/assets/components/text-alttp.css

··· 1 1 - .alttp-text { 2 2 - font-family: 'alttp', serif; 3 3 - color: var(--color-alttp-white); 1 1 + @layer utilities { 2 2 + .alttp-text { 3 3 + font-family: 'alttp', serif; 4 4 + color: var(--color-alttp-white); 4 5 5 5 - image-rendering: crisp-edges; 6 6 - image-rendering: pixelated; 7 7 - -webkit-font-smoothing: none; 8 8 - font-smooth: never; 9 9 - 10 10 - text-shadow: 11 11 - var(--ui-alttp-text-drop-shadow-size-neg) 0 var(--ui-alttp-text-shadow-color), 12 12 - var(--ui-alttp-text-drop-shadow-size) 0 var(--ui-alttp-text-shadow-color), 13 13 - 0 var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-shadow-color), 14 14 - 0 var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-shadow-color), 15 15 - var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size-neg) 16 16 - var(--ui-alttp-text-shadow-color), 17 17 - var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size-neg) 18 18 - var(--ui-alttp-text-shadow-color), 19 19 - var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size) 20 20 - var(--ui-alttp-text-shadow-color), 21 21 - var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size) 22 22 - var(--ui-alttp-text-shadow-color); 6 6 + image-rendering: crisp-edges; 7 7 + image-rendering: pixelated; 8 8 + -webkit-font-smoothing: none; 9 9 + font-smooth: never; 23 10 24 24 - & > ::selection { 25 11 text-shadow: 26 12 var(--ui-alttp-text-drop-shadow-size-neg) 0 var(--ui-alttp-text-shadow-color), 27 13 var(--ui-alttp-text-drop-shadow-size) 0 var(--ui-alttp-text-shadow-color), ··· 35 21 var(--ui-alttp-text-shadow-color), 36 22 var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size) 37 23 var(--ui-alttp-text-shadow-color); 38 38 - } 39 24 40 40 - & :where(code) { 41 41 - @apply text-shadow-none selection:text-shadow-none; 25 25 + & > ::selection { 26 26 + text-shadow: 27 27 + var(--ui-alttp-text-drop-shadow-size-neg) 0 var(--ui-alttp-text-shadow-color), 28 28 + var(--ui-alttp-text-drop-shadow-size) 0 var(--ui-alttp-text-shadow-color), 29 29 + 0 var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-shadow-color), 30 30 + 0 var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-shadow-color), 31 31 + var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size-neg) 32 32 + var(--ui-alttp-text-shadow-color), 33 33 + var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size-neg) 34 34 + var(--ui-alttp-text-shadow-color), 35 35 + var(--ui-alttp-text-drop-shadow-size-neg) var(--ui-alttp-text-drop-shadow-size) 36 36 + var(--ui-alttp-text-shadow-color), 37 37 + var(--ui-alttp-text-drop-shadow-size) var(--ui-alttp-text-drop-shadow-size) 38 38 + var(--ui-alttp-text-shadow-color); 39 39 + } 40 40 + 41 41 + & :where(code) { 42 42 + @apply text-shadow-none selection:text-shadow-none; 43 43 + } 42 44 } 43 45 }

+11 -9

app/assets/components/triforce-cursor.css

··· 1 1 - .cursor::after { 2 2 - content: '▼'; 3 3 - animation: blink 0.8s step-start infinite; 4 4 - margin-left: 0.25rem; 5 5 - color: var(--color-zelda-alttp-triforce-gold-500); 6 6 - } 1 1 + @layer utilities { 2 2 + .cursor::after { 3 3 + content: '▼'; 4 4 + animation: blink 0.8s step-start infinite; 5 5 + margin-left: 0.25rem; 6 6 + color: var(--color-zelda-alttp-triforce-gold-500); 7 7 + } 7 8 8 8 - .cursor:hover { 9 9 - &::after { 10 10 - color: var(--ui-text-muted); 9 9 + .cursor:hover { 10 10 + &::after { 11 11 + color: var(--ui-text-muted); 12 12 + } 11 13 } 12 14 }

+7 -18

app/assets/main.css

··· 28 28 --color-alttp-white-900: oklch(62.675% 0 none); 29 29 --color-alttp-white-950: oklch(57.951% 0 none); 30 30 31 31 - /* Theme Defaults */ 32 31 --font-sans: 'alttp', 'Comic Sans MS', sans-serif; 33 32 --font-serif: 'alttp', 'Comic Sans MS', serif; 34 33 --ui-radius: 0rem; 35 35 - --ui-bg: var(--ui-color-primary-800); 36 36 - --ui-bg-muted: oklch(from var(--ui-primary) calc(l - 0.5) c h / 0.5); 37 37 - --ui-bg-elevated: var(--color-primary-900); 38 38 - --ui-bg-accented: var(--color-primary-950); 39 39 - --ui-bg-inverted: var(--color-primary-100); 40 40 - 41 41 - --ui-text: var(--color-alttp-white); 42 42 - --ui-text-muted: var(--color-alttp-white-700); 43 43 - --ui-text-highlighted: var(--color-alttp-white-50); 34 34 + --ui-bg: var(--color-primary-800); 44 35 45 36 --ui-alttp-text-drop-shadow-size: 1px; 46 37 --ui-alttp-text-drop-shadow-size-neg: -1px; ··· 98 89 } 99 90 } 100 91 101 101 - @layer utilities { 102 102 - @import './animations/rotate.css'; 103 103 - @import './animations/blink.css'; 104 104 - @import './components/triforce-cursor.css'; 105 105 - @import './components/border-alttp.css'; 106 106 - @import './components/img-link-da-flute-boi.css'; 107 107 - @import './components/text-alttp.css'; 108 108 - } 92 92 + @import './animations/rotate.css'; 93 93 + @import './animations/blink.css'; 94 94 + @import './components/triforce-cursor.css'; 95 95 + @import './components/border-alttp.css'; 96 96 + @import './components/img-link-da-flute-boi.css'; 97 97 + @import './components/text-alttp.css';