Skip to content

Commit

Permalink
improve anchor link alignment and spacing
Browse files Browse the repository at this point in the history
  • Loading branch information
xoxys committed Mar 17, 2020
1 parent d94c32f commit 06c9a95
Show file tree
Hide file tree
Showing 5 changed files with 45 additions and 12 deletions.
8 changes: 3 additions & 5 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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 changes: 2 additions & 0 deletions exampleSite/config.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,5 @@ params:

geekdocLegalNotice: https://geeklabor.de/legal-notice/#impressum
geekdocPrivacyPolicy: https://geeklabor.de/legal-notice/#datenschutzerkl%C3%A4rung

geekdocAnchorLeft: true
8 changes: 8 additions & 0 deletions exampleSite/content/shortcodes/toc.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions layouts/partials/content.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 30 additions & 5 deletions src/sass/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 06c9a95

Please sign in to comment.