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

fix: improve keyboard accessability for anchors and code blocks (#259)

Browse Source
This commit is contained in:
Robert Kaussow 2022-06-10 22:16:14 +02:00 committed by GitHub
parent 12abc0ad27
commit f9437ae997
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 57 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
exampleSite/static/custom.css.example
View File

@ -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;
@ -59,7 +61,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;
@ -96,10 +100,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-dark: #222629;
--accent-color: #2b3035;
@ -131,10 +137,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-dark: #222629;
--accent-color: #2b3035;

2
layouts/_default/_markup/render-heading.html
View File

@ -7,7 +7,7 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}">
{{ .Text | safeHTML }}
</h{{ .Level }}>
<a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gblog-post__anchor gblog-post__anchor--right clip" aria-label="Anchor {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
<a data-clipboard-text="{{ .Page.Permalink }}#{{ .Anchor | safeURL }}" class="gblog-post__anchor clip flex align-center" aria-label="Anchor {{ .Text | safeHTML }}" href="#{{ .Anchor | safeURL }}">
<svg class="gblog-icon gblog_link"><use xlink:href="#gblog_link"></use></svg>
</a>
</div>

19
src/sass/_base.scss
View File

@ -339,17 +339,7 @@ svg.gblog-icon {
}
&__anchor {
min-width: 30px;
&--left {
position: absolute;
margin-left: -25px;
text-align: left;
}
&--right {
text-align: right;
}
margin-left: $padding-8;
svg.gblog-icon {
font-size: $font-size-20;
@ -357,7 +347,8 @@ svg.gblog-icon {
}
&:hover,
&:visited:hover {
&:visited:hover,
&:focus svg.gblog-icon {
color: var(--control-icons);
background: none;
}
@ -463,11 +454,11 @@ svg.gblog-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;

60
src/sass/_chroma_base.scss
View File

@ -2,31 +2,6 @@
.chroma {
color: var(--code-font-color);
}
.chroma code {
background-color: var(--code-background);
display: block;
line-height: 1.45;
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%;

17
src/sass/_color_mode.scss
View File

@ -14,10 +14,6 @@
--link-color-visited: #{$link-color-visited};
--link-color-footer: #{$link-color-footer};
--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-dark: #{$gray-600};
--accent-color: #{$gray-200};
--accent-color-lite: #{$gray-100};
@ -82,8 +78,7 @@
.gblog-markdown {
.gblog-hint,
.admonitionblock,
.gblog-post__codecopy--success {
.admonitionblock {
filter: saturate(2.5) brightness(0.85);
}
@ -101,6 +96,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 {
@ -110,4 +110,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")};
}

8
src/sass/_markdown.scss
View File

@ -153,13 +153,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 {

2
webpack.config.js
View File

@ -137,7 +137,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]
}
}