From fe54b8668e12ec454ab56eb0e1baaf36a84cd692 Mon Sep 17 00:00:00 2001 From: Kazhnuz 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