Fix mobile styles on homepage

hernihistorie · Dec 23, 2024 · 67afc97 · 67afc97
1 parent 117c713
commit 67afc97
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 32 deletions.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -238,7 +238,10 @@
         width: 100%;
         display: grid;
         grid-template-columns: 1fr 1fr auto;
+        gap: 62px;
         margin-bottom: 4em;
+
+        align-items: center;
     }
 
     .boxes > div:nth-child(even) img {
@@ -274,43 +277,32 @@
         margin-top: 1em;
     }
 
-    .decoration {
-        height: 400px;
-    }
-
-    .blogboxes {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 64px;
-    }
-
-    .thumbnails {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 1em;
-        margin-bottom: 2em;
-    }
+    @media only screen and (max-width: 800px) {
+        .boxes > div {
+            grid-template-columns: 1fr;
+            gap: 32px;
+        }
 
-    .thumbnails img {
-        width: 140px;
-    }
+        .boxes > div img {
+            width: 600px;
+            max-width: 100%;
+            margin: auto;
+            order: 0 !important;
+        }
 
-    @media only screen and (max-width: 750px) {
-        .boxes > :global(div) {
-            width: 100%;
+        .project-boxes {
+            flex-direction: column;
+            gap: 32px;
         }
 
-        .decoration img {
-            height: 160px;
+        .project-boxes :global(img) {
+            display: block;
             margin: auto;
+            margin-bottom: 12px;
+            width: 600px;
         }
     }
 
     @media only screen and (max-width: 500px) {
-        .decoration img {
-            height: 120px;
-            margin: auto;
-        }
     }
 </style>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
@@ -1,13 +1,22 @@
 <script>
 	import Meta from "$lib/Meta.svelte";
+	import Loc from "$src/lib/Loc.svelte";
 </script>
 
 <Meta title="O nás" />
 
 <article class="thin">
-    <h2>O nás</h2>
-    <p>
-        Jsme projekt spolku Herní historie, jehož cílem je zachovávat herní kulturu v rámci České a Slovenské republiky. Naší hlavní činností je katalogizace a archivace všech artefaktů spojených s historií her, jako například časopisy, dobová zařízení nebo média týkající se her. Spolupracujeme s řadou mezinárodních organizací a chceme se zasloužit o to, aby u nás existovala oficiální instituce zastřešující lokální stopu v tomto odvětví kultury.
+    <h2>
+        <Loc
+            cs="O nás"
+            en="About Us"
+        />
+    </h2>
+    <p>
+        <Loc
+            cs="Jsme projekt spolku Herní historie, jehož cílem je zachovávat herní kulturu v rámci České a Slovenské republiky. Naší hlavní činností je katalogizace a archivace všech artefaktů spojených s historií her, jako například časopisy, dobová zařízení nebo média týkající se her. Spolupracujeme s řadou mezinárodních organizací a chceme se zasloužit o to, aby u nás existovala oficiální instituce zastřešující lokální stopu v tomto odvětví kultury."
+            en="We are a project of the Herní historie association, aimed at preserving gaming culture within the Czech and Slovak Republic. Our main activity is cataloging and archiving all artifacts connected to gaming history, such as magazines, period hardware, or game-related media. We collaborate with numerous international organizations and strive to establish an official institution that would oversee the local footprint in this cultural sector."
+        />
     </p>
 </article>