Update documentation

CNAME

@@ -1 +1 @@
-contributors.status.im
+dev-contributors.free.technology

Team-lead-manual/Team-performance

@@ -1 +0,0 @@
-

ayu-highlight.css

@@ -8,7 +8,6 @@ Original by Dempfi (https://github.com/dempfi/ayu)
   overflow-x: auto;
   background: #191f26;
   color: #e6e1cf;
-  padding: 0.5em;
 }
 
 .hljs-comment,

book.js

@@ -4,14 +4,16 @@
 window.onunload = function () { };
 
 // Global variable, shared between modules
-function playground_text(playground) {
+function playground_text(playground, hidden = true) {
     let code_block = playground.querySelector("code");
 
     if (window.ace && code_block.classList.contains("editable")) {
         let editor = window.ace.edit(code_block);
         return editor.getValue();
-    } else {
+    } else if (hidden) {
         return code_block.textContent;
+    } else {
+        return code_block.innerText;
     }
 }
 
@@ -66,7 +68,7 @@ function playground_text(playground) {
     }
 
     // updates the visibility of play button based on `no_run` class and
-    // used crates vs ones available on http://play.rust-lang.org
+    // used crates vs ones available on https://play.rust-lang.org
     function update_play_button(pre_block, playground_crates) {
         var play_button = pre_block.querySelector(".play-button");
 
@@ -166,7 +168,6 @@ function playground_text(playground) {
             .filter(function (node) {return node.classList.contains("editable"); })
             .forEach(function (block) { block.classList.remove('language-rust'); });
 
-        Array
         code_nodes
             .filter(function (node) {return !node.classList.contains("editable"); })
             .forEach(function (block) { hljs.highlightBlock(block); });
@@ -178,7 +179,7 @@ function playground_text(playground) {
     // even if highlighting doesn't apply
     code_nodes.forEach(function (block) { block.classList.add('hljs'); });
 
-    Array.from(document.querySelectorAll("code.language-rust")).forEach(function (block) {
+    Array.from(document.querySelectorAll("code.hljs")).forEach(function (block) {
 
         var lines = Array.from(block.querySelectorAll('.boring'));
         // If no lines were hidden, return
@@ -300,6 +301,13 @@ function playground_text(playground) {
         themePopup.querySelector("button#" + get_theme()).focus();
     }
 
+    function updateThemeSelected() {
+        themePopup.querySelectorAll('.theme-selected').forEach(function (el) {
+            el.classList.remove('theme-selected');
+        });
+        themePopup.querySelector("button#" + get_theme()).classList.add('theme-selected');
+    }
+
     function hideThemes() {
         themePopup.style.display = 'none';
         themeToggleButton.setAttribute('aria-expanded', false);
@@ -338,7 +346,7 @@ function playground_text(playground) {
         }
 
         setTimeout(function () {
-            themeColorMetaTag.content = getComputedStyle(document.body).backgroundColor;
+            themeColorMetaTag.content = getComputedStyle(document.documentElement).backgroundColor;
         }, 1);
 
         if (window.ace && window.editors) {
@@ -355,6 +363,7 @@ function playground_text(playground) {
 
         html.classList.remove(previousTheme);
         html.classList.add(theme);
+        updateThemeSelected();
     }
 
     // Set theme
@@ -371,7 +380,14 @@ function playground_text(playground) {
     });
 
     themePopup.addEventListener('click', function (e) {
-        var theme = e.target.id || e.target.parentElement.id;
+        var theme;
+        if (e.target.className === "theme") {
+            theme = e.target.id;
+        } else if (e.target.parentElement.className === "theme") {
+            theme = e.target.parentElement.id;
+        } else {
+            return;
+        }
         set_theme(theme);
     });
 
@@ -425,7 +441,7 @@ function playground_text(playground) {
 })();
 
 (function sidebar() {
-    var html = document.querySelector("html");
+    var body = document.querySelector("body");
     var sidebar = document.getElementById("sidebar");
     var sidebarLinks = document.querySelectorAll('#sidebar a');
     var sidebarToggleButton = document.getElementById("sidebar-toggle");
@@ -433,8 +449,8 @@ function playground_text(playground) {
     var firstContact = null;
 
     function showSidebar() {
-        html.classList.remove('sidebar-hidden')
-        html.classList.add('sidebar-visible');
+        body.classList.remove('sidebar-hidden')
+        body.classList.add('sidebar-visible');
         Array.from(sidebarLinks).forEach(function (link) {
             link.setAttribute('tabIndex', 0);
         });
@@ -455,8 +471,8 @@ function playground_text(playground) {
     });
 
     function hideSidebar() {
-        html.classList.remove('sidebar-visible')
-        html.classList.add('sidebar-hidden');
+        body.classList.remove('sidebar-visible')
+        body.classList.add('sidebar-hidden');
         Array.from(sidebarLinks).forEach(function (link) {
             link.setAttribute('tabIndex', -1);
         });
@@ -467,14 +483,14 @@ function playground_text(playground) {
 
     // Toggle sidebar
     sidebarToggleButton.addEventListener('click', function sidebarToggle() {
-        if (html.classList.contains("sidebar-hidden")) {
+        if (body.classList.contains("sidebar-hidden")) {
             var current_width = parseInt(
                 document.documentElement.style.getPropertyValue('--sidebar-width'), 10);
             if (current_width < 150) {
                 document.documentElement.style.setProperty('--sidebar-width', '150px');
             }
             showSidebar();
-        } else if (html.classList.contains("sidebar-visible")) {
+        } else if (body.classList.contains("sidebar-visible")) {
             hideSidebar();
         } else {
             if (getComputedStyle(sidebar)['transform'] === 'none') {
@@ -490,14 +506,14 @@ function playground_text(playground) {
     function initResize(e) {
         window.addEventListener('mousemove', resize, false);
         window.addEventListener('mouseup', stopResize, false);
-        html.classList.add('sidebar-resizing');
+        body.classList.add('sidebar-resizing');
     }
     function resize(e) {
         var pos = (e.clientX - sidebar.offsetLeft);
         if (pos < 20) {
             hideSidebar();
         } else {
-            if (html.classList.contains("sidebar-hidden")) {
+            if (body.classList.contains("sidebar-hidden")) {
                 showSidebar();
             }
             pos = Math.min(pos, window.innerWidth - 100);
@@ -506,7 +522,7 @@ function playground_text(playground) {
     }
     //on mouseup remove windows functions mousemove & mouseup
     function stopResize(e) {
-        html.classList.remove('sidebar-resizing');
+        body.classList.remove('sidebar-resizing');
         window.removeEventListener('mousemove', resize, false);
         window.removeEventListener('mouseup', stopResize, false);
     }
@@ -535,33 +551,41 @@ function playground_text(playground) {
             firstContact = null;
         }
     }, { passive: true });
-
-    // Scroll sidebar to current active section
-    var activeSection = document.getElementById("sidebar").querySelector(".active");
-    if (activeSection) {
-        // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
-        activeSection.scrollIntoView({ block: 'center' });
-    }
 })();
 
 (function chapterNavigation() {
     document.addEventListener('keydown', function (e) {
         if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
         if (window.search && window.search.hasFocus()) { return; }
+        var html = document.querySelector('html');
 
+        function next() {
+            var nextButton = document.querySelector('.nav-chapters.next');
+            if (nextButton) {
+                window.location.href = nextButton.href;
+            }
+        }
+        function prev() {
+            var previousButton = document.querySelector('.nav-chapters.previous');
+            if (previousButton) {
+                window.location.href = previousButton.href;
+            }
+        }
         switch (e.key) {
             case 'ArrowRight':
                 e.preventDefault();
-                var nextButton = document.querySelector('.nav-chapters.next');
-                if (nextButton) {
-                    window.location.href = nextButton.href;
+                if (html.dir == 'rtl') {
+                    prev();
+                } else {
+                    next();
                 }
                 break;
             case 'ArrowLeft':
                 e.preventDefault();
-                var previousButton = document.querySelector('.nav-chapters.previous');
-                if (previousButton) {
-                    window.location.href = previousButton.href;
+                if (html.dir == 'rtl') {
+                    next();
+                } else {
+                    prev();
                 }
                 break;
         }
@@ -585,7 +609,7 @@ function playground_text(playground) {
         text: function (trigger) {
             hideTooltip(trigger);
             let playground = trigger.closest("pre");
-            return playground_text(playground);
+            return playground_text(playground, false);
         }
     });
 
@@ -660,13 +684,14 @@ function playground_text(playground) {
         }, { passive: true });
     })();
     (function controllBorder() {
-        menu.classList.remove('bordered');
-        document.addEventListener('scroll', function () {
+        function updateBorder() {
             if (menu.offsetTop === 0) {
                 menu.classList.remove('bordered');
             } else {
                 menu.classList.add('bordered');
             }
-        }, { passive: true });
+        }
+        updateBorder();
+        document.addEventListener('scroll', updateBorder, { passive: true });
     })();
 })();

build.json

@@ -0,0 +1,15 @@
+{
+    "timestamp": "2025-03-04T11:47:54Z",
+    "git": {
+        "commit": "f86a3f3ec506e10bf6b86b4b9e70c42b1c897db6",
+        "branch": "origin/develop",
+        "url": "git@github.com:status-im/contributors.free.technology.git"
+    },
+    "build": {
+        "id": "668",
+        "number": "668",
+        "name": "website/dev-contributors.free.technology",
+        "slave": "linux-02",
+        "url": "https://ci.infra.status.im/job/website/job/dev-contributors.free.technology/668/"
+    }
+}

css/chrome.css

@@ -2,12 +2,6 @@
 
 @import 'variables.css';
 
-::-webkit-scrollbar {
-    background: var(--bg);
-}
-::-webkit-scrollbar-thumb {
-    background: var(--scrollbar);
-}
 html {
     scrollbar-color: var(--scrollbar) var(--bg);
 }
@@ -18,6 +12,19 @@ a > .hljs {
     color: var(--links);
 }
 
+/*
+    body-container is necessary because mobile browsers don't seem to like
+    overflow-x on the body tag when there is a <meta name="viewport"> tag.
+*/
+#body-container {
+    /*
+        This is used when the sidebar pushes the body content off the side of
+        the screen on small screens. Without it, dragging on mobile Safari
+        will want to reposition the viewport in a weird way.
+    */
+    overflow-x: clip;
+}
+
 /* Menu Bar */
 
 #menu-bar,
@@ -30,9 +37,9 @@ a > .hljs {
     display: flex;
     flex-wrap: wrap;
     background-color: var(--bg);
-    border-bottom-color: var(--bg);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
+    border-block-end-color: var(--bg);
+    border-block-end-width: 1px;
+    border-block-end-style: solid;
 }
 #menu-bar.sticky,
 .js #menu-bar-hover-placeholder:hover + #menu-bar,
@@ -49,7 +56,7 @@ a > .hljs {
     height: var(--menu-bar-height);
 }
 #menu-bar.bordered {
-    border-bottom-color: var(--table-border-color);
+    border-block-end-color: var(--table-border-color);
 }
 #menu-bar i, #menu-bar .icon-button {
     position: relative;
@@ -86,7 +93,7 @@ a > .hljs {
     display: flex;
     margin: 0 5px;
 }
-.no-js .left-buttons {
+.no-js .left-buttons button {
     display: none;
 }
 
@@ -153,7 +160,7 @@ a > .hljs {
 }
 
 .nav-wrapper {
-    margin-top: 50px;
+    margin-block-start: 50px;
     display: none;
 }
 
@@ -166,23 +173,34 @@ a > .hljs {
     background-color: var(--sidebar-bg);
 }
 
-.previous {
-    float: left;
-}
+/* Only Firefox supports flow-relative values */
+.previous { float: left; }
+[dir=rtl] .previous { float: right; }
 
+/* Only Firefox supports flow-relative values */
 .next {
     float: right;
     right: var(--page-padding);
 }
+[dir=rtl] .next {
+    float: left;
+    right: unset;
+    left: var(--page-padding);
+}
+
+/* Use the correct buttons for RTL layouts*/
+[dir=rtl] .previous i.fa-angle-left:before {content:"\f105";}
+[dir=rtl] .next i.fa-angle-right:before { content:"\f104"; }
 
 @media only screen and (max-width: 1080px) {
     .nav-wide-wrapper { display: none; }
     .nav-wrapper { display: block; }
 }
 
+/* sidebar-visible */
 @media only screen and (max-width: 1380px) {
-    .sidebar-visible .nav-wide-wrapper { display: none; }
-    .sidebar-visible .nav-wrapper { display: block; }
+    #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
+    #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
 }
 
 /* Inline code */
@@ -208,26 +226,71 @@ pre {
 pre > .buttons {
     position: absolute;
     z-index: 100;
-    right: 5px;
-    top: 5px;
+    right: 0px;
+    top: 2px;
+    margin: 0px;
+    padding: 2px 0px;
 
     color: var(--sidebar-fg);
     cursor: pointer;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0.1s linear, opacity 0.1s linear;
+}
+pre:hover > .buttons {
+    visibility: visible;
+    opacity: 1
 }
 pre > .buttons :hover {
     color: var(--sidebar-active);
+    border-color: var(--icons-hover);
+    background-color: var(--theme-hover);
 }
 pre > .buttons i {
-    margin-left: 8px;
+    margin-inline-start: 8px;
 }
 pre > .buttons button {
-    color: inherit;
-    background: transparent;
-    border: none;
     cursor: inherit;
+    margin: 0px 5px;
+    padding: 3px 5px;
+    font-size: 14px;
+
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 4px;
+    border-color: var(--icons);
+    background-color: var(--theme-popup-bg);
+    transition: 100ms;
+    transition-property: color,border-color,background-color;
+    color: var(--icons);
 }
+@media (pointer: coarse) {
+    pre > .buttons button {
+        /* On mobile, make it easier to tap buttons. */
+        padding: 0.3rem 1rem;
+    }
+
+    .sidebar-resize-indicator {
+        /* Hide resize indicator on devices with limited accuracy */
+        display: none;
+    }
+}
+pre > code {
+    display: block;
+    padding: 1rem;
+}
+
+/* FIXME: ACE editors overlap their buttons because ACE does absolute
+   positioning within the code block which breaks padding. The only solution I
+   can think of is to move the padding to the outer pre tag (or insert a div
+   wrapper), but that would require fixing a whole bunch of CSS rules.
+*/
+.hljs.ace_editor {
+  padding: 0rem 0rem;
+}
+
 pre > .result {
-    margin-top: 10px;
+    margin-block-start: 10px;
 }
 
 /* Search */
@@ -238,8 +301,14 @@ pre > .result {
 
 mark {
     border-radius: 2px;
-    padding: 0 3px 1px 3px;
-    margin: 0 -3px -1px -3px;
+    padding-block-start: 0;
+    padding-block-end: 1px;
+    padding-inline-start: 3px;
+    padding-inline-end: 3px;
+    margin-block-start: 0;
+    margin-block-end: -1px;
+    margin-inline-start: -3px;
+    margin-inline-end: -3px;
     background-color: var(--search-mark-bg);
     transition: background-color 300ms linear;
     cursor: pointer;
@@ -251,14 +320,17 @@ mark.fade-out {
 }
 
 .searchbar-outer {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
     max-width: var(--content-max-width);
 }
 
 #searchbar {
     width: 100%;
-    margin: 5px auto 0px auto;
+    margin-block-start: 5px;
+    margin-block-end: 0;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
     padding: 10px 16px;
     transition: box-shadow 300ms ease-in-out;
     border: 1px solid var(--searchbar-border-color);
@@ -274,20 +346,23 @@ mark.fade-out {
 .searchresults-header {
     font-weight: bold;
     font-size: 1em;
-    padding: 18px 0 0 5px;
+    padding-block-start: 18px;
+    padding-block-end: 0;
+    padding-inline-start: 5px;
+    padding-inline-end: 0;
     color: var(--searchresults-header-fg);
 }
 
 .searchresults-outer {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
     max-width: var(--content-max-width);
-    border-bottom: 1px dashed var(--searchresults-border-color);
+    border-block-end: 1px dashed var(--searchresults-border-color);
 }
 
 ul#searchresults {
     list-style: none;
-    padding-left: 20px;
+    padding-inline-start: 20px;
 }
 ul#searchresults li {
     margin: 10px 0px;
@@ -300,7 +375,10 @@ ul#searchresults li.focus {
 ul#searchresults span.teaser {
     display: block;
     clear: both;
-    margin: 5px 0 0 20px;
+    margin-block-start: 5px;
+    margin-block-end: 0;
+    margin-inline-start: 20px;
+    margin-inline-end: 0;
     font-size: 0.8em;
 }
 ul#searchresults span.teaser em {
@@ -323,12 +401,14 @@ ul#searchresults span.teaser em {
     background-color: var(--sidebar-bg);
     color: var(--sidebar-fg);
 }
+[dir=rtl] .sidebar { left: unset; right: 0; }
 .sidebar-resizing {
     -moz-user-select: none;
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }
+.no-js .sidebar,
 .js:not(.sidebar-resizing) .sidebar {
     transition: transform 0.3s; /* Animation: slide away */
 }
@@ -348,16 +428,35 @@ ul#searchresults span.teaser em {
     position: absolute;
     cursor: col-resize;
     width: 0;
-    right: 0;
+    right: calc(var(--sidebar-resize-indicator-width) * -1);
     top: 0;
     bottom: 0;
+    display: flex;
+    align-items: center;
+}
+
+.sidebar-resize-handle .sidebar-resize-indicator {
+    width: 100%;
+    height: 12px;
+    background-color: var(--icons);
+    margin-inline-start: var(--sidebar-resize-indicator-space);
+}
+
+[dir=rtl] .sidebar .sidebar-resize-handle {
+    left: calc(var(--sidebar-resize-indicator-width) * -1);
+    right: unset;
 }
 .js .sidebar .sidebar-resize-handle {
     cursor: col-resize;
-    width: 5px;
+    width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
 }
-.sidebar-hidden .sidebar {
-    transform: translateX(calc(0px - var(--sidebar-width)));
+/* sidebar-hidden */
+#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
+    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
+    z-index: -1;
+}
+[dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
+    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
 }
 .sidebar::-webkit-scrollbar {
     background: var(--sidebar-bg);
@@ -366,19 +465,26 @@ ul#searchresults span.teaser em {
     background: var(--scrollbar);
 }
 
-.sidebar-visible .page-wrapper {
-    transform: translateX(var(--sidebar-width));
+/* sidebar-visible */
+#sidebar-toggle-anchor:checked ~ .page-wrapper {
+    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
+}
+[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
+    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
 }
 @media only screen and (min-width: 620px) {
-    .sidebar-visible .page-wrapper {
+    #sidebar-toggle-anchor:checked ~ .page-wrapper {
+        transform: none;
+        margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
+    }
+    [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
         transform: none;
-        margin-left: var(--sidebar-width);
     }
 }
 
 .chapter {
     list-style: none outside none;
-    padding-left: 0;
+    padding-inline-start: 0;
     line-height: 2.2em;
 }
 
@@ -408,7 +514,7 @@ ul#searchresults span.teaser em {
 .chapter li > a.toggle {
     cursor: pointer;
     display: block;
-    margin-left: auto;
+    margin-inline-start: auto;
     padding: 0 10px;
     user-select: none;
     opacity: 0.68;
@@ -425,7 +531,7 @@ ul#searchresults span.teaser em {
 
 .chapter li.chapter-item {
     line-height: 1.5em;
-    margin-top: 0.6em;
+    margin-block-start: 0.6em;
 }
 
 .chapter li.expanded > a.toggle div {
@@ -448,7 +554,7 @@ ul#searchresults span.teaser em {
 
 .section {
     list-style: none outside none;
-    padding-left: 20px;
+    padding-inline-start: 20px;
     line-height: 1.9em;
 }
 
@@ -468,7 +574,10 @@ ul#searchresults span.teaser em {
     padding: 0;
     list-style: none;
     display: none;
+    /* Don't let the children's background extend past the rounded corners. */
+    overflow: hidden;
 }
+[dir=rtl] .theme-popup { left: unset;  right: 10px; }
 .theme-popup .default {
     color: var(--icons);
 }
@@ -476,10 +585,10 @@ ul#searchresults span.teaser em {
     width: 100%;
     border: 0;
     margin: 0;
-    padding: 2px 10px;
+    padding: 2px 20px;
     line-height: 25px;
     white-space: nowrap;
-    text-align: left;
+    text-align: start;
     cursor: pointer;
     color: inherit;
     background: inherit;
@@ -488,8 +597,10 @@ ul#searchresults span.teaser em {
 .theme-popup .theme:hover {
     background-color: var(--theme-hover);
 }
-.theme-popup .theme:hover:first-child,
-.theme-popup .theme:hover:last-child {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
+
+.theme-selected::before {
+    display: inline-block;
+    content: "✓";
+    margin-inline-start: -14px;
+    width: 14px;
 }

css/general.css

@@ -5,6 +5,7 @@
 :root {
     /* Browser default font-size is 16px, this way 1 rem = 10px */
     font-size: 62.5%;
+    color-scheme: var(--color-scheme);
 }
 
 html {
@@ -12,6 +13,7 @@ html {
     color: var(--fg);
     background-color: var(--bg);
     text-size-adjust: none;
+    -webkit-text-size-adjust: none;
 }
 
 body {
@@ -21,8 +23,19 @@ body {
 }
 
 code {
-    font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important;
-    font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
+    font-family: var(--mono-font) !important;
+    font-size: var(--code-font-size);
+    direction: ltr !important;
+}
+
+/* make long words/inline code not x overflow */
+main {
+    overflow-wrap: break-word;
+}
+
+/* make wide tables scroll if they overflow */
+.table-wrapper {
+    overflow-x: auto;
 }
 
 /* Don't change font size in headers. */
@@ -36,13 +49,13 @@ h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
 .hide-boring .boring { display: none; }
 .hidden { display: none !important; }
 
-h2, h3 { margin-top: 2.5em; }
-h4, h5 { margin-top: 2em; }
+h2, h3 { margin-block-start: 2.5em; }
+h4, h5 { margin-block-start: 2em; }
 
 .header + .header h3,
 .header + .header h4,
 .header + .header h5 {
-    margin-top: 1em;
+    margin-block-start: 1em;
 }
 
 h1:target::before,
@@ -53,7 +66,7 @@ h5:target::before,
 h6:target::before {
     display: inline-block;
     content: "»";
-    margin-left: -30px;
+    margin-inline-start: -30px;
     width: 30px;
 }
 
@@ -62,29 +75,34 @@ h6:target::before {
    https://bugs.webkit.org/show_bug.cgi?id=218076
 */
 :target {
+    /* Safari does not support logical properties */
     scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
 }
 
 .page {
     outline: 0;
     padding: 0 var(--page-padding);
-    margin-top: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
+    margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
 }
 .page-wrapper {
     box-sizing: border-box;
+    background-color: var(--bg);
 }
+.no-js .page-wrapper,
 .js:not(.sidebar-resizing) .page-wrapper {
     transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
 }
+[dir=rtl] .js:not(.sidebar-resizing) .page-wrapper {
+    transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */
+}
 
 .content {
     overflow-y: auto;
-    padding: 0 15px;
-    padding-bottom: 50px;
+    padding: 0 5px 50px 5px;
 }
 .content main {
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
     max-width: var(--content-max-width);
 }
 .content p { line-height: 1.45em; }
@@ -134,14 +152,49 @@ blockquote {
     padding: 0 20px;
     color: var(--fg);
     background-color: var(--quote-bg);
-    border-top: .1em solid var(--quote-border);
-    border-bottom: .1em solid var(--quote-border);
+    border-block-start: .1em solid var(--quote-border);
+    border-block-end: .1em solid var(--quote-border);
 }
 
+.warning {
+    margin: 20px;
+    padding: 0 20px;
+    border-inline-start: 2px solid var(--warning-border);
+}
+
+.warning:before {
+    position: absolute;
+    width: 3rem;
+    height: 3rem;
+    margin-inline-start: calc(-1.5rem - 21px);
+    content: "ⓘ";
+    text-align: center;
+    background-color: var(--bg);
+    color: var(--warning-border);
+    font-weight: bold;
+    font-size: 2rem;
+}
+
+blockquote .warning:before {
+    background-color: var(--quote-bg);
+}
+
+kbd {
+    background-color: var(--table-border-color);
+    border-radius: 4px;
+    border: solid 1px var(--theme-popup-border);
+    box-shadow: inset 0 -1px 0 var(--theme-hover);
+    display: inline-block;
+    font-size: var(--code-font-size);
+    font-family: var(--mono-font);
+    line-height: 10px;
+    padding: 4px 5px;
+    vertical-align: middle;
+}
 
 :not(.footnote-definition) + .footnote-definition,
 .footnote-definition + :not(.footnote-definition) {
-    margin-top: 2em;
+    margin-block-start: 2em;
 }
 .footnote-definition {
     font-size: 0.9em;

css/print.css

@@ -7,8 +7,8 @@
 }
 
 #page-wrapper.page-wrapper {
-    transform: none;
-    margin-left: 0px;
+    transform: none !important;
+    margin-inline-start: 0px;
     overflow-y: initial;
 }
 
@@ -23,11 +23,7 @@
 }
 
 code {
-    background-color: #666666;
-    border-radius: 5px;
-
-    /* Force background to be printed in Chrome */
-    -webkit-print-color-adjust: exact;
+    direction: ltr !important;
 }
 
 pre > .buttons {

css/variables.css

@@ -3,9 +3,13 @@
 
 :root {
     --sidebar-width: 300px;
+    --sidebar-resize-indicator-width: 8px;
+    --sidebar-resize-indicator-space: 2px;
     --page-padding: 15px;
     --content-max-width: 750px;
     --menu-bar-height: 50px;
+    --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
+    --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */
 }
 
 /* Themes */
@@ -36,6 +40,8 @@
     --quote-bg: hsl(226, 15%, 17%);
     --quote-border: hsl(226, 15%, 22%);
 
+    --warning-border: #ff8e00;
+
     --table-border-color: hsl(210, 25%, 13%);
     --table-header-bg: hsl(210, 25%, 28%);
     --table-alternate-bg: hsl(210, 25%, 11%);
@@ -48,6 +54,8 @@
     --searchresults-border-color: #888;
     --searchresults-li-bg: #252932;
     --search-mark-bg: #e3b171;
+
+    --color-scheme: dark;
 }
 
 .coal {
@@ -67,7 +75,7 @@
 
     --links: #2b79a2;
 
-    --inline-code-color: #c5c8c6;;
+    --inline-code-color: #c5c8c6;
 
     --theme-popup-bg: #141617;
     --theme-popup-border: #43484d;
@@ -76,6 +84,8 @@
     --quote-bg: hsl(234, 21%, 18%);
     --quote-border: hsl(234, 21%, 23%);
 
+    --warning-border: #ff8e00;
+
     --table-border-color: hsl(200, 7%, 13%);
     --table-header-bg: hsl(200, 7%, 28%);
     --table-alternate-bg: hsl(200, 7%, 11%);
@@ -88,6 +98,8 @@
     --searchresults-border-color: #98a3ad;
     --searchresults-li-bg: #2b2b2f;
     --search-mark-bg: #355c7d;
+
+    --color-scheme: dark;
 }
 
 .light {
@@ -116,6 +128,8 @@
     --quote-bg: hsl(197, 37%, 96%);
     --quote-border: hsl(197, 37%, 91%);
 
+    --warning-border: #ff8e00;
+
     --table-border-color: hsl(0, 0%, 95%);
     --table-header-bg: hsl(0, 0%, 80%);
     --table-alternate-bg: hsl(0, 0%, 97%);
@@ -128,6 +142,8 @@
     --searchresults-border-color: #888;
     --searchresults-li-bg: #e4f2fe;
     --search-mark-bg: #a2cff5;
+
+    --color-scheme: light;
 }
 
 .navy {
@@ -147,7 +163,7 @@
 
     --links: #2b79a2;
 
-    --inline-code-color: #c5c8c6;;
+    --inline-code-color: #c5c8c6;
 
     --theme-popup-bg: #161923;
     --theme-popup-border: #737480;
@@ -156,6 +172,8 @@
     --quote-bg: hsl(226, 15%, 17%);
     --quote-border: hsl(226, 15%, 22%);
 
+    --warning-border: #ff8e00;
+
     --table-border-color: hsl(226, 23%, 16%);
     --table-header-bg: hsl(226, 23%, 31%);
     --table-alternate-bg: hsl(226, 23%, 14%);
@@ -168,6 +186,8 @@
     --searchresults-border-color: #5c5c68;
     --searchresults-li-bg: #242430;
     --search-mark-bg: #a2cff5;
+
+    --color-scheme: dark;
 }
 
 .rust {
@@ -196,6 +216,8 @@
     --quote-bg: hsl(60, 5%, 75%);
     --quote-border: hsl(60, 5%, 70%);
 
+    --warning-border: #ff8e00;
+
     --table-border-color: hsl(60, 9%, 82%);
     --table-header-bg: #b3a497;
     --table-alternate-bg: hsl(60, 9%, 84%);
@@ -208,6 +230,8 @@
     --searchresults-border-color: #888;
     --searchresults-li-bg: #dec2a2;
     --search-mark-bg: #e69f67;
+
+    --color-scheme: light;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -228,7 +252,7 @@
 
         --links: #2b79a2;
 
-        --inline-code-color: #c5c8c6;;
+        --inline-code-color: #c5c8c6;
 
         --theme-popup-bg: #141617;
         --theme-popup-border: #43484d;
@@ -237,6 +261,8 @@
         --quote-bg: hsl(234, 21%, 18%);
         --quote-border: hsl(234, 21%, 23%);
 
+        --warning-border: #ff8e00;
+
         --table-border-color: hsl(200, 7%, 13%);
         --table-header-bg: hsl(200, 7%, 28%);
         --table-alternate-bg: hsl(200, 7%, 11%);

custom.css

@@ -6,3 +6,8 @@
 ol.chapter > li:not(.chapter-item):last-child {
     visibility: hidden;
 }
+
+/* Smaller size of IFT logo. */
+img[src="./images/IFT_logo.png"] {
+    width: 15em;
+}

highlight.css

@@ -61,7 +61,6 @@
   overflow-x: auto;
   background: #f6f7f6;
   color: #000;
-  padding: 0.5em;
 }
 
 .hljs-emphasis {

searcher.js

@@ -316,7 +316,7 @@ window.search = window.search || {};
     
     // Eventhandler for keyevents on `document`
     function globalKeyHandler(e) {
-        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target.type === 'textarea' || e.target.type === 'text') { return; }
+        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target.type === 'textarea' || e.target.type === 'text' || !hasFocus() && /^(?:input|select|textarea)$/i.test(e.target.nodeName)) { return; }
 
         if (e.keyCode === ESCAPE_KEYCODE) {
             e.preventDefault();