diff --git a/exampleSite/static/custom.css.example b/exampleSite/static/custom.css.example
index 2c6c213..7f989d0 100644
--- a/exampleSite/static/custom.css.example
+++ b/exampleSite/static/custom.css.example
@@ -24,7 +24,9 @@
--code-background: #f5f6f8;
--code-accent-color: #e3e7eb;
--code-accent-color-lite: #eff1f3;
+ --code-font-color: #5f5f5f;
+ --code-copy-background: #f5f6f8;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853;
@@ -58,7 +60,9 @@
--code-background: #f5f6f8;
--code-accent-color: #e3e7eb;
--code-accent-color-lite: #eff1f3;
+ --code-font-color: #5f5f5f;
+ --code-copy-background: #f5f6f8;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853;
@@ -94,10 +98,12 @@
--code-background: #2f353a;
--code-accent-color: #262b2f;
--code-accent-color-lite: #2b3035;
+ --code-font-color: #b9b9b9;
- --code-copy-font-color: #adb4bc;
- --code-copy-border-color: #808c98;
- --code-copy-success-color: #00c853;
+ --code-copy-background: #343a40;
+ --code-copy-font-color: #6b7784;
+ --code-copy-border-color: #6b7784;
+ --code-copy-success-color: #37905c;
--accent-color: #2b3035;
--accent-color-lite: #2f353a;
@@ -128,10 +134,12 @@
--code-background: #2f353a;
--code-accent-color: #262b2f;
--code-accent-color-lite: #2b3035;
+ --code-font-color: #b9b9b9;
- --code-copy-font-color: #adb4bc;
- --code-copy-border-color: #808c98;
- --code-copy-success-color: #00c853;
+ --code-copy-background: #343a40;
+ --code-copy-font-color: #6b7784;
+ --code-copy-border-color: #6b7784;
+ --code-copy-success-color: #37905c;
--accent-color: #2b3035;
--accent-color-lite: #2f353a;
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index 35364ab..3541446 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -6,7 +6,7 @@
{{ .Text | safeHTML }}
-
+
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index 5aa423c..23c93e4 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -412,23 +412,19 @@ svg.gdoc-icon {
}
&__anchor {
- min-width: 30px;
-
- &--left {
- position: absolute;
- margin-left: -25px;
- text-align: left;
- }
-
- &--right {
- text-align: right;
- }
+ margin-left: $padding-8;
svg.gdoc-icon {
- width: 1.4rem;
- height: 1.4rem;
+ width: 1.4em;
+ height: 1.4em;
color: transparent;
}
+
+ &:focus {
+ svg.gdoc-icon {
+ color: var(--control-icons);
+ }
+ }
}
&__footer {
@@ -523,11 +519,11 @@ svg.gdoc-icon {
visibility: hidden;
position: absolute;
top: 0.5rem;
- right: 0.5rem;
+ right: 1rem;
border: $border-2 solid var(--code-copy-border-color);
border-radius: $border-radius;
- background: var(--code-background);
+ background: var(--code-copy-background);
width: 2.2rem;
height: 2.2rem;
diff --git a/src/sass/_chroma_base.scss b/src/sass/_chroma_base.scss
index 2e36447..bc3ee8c 100644
--- a/src/sass/_chroma_base.scss
+++ b/src/sass/_chroma_base.scss
@@ -2,31 +2,6 @@
.chroma {
color: var(--code-font-color);
}
- .chroma code {
- background-color: var(--code-background);
- display: block;
- line-height: 1.45em;
- font-size: 0.85em;
- border-radius: $border-radius;
- }
- .chroma .lntable {
- max-height: var(--code-max-height);
-
- code {
- max-height: none;
- }
- }
- .chroma .lntable td:first-child code {
- border-radius: 0;
- border-top-left-radius: $border-radius;
- border-bottom-left-radius: $border-radius;
- }
- .chroma .lntable td:nth-child(2) code {
- border-radius: 0;
- border-top-right-radius: $border-radius;
- border-bottom-right-radius: $border-radius;
- padding-left: 0.5em;
- }
.chroma .lntable td:nth-child(2) code .hl {
width: auto;
margin-left: -0.5em;
@@ -34,36 +9,39 @@
}
.highlight {
- overflow: auto;
- max-height: var(--code-max-height);
-
pre.chroma {
margin: 0;
- }
-
- > pre.chroma code {
- padding: 1rem;
width: 100%;
- overflow-x: auto;
+ overflow: auto;
+ max-height: var(--code-max-height);
}
}
/* LineTable */
.chroma .lntable {
+ border: $border-1 solid var(--code-accent-color);
+ border-radius: $border-radius;
border-spacing: 0;
padding: 0;
margin: 0;
- border: 0;
width: 100%;
display: block;
+ max-height: var(--code-max-height);
+ overflow: auto;
+
+ pre.chroma {
+ max-height: none;
+ border-radius: 0;
+ }
}
- .chroma .lntable td:first-child code {
- background-color: var(--code-accent-color-lite);
- border-right: $border-1 solid var(--code-accent-color);
- padding: 0.5em 0;
- }
- .chroma .lntable td code {
- padding: 0.5em 0;
+ .chroma .lntable td:first-child {
+ code {
+ background-color: var(--code-accent-color-lite);
+ border-right: $border-1 solid var(--code-accent-color);
+ padding-left: 0;
+ padding-right: 0;
+ border-radius: 0;
+ }
}
.chroma .lntable td:nth-child(2) {
width: 100%;
diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss
index 164d1c1..f4d36a3 100644
--- a/src/sass/_color_mode.scss
+++ b/src/sass/_color_mode.scss
@@ -13,10 +13,6 @@
--link-color: #{$link-color};
--link-color-visited: #{$link-color-visited};
- --code-copy-font-color: #{lighten($body-font-color, 24)};
- --code-copy-border-color: #{lighten($body-font-color, 48)};
- --code-copy-success-color: #{map.get($hint-colors, "ok")};
-
--accent-color: #{$gray-200};
--accent-color-lite: #{$gray-100};
@@ -36,8 +32,7 @@
.gdoc-markdown {
.gdoc-hint,
.gdoc-props__tag,
- .admonitionblock,
- .gdoc-post__codecopy--success {
+ .admonitionblock {
filter: none;
}
@@ -63,11 +58,6 @@
--link-color: #{$link-color-dark};
--link-color-visited: #{$link-color-visited-dark};
- --code-background: #{$code-background-dark};
- --code-accent-color: #{darken($code-background-dark, 4)};
- --code-accent-color-lite: #{darken($code-background-dark, 2)};
- --code-font-color: #{$code-font-color-dark};
-
--accent-color: #{darken($body-background-dark, 4)};
--accent-color-lite: #{darken($body-background-dark, 2)};
@@ -87,8 +77,7 @@
.gdoc-markdown {
.gdoc-hint,
.gdoc-props__tag,
- .admonitionblock,
- .gdoc-post__codecopy--success {
+ .admonitionblock {
filter: saturate(2.5) brightness(0.85);
}
@@ -106,6 +95,11 @@
--code-accent-color: #{darken($code-background-dark, 4)};
--code-accent-color-lite: #{darken($code-background-dark, 2)};
--code-font-color: #{$code-font-color-dark};
+
+ --code-copy-background: #{$body-background-dark};
+ --code-copy-font-color: #{lighten($body-font-color, 24)};
+ --code-copy-border-color: #{lighten($body-font-color, 24)};
+ --code-copy-success-color: #{scale-color(map.get($hint-colors, "ok"), $alpha: -55%)};
}
@mixin code_theme_light {
@@ -115,4 +109,9 @@
--code-accent-color: #{darken($code-background, 6)};
--code-accent-color-lite: #{darken($code-background, 2)};
--code-font-color: #{$code-font-color};
+
+ --code-copy-background: #{$code-background};
+ --code-copy-font-color: #{lighten($body-font-color, 24)};
+ --code-copy-border-color: #{lighten($body-font-color, 48)};
+ --code-copy-success-color: #{map.get($hint-colors, "ok")};
}
diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss
index 6ac88d6..f54230b 100644
--- a/src/sass/_markdown.scss
+++ b/src/sass/_markdown.scss
@@ -184,13 +184,17 @@
margin: 1rem 0;
}
+ code {
+ padding: 0.2em 0.4em;
+ }
+
+ pre,
code {
background-color: var(--code-background);
border-radius: $border-radius;
color: var(--code-font-color);
- font-size: 0.85em;
+ font-size: 0.85rem;
line-height: 1.45em;
- padding: 0.2em 0.4em;
}
pre code {
diff --git a/webpack.config.js b/webpack.config.js
index 8defb8a..f0064be 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -138,7 +138,7 @@ module.exports = (env, argv) => {
// FIXME: https://github.com/webpack-contrib/sass-loader/issues/962#issuecomment-1002675051
sourceMap: argv.mode === "development" ? true : false,
sourceMapEmbed: argv.mode === "development" ? true : false,
- outputStyle: "compressed",
+ outputStyle: argv.mode === "development" ? "expanded" : "compressed",
includePaths: [nodeModulesPath]
}
}