Merge pull request #15 from Amarok24/tablet-fix

light/dark mode switch, tablet optimisations, other SCSS improvements

README.md

@@ -8,6 +8,7 @@ Demo: https://amarok24.github.io/template-bootstrap-sass/
 - Accessible via keyboard: use "ESC" to open the navigation, "TAB" to switch between sections, "ENTER" for action
 - Optimised for fast loading
 - [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) results: mobile 94%, desktop 99%
+- Basic setup for switching between light/dark mode implemented
 
 ## Project use
 Click the "Use this template" button on the GitHub page to create your own copy directly in GitHub.

assets/scripts/appendix.js

@@ -10,11 +10,13 @@ const youtubeVideoId = 'LaKT3pli5EQ';
 const videoCssId = 'customVideo';
 
 const navBarCustomCssClass = 'navbar-js';
-const pageNavWrapper = document.querySelector('#navbarMain');
-const pageNavAnchors = document.querySelectorAll('#navbarMain a');
+const elemPageNav = document.querySelector('#pageNav');
+const elemNavbarCollapsible = document.querySelector('#navbarCollapsible');
+const elemNavAnchors = document.querySelectorAll('#navbarCollapsible a');
 const elemVideoModal = document.querySelector('#videoModal');
 const elemPlayButton = document.querySelector('.play-button');
 const elemScrollToTop = document.querySelector('#arrowScrollToTop');
