Skip to content

Improve modern UI #104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
squidfunk merged 6 commits into from
Mar 28, 2026
Merged

Improve modern UI #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6c80b69
refactor: increase area of inline code blocks to improve readability
squidfunk Mar 28, 2026
2796dd3
refactor: decrease size of buttons to align with surrounding content
squidfunk Mar 28, 2026
f5f8137
refactor: decrease animation duration of sidebar for snappiness
squidfunk Mar 28, 2026
07f3244
refactor: increase font size of tooltips and decrease weight
squidfunk Mar 28, 2026
528f225
chore: update distribution files
squidfunk Mar 28, 2026
ca469e0
feature: add floating table of contents in mobile view (#105)
squidfunk Mar 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...assets/javascripts/bundle.c2b142ea.min.js → ...assets/javascripts/bundle.66be65ca.min.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion dist/assets/stylesheets/modern/main.0e2b161b.min.css
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions dist/assets/stylesheets/modern/main.3b031116.min.css
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 8 additions & 2 deletions dist/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
{% endblock %}
{% block styles %}
{% if config.theme.variant == "modern" %}
{% set href = 'assets/stylesheets/modern/main.0e2b161b.min.css' | url %}
{% set href = 'assets/stylesheets/modern/main.3b031116.min.css' | url %}
{% else %}
{% set href = 'assets/stylesheets/classic/main.320d0ab1.min.css' | url %}
{% endif %}
Expand Down Expand Up @@ -180,6 +180,12 @@
{% endif %}
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" {{ hidden }}>
<div class="md-sidebar__scrollwrap">
{% if config.theme.variant != "classic" %}
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<div class="md-sidebar-button__wrapper">
<label class="md-sidebar-button" for="__toc"></label>
</div>
{% endif %}
<div class="md-sidebar__inner">
{% include "partials/toc.html" %}
</div>
Expand Down Expand Up @@ -260,7 +266,7 @@
</script>
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.c2b142ea.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.66be65ca.min.js' | url }}"></script>
{% for script in config.extra_javascript %}
{{ script | script_tag }}
{% endfor %}
Expand Down
24 changes: 13 additions & 11 deletions dist/partials/nav-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,17 +141,19 @@
</li>
{% elif nav_item.active %}
<li class="{{ class }}">
{% set toc = page.toc %}
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
{% set first = toc | first %}
{% if first and first.level == 1 %}
{% set toc = first.children %}
{% endif %}
{% if toc %}
<label class="md-nav__link md-nav__link--active" for="__toc">
{{ render_content(nav_item) }}
<span class="md-nav__icon md-icon"></span>
</label>
{% if config.theme.variant == "classic" %}
{% set toc = page.toc %}
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
{% set first = toc | first %}
{% if first and first.level == 1 %}
{% set toc = first.children %}
{% endif %}
{% if toc %}
<label class="md-nav__link md-nav__link--active" for="__toc">
{{ render_content(nav_item) }}
<span class="md-nav__icon md-icon"></span>
</label>
{% endif %}
{% endif %}
<a href="{{ nav_item.url | url }}" class="md-nav__link md-nav__link--active">
{{ render_content(nav_item) }}
Expand Down
17 changes: 17 additions & 0 deletions src/assets/javascripts/components/toc/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
endWith,
filter,
finalize,
fromEvent,
ignoreElements,
map,
merge,
Expand Down Expand Up @@ -305,6 +306,22 @@ export function mountTableOfContents(
}
})

// Ensure clicking outside of table of contents closes it
const nav = getOptionalElement(".md-sidebar--secondary")
if (typeof nav !== "undefined") {
fromEvent<MouseEvent>(document.body, "click")
.subscribe((event) => {
const target = event.target as Node
if (!nav.contains(target)) {
const input = getOptionalElement<HTMLInputElement>(
".md-nav__toggle", nav
)
if (typeof input !== "undefined")
input.checked = false
}
})
}

