From 41f759c56629c67a12ca0b79be5b4ed542d8c840 Mon Sep 17 00:00:00 2001
From: Lucas Gabriel Vuotto <lucas@lgv5.net>
Date: Mon, 28 Apr 2025 07:18:02 +0000
Subject: [PATCH] site: make gallery, navbar, search and media align

---
 public/css/style.css | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index d6afb21..db0f953 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -40,9 +40,11 @@
   --tag-kind-r: var(--light-theme-tag-kind-r);
 
   --gap: 1.5rem;
-  --viewport-width: 60rem;
+  --viewport-width: 90rem;
 
   --border-thin: 0.0625rem solid var(--accent);
+
+  --gallery-column-gap: 1.2rem;
 }
 
 *,
@@ -151,9 +153,6 @@ form[name=search] {
   gap: 1rem;
   justify-content: center;
   align-items: center;
-
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
 }
 
 form[name=search] input[type=submit] {
@@ -294,7 +293,7 @@ main {
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  gap: 1rem;
+  gap: var(--gap) var(--gallery-column-gap);
   margin-bottom: var(--gap);
 }
 
@@ -370,6 +369,7 @@ a.tag-kind-r:active {
 @media screen and (max-width: 60rem) {
   :root {
     --viewport-width: 100%;
+    --gallery-column-gap: 1rem;
   }
 
   body > header > nav,
@@ -387,6 +387,7 @@ a.tag-kind-r:active {
 @media screen and (min-width: 60rem) {
   :root {
     --viewport-width: 60rem;
+    --gallery-column-gap: 1.3125rem;
   }
 
   body > header > nav,
@@ -404,6 +405,7 @@ a.tag-kind-r:active {
 @media screen and (min-width: 90rem) {
   :root {
     --viewport-width: 90rem;
+    --gallery-column-gap: 1.2rem;
   }
 }