Merge pull request #28 from MaskingTechnology/5-make-docs-mobile-frie…

…ndly 5 make docs mobile friendly
MaskingTechnology · Oct 28, 2022 · 576a29b · 576a29b
2 parents e85db81 + 1f16a41
commit 576a29b
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 14 deletions.
diff --git a/documentation/_includes/header.html b/documentation/_includes/header.html
@@ -1,3 +1,4 @@
+<div class="button">&#9776;</div>
 <div class="logo">
     <span class="name"><a href="https://jitar.dev">Jitar</a></span>
     <span class="title">| <a href="/">docs</a></span>

diff --git a/documentation/_layouts/default.html b/documentation/_layouts/default.html
@@ -19,6 +19,7 @@
   <link rel="stylesheet" href="/assets/css/syntax.css">
   <script src="/assets/libs/jquery.js"></script>
   <script type="module" src="/assets/libs/scrolling.js"></script>
+  <script type="module" src="/assets/libs/responsive.js"></script>
 </head>
 <body>
 <header>

diff --git a/documentation/assets/css/site.css b/documentation/assets/css/site.css
@@ -19,51 +19,66 @@
     --swatch-color-16: #7f6000;
     --swatch-color-17: #b7b7b7;
 
+    --font-weight-extra-light: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semi-bold: 600;
+    --font-weight-bold: 700;
+
     --layout-background-color: var(--swatch-color-1);
     --layout-border-color: var(--swatch-color-6);
     --layout-border-width: 1px;
     --layout-border-margin: 0;
     --layout-color: var(--swatch-color-4);
     --layout-font-family: 'Poppins', sans-serif;
     --layout-font-size: 16px;
-    --layout-font-weight: 200;
+    --layout-font-weight: var(--font-weight-light);
     --layout-header-height: 130px;
     --layout-padding-vertical: 50px;
     --layout-nav-width: 300px;
     --layout-padding-horizontal: 40px;
+    --layout-padding-horizontal-mobile: 30px;
 
     --header-background-color: var(--swatch-color-2);
+    --header-button-color: var(--swatch-color-7);
+    --header-button-font-size: 2.2em;
+    --header-button-line-height: 45px;
+    --header-button-margin: 0 15px 0 0;
     --header-logo-color: var(--swatch-color-7);
     --header-logo-name-font-size: 2.1em;
-    --header-logo-name-font-weight: 600;
+    --header-logo-name-font-weight: var(--font-weight-semi-bold);
     --header-logo-title-color: var(--swatch-color-7);
     --header-logo-title-font-size: 1.4em;
-    --header-logo-title-font-weight: 300;
+    --header-logo-title-font-weight: var(--font-weight-light);
     --header-logo-title-margin: 0 0 4px 10px;
     --header-margin: 0 0 50px 0;
     --header-padding: 15px var(--layout-padding-horizontal);
+    --header-padding-mobile: 15px var(--layout-padding-horizontal-mobile);
     --header-socials-color: var(--swatch-color-7);
     --header-socials-font-size: 1.5em;
     --header-socials-item-margin: 0 0 0 10px;
 
-    --nav-page-margin: 0 0 25px 0;
     --nav-padding: 0 var(--layout-padding-horizontal);
-    --nav-page-subject-color: VAR(--swatch-color-8);
-    --nav-page-subject-color-active: var(--swatch-color-4);
+    --nav-padding-mobile: 30px var(--layout-padding-horizontal-mobile) 0 var(--layout-padding-horizontal-mobile);
+    --nav-page-margin: 0 0 25px 0;
+    --nav-page-subject-color: var(--swatch-color-8);
+    --nav-page-subject-color-active: var(--swatch-color-2);
     --nav-page-subject-font-size: 1.1em;
-    --nav-page-subject-font-weight: 300;
+    --nav-page-subject-font-weight: var(--font-weight-light);
     --nav-page-subject-prefix-color: var(--swatch-color-6);
-    --nav-page-subject-prefix-color-active: var(--swatch-color-2);
+    --nav-page-subject-prefix-color-active: var(--swatch-color-12);
     --nav-page-subject-prefix-margin: 0 5px 0 0;
     --nav-page-title-color: var(--swatch-color-4);
     --nav-page-title-color-active: var(--swatch-color-5);
     --nav-page-title-font-size: 1.2em;
-    --nav-page-title-font-weight: 400;
+    --nav-page-title-font-weight: var(--font-weight-normal);
     --nav-page-title-margin: 0 0 10px 0;
+    --nav-top-mobile: 80px;
 
     --main-alert-padding: 20px;
     --main-alert-title-margin: 0 0 5px 0;
