Misc website fixes
MODIFY
website/src/_includes/color-scheme-switch.njk
website/src/_includes/color-scheme-switch.njk
<div class="color-scheme-switch">
<div class="selector"></div>
<svg class="moon" viewBox="0 0 312.812 312.812">
- <g>
<path fill="currentColor" d="M305.2,178.159c-3.2-0.8-6.4,0-9.2,2c-10.4,8.8-22.4,16-35.6,20.8c-12.4,4.8-26,7.2-40.4,7.2c-32.4,0-62-13.2-83.2-34.4 c-21.2-21.2-34.4-50.8-34.4-83.2c0-13.6,2.4-26.8,6.4-38.8c4.4-12.8,10.8-24.4,19.2-34.4c3.6-4.4,2.8-10.8-1.6-14.4 c-2.8-2-6-2.8-9.2-2c-34,9.2-63.6,29.6-84.8,56.8c-20.4,26.8-32.4,60-32.4,96c0,43.6,17.6,83.2,46.4,112s68,46.4,112,46.4 c36.8,0,70.8-12.8,98-34c27.6-21.6,47.6-52.4,56-87.6C314,184.959,310.8,179.359,305.2,178.159z"/>
- </g>
</svg>
<svg class="sun" viewBox="0 0 50 50">
<path fill="currentColor" d="M 24.90625 3.96875 C 24.863281 3.976563 24.820313 3.988281 24.78125 4 C 24.316406 4.105469 23.988281 4.523438 24 5 L 24 11 C 23.996094 11.359375 24.183594 11.695313 24.496094 11.878906 C 24.808594 12.058594 25.191406 12.058594 25.503906 11.878906 C 25.816406 11.695313 26.003906 11.359375 26 11 L 26 5 C 26.011719 4.710938 25.894531 4.433594 25.6875 4.238281 C 25.476563 4.039063 25.191406 3.941406 24.90625 3.96875 Z M 10.65625 9.84375 C 10.28125 9.910156 9.980469 10.183594 9.875 10.546875 C 9.769531 10.914063 9.878906 11.304688 10.15625 11.5625 L 14.40625 15.8125 C 14.648438 16.109375 15.035156 16.246094 15.410156 16.160156 C 15.78125 16.074219 16.074219 15.78125 16.160156 15.410156 C 16.246094 15.035156 16.109375 14.648438 15.8125 14.40625 L 11.5625 10.15625 C 11.355469 9.933594 11.054688 9.820313 10.75 9.84375 C 10.71875 9.84375 10.6875 9.84375 10.65625 9.84375 Z M 39.03125 9.84375 C 38.804688 9.875 38.59375 9.988281 38.4375 10.15625 L 34.1875 14.40625 C 33.890625 14.648438 33.753906 15.035156 33.839844 15.410156 C 33.925781 15.78125 34.21875 16.074219 34.589844 16.160156 C 34.964844 16.246094 35.351563 16.109375 35.59375 15.8125 L 39.84375 11.5625 C 40.15625 11.265625 40.246094 10.800781 40.0625 10.410156 C 39.875 10.015625 39.460938 9.789063 39.03125 9.84375 Z M 25 15 C 19.484375 15 15 19.484375 15 25 C 15 30.515625 19.484375 35 25 35 C 30.515625 35 35 30.515625 35 25 C 35 19.484375 30.515625 15 25 15 Z M 4.71875 24 C 4.167969 24.078125 3.78125 24.589844 3.859375 25.140625 C 3.9375 25.691406 4.449219 26.078125 5 26 L 11 26 C 11.359375 26.003906 11.695313 25.816406 11.878906 25.503906 C 12.058594 25.191406 12.058594 24.808594 11.878906 24.496094 C 11.695313 24.183594 11.359375 23.996094 11 24 L 5 24 C 4.96875 24 4.9375 24 4.90625 24 C 4.875 24 4.84375 24 4.8125 24 C 4.78125 24 4.75 24 4.71875 24 Z M 38.71875 24 C 38.167969 24.078125 37.78125 24.589844 37.859375 25.140625 C 37.9375 25.691406 38.449219 26.078125 39 26 L 45 26 C 45.359375 26.003906 45.695313 25.816406 45.878906 25.503906 C 46.058594 25.191406 46.058594 24.808594 45.878906 24.496094 C 45.695313 24.183594 45.359375 23.996094 45 24 L 39 24 C 38.96875 24 38.9375 24 38.90625 24 C 38.875 24 38.84375 24 38.8125 24 C 38.78125 24 38.75 24 38.71875 24 Z M 15 33.875 C 14.773438 33.90625 14.5625 34.019531 14.40625 34.1875 L 10.15625 38.4375 C 9.859375 38.679688 9.722656 39.066406 9.808594 39.441406 C 9.894531 39.8125 10.1875 40.105469 10.558594 40.191406 C 10.933594 40.277344 11.320313 40.140625 11.5625 39.84375 L 15.8125 35.59375 C 16.109375 35.308594 16.199219 34.867188 16.039063 34.488281 C 15.882813 34.109375 15.503906 33.867188 15.09375 33.875 C 15.0625 33.875 15.03125 33.875 15 33.875 Z M 34.6875 33.875 C 34.3125 33.941406 34.011719 34.214844 33.90625 34.578125 C 33.800781 34.945313 33.910156 35.335938 34.1875 35.59375 L 38.4375 39.84375 C 38.679688 40.140625 39.066406 40.277344 39.441406 40.191406 C 39.8125 40.105469 40.105469 39.8125 40.191406 39.441406 C 40.277344 39.066406 40.140625 38.679688 39.84375 38.4375 L 35.59375 34.1875 C 35.40625 33.988281 35.148438 33.878906 34.875 33.875 C 34.84375 33.875 34.8125 33.875 34.78125 33.875 C 34.75 33.875 34.71875 33.875 34.6875 33.875 Z M 24.90625 37.96875 C 24.863281 37.976563 24.820313 37.988281 24.78125 38 C 24.316406 38.105469 23.988281 38.523438 24 39 L 24 45 C 23.996094 45.359375 24.183594 45.695313 24.496094 45.878906 C 24.808594 46.058594 25.191406 46.058594 25.503906 45.878906 C 25.816406 45.695313 26.003906 45.359375 26 45 L 26 39 C 26.011719 38.710938 25.894531 38.433594 25.6875 38.238281 C 25.476563 38.039063 25.191406 37.941406 24.90625 37.96875 Z"/>

MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
-{{ environment }}
<!doctype html>
<html lang="en" data-theme="light" class="js-disabled">
<head>
if (!currentTheme) {
currentTheme = prefersDarkMode ? 'dark' : 'light';
}
- localStorage.setItem('data-theme', currentTheme);
document.documentElement.setAttribute("data-theme", currentTheme);
})();
</script>
<span class="logo-text">Rome</span>
</a>
<div class="stretch"></div>
- <a href="#" class="mobile-handle">
- <span class="sr-only">Mobile handle</span>
- {% include "./svg/mobile-handle.njk" %}
+
+ <a href="#" class="mobile-handle mobile-handle-toc">
+ {% include "./svg/mobile-toc-handle.njk" %}
+ </a>
+
+ <a href="#" class="mobile-handle mobile-handle-nav">
+ {% include "./svg/mobile-nav-handle.njk" %}
</a>
</div>
<div class="sidebar-container">
<div class="sidebar-stripe"></div>
- <div class="sidebar left">
+ <div class="sidebar nav">
<div class="header-desktop">
<a class="logo" href="{{ '/' | url }}">
{% include "./svg/rome-logo.njk" %}
</div>
<div id="docsearch-container">
- <svg id="search-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-1 0 136 136.21852">
- <path d="M 93.148438 80.832031 C 109.5 57.742188 104.03125 25.769531 80.941406 9.421875 C 57.851562 -6.925781 25.878906 -1.460938 9.53125 21.632812 C -6.816406 44.722656 -1.351562 76.691406 21.742188 93.039062 C 38.222656 104.707031 60.011719 105.605469 77.394531 95.339844 L 115.164062 132.882812 C 119.242188 137.175781 126.027344 137.347656 130.320312 133.269531 C 134.613281 129.195312 134.785156 122.410156 130.710938 118.117188 C 130.582031 117.980469 130.457031 117.855469 130.320312 117.726562 Z M 51.308594 84.332031 C 33.0625 84.335938 18.269531 69.554688 18.257812 51.308594 C 18.253906 33.0625 33.035156 18.269531 51.285156 18.261719 C 69.507812 18.253906 84.292969 33.011719 84.328125 51.234375 C 84.359375 69.484375 69.585938 84.300781 51.332031 84.332031 C 51.324219 84.332031 51.320312 84.332031 51.308594 84.332031 Z M 51.308594 84.332031" fill="currentColor" />
- </svg>
+ {% include "./svg/search-icon.njk" %}
<input type="text" id="docsearch" placeholder="Search" />
</div>
</div>
<div class="main">
- <div class="overlay"></div>
{% if eleventyNavigation.key %}
<ul class="breadcrumbs">
{% set navPages = collections.all | eleventyNavigationBreadcrumb(eleventyNavigation.key) %}
{% if tocHTML != "" %}
<div class="sidebar-container">
- <div class="sidebar right">
+ <div class="sidebar toc">
<nav aria-labelledby="table-of-content" class="table-of-contents">
<h2 id="table-of-content">Table of Contents</h2>
<div class="toc-container">

