From 158d471be795df2fa7608aac9cd8554f9b8e3bdd Mon Sep 17 00:00:00 2001
From: Maciej Jur <maciej@kamoshi.org>
Date: Sat, 10 Jun 2023 02:00:47 +0200
Subject: [PATCH] (styles,wiki) improve page styles

---
 src/layouts/Home.astro                |  2 +-
 src/styles/_markdown.scss             |  8 +++-
 src/styles/components/_link-tree.scss |  2 +-
 src/styles/layouts/_wiki.scss         | 56 ++++++++++++++++++---------
 4 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/layouts/Home.astro b/src/layouts/Home.astro
index f0c1307..c69c8a9 100644
--- a/src/layouts/Home.astro
+++ b/src/layouts/Home.astro
@@ -6,7 +6,7 @@ import Base from "./Base.astro";
 ---
 <Base>
 	<main class="l-home">
-		<article class="l-home__article markdown readable">
+		<article class="l-home__article markdown">
 			<slot />
 		</article>
 		<aside class="l-home__aside">
diff --git a/src/styles/_markdown.scss b/src/styles/_markdown.scss
index c3d7dc3..4a9ab7c 100644
--- a/src/styles/_markdown.scss
+++ b/src/styles/_markdown.scss
@@ -20,6 +20,8 @@
   > p {
     margin: 0.5em 0;
     line-height: 1.5em;
+    hyphens: auto;
+    text-align: justify;
     
     > a {
       color: var(--c-primary);
@@ -27,9 +29,13 @@
   }
 
   > h1, > h2, > h3, > h4, > h5, > h6 {
-    margin: 1em 0 0.5em 0;
+    margin-bottom: 0.5em;
     font-family: var(--serif);
     font-weight: 500;
+
+    &:not(:first-child) {
+      margin-top: 1em;
+    }
   }
 
   blockquote {
diff --git a/src/styles/components/_link-tree.scss b/src/styles/components/_link-tree.scss
index 5bacd49..c746751 100644
--- a/src/styles/components/_link-tree.scss
+++ b/src/styles/components/_link-tree.scss
@@ -1,6 +1,6 @@
 .link-tree {
   position: relative;
-  max-height: 100vh;
+  max-height: min(100vh, 100%);
   padding: 1em;
   overflow-y: auto;
 
diff --git a/src/styles/layouts/_wiki.scss b/src/styles/layouts/_wiki.scss
index ed7f7c6..a4e863b 100644
--- a/src/styles/layouts/_wiki.scss
+++ b/src/styles/layouts/_wiki.scss
@@ -1,13 +1,17 @@
+$bp-m: 58rem;
+$bp-l: 80rem;
+
+
 .wiki-main {
   position: relative;
   display: grid;
   grid-template-columns: auto 1fr;
 
-  @media (min-width: 58rem) {
+  @media (min-width: $bp-m) {
     grid-template-columns: 16rem 1fr;
   }
 
-  @media (min-width: 80rem) {
+  @media (min-width: $bp-l) {
     grid-template-columns: 16rem 1fr 16rem;
   }
 }
@@ -17,11 +21,11 @@
   width: 16rem;
   height: 100%;
   transition: margin-left linear 0.1s;
-  background-color: white;
+  background-color: var(--c-bg-main);
   box-shadow: var(--shadow-m);
   z-index: 5;
 
-  @media (min-width: 58rem) {
+  @media (min-width: $bp-m) {
     position: static;
     background-color: unset;
     box-shadow: unset;
@@ -38,25 +42,12 @@
     right: -2em;
     cursor: pointer;
 
-    @media (min-width: 58rem) {
+    @media (min-width: $bp-m) {
       display: none;
     }
   }
 }
 
-.wiki-icon {
-  max-height: 1.5em;
-  max-width: 1.5em;
-}
-
-.wiki-article {
-  margin-inline: 1em;
-
-  @media (min-width: 80rem) {
-    margin-inline: 2em;
-  }
-}
-
 #wiki-aside-shown {
   &:checked {
     ~ .wiki-aside {
@@ -70,9 +61,36 @@
     ~ .wiki-aside {
       margin-left: -16rem;
 
-      @media (min-width: 58rem) {
+      @media (min-width: $bp-m) {
         margin-left: unset;
       }
     }
   }
 }
+
+.wiki-icon {
+  max-height: 1.5em;
+  max-width: 1.5em;
+}
+
+.wiki-article {
+  max-width: 100%;
+  margin-inline: auto;
+  padding: 1em;
+  padding-top: 2em;
+  background-color: white;
+  box-shadow: var(--shadow-l);
+  transition: margin ease-in-out 0.2s, padding ease-in-out 0.2s;
+
+  @media (min-width: $bp-m) {
+    max-width: min(100%, 50em);
+    margin-block: 1em;
+    padding-top: 1em;
+    border-radius: 0.5em;
+  }
+
+  @media (min-width: $bp-l) {
+    margin-block: 2em;
+    padding: 2em;
+  }
+}