-    --main-alert-title-font-weight: 400;
+    --main-alert-title-font-weight: var(--font-weight-normal);
     --main-alert-danger-background-color: var(--swatch-color-9);
     --main-alert-danger-color: var(--swatch-color-10);
     --main-alert-danger-title-content: "Danger";
@@ -79,11 +94,11 @@
     --main-code-filename-background-color: var(--swatch-color-4);
     --main-code-filename-color: var(--swatch-color-3);
     --main-code-filename-font-size: 0.9em;
-    --main-code-filename-font-weight: 300;
+    --main-code-filename-font-weight: var(--font-weight-light);
     --main-code-filename-margin: 0 0 -16px 0;
     --main-code-filename-padding: 8px 16px;
     --main-heading-color: var(--swatch-color-12);
-    --main-heading-font-weight: 400;
+    --main-heading-font-weight: var(--font-weight-normal);
     --main-heading-margin: 30px 0 20px 0;
     --main-heading-prefix-color: var(--swatch-color-17);
     --main-heading-prefix-margin: 0 5px 0 0;
@@ -97,14 +112,15 @@
     --main-navigation-previous-title-content: "Previous";
     --main-navigation-previous-postfix-content: "« ";
     --main-padding: 0 80px 30px 80px;
+    --main-padding-mobile: 0 30px 30px 30px;
     --main-paragraph-margin: 0 0 20px 0;
     --main-separator-color: var(--swatch-color-3);
     --main-separator-height: 1px;
     --main-separator-margin: var(--layout-padding-horizontal) 0;
-    --main-strong-font-weight: 400;
+    --main-strong-font-weight: var(--font-weight-normal);
     --main-title-color: var(--swatch-color-4);
     --main-title-font-size: 2.0em;
-    --main-title-font-weight: 400;
+    --main-title-font-weight: var(--font-weight-normal);
     --main-title-margin: 0 0 30px 0;
     --main-ul-padding: 0 0 0 25px;
 }
@@ -158,6 +174,17 @@ header
     padding: var(--header-padding);
 }
 
+header .button
+{
+    color: var(--header-button-color);
+    display: none;
+    flex-grow: 0;
+    flex-shrink: 0;
+    font-size: var(--header-button-font-size);
+    line-height: var(--header-button-line-height);
+    margin: var(--header-button-margin);
+}
+
 header .logo
 {
     align-items: flex-end;
@@ -279,6 +306,7 @@ nav li a.active
 
 nav li a.active::before
 {
+    content: "»";
     color: var(--nav-page-subject-prefix-color-active);
 }
 
@@ -367,6 +395,7 @@ main hr
 main pre
 {
     padding: 20px;
+    overflow: auto;
 }
 
 main .alert-info
@@ -480,3 +509,53 @@ main .filename
     padding: var(--main-code-filename-padding);
     width: fit-content;
 }
+
+/*** RESPONSIVE ************************************************/
+
+/*
+ *  Mobile layout
+ */
+@media (max-width: 950px)
+{
+    body
+    {
+        grid-template-columns: auto;
+        grid-template-areas:
+            "header"
+            "main";
+    }
+
+    header
+    {
+        padding: var(--header-padding-mobile);
+    }
+
+    header .button
+    {
+        display: block;
+    }
+
+    nav
+    {
+        background-color: var(--layout-background-color);
+        border-right: 2px solid var(--layout-border-color);
+        bottom: 0;
+        display: none;
+        left: 0;
+        overflow: auto;
+        padding: var(--nav-padding-mobile);
+        position: absolute;
+        top: var(--nav-top-mobile);
+        width: auto;
+    }
+
+    section.separator
+    {
+        display: none;
+    }
+
+    main
+    {
+        padding: var(--main-padding-mobile);
+    }
+}
diff --git a/documentation/assets/libs/responsive.js b/documentation/assets/libs/responsive.js
@@ -0,0 +1,40 @@
+
+let $menu = undefined;
+let $button = undefined;
+
+function initialize()
+{
+    $menu = $('nav');
+    $button = $('header .button');
+
+    $button.on('click', toggleMenu);
+    $('nav a').on('click', closeMenu);
+}
+
+function isDisabled()
+{
+    return $button.css('display') === 'none';
+}
+
+function toggleMenu()
+{
+    $menu.css('display') === 'none' ? openMenu() : closeMenu();
+}
+
+function openMenu()
+{
+    if (isDisabled()) return;
+
+    $menu.css('display', 'block');
+    $button.html('&#10005;');
+}
+
+function closeMenu()
+{
+    if (isDisabled()) return;
+
+    $menu.css('display', 'none');
+    $button.html('&#9776;');
+}
+
+$(window).on('load', initialize);