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 |