diff options
| -rw-r--r-- | assets/css/scopes/_headlines.scss | 38 | ||||
| -rw-r--r-- | content/symbols.svg | 8 | ||||
| -rw-r--r-- | filters/common_actions.lua | 23 |
3 files changed, 59 insertions, 10 deletions
diff --git a/assets/css/scopes/_headlines.scss b/assets/css/scopes/_headlines.scss index f09481e..3802f5a 100644 --- a/assets/css/scopes/_headlines.scss +++ b/assets/css/scopes/_headlines.scss | |||
| @@ -1,6 +1,10 @@ | |||
| 1 | @include namespace('headlines') { | 1 | @include namespace('headlines') { |
| 2 | @include store(( | 2 | @include store(( |
| 3 | --colors: ( | 3 | --colors: ( |
| 4 | --link: ( | ||
| 5 | --idle-fg: prop(--colors --obj, $global: true), | ||
| 6 | --hover-fg: prop(--colors --fg-lo, $global: true), | ||
| 7 | ), | ||
| 4 | --emph: ( | 8 | --emph: ( |
| 5 | --bg: prop(--colors --bg-hi, $global: true), | 9 | --bg: prop(--colors --bg-hi, $global: true), |
| 6 | --body-bg: prop(--colors --bg-hi, $global: true), | 10 | --body-bg: prop(--colors --bg-hi, $global: true), |
| @@ -74,5 +78,39 @@ | |||
| 74 | ); | 78 | ); |
| 75 | } | 79 | } |
| 76 | } | 80 | } |
| 81 | |||
| 82 | @include element('link') { | ||
| 83 | display: none; | ||
| 84 | margin: -.5rem 0; | ||
| 85 | padding: .5rem; | ||
| 86 | vertical-align: -.1em; | ||
| 87 | |||
| 88 | svg { | ||
| 89 | width: 1 / 16 * 14em; | ||
| 90 | height: 1 / 16 * 14em; | ||
| 91 | } | ||
| 92 | |||
| 93 | &:link, | ||
| 94 | &:visited { | ||
| 95 | color: prop(--colors --link --idle-fg); | ||
| 96 | |||
| 97 | &:hover { | ||
| 98 | color: prop(--colors --link --hover-fg); | ||
| 99 | } | ||
| 100 | } | ||
| 101 | } | ||
| 102 | |||
| 103 | h1, | ||
| 104 | h2, | ||
| 105 | h3, | ||
| 106 | h4, | ||
| 107 | h5, | ||
| 108 | h6 { | ||
| 109 | &:hover { | ||
| 110 | @include element('link') { | ||
| 111 | display: inline-block; | ||
| 112 | } | ||
| 113 | } | ||
| 114 | } | ||
| 77 | } | 115 | } |
| 78 | } | 116 | } |
diff --git a/content/symbols.svg b/content/symbols.svg index 00ea701..6964327 100644 --- a/content/symbols.svg +++ b/content/symbols.svg | |||
| @@ -69,5 +69,13 @@ | |||
| 69 | <path d="m5.75 5.75v1.5" fill="none" stroke="currentColor" /> | 69 | <path d="m5.75 5.75v1.5" fill="none" stroke="currentColor" /> |
| 70 | </symbol> | 70 | </symbol> |
| 71 | 71 | ||
| 72 | <symbol id="icon-link" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid"> | ||
| 73 | <path | ||
| 74 | d="m8.25 3.15 0.4519-0.4481c1.2692-1.2692 3.327-1.2692 4.5962 0s1.2692 3.327 0 4.5962l-2 2c-1.2692 1.2692-3.327 1.2692-4.5962 0" | ||
| 75 | fill="none" stroke="currentColor" /> | ||
| 76 | <path | ||
| 77 | d="m7.75 12.85-0.45662 0.45281c-1.2692 1.2692-3.327 1.2692-4.5962 0s-1.2692-3.327 0-4.5962l2-2c1.2692-1.2692 3.327-1.2692 4.5962 0" | ||
| 78 | fill="none" stroke="currentColor" /> | ||
| 79 | </symbol> | ||
| 72 | </defs> | 80 | </defs> |
| 73 | </svg> | 81 | </svg> |
diff --git a/filters/common_actions.lua b/filters/common_actions.lua index 5b6c86b..8383ada 100644 --- a/filters/common_actions.lua +++ b/filters/common_actions.lua | |||
| @@ -1,15 +1,12 @@ | |||
| 1 | function CodeBlock(el) | 1 | function CodeBlock(el) |
| 2 | if el.classes[1] == "plain" then | 2 | if el.classes[1] == "plain" then |
| 3 | el = pandoc.Div({el}, {class = 's-code'}) | 3 | el = pandoc.Div({ el }, { class = 's-code' }) |
| 4 | elseif el.classes[1] then | 4 | elseif el.classes[1] then |
| 5 | local formatted = pandoc.pipe('pygmentize', { | 5 | local formatted = pandoc.pipe('pygmentize', { |
| 6 | '-l', el.classes[1], '-f', 'html', '-O', | 6 | '-l', el.classes[1], '-f', 'html', '-O', 'cssclass=s-code s-code--highlight', |
| 7 | 'cssclass=s-code s-code--highlight' | ||
| 8 | }, el.text) | 7 | }, el.text) |
| 9 | 8 | ||
| 10 | if formatted then | 9 | if formatted then el = pandoc.RawBlock('html', formatted) end |
| 11 | el = pandoc.RawBlock('html', formatted) | ||
| 12 | end | ||
| 13 | end | 10 | end |
| 14 | 11 | ||
| 15 | return el | 12 | return el |
| @@ -18,11 +15,17 @@ end | |||
| 18 | function Header(el) | 15 | function Header(el) |
| 19 | if el.level == 1 then | 16 | if el.level == 1 then |
| 20 | local newchildren = pandoc.List() | 17 | local newchildren = pandoc.List() |
| 21 | 18 | newchildren:insert(pandoc.Span(el.content, { class = 's-headlines__title-inner' })) | |
| 22 | newchildren:insert(pandoc.Span(el.content, {class = 's-headlines__title-inner'})) | ||
| 23 | |||
| 24 | el.content = newchildren | 19 | el.content = newchildren |
| 25 | end | 20 | end |
| 21 | |||
| 22 | if el.level <= 3 and el.identifier ~= '' then | ||
| 23 | el.content:insert(pandoc.Space()) | ||
| 24 | el.content:insert(pandoc.Link(pandoc.RawInline('html', | ||
| 25 | '<svg class="o-icon"><use href="/symbols.svg#icon-link"></use></svg>'), | ||
| 26 | '#' .. el.identifier, nil, { class = 's-headlines__link' })) | ||
| 27 | end | ||
| 28 | |||
| 26 | return el | 29 | return el |
| 27 | end | 30 | end |
| 28 | 31 | ||
| @@ -36,7 +39,7 @@ function Div(el) | |||
| 36 | 39 | ||
| 37 | for _, children in ipairs(el.content[1].content) do | 40 | for _, children in ipairs(el.content[1].content) do |
| 38 | newchildren:insert(pandoc.RawBlock('html', | 41 | newchildren:insert(pandoc.RawBlock('html', |
| 39 | '<li class="c-page__prefixed c-page__prefixed--ref">')) | 42 | '<li class="c-page__prefixed c-page__prefixed--ref">')) |
| 40 | newchildren:extend(children) | 43 | newchildren:extend(children) |
| 41 | newchildren:insert(pandoc.RawBlock('html', '</li>')) | 44 | newchildren:insert(pandoc.RawBlock('html', '</li>')) |
| 42 | end | 45 | end |
