refactored retroBorder into global.css

Author: TobbleCobble

client/src/components/ui/GameEmbed.tsx

@@ -26,7 +26,7 @@ export function GameEmbed({
 
   return (
     <div
-      className={`flex items-center justify-center border-[26px] border-accent bg-background [clip-path:polygon(20px_20px,calc(100%-20px)_20px,100%_32px,100%_30%,calc(100%-20px)_45%,calc(100%-20px)_calc(100%-8px),80%_calc(100%-8px),75%_calc(100%-20px),20px_calc(100%-20px),0%_60%,0%_30%,20px_25%)]`}
+      className={`retroBorder flex items-center justify-center bg-background`}
       style={{ width: gameWidth + 26 * 2, height: gameHeight + 26 * 2 }}
     >
       {!isPlaying ? (
@@ -36,8 +36,8 @@ export function GameEmbed({
             alt="Game Cover"
             width={gameWidth}
             height={gameHeight}
-            className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[calc(-50%-52px)] blur-sm"
-            style={{ width: "auto", height: gameHeight }}
+            className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[calc(-50%-26px)] blur-sm"
+            style={{ width: "auto", height: gameHeight - 26 }}
           />
           <Button
             onClick={() => setIsPlaying(!isPlaying)}

client/src/pages/index.tsx

@@ -89,7 +89,7 @@ export default function Landing() {
               width={600}
               height={430}
               alt="placeholder"
-              className="min-w-80 border-[26px] border-accent [clip-path:polygon(20px_20px,calc(100%-20px)_20px,100%_32px,100%_30%,calc(100%-20px)_45%,calc(100%-20px)_calc(100%-8px),80%_calc(100%-8px),75%_calc(100%-20px),20px_calc(100%-20px),0%_60%,0%_30%,20px_25%)]"
+              className="retroBorder min-w-80"
             />
             <Image
               src="/bomb.png"

client/src/styles/globals.css

@@ -57,4 +57,8 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  .retroBorder {
+    @apply border-[26px] border-accent [clip-path:polygon(20px_20px,calc(100%-20px)_20px,100%_32px,100%_30%,calc(100%-20px)_45%,calc(100%-20px)_calc(100%-8px),80%_calc(100%-8px),75%_calc(100%-20px),20px_calc(100%-20px),0%_60%,0%_30%,20px_25%)]
+  }
 }

server/game_dev/migrations/0012_merge_20260214_1112.py

@@ -0,0 +1,13 @@
+# Generated by Django 5.1.15 on 2026-02-14 03:12
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("game_dev", "0011_alter_gameshowcase_game"),
+        ("game_dev", "0011_merge_20260205_1434"),
+    ]
+
+    operations = []

server/game_dev/migrations/0013_alter_game_itchgameembedid.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.1.15 on 2026-02-14 03:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("game_dev", "0012_merge_20260214_1112"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="game",
+            name="itchGameEmbedID",
+            field=models.PositiveBigIntegerField(
+                blank=True,
+                default=None,
+                help_text="If a game has a web demo stored on itch.io, please enter the embed ID",
+                null=True,
+            ),
+        ),
+    ]