github
/
hugo-geekblog
mirror of https://github.com/thegeeklab/hugo-geekblog
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/260/head v0.19.1
Robert Kaussow 2 months ago 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
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      exampleSite/static/custom.css.example
  2. 2
      layouts/_default/_markup/render-heading.html
  3. 19
      src/sass/_base.scss
  4. 60
      src/sass/_chroma_base.scss
  5. 17
      src/sass/_color_mode.scss
  6. 8
      src/sass/_markdown.scss
  7. 2
      webpack.config.js

20
exampleSite/static/custom.css.example
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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]
}
}

Write Preview
Loading…
Cancel
Save