[design] improve horizontal rules

Author: zombieFox

src/css/menu.css

@@ -74,7 +74,7 @@
 }
 
 .menu-item:not(:last-child) {
-  border-bottom: 2px solid rgb(var(--theme-gray-03));
+  border-bottom: var(--horizontal-rule);
 }
 
 .menu-item-header {

src/css/typography.css

@@ -56,7 +56,7 @@ p:not(:last-child) {
 
 hr {
   border: 0;
-  border-top: 2px solid rgb(var(--theme-gray-02));
+  border-top: var(--horizontal-rule);
   border-radius: var(--theme-radius);
   margin: 1em 0;
   clear: both;

src/css/variables.css

@@ -73,6 +73,7 @@
                                                         0 0 1em rgba(0, 0, 0, 0.1);
   --layout-shadow-large:                                0 0 1em rgba(0, 0, 0, 0.2),
                                                         0 0 2em rgba(0, 0, 0, 0.1);
+  --horizontal-rule:                                    calc(var(--layout-line-width) / 2) solid rgb(var(--theme-gray-02));
   /* background */
   --background-color-theme:                             var(--theme-gray-01);
   --background-color-custom:                            rgb(0, 0, 0);