From 49f68c9f58bd358f2373e647b880b9eaebfe40b7 Mon Sep 17 00:00:00 2001
From: hexahigh <97455552+hexahigh@users.noreply.github.com>
Date: Fri, 15 Sep 2023 15:15:06 +0200
Subject: [PATCH] added the second image page

---
 src/routes/components/images-nav.svelte |  4 +-
 src/routes/images/23.1/+page.svelte     | 65 +++++++++++++++++++++++++
 2 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/images/23.1/+page.svelte

diff --git a/src/routes/components/images-nav.svelte b/src/routes/components/images-nav.svelte
index e9efd0f..08093be 100644
--- a/src/routes/components/images-nav.svelte
+++ b/src/routes/components/images-nav.svelte
@@ -7,8 +7,8 @@
 
 <nav>
     <ul id="nav-pc">
-        <li class={path === '/images/23' ? 'active' : ''}><a href="/">2023</a></li>
-        <li class={path === '/images/23.1' ? 'active' : ''}><a href="/">2023.1</a></li>
+        <li class={path === '/images/23' ? 'active' : ''}><a href="/images/23">2023</a></li>
+        <li class={path === '/images/23.1' ? 'active' : ''}><a href="/images/23.1">2023.1</a></li>
     </ul>
 </nav>
 
diff --git a/src/routes/images/23.1/+page.svelte b/src/routes/images/23.1/+page.svelte
new file mode 100644
index 0000000..5499d45
--- /dev/null
+++ b/src/routes/images/23.1/+page.svelte
@@ -0,0 +1,65 @@
+<script>
+    import Nav from "../../Nav.svelte";
+    import ImagesNav from "../../components/images-nav.svelte";
+</script>
+
+<Nav />
+<ImagesNav />
+
+<div class="main">
+    <div class="row">
+        <div class="column">
+
+        </div>
+        <div class="column">
+
+        </div>
+        <div class="column">
+
+        </div>
+        <div class="column">
+
+        </div>
+    </div>
+</div>
+
+<style>
+    .main {
+        background-color: #ffffff;
+    }
+
+    .row {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0 4px;
+    }
+
+    /* Create four equal columns that sits next to each other */
+    .column {
+        flex: 25%;
+        max-width: 25%;
+        padding: 0 4px;
+    }
+
+    .column img {
+        margin-top: 8px;
+        vertical-align: middle;
+        width: 100%;
+    }
+
+    /* Responsive layout - makes a two column-layout instead of four columns */
+    @media screen and (max-width: 800px) {
+        .column {
+            flex: 50%;
+            max-width: 50%;
+        }
+    }
+
+    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+    @media screen and (max-width: 600px) {
+        .column {
+            flex: 100%;
+            max-width: 100%;
+        }
+    }
+</style>