Tweak the design of a home page - align content, rearange buttons in …

…header and add styles for different display resolutions

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;

src/lib/ThinBox.svelte

@@ -26,7 +26,7 @@
 
 <style>
     .blog-box {
-        width: calc(30% - 32px);
+        width: calc(32% - 27px);
     }
 
     .blog-box :global(h3) {

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;

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>