+const elemToggleLightDarkMode = document.querySelector('#toggleLightDarkMode');
 
 const intersectApiSupported = (
   'IntersectionObserver' in window &&
@@ -58,22 +60,22 @@ if (elemVideoModal && elemPlayButton) {
 }
 
 
-if (pageNavWrapper && pageNavAnchors) {
-  //bsPageNav = new bootstrap.Collapse(pageNavWrapper, {toggle: false});
+if (elemNavbarCollapsible && elemNavAnchors) {
+  //bsPageNav = new bootstrap.Collapse(elemNavbarCollapsible, {toggle: false});
   // 'toggle:false' means it should not be toggled (opened) upon creation.
-  bsPageNav = bootstrap.Collapse.getOrCreateInstance(pageNavWrapper, { toggle: false });
+  bsPageNav = bootstrap.Collapse.getOrCreateInstance(elemNavbarCollapsible, { toggle: false });
 
   function toggleHamburger() {
     if (bsPageNav) bsPageNav.toggle();
-    pageNavAnchors[0].focus();
+    elemNavAnchors[0].focus();
   }
 
   function closeHamburger() {
     if (bsPageNav) bsPageNav.hide();
   }
 
-  for (let i = 0; i < pageNavAnchors.length; i++) {
-    pageNavAnchors[i].addEventListener('click', closeHamburger);
+  for (let i = 0; i < elemNavAnchors.length; i++) {
+    elemNavAnchors[i].addEventListener('click', closeHamburger);
   }
 
   document.addEventListener('keyup', function (ev) {
@@ -153,12 +155,40 @@ function onPlayerReady(ev) {
 
 
 function handleVisibilityChange() {
-  if (youtubePlayer && document.visibilityState === "hidden") {
+  if (youtubePlayer && document.visibilityState === 'hidden') {
     youtubePlayer.pauseVideo();
   }
 }
 
 
+function toggleLightDarkMode(ev) {
+  ev.preventDefault();
+  ev.stopPropagation();
+
+  let isDarkMode = false;
+  const modeDataNow = document.body.dataset.darkmode;
+  if (!modeDataNow) return;
+
+  isDarkMode = modeDataNow === "0" ? false : true;
+
+  if (isDarkMode) {
+    console.log('Switching to light mode');
+    document.body.dataset.darkmode = '0';
+    elemPageNav.classList.remove('navbar-dark');
+    elemPageNav.classList.add('navbar-light');
+  } else {
+    console.log('Switching to dark mode');
+    document.body.dataset.darkmode = '1';
+    elemPageNav.classList.remove('navbar-light');
+    elemPageNav.classList.add('navbar-dark');
+  }
+}
+
+
 if (intersectApiSupported) launchObserver();
 
-document.addEventListener("visibilitychange", handleVisibilityChange, false);
+if (elemToggleLightDarkMode && elemPageNav) {
+  elemToggleLightDarkMode.addEventListener('click', toggleLightDarkMode);
+}
+
+document.addEventListener('visibilitychange', handleVisibilityChange, false);

index.html

@@ -18,32 +18,38 @@
 
   <link rel="stylesheet" href="assets/css/style.css" />
 
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" />
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" />
 
   <script src="assets/scripts/bootstrap.bundle.min.js" defer="defer"></script>
   <script src="assets/scripts/appendix.js" defer="defer"></script>
   <script src="assets/scripts/smoothscroll-polyfill.min.js" defer="defer">
-  /* Polyfill for Safari browser */ </script>
+    /* Polyfill for Safari browser */</script>
 </head>
 
-<body id="home" data-bs-spy="scroll" data-bs-target="#pageNav" data-bs-offset="150">
+<body id="home" data-darkmode="0" data-bs-spy="scroll" data-bs-target="#pageNav"
+  data-bs-offset="150">
 
+  <!-- To use a dark navbar directly (without user interaction) simply change data-darkmode to "1" and also change the classname below to navbar-dark  -->
 
   <nav id="pageNav" class="navbar navbar-expand-lg fixed-top navbar-light">
 
     <div class="container-md">
       <a class="navbar-brand" href="#">
-        <img src="assets/img/dummy_logo.svg" alt="Dummy Logo" width="227" height="49" />
+        <!-- 2 logo versions, the 2nd one is for darkmode. Delete it if not needed. -->
+        <img src="assets/img/dummy_logo.svg" alt="Company logo" width="227" height="49" />
+        <img src="assets/img/dummy_logo_white.svg" alt="Company logo" width="227"
+          height="49" />
       </a>
 
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-        data-bs-target="#navbarMain" aria-controls="navbarMain"
-        aria-expanded="false" aria-label="Toggle navigation">
+        data-bs-target="#navbarCollapsible" aria-controls="navbarCollapsible" aria-expanded="false"
+        aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarMain">
-        <ul class="navbar-nav ms-auto">
+      <div class="collapse navbar-collapse" id="navbarCollapsible">
+        <ul class="navbar-nav ms-auto fw-bold">
           <li class="nav-item">
             <a class="nav-link" aria-current="page" href="#home">Home</a>
           </li>
@@ -67,7 +73,7 @@
 
 
   <header class="bg-secondary header-image">
-    <div class="header-text px-4 py-3 p-md-5">
+    <div class="header-text px-4 py-3 p-md-4 p-lg-5">
       <h1 class="display-1 mb-2">
         Lorem ipsum
       </h1>
@@ -365,7 +371,8 @@ <h3 class="display-5 text-center">Careers</h3>
           class="jobsearch-data-pagination mt-5">
           <ul class="pagination justify-content-center">
             <li class="page-item disabled">
-              <a class="page-link pageSkip" href="#" aria-label="Previous page" title="Previous page">
+              <a class="page-link pageSkip" href="#" aria-label="Previous page"
+                title="Previous page">
                 <span aria-hidden="true">&laquo;</span>
               </a>
             </li>
@@ -450,7 +457,12 @@ <h2 class="display-6">display-6</h2>
           provident nostrum iure commodi odit sequi minima dolores reprehenderit
           explicabo.<br />
           <br />
-          GitHub repository of this starter template: <a href="https://github.com/Amarok24/template-bootstrap-sass">https://github.com/Amarok24/template-bootstrap-sass</a>
+          GitHub repository of this starter template: <a
+            href="https://github.com/Amarok24/template-bootstrap-sass">https://github.com/Amarok24/template-bootstrap-sass</a>
+          <br /><br />
+          <div class="themeSwitch" aria-hidden="true">
+            <a href="#" id="toggleLightDarkMode">Toggle light/dark mode</a>
+          </div>
         </div>
         <div class="col-lg-4 text-end social-icons">
           <a href="#">
@@ -498,7 +510,7 @@ <h2 class="display-6">display-6</h2>
 
       <div class="text-start text-lg-end logo-footer">
         <a href="#" target="_blank">
-          <img src="assets/img/dummy_logo_footer.svg" alt="Dummy Company" width="227"
+          <img src="assets/img/dummy_logo_white.svg" alt="Company logo" width="227"
             height="49" />
         </a>
       </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "template-bootstrap-sass",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "description": "An optimised starter template for Bootstrap and Sass.",
   "license": "The Unlicense",
   "browser": true,

scss/_custom.scss

@@ -1,5 +1,5 @@
-@use 'palette' as *;
-@use 'media';
+@use "palette" as *;
+@use "media";
 
 // CUSTOM Bootstrap variables:
 
@@ -14,11 +14,12 @@ $spacers: (
   3: $spacer,
   4: $spacer * 1.5,
   //5: $spacer * 3,
-  5: $spacer * 3.75, // 3.75 because of anchor scroll on mobile
+  5: $spacer * 3.75,
+  // 3.75 because of anchor scroll on mobile
   6: $spacer * 5,
   7: $spacer * 7.5,
   8: $spacer * 10.5,
-  9: $spacer * 14
+  9: $spacer * 14,
 );
 
 $primary: $cBrandPrimary;
@@ -41,17 +42,28 @@ $display-font-sizes: (
 $display-font-weight: 400;
 $display-line-height: 1;
 
+
 $navbar-light-color: $cBrandSecondary;
 $navbar-light-hover-color: $cBrandSecondary;
 $navbar-light-active-color: $cBrandSecondary;
 $navbar-light-disabled-color: silver;
-$navbar-light-brand-color: $cBrandSecondary;
-$navbar-light-brand-hover-color: inherit;
+$navbar-light-toggler-icon-bg: none;
+$navbar-light-toggler-border-color: rgba($cBrandSecondary, 0.2);
+
+$navbar-dark-color: silver;
+$navbar-dark-hover-color: silver;
+$navbar-dark-active-color: silver;
+$navbar-dark-disabled-color: rgba(rgb(124, 88, 88), 0.25);
+$navbar-dark-toggler-icon-bg: none;
+$navbar-dark-toggler-border-color: rgba(white, 0.3);
+
+$navbar-nav-link-padding-x: 1rem;
+
 $btn-border-radius: 0;
 $btn-padding-x: 1.6em;
 $btn-padding-y: 0.8em;
 //$btn-hover-bg-shade-amount: 15%,
-$btn-hover-bg-tint-amount:  30%;
+$btn-hover-bg-tint-amount: 30%;
 $form-label-color: $cTextDark;
 $form-select-border-color: $cButton2;
 $input-border-color: $cButton2;

scss/_media.scss

@@ -1,13 +1,27 @@
 // Images and media-query helpers.
 
 @use "sass:map";
+@use "sass:color";
 
 $imgHeaderMobile: '../../assets/img/header_1200x600.webp';
 $imgHeaderDesktop: '../../assets/img/header_1920x800.jpg';
 $imgHeaderDesktop2: '../../assets/img/header_1920x800.webp';
 
-$iconHamburger: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(90, 90, 90)" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>';
-$iconHamburgerCollapsed: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="rgb(90, 90, 90)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>';
+@mixin menuIconOpened($fillColor) {
+  $r: color.red($fillColor);
+  $g: color.green($fillColor);
+  $b: color.blue($fillColor);
+  $o: color.opacity($fillColor);
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgba(#{$r},#{$g},#{$b},#{$o})" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>');
+}
+
+@mixin menuIconCollapsed($strokeColor) {
+  $r: color.red($strokeColor);
+  $g: color.green($strokeColor);
+  $b: color.blue($strokeColor);
+  $o: color.opacity($strokeColor);
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="rgba(#{$r},#{$g},#{$b},#{$o})" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>');
+}
 
 // Use default breakpoints or adapt to your own needs.
 // See also https://getbootstrap.com/docs/5.0/layout/breakpoints/

scss/_palette.scss

@@ -6,8 +6,8 @@ $cBrandTertiary: #278078;
 $cButton1: $cBrandPrimary;
 $cButton2: #0b6cb6;
 
-$cBackground1: $cBrandSecondary;
-$cBackground2: $cBrandTertiary;
+$cBackgroundLight: $cBrandSecondary;
+$cBackgroundDark: rgb(43, 43, 43);
 
 $cTextLight: #eaf1f5;
 $cTextDark: #404040;

scss/sections/_content.scss

@@ -18,7 +18,7 @@ body {
   position: relative; // Needed for Bootstrap's ScrollSpy.
   color: $cTextDark;
   background-color: white;
-  padding-top: 65px;
+  padding-top: 63px;
 }
 
 #arrowScrollToTop {