Newtab shortcode, improved RSS & CSS

1 files changed, 24 insertions, 11 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index cb4b89e..7550f30 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -9,6 +9,7 @@
     --font-size-h1: 2rem;
     --font-size-small: 0.85rem;
     --gap-default: 1rem;
+    --gap-medium: 1.5rem;
     --gap-large: 2rem;
     --gap-small: 0.5rem;
     --line-height-default: 1.5;
@@ -66,7 +67,7 @@ body {
     display: grid;
     grid-template-rows: auto auto 1fr auto; /* Ensure header & navmenu at top, main taking up main space, footer at bottom */
     margin: 1.5rem auto;
-    max-width: 80ch;
+    max-width: 75ch;
     min-height: 100vh;
 }
 
@@ -125,7 +126,7 @@ dl {
 
     dd {
         line-height: var(--line-height-body);
-        padding-left: 1.5rem;
+        padding-left: var(--gap-medium);
     }
 }
 
@@ -155,7 +156,7 @@ hr {
 
 /* Lists generated from markdown text */
 ol, ul {
-    padding-left: 1.5rem;
+    padding-left: var(--gap-medium);
     margin-bottom: var(--gap-default);
 }
 
@@ -186,6 +187,13 @@ time {
     & > pre {
         border-radius: var(--border-radius-minimal);
         padding: 0.5rem;
+
+        /* Preserving code indentation with mobile horizontal scrolling */
+        @media (max-width: 768px) {
+            max-width: 330px;
+            overflow-x: auto;
+            -webkit-overflow-scrolling: touch; /* iOS Safari only */
+        }
     }
 }
 
@@ -194,7 +202,7 @@ time {
     display: flex;
     align-items: center;
     justify-content: space-around;
-    margin-bottom: 1.5rem;
+    margin-bottom: var(--gap-medium);
 }
 
 .site-selections,
@@ -202,7 +210,7 @@ time {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--gap-default);
+    gap: var(--gap-medium);
 }
 
 .site-title {
@@ -243,8 +251,11 @@ time {
     justify-content: space-evenly;
 
     @media (max-width: 768px) {
-        flex-direction: column;
-        gap: 0.8rem;
+        /* Grid items stretch to at least 100px or take up full width */
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+        justify-items: center;
+        gap: var(--gap-medium) var(--gap-small);
     }
 }
 
@@ -258,7 +269,7 @@ time {
     display: flex;
     align-items: center;
     justify-content: space-around;
-    margin-top: 1.5rem;
+    margin-top: var(--gap-medium);
 
     @media (max-width: 768px) {
         flex-direction: column;
@@ -268,18 +279,20 @@ time {
 
 .follow-me-list {
     display: flex;
-    align-items: start;
+    align-items: center;
     justify-content: center;
-    gap: var(--gap-default);
+    gap: var(--gap-medium);
 
     @media (max-width: 768px) {
-        flex-direction: column;
+        flex-wrap: wrap;
     }
 }
 
 /* Footer Icons */
 .follow-me-item img {
+    object-fit: contain;
     height: 2rem;
+    width: 2rem;
 }
 
 /* POST CARD */