github/hugo-geekblog
0
0
Fork 0
mirror of https://github.com/thegeeklab/hugo-geekblog.git synced 2024-11-22 13:10:40 +00:00
Code Issues Projects Releases Wiki Activity

fix: improve spacing of shortcodes (#362)

Browse Source
This commit is contained in:
Robert Kaussow 2023-02-16 10:38:45 +01:00 committed by GitHub
parent 4fd1766fbb
commit 484a0b13e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 44 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/shortcodes/boxes.html
View File

@ -6,7 +6,7 @@
<div class="flex flex-gap flex-fill"> <div class="flex flex-gap flex-fill">
{{- range $index, $box := .Scratch.Get $group }} {{- range $index, $box := .Scratch.Get $group }}
<div <div
class="gblog-box gblog-box--{{ $box.Size }} class="flex justify-center gblog-box gblog-box--{{ $box.Size }}
{{ with $box.Class }}{{ printf " %s" . }}{{ end }}" {{ with $box.Class }}{{ printf " %s" . }}{{ end }}"
> >
{{ if or $box.Title $box.Icon }} {{ if or $box.Title $box.Icon }}

30
src/sass/_base.scss
View File

@ -115,7 +115,7 @@ h6 {
h4, h4,
h5, h5,
h6 { h6 {
font-size: 1rem !important; font-size: $font-size-16 !important;
} }
a { a {
@ -179,8 +179,8 @@ img {
svg.gblog-icon { svg.gblog-icon {
display: inline-block; display: inline-block;
width: 1.3em; width: $padding-24;
height: 1.3em; height: $padding-24;
vertical-align: middle; vertical-align: middle;
stroke-width: 0; stroke-width: 0;
stroke: currentColor; stroke: currentColor;
@ -224,8 +224,8 @@ svg.gblog-icon {
&__img { &__img {
margin-right: $padding-16; margin-right: $padding-16;
width: 60px; width: $padding-32;
height: 60px; height: $padding-32;
} }
} }
@ -244,7 +244,7 @@ svg.gblog-icon {
} }
&__entry { &__entry {
line-height: 1.3em; line-height: $padding-24;
color: $gray-100; color: $gray-100;
text-decoration: none; text-decoration: none;
padding: $padding-4 $padding-8; padding: $padding-4 $padding-8;
@ -340,7 +340,8 @@ svg.gblog-icon {
margin-left: $padding-8; margin-left: $padding-8;
svg.gblog-icon { svg.gblog-icon {
font-size: $font-size-20; width: 1.25em;
height: 1.25em;
color: transparent; color: transparent;
} }
@ -370,7 +371,6 @@ svg.gblog-icon {
bottom: 0; bottom: 0;
right: 0; right: 0;
padding: $padding-4 $padding-8; padding: $padding-4 $padding-8;
font-size: 0.8em;
color: $gray-100; color: $gray-100;
border-radius: $border-radius 0; border-radius: $border-radius 0;
} }
@ -404,7 +404,7 @@ svg.gblog-icon {
} }
svg.gblog-icon { svg.gblog-icon {
font-size: 1.2em; font-size: $font-size-20;
} }
.gblog-button { .gblog-button {
@ -456,14 +456,14 @@ svg.gblog-icon {
&__codecopy { &__codecopy {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
top: 0.5rem; top: $padding-8;
right: 1rem; right: $padding-8;
border: $border-2 solid var(--code-copy-border-color); border: $border-2 solid var(--code-copy-border-color);
border-radius: $border-radius; border-radius: $border-radius;
background: var(--code-copy-background); background: var(--code-copy-background);
width: 2.2rem; width: $padding-32;
height: 2.2rem; height: $padding-32;
svg.gblog-icon { svg.gblog-icon {
top: 0; top: 0;
@ -495,7 +495,7 @@ svg.gblog-icon {
} }
&__item { &__item {
line-height: 2em; line-height: $padding-32;
&--row { &--row {
margin-right: $padding-16; margin-right: $padding-16;
@ -576,6 +576,8 @@ svg.gblog-icon {
} }
.gblog-toc { .gblog-toc {
margin: $padding-16 0;
// Classes to hide nested levels of ToC/Menu // Classes to hide nested levels of ToC/Menu
&__level--1 ul ul, &__level--1 ul ul,
&__level--2 ul ul ul, &__level--2 ul ul ul,

4
src/sass/_chroma_base.scss
View File

@ -10,7 +10,6 @@
.highlight { .highlight {
pre.chroma { pre.chroma {
margin: 0;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
max-height: var(--code-max-height); max-height: var(--code-max-height);
@ -32,6 +31,7 @@
pre.chroma { pre.chroma {
max-height: none; max-height: none;
border-radius: 0; border-radius: 0;
margin: 0;
} }
} }
.chroma .lntable td:first-child { .chroma .lntable td:first-child {
@ -45,6 +45,6 @@
} }
.chroma .lntable td:nth-child(2) { .chroma .lntable td:nth-child(2) {
width: 100%; width: 100%;
margin-left: 2em; margin-left: $padding-32;
} }
} }

48
src/sass/_markdown.scss
View File

@ -1,23 +1,5 @@
.gblog-markdown { .gblog-markdown {
line-height: 1.6em; line-height: $padding-24;
> :first-child {
margin-top: 0 !important;
}
&--nested {
:first-child {
margin-top: 0;
}
> pre {
margin-top: 0 !important;
}
> :last-child {
margin-bottom: 0;
}
}
h1, h1,
h2, h2,
@ -29,7 +11,7 @@
> code { > code {
border-top: $border-4 solid var(--accent-color); border-top: $border-4 solid var(--accent-color);
font-size: 0.75em !important; font-size: $font-size-12 !important;
} }
} }
@ -37,7 +19,7 @@
h5, h5,
h6 { h6 {
> code { > 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-left: $border-4 solid var(--accent-color);
border-radius: $border-radius; border-radius: $border-radius;
:first-child {
margin-top: 0;
}
:last-child {
margin-bottom: 0;
}
} }
table:not(.lntable) { table:not(.lntable) {
display: table; display: table;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; border-collapse: collapse;
margin-top: $padding-16; margin: $padding-16 0;
margin-bottom: $padding-16;
width: 100%; width: 100%;
text-align: left; text-align: left;
@ -149,12 +123,8 @@
} }
} }
pre {
margin: 1rem 0;
}
code { code {
padding: 0.2em 0.4em; padding: $padding-4 $padding-8;
} }
pre, pre,
@ -162,13 +132,13 @@
background-color: var(--code-background); background-color: var(--code-background);
border-radius: $border-radius; border-radius: $border-radius;
color: var(--code-font-color); color: var(--code-font-color);
font-size: 0.85rem; font-size: $font-size-14;
line-height: 1.45em; line-height: $padding-16;
} }
pre code { pre code {
display: block; display: block;
padding: 1rem; padding: $padding-16;
width: 100%; width: 100%;
} }
@ -177,7 +147,7 @@
} }
section.footnotes { section.footnotes {
margin-top: 3rem; margin-top: $padding-32;
color: var(--body-font-color); color: var(--body-font-color);
font-size: $font-size-14; font-size: $font-size-14;
} }

22
src/sass/_shortcodes.scss
View File

@ -1,7 +1,6 @@
// {{< expand "Label" "icon" >}} // {{< expand "Label" "icon" >}}
.gblog-expand { .gblog-expand {
margin-top: $padding-16; margin: $padding-16 0;
margin-bottom: $padding-16;
border: $border-1 solid var(--accent-color); border: $border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: $border-radius;
@ -17,7 +16,7 @@
&__content { &__content {
display: none; display: none;
padding: $padding-16; padding: 0 $padding-16;
} }
&__control:checked + &__content { &__control:checked + &__content {
@ -31,8 +30,7 @@
// {{< tabs >}} // {{< tabs >}}
.gblog-tabs { .gblog-tabs {
margin-top: $padding-16; margin: $padding-16 0;
margin-bottom: $padding-16;
border: $border-1 solid var(--accent-color); border: $border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: $border-radius;
@ -54,7 +52,7 @@
order: 999; //Move content blocks to the end order: 999; //Move content blocks to the end
width: 100%; width: 100%;
border-top: $border-1 solid var(--accent-color-lite); border-top: $border-1 solid var(--accent-color-lite);
padding: $padding-16; padding: 0 $padding-16;
display: none; display: none;
} }
@ -72,6 +70,8 @@
// {{< columns >}} // {{< columns >}}
.gblog-columns { .gblog-columns {
margin: $padding-16 0;
&--regular > :first-child { &--regular > :first-child {
flex: 1; flex: 1;
} }
@ -88,7 +88,6 @@
&__content { &__content {
flex: 1 1; flex: 1 1;
margin: $padding-16 0;
min-width: $body-min-width * 0.66; min-width: $body-min-width * 0.66;
padding: 0; padding: 0;
} }
@ -101,12 +100,12 @@
// {{< button >}} // {{< button >}}
.gblog-button { .gblog-button {
$root: &; $root: &;
margin: $padding-16 0;
display: inline-block; display: inline-block;
background: var(--accent-color-lite); background: var(--accent-color-lite);
border: $border-1 solid var(--accent-color); border: $border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: $border-radius;
margin: $padding-8 0;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -146,6 +145,7 @@
// {{< box >}} // {{< box >}}
.gblog-box { .gblog-box {
flex-direction: column;
background: var(--accent-color-lite); background: var(--accent-color-lite);
border: $border-1 solid var(--accent-color); border: $border-1 solid var(--accent-color);
border-radius: $border-radius; border-radius: $border-radius;
@ -170,9 +170,9 @@
gap: $padding-8; gap: $padding-8;
svg.gblog-icon { svg.gblog-icon {
width: 1.3rem; width: $padding-24;
height: 1.3rem; height: $padding-24;
min-width: 1.3rem; min-width: $padding-24;
} }
} }

5
src/sass/_utils.scss
View File

@ -83,4 +83,9 @@
.table-wrap { .table-wrap {
overflow: auto; overflow: auto;
margin: $padding-16 0;
> table {
margin: 0 !important;
}
} }