RENAME
website/src/_includes/layouts/svg/mobile-handle.njk
website/src/_includes/layouts/svg/mobile-nav-handle.njk
-<svg height="32px" id="menu" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0 0 32 32">
<path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z" />
</svg>

ADD
website/src/_includes/layouts/svg/mobile-toc-handle.njk
+<svg viewBox="0 0 32 32">
+ <path d="M7.1,13.2c-1.7,0-3.1,1.4-3.1,3.1c0,1.7,1.4,3.1,3.1,3.1s3.1-1.4,3.1-3.1C10.1,14.6,8.7,13.2,7.1,13.2z"/>
+ <path d="M26.4,15.7H12.3c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6h14.2c0.3,0,0.6-0.3,0.6-0.6C27,15.9,26.8,15.7,26.4,15.7z"/>
+ <path d="M7.1,4.4C5.4,4.4,4,5.8,4,7.5s1.4,3.1,3.1,3.1s3.1-1.4,3.1-3.1S8.7,4.4,7.1,4.4z"/>
+ <path d="M12.3,8.1h14.2c0.3,0,0.6-0.3,0.6-0.6s-0.3-0.6-0.6-0.6H12.3c-0.3,0-0.6,0.3-0.6,0.6S11.9,8.1,12.3,8.1z"/>
+ <path d="M7.1,22C5.4,22,4,23.4,4,25.1c0,1.7,1.4,3.1,3.1,3.1s3.1-1.4,3.1-3.1S8.7,22,7.1,22z"/>
+ <path d="M26.4,24.4H12.3c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6h14.2c0.3,0,0.6-0.3,0.6-0.6C27,24.7,26.8,24.4,26.4,24.4z"/>
+</svg>

ADD
website/src/_includes/layouts/svg/search-icon.njk
+<svg id="search-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-1 0 136 136.21852">
+ <path d="M 93.148438 80.832031 C 109.5 57.742188 104.03125 25.769531 80.941406 9.421875 C 57.851562 -6.925781 25.878906 -1.460938 9.53125 21.632812 C -6.816406 44.722656 -1.351562 76.691406 21.742188 93.039062 C 38.222656 104.707031 60.011719 105.605469 77.394531 95.339844 L 115.164062 132.882812 C 119.242188 137.175781 126.027344 137.347656 130.320312 133.269531 C 134.613281 129.195312 134.785156 122.410156 130.710938 118.117188 C 130.582031 117.980469 130.457031 117.855469 130.320312 117.726562 Z M 51.308594 84.332031 C 33.0625 84.335938 18.269531 69.554688 18.257812 51.308594 C 18.253906 33.0625 33.035156 18.269531 51.285156 18.261719 C 69.507812 18.253906 84.292969 33.011719 84.328125 51.234375 C 84.359375 69.484375 69.585938 84.300781 51.332031 84.332031 C 51.324219 84.332031 51.320312 84.332031 51.308594 84.332031 Z M 51.308594 84.332031" fill="currentColor" />
+</svg>

MODIFY
website/src/blog/posts/test.md
website/src/blog/posts/test.md
---
title: This is my first post
description: This is a post on My Blog about agile frameworks.
-author_name: Sebastian Mckenzie
+author_name: Sebastian McKenzie
author_url: https://twitter.com/sebmck
date: 2018-05-03
tags:

