mirror of
https://github.com/thegeeklab/hugo-geekdoc.git
synced 2024-11-24 13:50:40 +00:00
fix: improve keyboard accessability for anchors and code blocks (#434)
This commit is contained in:
parent
ed5c770d57
commit
7195431d8c
@ -24,7 +24,9 @@
|
|||||||
--code-background: #f5f6f8;
|
--code-background: #f5f6f8;
|
||||||
--code-accent-color: #e3e7eb;
|
--code-accent-color: #e3e7eb;
|
||||||
--code-accent-color-lite: #eff1f3;
|
--code-accent-color-lite: #eff1f3;
|
||||||
|
--code-font-color: #5f5f5f;
|
||||||
|
|
||||||
|
--code-copy-background: #f5f6f8;
|
||||||
--code-copy-font-color: #6b7784;
|
--code-copy-font-color: #6b7784;
|
||||||
--code-copy-border-color: #adb4bc;
|
--code-copy-border-color: #adb4bc;
|
||||||
--code-copy-success-color: #00c853;
|
--code-copy-success-color: #00c853;
|
||||||
@ -58,7 +60,9 @@
|
|||||||
--code-background: #f5f6f8;
|
--code-background: #f5f6f8;
|
||||||
--code-accent-color: #e3e7eb;
|
--code-accent-color: #e3e7eb;
|
||||||
--code-accent-color-lite: #eff1f3;
|
--code-accent-color-lite: #eff1f3;
|
||||||
|
--code-font-color: #5f5f5f;
|
||||||
|
|
||||||
|
--code-copy-background: #f5f6f8;
|
||||||
--code-copy-font-color: #6b7784;
|
--code-copy-font-color: #6b7784;
|
||||||
--code-copy-border-color: #adb4bc;
|
--code-copy-border-color: #adb4bc;
|
||||||
--code-copy-success-color: #00c853;
|
--code-copy-success-color: #00c853;
|
||||||
@ -94,10 +98,12 @@
|
|||||||
--code-background: #2f353a;
|
--code-background: #2f353a;
|
||||||
--code-accent-color: #262b2f;
|
--code-accent-color: #262b2f;
|
||||||
--code-accent-color-lite: #2b3035;
|
--code-accent-color-lite: #2b3035;
|
||||||
|
--code-font-color: #b9b9b9;
|
||||||
|
|
||||||
--code-copy-font-color: #adb4bc;
|
--code-copy-background: #343a40;
|
||||||
--code-copy-border-color: #808c98;
|
--code-copy-font-color: #6b7784;
|
||||||
--code-copy-success-color: #00c853;
|
--code-copy-border-color: #6b7784;
|
||||||
|
--code-copy-success-color: #37905c;
|
||||||
|
|
||||||
--accent-color: #2b3035;
|
--accent-color: #2b3035;
|
||||||
--accent-color-lite: #2f353a;
|
--accent-color-lite: #2f353a;
|
||||||
@ -128,10 +134,12 @@
|
|||||||
--code-background: #2f353a;
|
--code-background: #2f353a;
|
||||||
--code-accent-color: #262b2f;
|
--code-accent-color: #262b2f;
|
||||||
--code-accent-color-lite: #2b3035;
|
--code-accent-color-lite: #2b3035;
|
||||||
|
--code-font-color: #b9b9b9;
|
||||||
|
|
||||||
--code-copy-font-color: #adb4bc;
|
--code-copy-background: #343a40;
|
||||||
--code-copy-border-color: #808c98;
|
--code-copy-font-color: #6b7784;
|
||||||
--code-copy-success-color: #00c853;
|
--code-copy-border-color: #6b7784;
|
||||||
|
--code-copy-success-color: #37905c;
|
||||||
|
|
||||||
--accent-color: #2b3035;
|
--accent-color: #2b3035;
|
||||||
--accent-color-lite: #2f353a;
|
--accent-color-lite: #2f353a;
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<div class="gdoc-page__anchorwrap">
|
<div class="gdoc-page__anchorwrap">
|
||||||
<h{{ .Level }} id="{{ .Anchor | safeURL }}">
|
<h{{ .Level }} id="{{ .Anchor | safeURL }}">
|
||||||
{{ .Text | safeHTML }}
|
{{ .Text | safeHTML }}
|
||||||
<a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gdoc-page__anchor gdoc-page__anchor--right clip" title="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
|
<a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gdoc-page__anchor clip flex align-center" title="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" aria-label="{{ i18n "title_anchor_prefix" }} {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
|
||||||
<svg class="gdoc-icon gdoc_link"><use xlink:href="#gdoc_link"></use></svg>
|
<svg class="gdoc-icon gdoc_link"><use xlink:href="#gdoc_link"></use></svg>
|
||||||
</a>
|
</a>
|
||||||
</h{{ .Level }}>
|
</h{{ .Level }}>
|
||||||
|
@ -412,23 +412,19 @@ svg.gdoc-icon {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__anchor {
|
&__anchor {
|
||||||
min-width: 30px;
|
margin-left: $padding-8;
|
||||||
|
|
||||||
&--left {
|
|
||||||
position: absolute;
|
|
||||||
margin-left: -25px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg.gdoc-icon {
|
svg.gdoc-icon {
|
||||||
width: 1.4rem;
|
width: 1.4em;
|
||||||
height: 1.4rem;
|
height: 1.4em;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
svg.gdoc-icon {
|
||||||
|
color: var(--control-icons);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__footer {
|
&__footer {
|
||||||
@ -523,11 +519,11 @@ svg.gdoc-icon {
|
|||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.5rem;
|
top: 0.5rem;
|
||||||
right: 0.5rem;
|
right: 1rem;
|
||||||
|
|
||||||
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-background);
|
background: var(--code-copy-background);
|
||||||
width: 2.2rem;
|
width: 2.2rem;
|
||||||
height: 2.2rem;
|
height: 2.2rem;
|
||||||
|
|
||||||
|
@ -2,31 +2,6 @@
|
|||||||
.chroma {
|
.chroma {
|
||||||
color: var(--code-font-color);
|
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 {
|
.chroma .lntable td:nth-child(2) code .hl {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-left: -0.5em;
|
margin-left: -0.5em;
|
||||||
@ -34,36 +9,39 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.highlight {
|
.highlight {
|
||||||
overflow: auto;
|
|
||||||
max-height: var(--code-max-height);
|
|
||||||
|
|
||||||
pre.chroma {
|
pre.chroma {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
|
||||||
|
|
||||||
> pre.chroma code {
|
|
||||||
padding: 1rem;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: auto;
|
overflow: auto;
|
||||||
|
max-height: var(--code-max-height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LineTable */
|
/* LineTable */
|
||||||
.chroma .lntable {
|
.chroma .lntable {
|
||||||
|
border: $border-1 solid var(--code-accent-color);
|
||||||
|
border-radius: $border-radius;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
|
max-height: var(--code-max-height);
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
pre.chroma {
|
||||||
|
max-height: none;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
.chroma .lntable td:first-child code {
|
}
|
||||||
|
.chroma .lntable td:first-child {
|
||||||
|
code {
|
||||||
background-color: var(--code-accent-color-lite);
|
background-color: var(--code-accent-color-lite);
|
||||||
border-right: $border-1 solid var(--code-accent-color);
|
border-right: $border-1 solid var(--code-accent-color);
|
||||||
padding: 0.5em 0;
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
.chroma .lntable td code {
|
|
||||||
padding: 0.5em 0;
|
|
||||||
}
|
}
|
||||||
.chroma .lntable td:nth-child(2) {
|
.chroma .lntable td:nth-child(2) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -13,10 +13,6 @@
|
|||||||
--link-color: #{$link-color};
|
--link-color: #{$link-color};
|
||||||
--link-color-visited: #{$link-color-visited};
|
--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: #{$gray-200};
|
||||||
--accent-color-lite: #{$gray-100};
|
--accent-color-lite: #{$gray-100};
|
||||||
|
|
||||||
@ -36,8 +32,7 @@
|
|||||||
.gdoc-markdown {
|
.gdoc-markdown {
|
||||||
.gdoc-hint,
|
.gdoc-hint,
|
||||||
.gdoc-props__tag,
|
.gdoc-props__tag,
|
||||||
.admonitionblock,
|
.admonitionblock {
|
||||||
.gdoc-post__codecopy--success {
|
|
||||||
filter: none;
|
filter: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -63,11 +58,6 @@
|
|||||||
--link-color: #{$link-color-dark};
|
--link-color: #{$link-color-dark};
|
||||||
--link-color-visited: #{$link-color-visited-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: #{darken($body-background-dark, 4)};
|
||||||
--accent-color-lite: #{darken($body-background-dark, 2)};
|
--accent-color-lite: #{darken($body-background-dark, 2)};
|
||||||
|
|
||||||
@ -87,8 +77,7 @@
|
|||||||
.gdoc-markdown {
|
.gdoc-markdown {
|
||||||
.gdoc-hint,
|
.gdoc-hint,
|
||||||
.gdoc-props__tag,
|
.gdoc-props__tag,
|
||||||
.admonitionblock,
|
.admonitionblock {
|
||||||
.gdoc-post__codecopy--success {
|
|
||||||
filter: saturate(2.5) brightness(0.85);
|
filter: saturate(2.5) brightness(0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -106,6 +95,11 @@
|
|||||||
--code-accent-color: #{darken($code-background-dark, 4)};
|
--code-accent-color: #{darken($code-background-dark, 4)};
|
||||||
--code-accent-color-lite: #{darken($code-background-dark, 2)};
|
--code-accent-color-lite: #{darken($code-background-dark, 2)};
|
||||||
--code-font-color: #{$code-font-color-dark};
|
--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 {
|
@mixin code_theme_light {
|
||||||
@ -115,4 +109,9 @@
|
|||||||
--code-accent-color: #{darken($code-background, 6)};
|
--code-accent-color: #{darken($code-background, 6)};
|
||||||
--code-accent-color-lite: #{darken($code-background, 2)};
|
--code-accent-color-lite: #{darken($code-background, 2)};
|
||||||
--code-font-color: #{$code-font-color};
|
--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")};
|
||||||
}
|
}
|
||||||
|
@ -184,13 +184,17 @@
|
|||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
code {
|
code {
|
||||||
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.85em;
|
font-size: 0.85rem;
|
||||||
line-height: 1.45em;
|
line-height: 1.45em;
|
||||||
padding: 0.2em 0.4em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre code {
|
pre code {
|
||||||
|
@ -138,7 +138,7 @@ module.exports = (env, argv) => {
|
|||||||
// FIXME: https://github.com/webpack-contrib/sass-loader/issues/962#issuecomment-1002675051
|
// FIXME: https://github.com/webpack-contrib/sass-loader/issues/962#issuecomment-1002675051
|
||||||
sourceMap: argv.mode === "development" ? true : false,
|
sourceMap: argv.mode === "development" ? true : false,
|
||||||
sourceMapEmbed: argv.mode === "development" ? true : false,
|
sourceMapEmbed: argv.mode === "development" ? true : false,
|
||||||
outputStyle: "compressed",
|
outputStyle: argv.mode === "development" ? "expanded" : "compressed",
|
||||||
includePaths: [nodeModulesPath]
|
includePaths: [nodeModulesPath]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user