From d2ae15bd1ee0a194794e4e74cb84d2d1ce152235 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Fri, 10 May 2024 13:54:48 +0800
Subject: [PATCH] Adjust main content paddings on large screen sizes

---
 _site/assets/css/main.css | 14 +++++---------
 _site/feed.xml            |  2 +-
 src/assets/css/main.css   | 14 +++++---------
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css
index dee3d7c6..87cf3278 100644
--- a/_site/assets/css/main.css
+++ b/_site/assets/css/main.css
@@ -37,6 +37,7 @@
     --ff-primary: 'Noto Sans';
 
     --sz-paragraph-margin: 1.15em;
+    --sz-main-padding: clamp(1rem, 5%, 4rem);
 }
 
 /* ------------------- */
@@ -291,11 +292,11 @@ main {
 .article,
 .content:not(.content--divided),
 .content__section {
-    padding: 1.5rem clamp(1rem, 5%, 3rem);
+    padding: 1.5rem var(--sz-main-padding);
 }
 
 .main__header {
-    padding: 2.5rem clamp(1rem, 5%, 3rem);
+    padding: 2.5rem var(--sz-main-padding);
     text-align: center;
     display: grid;
 }
@@ -332,8 +333,9 @@ main {
 /* Desktop main content layout */
 @media only screen and (min-width: 60rem) {
     .content__wrapper {
+        padding: 0 var(--sz-main-padding);
         grid-template-areas: 'leftbar article rightbar';
-        grid-template-columns: minmax(0, 15rem) minmax(0, 2.5fr) minmax(0, 15rem);
+        grid-template-columns: minmax(0, 20%) minmax(0, 2.5fr) minmax(0, 20%);
     }
 
     .article,
@@ -350,12 +352,6 @@ main {
     }
 }
 
-@media only screen and (min-width: 80rem) {
-    .content__wrapper {
-        max-width: 80rem;
-    }
-}
-
 /* HEADING WRAPPER AND ANCHOR */
 .heading-wrapper {
     display: flex;
diff --git a/_site/feed.xml b/_site/feed.xml
index 0b68aeef..9f220a60 100644
--- a/_site/feed.xml
+++ b/_site/feed.xml
@@ -4,7 +4,7 @@
     <subtitle>Leilukin&#39;s personal website.</subtitle>
     <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
     <link href="https://leilukin.neocities.org"/>
-    <updated>2024-05-10T04:48:57Z</updated>
+    <updated>2024-05-10T05:53:32Z</updated>
     <id>https://leilukin.neocities.org</id>
     <author>
         <name>Leilukin</name>
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index dee3d7c6..87cf3278 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -37,6 +37,7 @@
     --ff-primary: 'Noto Sans';
 
     --sz-paragraph-margin: 1.15em;
+    --sz-main-padding: clamp(1rem, 5%, 4rem);
 }
 
 /* ------------------- */
@@ -291,11 +292,11 @@ main {
 .article,
 .content:not(.content--divided),
 .content__section {
-    padding: 1.5rem clamp(1rem, 5%, 3rem);
+    padding: 1.5rem var(--sz-main-padding);
 }
 
 .main__header {
-    padding: 2.5rem clamp(1rem, 5%, 3rem);
+    padding: 2.5rem var(--sz-main-padding);
     text-align: center;
     display: grid;
 }
@@ -332,8 +333,9 @@ main {
 /* Desktop main content layout */
 @media only screen and (min-width: 60rem) {
     .content__wrapper {
+        padding: 0 var(--sz-main-padding);
         grid-template-areas: 'leftbar article rightbar';
-        grid-template-columns: minmax(0, 15rem) minmax(0, 2.5fr) minmax(0, 15rem);
+        grid-template-columns: minmax(0, 20%) minmax(0, 2.5fr) minmax(0, 20%);
     }
 
     .article,
@@ -350,12 +352,6 @@ main {
     }
 }
 
-@media only screen and (min-width: 80rem) {
-    .content__wrapper {
-        max-width: 80rem;
-    }
-}
-
 /* HEADING WRAPPER AND ANCHOR */
 .heading-wrapper {
     display: flex;