From 9796cabb86cbb2aa2e73d9ff6c9ae1f7845e3981 Mon Sep 17 00:00:00 2001
From: Brambora2022 <sucharmail@gmail.com>
Date: Wed, 25 Dec 2024 13:23:46 +0100
Subject: [PATCH] Tweak the design of a home page - align content, rearange
 buttons in header and add styles for different display resolutions

---
 src/lib/Header.svelte            |  8 ++++----
 src/lib/ThinBox.svelte           |  2 +-
 src/routes/+page.svelte          | 17 ++++++++++++-----
 src/routes/blog/BlogBoxes.svelte |  9 ++++++++-
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte
index 59c6953..caeb926 100644
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -23,10 +23,10 @@
 				{ url: "/gallery/emil-fafek", cs: "Fotografie Emila Fafka", en: "Emil Fafek photography" },
 				{ url: "/projects/videostop", cs: "Videostop", en: "Videostop" },
 			]
-		}, {
-			url: "/interviews", cs: "Rozhovory", en: "Interviews"
 		}, {
 			url: "https://inventory.herniarchiv.cz/", cs: "Sbírka", en: "Collection"
+		}, {
+			url: "/interviews", cs: "Rozhovory", en: "Interviews"
 		}, {
 			url: "https://casopisy.herniarchiv.cz/", cs: "Časopisy", en: "Magazines"
 		}, {
@@ -136,14 +136,14 @@
 
 	.language-select {
 		text-align: right;
-		margin-right: 28px;
+		margin-right: 1px;
 		position: relative;
 		top: -32px;
 	}
 
 	ul {
 		margin: auto;
-
+		margin-right: -27px;
 		list-style: none;
 		display: flex;
 		justify-content: end;
diff --git a/src/lib/ThinBox.svelte b/src/lib/ThinBox.svelte
index 3d88612..e5dac0f 100644
--- a/src/lib/ThinBox.svelte
+++ b/src/lib/ThinBox.svelte
@@ -26,7 +26,7 @@
 
 <style>
     .blog-box {
-        width: calc(30% - 32px);
+        width: calc(32% - 27px);
     }
 
     .blog-box :global(h3) {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 22a5fef..ceaf0ce 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -237,10 +237,10 @@
     }
 
     .boxes > div {
-        width: 100%;
+        width: calc(96.3% - 84px);
         display: grid;
-        grid-template-columns: 1fr 1fr auto;
-        gap: 62px;
+        grid-template-columns: 52.6% 52.6%;
+        column-gap: 62px;
         margin-bottom: 4em;
 
         align-items: center;
@@ -255,7 +255,7 @@
     }
 
     .boxes > div > img {
-        width: 600px;
+        width: 623px;
     }
 
     .project-boxes {
@@ -283,14 +283,21 @@
         display: none;
     }
 
+    @media only screen and (max-width: 1460px) {
+        .boxes > div img {
+            width: 94%;
+        }
+    }
+    
     @media only screen and (max-width: 800px) {
         .boxes > div {
+            width: 100%;
             grid-template-columns: 1fr;
             gap: 32px;
         }
 
         .boxes > div img {
-            width: 600px;
+            width: 100%;
             max-width: 100%;
             margin: auto;
             order: 0 !important;
diff --git a/src/routes/blog/BlogBoxes.svelte b/src/routes/blog/BlogBoxes.svelte
index d50037a..d816212 100644
--- a/src/routes/blog/BlogBoxes.svelte
+++ b/src/routes/blog/BlogBoxes.svelte
@@ -216,7 +216,14 @@
 <style>
     .blogboxes {
         display: flex;
-        flex-wrap: wrap;
+        width: 100%;
         gap: 64px;
     }
+
+    @media only screen and (max-width: 1225px) {
+        .blogboxes {
+            flex-wrap: wrap;
+            gap: 63px;
+        }
+    }
 </style>
\ No newline at end of file