From 484a0b13e89d8977a01cadf282465bdc0d794be0 Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Thu, 16 Feb 2023 10:38:45 +0100 Subject: [PATCH] fix: improve spacing of shortcodes (#362) --- layouts/shortcodes/boxes.html | 2 +- src/sass/_base.scss | 30 ++++++++++++---------- src/sass/_chroma_base.scss | 4 +-- src/sass/_markdown.scss | 48 +++++++---------------------------- src/sass/_shortcodes.scss | 22 ++++++++-------- src/sass/_utils.scss | 5 ++++ 6 files changed, 44 insertions(+), 67 deletions(-) diff --git a/layouts/shortcodes/boxes.html b/layouts/shortcodes/boxes.html index eead05c..b19ba4e 100644 --- a/layouts/shortcodes/boxes.html +++ b/layouts/shortcodes/boxes.html @@ -6,7 +6,7 @@
{{- range $index, $box := .Scratch.Get $group }}
{{ if or $box.Title $box.Icon }} diff --git a/src/sass/_base.scss b/src/sass/_base.scss index 330378c..46d89a3 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -115,7 +115,7 @@ h6 { h4, h5, h6 { - font-size: 1rem !important; + font-size: $font-size-16 !important; } a { @@ -179,8 +179,8 @@ img { svg.gblog-icon { display: inline-block; - width: 1.3em; - height: 1.3em; + width: $padding-24; + height: $padding-24; vertical-align: middle; stroke-width: 0; stroke: currentColor; @@ -224,8 +224,8 @@ svg.gblog-icon { &__img { margin-right: $padding-16; - width: 60px; - height: 60px; + width: $padding-32; + height: $padding-32; } } @@ -244,7 +244,7 @@ svg.gblog-icon { } &__entry { - line-height: 1.3em; + line-height: $padding-24; color: $gray-100; text-decoration: none; padding: $padding-4 $padding-8; @@ -340,7 +340,8 @@ svg.gblog-icon { margin-left: $padding-8; svg.gblog-icon { - font-size: $font-size-20; + width: 1.25em; + height: 1.25em; color: transparent; } @@ -370,7 +371,6 @@ svg.gblog-icon { bottom: 0; right: 0; padding: $padding-4 $padding-8; - font-size: 0.8em; color: $gray-100; border-radius: $border-radius 0; } @@ -404,7 +404,7 @@ svg.gblog-icon { } svg.gblog-icon { - font-size: 1.2em; + font-size: $font-size-20; } .gblog-button { @@ -456,14 +456,14 @@ svg.gblog-icon { &__codecopy { visibility: hidden; position: absolute; - top: 0.5rem; - right: 1rem; + top: $padding-8; + right: $padding-8; border: $border-2 solid var(--code-copy-border-color); border-radius: $border-radius; background: var(--code-copy-background); - width: 2.2rem; - height: 2.2rem; + width: $padding-32; + height: $padding-32; svg.gblog-icon { top: 0; @@ -495,7 +495,7 @@ svg.gblog-icon { } &__item { - line-height: 2em; + line-height: $padding-32; &--row { margin-right: $padding-16; @@ -576,6 +576,8 @@ svg.gblog-icon { } .gblog-toc { + margin: $padding-16 0; + // Classes to hide nested levels of ToC/Menu &__level--1 ul ul, &__level--2 ul ul ul, diff --git a/src/sass/_chroma_base.scss b/src/sass/_chroma_base.scss index bc3ee8c..18e0780 100644 --- a/src/sass/_chroma_base.scss +++ b/src/sass/_chroma_base.scss @@ -10,7 +10,6 @@ .highlight { pre.chroma { - margin: 0; width: 100%; overflow: auto; max-height: var(--code-max-height); @@ -32,6 +31,7 @@ pre.chroma { max-height: none; border-radius: 0; + margin: 0; } } .chroma .lntable td:first-child { @@ -45,6 +45,6 @@ } .chroma .lntable td:nth-child(2) { width: 100%; - margin-left: 2em; + margin-left: $padding-32; } } diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss index 14fab41..6119b45 100644 --- a/src/sass/_markdown.scss +++ b/src/sass/_markdown.scss @@ -1,23 +1,5 @@ .gblog-markdown { - line-height: 1.6em; - - > :first-child { - margin-top: 0 !important; - } - - &--nested { - :first-child { - margin-top: 0; - } - - > pre { - margin-top: 0 !important; - } - - > :last-child { - margin-bottom: 0; - } - } + line-height: $padding-24; h1, h2, @@ -29,7 +11,7 @@ > code { border-top: $border-4 solid var(--accent-color); - font-size: 0.75em !important; + font-size: $font-size-12 !important; } } @@ -37,7 +19,7 @@ h5, h6 { > code { - font-size: 0.8rem !important; + font-size: $font-size-14 !important; } } @@ -91,21 +73,13 @@ border-left: $border-4 solid var(--accent-color); border-radius: $border-radius; - - :first-child { - margin-top: 0; - } - :last-child { - margin-bottom: 0; - } } table:not(.lntable) { display: table; border-spacing: 0; border-collapse: collapse; - margin-top: $padding-16; - margin-bottom: $padding-16; + margin: $padding-16 0; width: 100%; text-align: left; @@ -149,12 +123,8 @@ } } - pre { - margin: 1rem 0; - } - code { - padding: 0.2em 0.4em; + padding: $padding-4 $padding-8; } pre, @@ -162,13 +132,13 @@ background-color: var(--code-background); border-radius: $border-radius; color: var(--code-font-color); - font-size: 0.85rem; - line-height: 1.45em; + font-size: $font-size-14; + line-height: $padding-16; } pre code { display: block; - padding: 1rem; + padding: $padding-16; width: 100%; } @@ -177,7 +147,7 @@ } section.footnotes { - margin-top: 3rem; + margin-top: $padding-32; color: var(--body-font-color); font-size: $font-size-14; } diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss index ab94157..fb7f5e4 100644 --- a/src/sass/_shortcodes.scss +++ b/src/sass/_shortcodes.scss @@ -1,7 +1,6 @@ // {{< expand "Label" "icon" >}} .gblog-expand { - margin-top: $padding-16; - margin-bottom: $padding-16; + margin: $padding-16 0; border: $border-1 solid var(--accent-color); border-radius: $border-radius; @@ -17,7 +16,7 @@ &__content { display: none; - padding: $padding-16; + padding: 0 $padding-16; } &__control:checked + &__content { @@ -31,8 +30,7 @@ // {{< tabs >}} .gblog-tabs { - margin-top: $padding-16; - margin-bottom: $padding-16; + margin: $padding-16 0; border: $border-1 solid var(--accent-color); border-radius: $border-radius; @@ -54,7 +52,7 @@ order: 999; //Move content blocks to the end width: 100%; border-top: $border-1 solid var(--accent-color-lite); - padding: $padding-16; + padding: 0 $padding-16; display: none; } @@ -72,6 +70,8 @@ // {{< columns >}} .gblog-columns { + margin: $padding-16 0; + &--regular > :first-child { flex: 1; } @@ -88,7 +88,6 @@ &__content { flex: 1 1; - margin: $padding-16 0; min-width: $body-min-width * 0.66; padding: 0; } @@ -101,12 +100,12 @@ // {{< button >}} .gblog-button { $root: &; + margin: $padding-16 0; display: inline-block; background: var(--accent-color-lite); border: $border-1 solid var(--accent-color); border-radius: $border-radius; - margin: $padding-8 0; cursor: pointer; user-select: none; @@ -146,6 +145,7 @@ // {{< box >}} .gblog-box { + flex-direction: column; background: var(--accent-color-lite); border: $border-1 solid var(--accent-color); border-radius: $border-radius; @@ -170,9 +170,9 @@ gap: $padding-8; svg.gblog-icon { - width: 1.3rem; - height: 1.3rem; - min-width: 1.3rem; + width: $padding-24; + height: $padding-24; + min-width: $padding-24; } } diff --git a/src/sass/_utils.scss b/src/sass/_utils.scss index bdd50b4..dfe3bcb 100644 --- a/src/sass/_utils.scss +++ b/src/sass/_utils.scss @@ -83,4 +83,9 @@ .table-wrap { overflow: auto; + margin: $padding-16 0; + + > table { + margin: 0 !important; + } }