// Set up following, if enabled
if (feature("toc.follow")) {

Expand Down
2 changes: 1 addition & 1 deletion src/assets/stylesheets/modern/main/_typeset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ kbd {

// Inline code block
code {
padding: 0 px2em(4px, 13.6px);
padding: 0.25em 0.4em;
font-size: px2em(13.6px);
word-break: break-word;
background-color: var(--md-code-bg-color);
Expand Down
1 change: 1 addition & 0 deletions src/assets/stylesheets/modern/main/components/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
.md-button {
display: inline-block;
padding: px2em(10px) px2em(32px);
font-size: px2em(14px);
font-weight: 700;
color: var(--md-default-fg-color--light);
text-decoration: none;
Expand Down
134 changes: 125 additions & 9 deletions src/assets/stylesheets/modern/main/components/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,13 @@
// Rules
// ----------------------------------------------------------------------------

// Sidebar variables
:root {
--md-toc-icon: svg-load("lucide/text-align-start.svg");
}

// ----------------------------------------------------------------------------

// Sidebar
.md-sidebar {
position: sticky;
Expand Down Expand Up @@ -57,16 +64,16 @@
backdrop-filter: blur(px2rem(8px));
border-radius: px2rem(16px);
transition:
transform 250ms cubic-bezier(0.5, 0, 0.5, 0),
box-shadow 250ms;
transform 200ms cubic-bezier(0.5, 0, 0.5, 0),
box-shadow 200ms;
transform: translateX(0);

// Show sidebar when drawer is active
[data-md-toggle="drawer"]:checked ~ .md-container & {
box-shadow: var(--md-shadow-z3);
transition:
transform 350ms cubic-bezier(0.7, 0.7, 0.1, 1),
box-shadow 350ms;
transform 250ms cubic-bezier(0.7, 0.7, 0.1, 1),
box-shadow 250ms;
transform: translateX(px2rem(250px));

// Adjust for right-to-left languages
Expand Down Expand Up @@ -104,13 +111,122 @@

// Secondary sidebar with table of contents
&--secondary {
display: none;
order: 2;

// [tablet landscape +]: Show table of contents as sidebar
@include break-to-device(tablet portrait) {
position: fixed;
top: initial;
width: initial;
right: px2rem(16px);
bottom: px2rem(32px);
z-index: 2;
padding: 0;

// Adjust spacing
.md-nav--secondary {
margin-top: 0;
}

// Sidebar title
.md-nav__title {
padding: px2rem(11px) px2rem(12px) px2rem(7px);
}

// Sidebar toggle container
.md-sidebar__scrollwrap {
position: relative;
display: flex;
flex-direction: column-reverse;
overflow-y: visible;
}

// Sidebar container
.md-sidebar__inner {
position: absolute;
right: 0;
bottom: px2rem(54px);
width: px2rem(234px);
pointer-events: none;
opacity: 0;
max-height: 50vh;
transition:
transform 0ms 250ms,
opacity 250ms;
transform: translateY(px2rem(8px));
overflow-y: auto;
background-color: var(--md-default-bg-color);
box-shadow: var(--md-shadow-z2);
border-radius: px2rem(8px);
padding-bottom: px2rem(8px);
}

// Sidebar in open state
[type="checkbox"]:checked ~ .md-sidebar__inner {
pointer-events: initial;
opacity: 1;
transition:
transform 400ms cubic-bezier(0, 1, 0.35, 1),
opacity 250ms,
z-index 0ms;
transform: translateY(0);
}

// Sidebar toggle button
.md-sidebar-button {
display: inline-flex;
gap: px2rem(8px);
padding: px2rem(10px);
font-size: px2rem(14px);
color: var(--md-default-fg-color--light);
cursor: pointer;
background-color: var(--md-default-bg-color--light);
backdrop-filter: blur(px2rem(8px));
border-radius: px2rem(32px);
outline: none;
box-shadow: var(--md-shadow-z2);
transition:
color 125ms,
background-color 125ms,
transform 125ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 125ms;

// Table of contents icons
&::after {
display: block;
width: px2rem(18px);
height: px2rem(18px);
content: "";
background-color: currentcolor;
mask-image: var(--md-toc-icon);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
transition: transform 250ms;
}

// Back-to-top button on focus/hover
&:is(:focus, :hover) {
color: var(--md-accent-bg-color);
background-color: var(--md-accent-fg-color);
}

// Wrapper
&__wrapper {
text-align: right;
}
}
}

// [tablet landscape +]: Show table of contents as sidebar
@include break-from-device(tablet landscape) {
height: 0;

// Sidebar toggle button
.md-sidebar-button {
display: none;
}

// [no-js]: Switch to native sticky behavior
.no-js & {
height: auto;
Expand Down Expand Up @@ -209,9 +325,9 @@
backdrop-filter: blur(px2rem(4px));
opacity: 0;
transition:
width 0ms 600ms,
height 0ms 600ms,
opacity 350ms 250ms;
width 0ms 500ms,
height 0ms 500ms,
opacity 250ms 125ms;

// Show overlay when drawer is active
[data-md-toggle="drawer"]:checked ~ & {
Expand All @@ -221,7 +337,7 @@
transition:
width 0ms,
height 0ms,
opacity 350ms;
opacity 250ms;
}
}
}
4 changes: 2 additions & 2 deletions src/assets/stylesheets/modern/main/components/_tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
// Inline tooltip
&--inline {
width: auto;
font-weight: 700;
font-weight: 400;
user-select: none;

// Tooltip is not active
Expand All @@ -112,7 +112,7 @@
// Tooltip wrapper
.md-tooltip__inner {
padding: px2rem(4px) px2rem(8px);
font-size: px2rem(10px);
font-size: px2rem(11px);
}

// Hack: When the host element is hidden, the context for the tooltip is
Expand Down
4 changes: 2 additions & 2 deletions src/assets/stylesheets/modern/main/components/_tooltip2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,8 +236,8 @@
400px
);
padding: px2rem(4px) px2rem(8px);
font-size: px2rem(10px);
font-weight: 700;
font-size: px2rem(11px);
font-weight: 400;
// If the author wishes to keep the tooltip visible upon hover and make
// the text selectable, this property can be set to `initial`
user-select: none;
Expand Down
2 changes: 1 addition & 1 deletion src/assets/stylesheets/modern/main/components/_top.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
z-index: 2;
display: flex;
gap: px2rem(8px);
padding: px2rem(8px) px2rem(16px) px2rem(8px) px2rem(12px);
padding: px2rem(10px) px2rem(18px) px2rem(10px) px2rem(14px);
margin-inline-start: 50%;
font-size: px2rem(14px);
color: var(--md-default-fg-color--light);
Expand Down
10 changes: 10 additions & 0 deletions src/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,6 +323,16 @@
{{ hidden }}
>
<div class="md-sidebar__scrollwrap">
{% if config.theme.variant != "classic" %}
<input
class="md-nav__toggle md-toggle"
type="checkbox"
id="__toc"
/>
<div class="md-sidebar-button__wrapper">
<label class="md-sidebar-button" for="__toc"></label>
</div>
{% endif %}
<div class="md-sidebar__inner">
{% include "partials/toc.html" %}
</div>
Expand Down
42 changes: 22 additions & 20 deletions src/partials/nav-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,27 +266,29 @@
<!-- Currently active page -->
{% elif nav_item.active %}
<li class="{{ class }}">
{% set toc = page.toc %}

<!-- State toggle -->
<input
class="md-nav__toggle md-toggle"
type="checkbox"
id="__toc"
/>

<!-- Hack: see partials/toc.html for more information -->
{% set first = toc | first %}
{% if first and first.level == 1 %}
{% set toc = first.children %}
{% endif %}
{% if config.theme.variant == "classic" %}
{% set toc = page.toc %}

<!-- Navigation link to table of contents -->
{% if toc %}
<label class="md-nav__link md-nav__link--active" for="__toc">
{{ render_content(nav_item) }}
<span class="md-nav__icon md-icon"></span>
</label>
<!-- State toggle -->
<input
class="md-nav__toggle md-toggle"
type="checkbox"
id="__toc"
/>

<!-- Hack: see partials/toc.html for more information -->
{% set first = toc | first %}
{% if first and first.level == 1 %}
{% set toc = first.children %}
{% endif %}

<!-- Navigation link to table of contents -->
{% if toc %}
<label class="md-nav__link md-nav__link--active" for="__toc">
{{ render_content(nav_item) }}
<span class="md-nav__icon md-icon"></span>
</label>
{% endif %}
{% endif %}
<a
href="{{ nav_item.url | url }}"
Expand Down