systemausfall.org/hugo-theme-hilfe
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add optional hint/admonition icons (#383)

Browse source 
BREAKING CHANGE: The types of the `hint` short code have been renamed to `[note|tip|important|caution|warning]` the old types `[info|ok|warning|danger]` are still working, but should be considered as deprecated.

BREAKING CHANGE: The `hint` short code is using named arguments now. You have to change, e.g. `{{< hint warning >}}` to `{{< hint type=warning >}}`.
This commit is contained in:
Robert Kaussow 2022-04-23 15:14:42 +02:00 • committed by GitHub
parent 1563cd228b
commit f6966b8513
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 310 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/sass/_asciidoc.scss
View file

@ -9,14 +9,14 @@
}
margin: $padding-16 0;
padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
padding: 0;
border-left: $border-4 solid var(--accent-color);
border-radius: $border-radius;
table {
padding: 0 !important;
margin: 0 !important;
padding: 0 !important;
tr {
border: 0 !important;
@ -24,9 +24,39 @@
td {
&:first-child {
background-color: scale-color($gray-600, $alpha: -95%);
font-weight: bold;
&.icon {
.title {
display: flex;
align-items: center;
}
i.fa::after {
content: attr(title);
font-style: normal;
padding-left: $padding-24;
}
i.fa {
color: $black;
background-size: auto 90%;
background-repeat: no-repeat;
filter: invert(30%);
margin-left: -5px;
}
@each $name, $icon in $hint-icons {
i.fa.icon-#{$name} {
background-image: url(img/geekdoc-stack.svg##{$icon});
}
}
}
}
display: table-row;
display: flex;
padding: $padding-4 $padding-16 !important;
}
}
}

20
src/sass/_base.scss
View file

@ -163,8 +163,8 @@ img {
svg.gdoc-icon {
display: inline-block;
width: 1.3em;
height: 1.3em;
width: $font-size-20;
height: $font-size-20;
vertical-align: middle;
stroke-width: 0;
stroke: currentColor;
@ -289,7 +289,8 @@ svg.gdoc-icon {
cursor: pointer;
svg.gdoc-icon.toggle {
font-size: $font-size-12;
width: $font-size-16;
height: $font-size-16;
}
}
@ -354,7 +355,7 @@ svg.gdoc-icon {
}
.gdoc-page {
min-width: calc($body-min-width - $padding-16 * 2);
min-width: calc($body-min-width - $padding-32);
flex-grow: 1;
padding: $padding-16 0;
@ -369,7 +370,7 @@ svg.gdoc-icon {
&__header,
&__footer {
margin-bottom: $padding-16 * 1.2;
margin-bottom: $padding-24;
svg.gdoc-icon {
color: var(--control-icons);
@ -490,7 +491,7 @@ svg.gdoc-icon {
}
svg.gdoc-icon {
font-size: 1.2em;
font-size: $font-size-20;
}
.gdoc-button {
@ -573,8 +574,7 @@ svg.gdoc-icon {
svg.gdoc-icon {
position: absolute;
top: 0.625em;
left: $padding-16 * 0.5;
left: $padding-8;
color: var(--control-icons);
width: $font-size-16;
height: $font-size-16;
@ -680,7 +680,7 @@ svg.gdoc-icon {
}
.gdoc-error {
padding: $padding-16 * 6 $padding-16;
padding: $padding-96 $padding-16;
margin: 0 auto;
max-width: 45em;
@ -696,7 +696,7 @@ svg.gdoc-icon {
}
&__message {
padding-left: $padding-16 * 4;
padding-left: $padding-64;
}
&__line {

15
src/sass/_color_mode.scss
View file

@ -41,9 +41,16 @@
}
.gdoc-markdown {
.gdoc-hint {
.gdoc-hint,
.admonitionblock,
.gdoc-post__codecopy--success {
filter: none;
}
.gdoc-hint__title,
.admonitionblock table td:first-child {
background-color: scale-color($gray-600, $alpha: -95%);
}
}
}
@ -91,8 +98,14 @@
.gdoc-markdown {
.gdoc-hint,
.admonitionblock,
.gdoc-post__codecopy--success {
filter: saturate(2.5) brightness(0.85);
}
.gdoc-hint__title,
.admonitionblock table td:first-child {
background-color: scale-color($gray-600, $alpha: -85%);
}
}
}

19
src/sass/_defaults.scss
View file

@ -3,7 +3,10 @@ $padding-2: 0.125rem !default;
$padding-4: 0.25rem !default;
$padding-8: 0.5rem !default;
$padding-16: 1rem !default;
$padding-24: 1.5rem !default;
$padding-32: 2rem !default;
$padding-64: 4rem !default;
$padding-96: 6rem !default;
$font-size-base: 16px !default;
$font-size-12: 0.75rem !default;
@ -74,8 +77,20 @@ $hint-colors: (
note: rgba(0, 145, 234, 1),
ok: rgba(0, 200, 83, 1),
tip: rgba(0, 200, 83, 1),
warning: rgba(255, 171, 0, 1),
important: rgba(255, 171, 0, 1),
caution: rgba(115, 0, 211, 1),
danger: rgba(213, 0, 0, 1),
important: rgba(213, 0, 0, 1)
warning: rgba(213, 0, 0, 1)
) !default;
// Panel colors
$hint-icons: (
info: "gdoc_info_outline",
note: "gdoc_info_outline",
ok: "gdoc_check_circle_outline",
tip: "gdoc_check_circle_outline",
important: "gdoc_error_outline",
caution: "gdoc_dangerous",
danger: "gdoc_fire",
warning: "gdoc_fire"
) !default;

4
src/sass/_markdown.scss
View file

@ -166,7 +166,7 @@
ul,
ol {
padding-left: $padding-16 * 2;
padding-left: $padding-32;
}
dl {
@ -176,7 +176,7 @@
}
dd {
margin-left: $padding-16 * 2;
margin-left: $padding-32;
}
}

2
src/sass/_mobile.scss
View file

@ -36,7 +36,7 @@
}
.gdoc-error {
padding: $padding-16 * 6 $padding-16;
padding: $padding-96 $padding-16;
svg.gdoc-icon {
width: $font-size-96;

38
src/sass/_shortcodes.scss
View file

@ -131,9 +131,47 @@
border-left-color: $color;
background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
color: $body-font-color;
padding: 0;
}
}
&__title {
padding: $padding-4 $padding-16;
background-color: scale-color($gray-600, $alpha: -95%);
font-weight: bold;
color: scale-color($body-font-color, $alpha: -15%);
i.fa::after {
content: attr(title);
font-style: normal;
padding-left: $padding-24;
}
i.fa {
color: $black;
background-size: auto 90%;
background-repeat: no-repeat;
filter: invert(30%);
margin-left: -5px;
}
@each $name, $icon in $hint-icons {
i.fa.#{$name} {
background-image: url(img/geekdoc-stack.svg##{$icon});
}
}
.gdoc-icon {
width: $font-size-24;
height: $font-size-24;
margin-left: -5px;
}
}
&__text {
padding: $padding-4 $padding-16;
}
.gdoc-page__anchor {
display: none;
}