From 2983a2fe5269ad200d001fc086f330df391c377c Mon Sep 17 00:00:00 2001
From: Sophie Axebane <ideleted@system64.dev>
Date: Tue, 7 Nov 2023 16:43:30 -0600
Subject: [PATCH] Fix issues on mobile

---
 memories.html         | 14 +++++++-------
 styles/style_main.css | 11 ++++++++++-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/memories.html b/memories.html
index 8b9fe7e..cc4f5bd 100644
--- a/memories.html
+++ b/memories.html
@@ -7,6 +7,9 @@
 <link rel="stylesheet" href="styles/style_buttons.css"> <!-- Button Stylesheet -->
 <link rel="icon" type="image/x-icon" href="img/blueheart.gif">
 
+<!-- load script for showing memories from conf/memories.json -->
+<script src="/js/memories.js" type="module"></script>
+
 <!-- Website embed -->
 <meta name="viewport" content="width=device-width">
 <meta content="Blueheart" property="og:title"/>
@@ -21,13 +24,10 @@
         </div>
     <h1>Thank you for the memories.</h1>
     <div class="window">
-        <div class="wrapper">
-            <div class="memoriesBox" id="memoriesBox"></div>
-            <div class="window_titlebar"><h3>memories.exe</h3></div>
-                <button id="prev">◄</button>
-                <button id="next">►</button>
-            <script src="/js/memories.js" type="module"></script>
-            </div>  
+        <div class="window_titlebar"><h3>memories.exe</h3></div>
+        <div class="memoriesBox" id="memoriesBox"></div>
+            <button id="prev">◄</button>
+            <button id="next">►</button>
         </div>
     </div>
 </body>
diff --git a/styles/style_main.css b/styles/style_main.css
index 68c7904..12f0493 100644
--- a/styles/style_main.css
+++ b/styles/style_main.css
@@ -22,7 +22,7 @@ body {
 
 
 img.art_display { /* ackshually nvm, there's not much art at all so i'm not gonna make the gallery thing */
-    width: 50%;
+    width: 45%;
     align-self: center;
     padding-top: 5vh;
     padding-bottom: 5vh;
@@ -99,3 +99,12 @@ p {
     font-family: 'Bitter', serif; 
     font-weight: 450;
 }
+
+/* mobile :( */
+
+@media (max-width: 900px) {
+
+    img.art_display {
+        width: 80vw;
+    }
+}