✨feat(quick-navigation): add ToC button (#115)
This commit is contained in:
Óscar
GitHub
parent
f8f2967527
commit
ac41bb18f8
@ -13,6 +13,7 @@
|
|||||||
@use 'parts/_multilingual_quote.scss';
|
@use 'parts/_multilingual_quote.scss';
|
||||||
@use 'parts/_pagination.scss';
|
@use 'parts/_pagination.scss';
|
||||||
@use 'parts/_posts_list.scss';
|
@use 'parts/_posts_list.scss';
|
||||||
|
@use 'parts/_quick_navigation_buttons.scss';
|
||||||
@use 'parts/_spoiler.scss';
|
@use 'parts/_spoiler.scss';
|
||||||
@use 'parts/_table.scss';
|
@use 'parts/_table.scss';
|
||||||
@use 'parts/_tags.scss';
|
@use 'parts/_tags.scss';
|
||||||
|
|||||||
@ -82,11 +82,6 @@ header {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-meta {
|
|
||||||
color: var(--meta-color);
|
|
||||||
font-size: 0.92rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-switcher {
|
.language-switcher {
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
@ -108,7 +103,7 @@ header {
|
|||||||
.dropdown {
|
.dropdown {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 99;
|
z-index: 1;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -117,7 +112,7 @@ header {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
padding-left: 0.5rem;
|
padding-left: 0.5rem;
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
z-index: 99;
|
z-index: 1;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@ -151,49 +151,3 @@ hr {
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#button-container {
|
|
||||||
position: fixed;
|
|
||||||
right: 2rem;
|
|
||||||
bottom: 2rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.6rem;
|
|
||||||
|
|
||||||
#comments-button, #top-button {
|
|
||||||
background-color: var(--bg-1);
|
|
||||||
padding: 0.4rem;
|
|
||||||
height: 1rem;
|
|
||||||
width: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: none;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--bg-3);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
fill: var(--text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
#comments-button, #top-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
119
sass/parts/_quick_navigation_buttons.scss
Normal file
119
sass/parts/_quick_navigation_buttons.scss
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
#button-container {
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
right: 2rem;
|
||||||
|
bottom: 2rem;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.6rem;
|
||||||
|
z-index: 2; // Above "copy-code" buttons. Important for the ToC.
|
||||||
|
|
||||||
|
#toc-button,
|
||||||
|
#comments-button,
|
||||||
|
#top-button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 2;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--bg-1);
|
||||||
|
padding: 0.4rem;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--bg-3);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: var(--text-color);
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#toc-floating-container {
|
||||||
|
|
||||||
|
$padding-vertical: 0.7rem;
|
||||||
|
$padding-horizontal: 1rem;
|
||||||
|
|
||||||
|
#toc-button {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-container {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: $padding-vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc-content {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
margin-bottom: $padding-vertical;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
|
||||||
|
border: 1px solid var(--divider-color);
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
padding-right: $padding-horizontal;
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-align: left;
|
||||||
|
white-space: nowrap; // Prevents wrapping, allowing content to define width.
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-left: $padding-horizontal;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
|
||||||
|
+ .overlay,
|
||||||
|
+ .overlay + #toc-button + .toc-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
+ .overlay + #toc-button svg {
|
||||||
|
fill: var(--primary-color); // Show the ToC icon as toggled.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 40%;
|
||||||
|
z-index: 1; // Lower than the Table of Contents
|
||||||
|
background: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
#button-container {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -101,16 +101,32 @@
|
|||||||
|
|
||||||
{% if config.extra.quick_navigation_buttons or page.extra.quick_navigation_buttons %}
|
{% if config.extra.quick_navigation_buttons or page.extra.quick_navigation_buttons %}
|
||||||
<div id="button-container">
|
<div id="button-container">
|
||||||
|
{# Button to go show a floating Table of Contents #}
|
||||||
|
{% if page.toc %}
|
||||||
|
<div id="toc-floating-container">
|
||||||
|
<input type="checkbox" id="toc-toggle" class="toggle"/>
|
||||||
|
<label for="toc-toggle" class="overlay"></label>
|
||||||
|
<label for="toc-toggle" id="toc-button" class="button" title="Toggle Table of Contents" aria-label="toggle Table of Contents">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M414.82-193.094q-18.044 0-30.497-12.32-12.453-12.319-12.453-30.036t12.453-30.086q12.453-12.37 30.497-12.37h392.767q17.237 0 29.927 12.487 12.69 12.486 12.69 30.203 0 17.716-12.69 29.919t-29.927 12.203H414.82Zm0-244.833q-18.044 0-30.497-12.487Q371.87-462.9 371.87-480.45t12.453-29.92q12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.511 12.69 12.512 12.69 29.845 0 17.716-12.69 30.086-12.69 12.37-29.927 12.37H414.82Zm0-245.167q-18.044 0-30.497-12.32t-12.453-30.037q0-17.716 12.453-30.086 12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.486 12.69 12.487 12.69 30.203 0 17.717-12.69 29.92-12.69 12.203-29.927 12.203H414.82ZM189.379-156.681q-32.652 0-55.878-22.829t-23.226-55.731q0-32.549 23.15-55.647 23.151-23.097 55.95-23.097 32.799 0 55.313 23.484 22.515 23.484 22.515 56.246 0 32.212-22.861 54.893-22.861 22.681-54.963 22.681Zm0-245.167q-32.652 0-55.878-23.134-23.226-23.135-23.226-55.623 0-32.487 23.467-55.517t56.12-23.03q32.102 0 54.721 23.288 22.62 23.288 22.62 55.775 0 32.488-22.861 55.364-22.861 22.877-54.963 22.877Zm-.82-244.833q-32.224 0-55.254-23.288-23.03-23.289-23.03-55.623 0-32.333 23.271-55.364 23.272-23.03 55.495-23.03 32.224 0 55.193 23.288 22.969 23.289 22.969 55.622 0 32.334-23.21 55.364-23.21 23.031-55.434 23.031Z"/></svg>
|
||||||
|
</label>
|
||||||
|
<div class="toc-content">
|
||||||
|
{{ macros_toc::toc(page=page, header=false) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{# Button to go to the comment section #}
|
||||||
{% if comment_system %}
|
{% if comment_system %}
|
||||||
<a href="#comments" id="comments-button">
|
<a href="#comments" id="comments-button" title="Go to comment section">
|
||||||
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" fill-rule="evenodd"/></svg>
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" fill-rule="evenodd"/></svg>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<a href="#" id="top-button">
|
{# Button to go to the top of the page #}
|
||||||
|
<a href="#" id="top-button" title="Go to top of page">
|
||||||
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg>
|
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% endmacro content %}
|
{% endmacro content %}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user