From fe54b8668e12ec454ab56eb0e1baaf36a84cd692 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Sun, 22 Sep 2024 22:37:52 +0200
Subject: [PATCH] fix: simplification stylesheet

---
 scss/clear-typography.scss | 164 ++++++++++++++++---------------------
 1 file changed, 69 insertions(+), 95 deletions(-)

diff --git a/scss/clear-typography.scss b/scss/clear-typography.scss
index a9988a2..e86ff33 100644
--- a/scss/clear-typography.scss
+++ b/scss/clear-typography.scss
@@ -4,9 +4,15 @@
   --text-color: #212529;
   --border-color: rgba(0,0,0,0.1);
   --hover-color: rgba(0,0,0,0.05);
+
+  --accent-color-dark: #1971c2;
+  --accent-color-light: #d0ebff;
+
   --background-color: #f8f9fa;
   --well-color: #e9ecef;
-  --accent-color: #1971c2;
+
+  --accent-color: var(--accent-color-dark);
+  --accent-color-back: var(--accent-color-light);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -14,7 +20,8 @@
     --text-color: #f1f3f5;
     --background-color: #212529;
     --well-color: #343a40;
-    --accent-color: #d0ebff;
+    --accent-color: var(--accent-color-light);
+    --accent-color-back: var(--accent-color-dark);
   }
 }
 
@@ -22,12 +29,6 @@
 // make code more readable
 $lineheight: 1rem;
 
-@mixin paragraph() {
-  padding:0;
-  margin:0;
-  margin-bottom: $lineheight;
-}
-
 html {
 	font-family: var(--font-family);
 	text-align: left;
@@ -59,12 +60,32 @@ nav ul {
   }
 }
 
-strong {
-	font-weight: 600;
+// Typography
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+hr,
+table,
+.tabs,
+details
+main,
+article {
+    padding: 0;
+    margin: 0 0 1rem 0;
 }
 
-em {
-	font-style: italic;
+
+p {
+  &:last-child {
+    margin-bottom:0;
+  }
 }
 
 a {
@@ -77,44 +98,24 @@ a {
   }
 }
 
-p, time {
-  @include paragraph();
-  &:last-child {
-    margin-bottom:0;
-  }
-}
-
-ul, ol {
-  @include paragraph();
-  ul {
-    margin-bottom:0;
-  }
-  li {
-    margin-left: $lineheight;
-  }
-}
-
-/* sup, sub */
-
-sup, sub {
-  margin:0;
-  padding:0;
-  line-height:$lineheight;
-  font-size: 0.8rem;
-  vertical-align:baseline;
-  position:relative;
-}
-
-sup {
-  top: -$lineheight/4;
-}
-
-sub {
-  top: $lineheight/4;
+:is(ul, ol) > :is(ul, ol) {
+  margin-bottom:0;
 }
 
 
-::selection, ::-moz-selection { background: var(--accent-color); color: var(--background-color); }
+li {
+  margin-left: $lineheight;
+}
+
+::selection, ::-moz-selection { 
+  background: var(--accent-color-back); 
+  color: var(--text-color); 
+}
+
+hr {
+  border:0;
+  border-bottom: 1px solid var(--border-color);
+}
 
 /* ------------------ TITLES ------------------- */
 
@@ -126,10 +127,7 @@ sub {
 h1, h2, h3, h4, h5, h6 {
   text-align: left;
 	line-height: 1;
-	padding:0;
-	margin:0;
 	font-weight:400;
-	margin-bottom: $lineheight;
 }
 
 h1 {
@@ -158,43 +156,29 @@ h6 {
 
 /* ------------------ HR ------------------- */
 
-hr {
-  border-top: 0px;
-  border-left: 0px;
-  border-right: 0px;
-  border-bottom: 1px;
-  border-color: var(--border-color);
-  border-style: solid;
-  padding:0;
-  margin:0;
-  margin-bottom: $lineheight;
-}
-
 /* ------------------ QUOTE ------------------- */
 
-@mixin well() {
-  border-width: 0 0 0 $lineheight/4;
-	border-style: solid;
-	border-radius: $lineheight/8;
-	margin:0;
-	margin-bottom: $lineheight;
-	padding: $lineheight;
-    font-size:1.1rem;
-	
-	max-width: 100%;
-    overflow: auto;
+.well,
+blockquote,
+pre,
+.alert,
+.code,
+.menu,
+.breadcrumb,
+.toolbar,
+details {
+    border: 0;
+    border-radius: 6px;
+    margin: 0 0 1rem 0;
+    padding: .75rem;
+    max-width: 100%;
+    background-color: var(--well-color);
+    border: 0;
+    border-left: 6px solid var(--accent-color);
 }
 
-blockquote {
-  @include well();
-	border-color: var(--accent-color);
-	background-color:var(--well-color);
-}
-
-pre {
-  @include well();
-	border-color: var(--accent-color);
-	background-color:var(--well-color);
+pre, code {
+    font-family: var(--font-family-monospace);
 }
 
 code {
@@ -210,16 +194,6 @@ mark {
   border-radius: 0.2em;
   padding:0 $lineheight/4 0 $lineheight/4;
   
-  background-color:rgba(255,255,0,0.33);
+  background-color: var(--accent-color-back);
   color: inherit;
-}
-
-/* ------------------ SPECIAL STYLING ------------------- */
-
-.time {
-	font-style: italic;
-	text-align: right;
-	width: 100%;
-	display: block;
-    font-size: 0.9rem;
-}
+}
\ No newline at end of file