From e752499163fbc77ae9ab3584c9cd52f8c2a3dd7d Mon Sep 17 00:00:00 2001
From: DarkCat09 <darkcat09@vivaldi.net>
Date: Thu, 22 Jun 2023 12:01:29 +0400
Subject: [PATCH] Bugfix: distance between menu items

---
 src/components/MenuItem.astro | 13 ++-----------
 src/layouts/Menu.astro        | 10 +++++++++-
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/MenuItem.astro b/src/components/MenuItem.astro
index 3eaea11..b71007f 100644
--- a/src/components/MenuItem.astro
+++ b/src/components/MenuItem.astro
@@ -21,17 +21,7 @@ const { name, link, icon } = Astro.props;
 
 <style lang="less">
     li {
-        // 0.6rem = horizontal padding
-        padding: 0 0.6rem;
         font-size: 1.15rem;
-
-        &:first-child {
-            padding-left: 0;
-        }
-        
-        &:last-child {
-            padding-right: 0;
-        }
     }
 
     a {
@@ -41,8 +31,9 @@ const { name, link, icon } = Astro.props;
     }
 
     .icon-wrapper {
-        margin-right: 0.25rem;
+        margin-right: 0.2rem;
         font-size: 1.5rem;
+        width: 1.5rem;
         color: var(--fg-sec);
     }
 </style>
diff --git a/src/layouts/Menu.astro b/src/layouts/Menu.astro
index badafba..825ac6d 100644
--- a/src/layouts/Menu.astro
+++ b/src/layouts/Menu.astro
@@ -8,6 +8,7 @@ import ThemeModal from "../components/ThemeModal.astro";
     <ul>
         <slot />
     </ul>
+    <ul class="menu-sep"></ul>
     <ul>
         <MenuItem name="Theme" icon="&#xf53f;" link="#theme" />
     </ul>
@@ -16,6 +17,9 @@ import ThemeModal from "../components/ThemeModal.astro";
 <style lang="less">
     @import "/src/styles/max_width.less";
 
+    // distance between menu items
+    @items-dist: 0.8rem;
+
     nav {
         margin: 0.4rem auto;
         max-width: @max-width;
@@ -23,7 +27,6 @@ import ThemeModal from "../components/ThemeModal.astro";
 
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
     }
 
     ul {
@@ -33,5 +36,10 @@ import ThemeModal from "../components/ThemeModal.astro";
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
+        column-gap: @items-dist;
+    }
+
+    ul.menu-sep {
+        min-width: @items-dist;
     }
 </style>