MODIFY
website/src/styles/_color-scheme-switch.scss
website/src/styles/_color-scheme-switch.scss
.color-scheme-switch-container {
padding: 18px 0;
+ height: 66px;
+ flex-shrink: 0;
align-items: center;
position: relative;
width: 100%;
.color-scheme-switch {
position: relative;
width: 60px;
+ height: 30px;
line-height: 16px;
background-color: var(--color-scheme-switcher-color);
border-radius: 15px;
+ flex-shrink: 0;
cursor: pointer;
display: flex;

MODIFY
website/src/styles/_global.scss
website/src/styles/_global.scss
@@ -19,8 +19,11 @@ body {
color: var(--font-color);
line-height: 1.5;
margin: 0;
+
+ @include desktop-only {
@include inset-border-top;
}
+}
code {
font-family: "Fira Code", monospace !important;
@@ -78,30 +81,6 @@ a:active {
overflow: hidden;
}
-.overlay {
- transform: translateX(100%);
- width: 100%;
- height: 100%;
-
- @include desktop-only() {
- display: none;
- }
-
- @include mobile-only() {
- @include transition-timing;
- position: fixed;
- background: #181818;
- opacity: 0;
- transition-property: opacity, transform;
- display: block;
- z-index: 1;
- &.visible {
- transform: translateX(0);
- opacity: 0;
- }
- }
-}
-
ul.breadcrumbs {
background-color: var(--background-color);
border-bottom: 1px solid var(--soft-border-color);

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
.mobile-handle {
height: 32px;
+ width: 32px;
display: none;
+ svg {
+ height: 32px;
+ width: 32px;
+ }
+
svg path {
fill: var(--top-border-color);
}

MODIFY
website/src/styles/_sidebar.scss
website/src/styles/_sidebar.scss
-@include mobile-only() {
- .container.no-right-sidebar .sidebar {
- width: 100%;
- }
-}
-
.sidebar-container {
position: sticky;
z-index: 2;
display: flex;
flex-direction: column;
width: 100%;
+ height: 100%;
@include desktop-only() {
border-top-width: 0;
@include mobile-only() {
transform: translateX(-100%);
position: fixed;
- padding-top: 64px;
+ padding-top: 59px;
background: var(--background-color);
height: 100%;
- width: 50%;
- min-width: auto;
-webkit-overflow-scrolling: touch;
&.visible {
}
}
- &.left {
+ &.nav {
border-right: 1px solid var(--soft-border-color);
border-left: 1px solid var(--soft-border-color);
}
}
- &.right {
+ &.toc {
z-index: 0;
flex-grow: 1;

MODIFY
website/src/styles/_table-of-contents.scss
website/src/styles/_table-of-contents.scss
a {
text-decoration: none;
height: auto;
- padding: $unit / 5 $unit / 2;
+ padding: $unit / 5 0;
margin-left: $unit / 2;
border-radius: 2px;
display: inline-block;

MODIFY
website/src/styles/_variables.scss
website/src/styles/_variables.scss
@@ -23,7 +23,7 @@ $gray-8: lighten(#27272A, 80%);
--sub-text-color: #{$gray-6};
--top-border-color: #{$gray-4};
--soft-border-color: rgba(39, 39, 42, 0.2);
- --pattern-color: #{rgba($gray-7, 0.45)};
+ --pattern-color: #{rgba($gray-7, 0.6)};
--pattern-color-2: #{rgba(255, 255, 255, 0)};
--pattern-img-path: url("/img/pattern-white.png");
--toc-background-active: #{$gray-8};
@@ -43,7 +43,7 @@ $gray-8: lighten(#27272A, 80%);
--font-color: #{lighten(#27272A, 65%)};
--top-border-color: #{$color-4};
--soft-border-color: rgba(0, 0, 0, 0.2);
- --pattern-color: #{rgba($gray-3, 0.4)};
+ --pattern-color: #{$gray-3};
--pattern-color-2: #{rgba(0, 0, 0, 0)};
--pattern-img-path: url("/img/pattern-black.png");
--toc-background-active: #{$gray-3};

DELETE
website/static/img/mobile-handle.svg
website/static/img/mobile-handle.svg
MODIFY
website/static/js/index.js
website/static/js/index.js
// @ts-check
/**
* @type {{
- * mobileHandle: HTMLElement;
+ * mobileHandleTOC: HTMLElement;
+ * mobileHandleNav: HTMLElement;
* toc: HTMLElement;
* tocLinks: NodeListOf<HTMLElement>;
- * sidebar: HTMLElement;
- * sidebarRight: HTMLElement;
- * overlay: HTMLElement;
+ * sidebarNav: HTMLElement;
+ * sidebarTOC: HTMLElement;
* headings: NodeListOf<HTMLElement>;
* headerMobile: HTMLElement;
* colorSchemeSwitcher: HTMLElement;
* }}
*/
const elements = {
- mobileHandle: document.querySelector(".mobile-handle"),
+ mobileHandleTOC: document.querySelector(".mobile-handle-toc"),
+ mobileHandleNav: document.querySelector(".mobile-handle-nav"),
toc: document.querySelector(".toc-container"),
tocLinks: document.querySelectorAll(".toc-container a"),
- sidebar: document.querySelector(".sidebar"),
- sidebarRight: document.querySelector(".sidebar.right"),
- overlay: document.querySelector(".overlay"),
+ sidebarNav: document.querySelector(".sidebar.nav"),
+ sidebarTOC: document.querySelector(".sidebar.toc"),
headings: document.querySelectorAll(".content h1, .content h2"),
headerMobile: document.querySelector(".header-mobile"),
colorSchemeSwitcher: document.querySelector(".color-scheme-switch"),
@@ -31,7 +31,7 @@ const elements = {
*/
function isMobile() {
return (
- elements.sidebar.classList.contains("visible") ||
+ elements.sidebarNav.classList.contains("visible") ||
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent,
)
@@ -104,7 +104,7 @@ const toc = {
scrollToHeading(hash);
if (isMobile()) {
- mobileToggleEvent(event);
+ toggleMobileNav(event);
}
}
},
@@ -137,13 +137,39 @@ function handleScroll() {
toc.highlight();
}
-function mobileToggleEvent(event) {
- const bodyClassList = document.body.classList;
+/**
+ * @type {undefined | "toc" | "nav"}
+ */
+let mobileSidebarActive;
+
+function toggleMobileNav(event) {
+ if (mobileSidebarActive === "nav") {
+ mobileSidebarActive = undefined;
+ } else {
+ if (mobileSidebarActive === "toc") {
+ toggleMobileTOC(event);
+ }
+ mobileSidebarActive = "nav";
+ }
+
+ event.preventDefault();
+ elements.sidebarNav.classList.toggle("visible");
+ document.body.classList.toggle("no-scroll");
+}
+
+function toggleMobileTOC(event) {
+ if (mobileSidebarActive === "toc") {
+ mobileSidebarActive = undefined;
+ } else {
+ if (mobileSidebarActive === "nav") {
+ toggleMobileTOC(event);
+ }
+ mobileSidebarActive = "toc";
+ }
+
event.preventDefault();
- elements.sidebar.classList.toggle("visible");
- elements.sidebarRight.classList.toggle("visible");
- elements.overlay.classList.toggle("visible");
- bodyClassList.toggle("no-scroll");
+ elements.sidebarTOC.classList.toggle("visible");
+ document.body.classList.toggle("no-scroll");
toc.highlight();
}
@@ -183,15 +209,19 @@ if (elements.toc) {
elements.toc.addEventListener("click", toc.handleClick, false);
}
-elements.mobileHandle.addEventListener("click", mobileToggleEvent, false);
-elements.overlay.addEventListener("click", mobileToggleEvent, false);
-elements.overlay.addEventListener("touchstart", mobileToggleEvent, false);
+elements.mobileHandleNav.addEventListener("click", toggleMobileNav, false);
+elements.mobileHandleTOC.addEventListener("click", toggleMobileTOC, false);
window.addEventListener("scroll", handleScroll, false);
//# Color scheme switcher
function toggleColorSchemeSwitch() {
- const currentScheme = window.localStorage.getItem("data-theme") || "light";
+ let currentScheme = window.localStorage.getItem("data-theme");
+ if (currentScheme === undefined) {
+ const prefersDarkMode = matchMedia("(prefers-color-scheme: dark)").matches;
+ currentScheme = prefersDarkMode ? "dark" : "light";
+ }
+
const newScheme = currentScheme === "dark" ? "light" : "dark";
window.localStorage.setItem("data-theme", newScheme);
document.documentElement.setAttribute("data-theme", newScheme);

Misc website fixes (#840)