+
{{- with $icon -}}
{{ $title }}
{{- else -}}
-
+
+ {{ $title }}
{{- end -}}
{{ .Inner | $.Page.RenderString }}
diff --git a/src/sass/_asciidoc.scss b/src/sass/_asciidoc.scss
index 946b0ce..497aba7 100644
--- a/src/sass/_asciidoc.scss
+++ b/src/sass/_asciidoc.scss
@@ -2,20 +2,33 @@
@use "defaults";
.admonitionblock {
+ $root: &;
+
+ margin: defaults.$padding-16 0;
+ padding: 0;
+
+ border: defaults.$border-1 solid var(--accent-color);
+ border-left: defaults.$border-4 solid var(--accent-color);
+ border-radius: defaults.$border-radius;
+
@each $name, $color in defaults.$hint-colors {
&.#{$name} {
- border-left-color: $color;
- background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
+ border-color: $color;
color: defaults.$body-font-color;
+
+ td.icon {
+ background-color: color.adjust($color, $alpha: -0.9);
+ border-start-start-radius: inherit;
+ border-start-end-radius: inherit;
+ position: relative;
+ z-index: -10;
+ outline: color.adjust($color, $alpha: -0.9);
+ }
}
}
- & {
- margin: defaults.$padding-16 0;
- padding: 0;
-
- border-left: defaults.$border-4 solid var(--accent-color);
- border-radius: defaults.$border-radius;
+ .table-wrap {
+ margin: 0;
}
table {
@@ -35,28 +48,34 @@
font-weight: bold;
&.icon {
- .title {
- display: flex;
- align-items: center;
- }
-
- i.fa::after {
- content: attr(title);
- font-style: normal;
- padding-left: defaults.$padding-24;
- }
-
- i.fa {
- color: defaults.$black;
- background-size: auto 90%;
- background-repeat: no-repeat;
- filter: invert(30%);
- margin-left: -5px;
- }
+ margin-left: -5px;
@each $name, $icon in defaults.$hint-icons {
i.fa.icon-#{$name} {
- background-image: url(img/geekdoc-stack.svg##{$icon});
+ width: defaults.$font-size-24;
+ height: defaults.$font-size-24;
+ position: relative;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: defaults.$font-size-24;
+ height: defaults.$font-size-24;
+ mask-image: url(img/geekdoc-stack.svg##{$icon});
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ background-color: var(--body-font-color);
+ }
+
+ &::after {
+ color: var(--body-font-color);
+ content: attr(title);
+ font-style: normal;
+ padding-left: defaults.$padding-32;
+ }
}
}
}
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index 1b6fb89..749ab4b 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -354,8 +354,8 @@ svg.gdoc-icon {
background: var(--body-background);
border-radius: defaults.$border-radius;
box-shadow:
- 0 1px 3px 0 var(--accent-color-dark),
- 0 1px 2px 0 var(--accent-color);
+ 0 1px 3px 0 var(--accent-color),
+ 0 1px 2px 0 var(--accent-color-lite);
position: absolute;
margin: 0;
padding: defaults.$padding-8 defaults.$padding-4 !important;
@@ -578,6 +578,10 @@ svg.gdoc-icon {
text-decoration: underline;
color: var(--footer-link-color);
+ &:hover {
+ text-decoration: none;
+ }
+
&:visited {
color: var(--footer-link-color-visited);
}
diff --git a/src/sass/_chroma_base.scss b/src/sass/_chroma_base.scss
index 2b6d0f4..e073314 100644
--- a/src/sass/_chroma_base.scss
+++ b/src/sass/_chroma_base.scss
@@ -20,7 +20,6 @@
/* LineTable */
.chroma .lntable {
- border: defaults.$border-1 solid var(--code-accent-color);
border-radius: defaults.$border-radius;
border-spacing: 0;
padding: 0;
@@ -39,7 +38,7 @@
.chroma .lntable td:first-child {
code {
background-color: var(--code-accent-color-lite);
- border-right: defaults.$border-1 solid var(--code-accent-color);
+ font-size: defaults.$font-size-12;
padding-left: 0;
padding-right: 0;
border-radius: 0;
diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss
index 49bf421..46f8387 100644
--- a/src/sass/_color_mode.scss
+++ b/src/sass/_color_mode.scss
@@ -19,10 +19,6 @@
--link-color: #{defaults.$link-color};
--link-color-visited: #{defaults.$link-color-visited};
- --hint-link-color: #{defaults.$link-color};
- --hint-link-color-visited: #{defaults.$link-color-visited};
-
- --accent-color-dark: #{defaults.$gray-400};
--accent-color: #{defaults.$gray-200};
--accent-color-lite: #{defaults.$gray-100};
@@ -40,16 +36,10 @@
}
.gdoc-markdown {
- .gdoc-hint,
.gdoc-props__tag,
.admonitionblock {
filter: none;
}
-
- .gdoc-hint__title,
- .admonitionblock table td:first-child {
- background-color: color.scale(defaults.$gray-600, $alpha: -95%);
- }
}
}
@@ -68,10 +58,6 @@
--link-color: #{defaults.$link-color-dark};
--link-color-visited: #{defaults.$link-color-visited-dark};
- --hint-link-color: #{defaults.$link-color};
- --hint-link-color-visited: #{defaults.$link-color-visited};
-
- --accent-color-dark: #{color.scale(defaults.$body-background-dark, $lightness: -60%)};
--accent-color: #{color.scale(defaults.$body-background-dark, $lightness: -30%)};
--accent-color-lite: #{color.scale(defaults.$body-background-dark, $lightness: -15%)};
@@ -89,7 +75,6 @@
}
.gdoc-markdown {
- .gdoc-hint,
.gdoc-props__tag,
.admonitionblock {
filter: saturate(2.5) brightness(0.85);
@@ -98,22 +83,6 @@
.gdoc-progress__bar {
filter: saturate(0.85) brightness(0.85);
}
-
- .gdoc-hint,
- .admonitionblock {
- a {
- color: var(--hint-link-color);
-
- &:visited {
- color: var(--hint-link-color-visited);
- }
- }
- }
-
- .gdoc-hint__title,
- .admonitionblock table td:first-child {
- background-color: color.scale(defaults.$gray-600, $alpha: -85%);
- }
}
}
@@ -124,7 +93,7 @@
--code-background: #{defaults.$code-background-dark};
--code-accent-color: #{color.scale(defaults.$code-background-dark, $lightness: -30%)};
--code-accent-color-lite: #{color.scale(defaults.$code-background-dark, $lightness: -15%)};
- --code-font-color: #{defaults.$code-font-color-dark};
+ --code-font-color: #{defaults.$gray-300};
--code-copy-background: #{defaults.$code-background-dark};
--code-copy-font-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -15%)};
@@ -140,11 +109,11 @@
--code-background: #{defaults.$code-background};
--code-accent-color: #{color.scale(defaults.$code-background, $lightness: -45%)};
--code-accent-color-lite: #{color.scale(defaults.$code-background, $lightness: -15%)};
- --code-font-color: #{defaults.$code-font-color};
+ --code-font-color: #{defaults.$gray-700};
--code-copy-background: #{defaults.$code-background};
- --code-copy-font-color: #{color.scale(defaults.$code-font-color, $lightness: 20%)};
- --code-copy-border-color: #{color.scale(defaults.$code-font-color, $lightness: 40%)};
+ --code-copy-font-color: #{defaults.$gray-500};
+ --code-copy-border-color: #{defaults.$gray-400};
--code-copy-success-color: #{map.get(defaults.$hint-colors, "ok")};
}
}
diff --git a/src/sass/_defaults.scss b/src/sass/_defaults.scss
index a1cf9f5..b34ee57 100644
--- a/src/sass/_defaults.scss
+++ b/src/sass/_defaults.scss
@@ -28,19 +28,18 @@ $border-1: 1px !default;
$border-2: 1.5px !default;
$border-4: 3px !default;
-$border-radius: 0.15rem !default;
+$border-radius: 0.3rem !default;
// Grayscale
$white: rgba(255, 255, 255, 1) !default;
-$gray-100: rgba(248, 249, 250, 1) !default;
-$gray-200: rgba(233, 236, 239, 1) !default;
-$gray-300: rgba(222, 226, 230, 1) !default;
-$gray-400: rgba(206, 212, 218, 1) !default;
-$gray-500: rgba(173, 181, 189, 1) !default;
-$gray-600: rgba(134, 142, 150, 1) !default;
-$gray-700: rgba(73, 80, 87, 1) !default;
-$gray-800: rgba(52, 58, 64, 1) !default;
-$gray-900: rgba(33, 37, 41, 1) !default;
+$gray-100: rgba(244, 246, 247, 1) !default;
+$gray-200: rgba(217, 219, 221, 1) !default;
+$gray-300: rgba(189, 192, 195, 1) !default;
+$gray-400: rgba(162, 165, 169, 1) !default;
+$gray-500: rgba(134, 137, 142, 1) !default;
+$gray-600: rgba(107, 110, 116, 1) !default;
+$gray-700: rgba(79, 83, 90, 1) !default;
+$gray-800: rgba(52, 56, 64, 1) !default;
$black: rgba(0, 0, 0, 1) !default;
$link-color: rgba(10, 83, 154, 1) !default;
diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss
index 7333acd..912558b 100644
--- a/src/sass/_markdown.scss
+++ b/src/sass/_markdown.scss
@@ -38,7 +38,7 @@
line-height: normal;
&:hover {
- text-decoration: underline;
+ text-decoration: none;
}
}
@@ -56,7 +56,7 @@
}
&__link--code {
- text-decoration: none;
+ text-decoration: underline;
code {
color: inherit !important;
}
@@ -64,7 +64,7 @@
&:hover {
background: none;
color: var(--link-color) !important;
- text-decoration: underline;
+ text-decoration: none;
}
&:visited,
@@ -120,6 +120,7 @@
padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8
(defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
+ border: defaults.$border-1 solid var(--accent-color);
border-left: defaults.$border-4 solid var(--accent-color);
border-radius: defaults.$border-radius;
}
@@ -174,7 +175,7 @@
}
code {
- padding: defaults.$padding-4 defaults.$padding-8;
+ padding: defaults.$padding-2 defaults.$padding-4;
}
pre,
@@ -183,7 +184,7 @@
border-radius: defaults.$border-radius;
color: var(--code-font-color);
font-size: defaults.$font-size-14;
- line-height: defaults.$padding-16;
+ line-height: defaults.$padding-20;
}
pre code {
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index fe20199..08e8a3c 100644
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@@ -140,51 +140,44 @@
// {{< hint >}}
.gdoc-hint {
+ $root: &;
@each $name, $color in defaults.$hint-colors {
&.#{$name} {
- border-left-color: $color;
- background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
- color: defaults.$body-font-color;
+ border-color: $color;
padding: 0;
- code,
- pre {
- background-color: color.scale($color, $lightness: 80%, $saturation: -75%);
- color: defaults.$code-font-color;
+ #{$root}__title {
+ background-color: color.adjust($color, $alpha: -0.9);
+ border-start-start-radius: inherit;
+ border-start-end-radius: inherit;
+ position: relative;
+ z-index: -10;
+ outline: color.adjust($color, $alpha: -0.9);
}
}
}
&__title {
padding: defaults.$padding-4 defaults.$padding-16;
- background-color: color.scale(defaults.$gray-600, $alpha: -95%);
font-weight: bold;
- color: color.scale(defaults.$body-font-color, $alpha: -15%);
-
- i.fa::after {
- content: attr(title);
- font-style: normal;
- padding-left: defaults.$padding-24;
- }
-
- i.fa {
- color: defaults.$black;
- background-size: auto 90%;
- background-repeat: no-repeat;
- filter: invert(30%);
- margin-left: -5px;
- }
+ color: var(--body-font-color);
+ margin-left: -5px;
@each $name, $icon in defaults.$hint-icons {
i.fa.#{$name} {
- background-image: url(img/geekdoc-stack.svg##{$icon});
+ width: defaults.$font-size-24;
+ height: defaults.$font-size-24;
+
+ mask-image: url(img/geekdoc-stack.svg##{$icon});
+ mask-repeat: no-repeat;
+ mask-size: contain;
+ background-color: var(--body-font-color);
}
}
.gdoc-icon {
width: defaults.$font-size-24;
height: defaults.$font-size-24;
- margin-left: -5px;
}
}
diff --git a/src/sass/_utils.scss b/src/sass/_utils.scss
index 733a3d5..4c3f388 100644
--- a/src/sass/_utils.scss
+++ b/src/sass/_utils.scss
@@ -31,7 +31,12 @@
background: var(--accent-color-lite);
}
-.flex-gap {
+.gap-8 {
+ flex-wrap: wrap;
+ gap: defaults.$padding-8;
+}
+
+.gap-16 {
flex-wrap: wrap;
gap: defaults.$padding-16;
}