Additional CSS

Meh.
This commit is contained in:
Tetrakern 2024-10-15 00:08:35 +02:00
parent b469be6b69
commit 6d928a8643
5 changed files with 32 additions and 8 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -507,21 +507,21 @@ function fictioneer_append_footnotes_to_content( $content ) {
// Generate the HTML for footnotes section
$html = sprintf(
'<h3>%s</h3>',
'<div class="footnotes"><h3>%s</h3>',
esc_html( __( 'Footnotes', 'fictioneer' ) )
);
$html .= '<ol class="footnotes list">';
$html .= '<ol class="footnotes__list list">';
foreach ( $fictioneer_footnotes as $id => $footnote ) {
$html .= sprintf(
'<li id="footnote-%1$d">%2$s <a href="#tooltip-%1$d">↑</a></li>',
'<li id="footnote-%1$d" class="footnotes__item">%2$s <a href="#tooltip-%1$d" class="footnotes__link-up"><i class="fa-solid fa-arrow-turn-up"></i></a></li>',
$id,
wp_kses_post( $footnote )
);
}
$html .= '</ol>';
$html .= '</ol></div>';
// Reset the footnotes array
$fictioneer_footnotes = [];

View File

@ -886,3 +886,23 @@ html:not(.logged-in) body:not(.logged-in) {
background: var(--input-background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%237b7d81' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3E%3C/svg%3E") no-repeat right 4px center/1em;
}
}
.footnotes {
line-height: 1.7;
margin-top: 4rem;
&__list:is(ol) {
margin: 0;
}
&__item::marker {
color: inherit !important;
}
&__link-up {
display: inline-block;
font-size: 80%;
padding: 2px 4px;
transform: translateY(-0.1em);
}
}

View File

@ -64,8 +64,9 @@ img {
p a:not(.wp-element-button, .modal-tooltip),
.content-section :is(.wp-block-table, .wp-block-pullquote, .wp-block-list) a:not(.wp-element-button, .modal-tooltip),
.link,
:is(.modal, .dialog-modal) a[href]:not(.button, .wp-element-button, .modal-tooltip) {
:is(.modal, .dialog-modal) a[href]:not(.button, .wp-element-button, .modal-tooltip),
.footnotes a[href*="http"],
.link {
color: var(--inline-link-color);
text-decoration: var(--inline-link-text-decoration);
text-underline-offset: 0.2em;
@ -512,6 +513,9 @@ a.modal-tooltip {
}
.footnote-link {
scroll-margin-top: 64px;
text-decoration: none !important;
&:hover {
text-decoration: none !important;
}