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

improve anchor link alignment and spacing

This commit is contained in:
Robert Kaussow 2020-03-17 23:22:51 +01:00
parent d94c32f892
commit 06c9a95b75
5 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -1,5 +1,3 @@
* FEATURE
* add iconfont based on svg icons
* BUGFIX
* use iconfont in next/prev links to fix unicode errors on mobile devices
* use fake underline for next/pref links on hover
* ENHANCEMENT
* improve anchor link alignment and spacing
* show anchor link only on `:hover`

2
exampleSite/config.yaml
View File

@ -28,3 +28,5 @@ params:
geekdocLegalNotice: https://geeklabor.de/legal-notice/#impressum
geekdocPrivacyPolicy: https://geeklabor.de/legal-notice/#datenschutzerkl%C3%A4rung
geekdocAnchorLeft: true

8
exampleSite/content/shortcodes/toc.md
View File

@ -22,6 +22,14 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
##### Level 2.1.1.1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
###### Level 2.1.1.1.1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
### Level 2.2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

4
layouts/partials/content.html
View File

@ -3,9 +3,9 @@
{{ $.Scratch.Set "content" (.Content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML) }}
{{ if and $showAnchor $anchorLeft }}
{{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--left clip" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s%s` `${1}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${2}` `${3}` `${4}`) | safeHTML) }}
{{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `<div class="gdoc-page__anchorwrap">%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--left clip" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s%s</div>` `${1}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${2}` `${3}` `${4}`) | safeHTML) }}
{{ else if and $showAnchor (not $anchorLeft) }}
{{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `%s%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--right clip" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s` `${1}` `${3}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${2}` `${4}`) | safeHTML) }}
{{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `<div class="gdoc-page__anchorwrap">%s%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--right clip" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s</div>` `${1}` `${3}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${2}` `${4}`) | safeHTML) }}
{{ end }}
{{ $.Scratch.Get "content" }}

35
src/sass/_base.scss
View File

@ -234,18 +234,29 @@ img {
}
}
&__anchorwrap {
&:hover .gdoc-page__anchor .icon {
color: $gray-500;
}
}
&__anchor {
min-width: 30px;
&--left {
min-width: 35px;
position: absolute;
margin-left: -25px;
text-align: left;
}
&--right {
margin-left: 0.5em;
text-align: right;
}
.icon {
color: $gray-400;
width: 1.4rem;
height: 1.4rem;
color: transparent;
}
}
}
@ -452,6 +463,10 @@ img {
}
.gdoc-header {
.container {
padding: $padding-16 $padding-16 * 2;
}
.icon {
width: $font-size-16 * 1.5;
height: $font-size-16 * 1.5;
@ -492,8 +507,18 @@ img {
display: none;
}
.gdoc-footer__item {
width: 100%;
.gdoc-page {
padding: $padding-16 * 1.5 $padding-16 * 2;
}
.gdoc-footer {
.container {
padding: $padding-16 $padding-16 * 2;
}
&__item {
width: 100%;
}
}
#menu-control:checked ~ main {