modernize website

js/impress.js

@@ -8,7 +8,7 @@
  * in modern browsers and inspired by the idea behind prezi.com.
  *
  *
- * Copyright 2011-2012 Bartek Szopka (@bartaz), 2016-2023 Henrik Ingo (@henrikingo) 
+ * Copyright 2011-2012 Bartek Szopka (@bartaz), 2016-2023 Henrik Ingo (@henrikingo)
  * and 70+ other contributors
  *
  * Released under the MIT License.

website/css/docs/navstyle.css

@@ -1,5 +1,5 @@
 .nav-container {
-    background-color: blue;
+    background-color: var( --accent-background );
     width: 100%;
     height: 100vh;
 }
@@ -14,7 +14,7 @@
     display: none;
     font-size: 0.8rem;
     height: 100%;
-    background-color: rgb(27, 27, 165);
+    background-color: var( --dropdown-color );
 }
 
 .navitem {
@@ -23,8 +23,9 @@
     color: white;
     padding: 5%;
     width: 90%;
-    background-color: rgb(22, 22, 117);
+    background-color: var( --nav-buttons );
     font-size: 1rem;
+    transition: all 0.5s;
 }
 
 .nav-subitem {
@@ -35,5 +36,14 @@
     width: 70%;
     padding: 5%;
     padding-left: 25%;
-    background-color: rgb(27, 27, 165);
+    background-color: var( --dropdown-color );
+    transition: all 0.5s;
+}
+
+.nav-subitem:hover {
+    background-color: black;
+}
+
+.navitem:hover, .active {
+    background-color: black;
 }

website/css/docs/style.css

@@ -15,9 +15,45 @@ html, body {
     font-family: sans-serif;
 }
 
+:root, :root.light {
+    --primary-color: black;
+    --accent-background: rgb(25, 25, 148);
+    --accent-color: white;
+    --background-color: white;
+    --accent-background-hover: rgb(124, 140, 236);
+    --top-background: rgb(211, 211, 211);
+    --nav-buttons: rgb(1, 1, 109);
+    --dropdown-color: rgb(0, 0, 156);
+}
+
+:root.dark {
+    --primary-color: white;
+    --accent-background: rgb(0, 0, 88);
+    --accent-color: white;
+    --background-color: rgb(32, 32, 32);
+    --accent-background-hover: #4380a8;
+    --top-background: rgb(77, 77, 77);
+    --nav-buttons: rgb(0, 0, 36);
+    --dropdown-color: rgb(0, 0, 116);
+}
+
+@media ( prefers-color-scheme: dark ) {
+    :root {
+        --primary-color: white;
+        --accent-background: rgb(56, 56, 112);
+        --accent-color: white;
+        --background-color: rgb(46, 46, 46);
+        --accent-background-hover: #4380a8;
+        --top-background: rgb(77, 77, 77);
+        --nav-buttons: rgb(0, 0, 41);
+        --dropdown-color: rgb(0, 0, 116);
+    }
+}
+
 .content {
-    background-color: rgb(255, 255, 255);
+    transition: all 0.5s;
-    color: black;
+    background-color: var( --background-color );
+    color: var( --primary-color );
     display: grid;
     grid-template-areas:
         'menu header header header header'
@@ -33,7 +69,7 @@ html, body {
 }
 
 #doc-container a {
-    color: blue;
+    color: var( --primary-color );
 }
 
 .logo {

website/css/docs/topstyle.css

@@ -1,10 +1,11 @@
 .top-container {
-    background-color: rgb(223, 223, 223);
+    background-color: var( --top-background );
     height: 100%;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    transition: all 0.5s;
 }
 
 .top-wrapper {
@@ -19,4 +20,5 @@
     border-style: none;
     font-size: 1.5rem;
     cursor: pointer;
+    color: var( --primary-color );
 }

website/css/style.css

@@ -85,7 +85,7 @@ body {
 /* Buttons */
 .button {
     display: inline-block;
-    background-color: rgba(0, 128, 0, 1);
+    background-color: rgb(0, 128, 0);
     text-decoration: none;
     color: white;
     font-size: 1.2rem;
@@ -95,6 +95,12 @@ body {
     padding-top: 15px;
     padding-bottom: 15px;
     border-radius: 50px;
+    transition: all 0.5s;
+}
+
+.button:hover {
+    background-color: rgb(2, 88, 2);
+    border-radius: 5px;
 }
 
 

website/demo/examples/index.html

@@ -24,7 +24,7 @@
         <div id="navbar"></div>
         <div class="title">
             <div class="title-content">
-                <h1 class="heading">Examples</h1>
+                <h1 class="heading">Exam&shy;ples</h1>
             </div>
                 <ul class="list"><br>
                   <li class="button"><a class="list-element" href="2D-navigation/">2D-navigation</a></li>

website/docs/gettingStarted.html

@@ -28,9 +28,9 @@
 <p>Loading the script from the cdn is quite straight forward. If you copy the below example code, you need to do nothing else, impress will be loaded automatically.</p>
 <p><strong>Direct links to different versions of the impress.js file</strong></p>
 <ul>
-<li>V2.0.0: https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js</li>
+<li><a href="">V2.0.0</a></li>
-<li>V1.1.0: https://cdn.jsdelivr.net/gh/impress/impress.js@1.1.0/js/impress.js</li>
+<li><a href="">V1.1.0</a></li>
-<li>Source: https://cdn.jsdelivr.net/gh/impress/impress.js/js/impress.js</li>
+<li><a href="">Source</a></li>
 </ul>
 <h3>Download the file to your PC</h3>
 <p>Head to the releases tab and download the source code as zip or as a tarball. Go ahead and unzip / untar it. You need to copy the folder <em>/js/</em> into the folder you are working in. Optionally, if you want to make your life a bit easier, you can copy also copy the folder <em>/css/</em> in there.</p>

website/docs/nav.html

@@ -13,7 +13,7 @@
                     <a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
                     <a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a>
                     <div class="dropdown" id="reference">
-                        <a class="nav-subitem" id="root" href="/docs/reference">Home</a><a class="nav-subitem" id="CSS" href="/docs/reference/CSS.html">CSS</a><a class="nav-subitem" id="HTML" href="/docs/reference/HTML.html">HTML</a><a class="nav-subitem" id="JavaScript" href="/docs/reference/JavaScript.html">JavaScript</a><a class="nav-subitem" id="Plugins" href="/docs/reference/Plugins.html">Plugins</a></div>
+                        <a class="nav-subitem" id="reference-home" href="/docs/reference">Home</a><a class="nav-subitem" id="CSS" href="/docs/reference/CSS.html">CSS</a><a class="nav-subitem" id="HTML" href="/docs/reference/HTML.html">HTML</a><a class="nav-subitem" id="JavaScript" href="/docs/reference/JavaScript.html">JavaScript</a><a class="nav-subitem" id="Plugins" href="/docs/reference/Plugins.html">Plugins</a><a class="nav-subitem" id="index" href="/docs/reference/index.html">index</a></div>
                     <a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
                     <div class="dropdown" id="plugins">
                         <a class="nav-subitem" id="plugins-home" href="/docs/plugins">Home</a>

website/docs/src/build.js

@@ -27,19 +27,19 @@ const pluginsPath = path.join( __dirname + '/../../../src/plugins' );
 let plugins = fs.readdirSync( pluginsPath );
 delete plugins[0];
 
-if ( prompt( 'Do you want to regenerate the API reference? (y/n) ' ).toLowerCase() == 'y' ) {
+if ( prompt( 'Do you want to regenerate the API reference? (y/N) ' ).toLowerCase() == 'y' ) {
     console.log( 'Regenerating API reference' );
     parseDocumentationMD();
 }
 
-if ( prompt( 'Do you want to regenerate the getting started guide? (y/n) ' ).toLowerCase() == 'y' ) {
+if ( prompt( 'Do you want to regenerate the getting started guide? (y/N) ' ).toLowerCase() == 'y' ) {
     console.log( 'Regenerating Getting Started Guide' );
     storeHTML( generateGettingStarted( md2html.render( '' + fs.readFileSync( path.join( __dirname + '/../../../GettingStarted.md' ) ) ) ), 'gettingStarted', '' );
 }
 
 let docPages = fs.readdirSync( __dirname + '/../../../website/docs/reference' );
 
-if ( prompt( 'Do you want to regenerate the plugins documentation? (y/n) ' ).toLowerCase() == 'y' ) {
+if ( prompt( 'Do you want to regenerate the plugins documentation? (y/N) ' ).toLowerCase() == 'y' ) {
     console.log( 'regenerating plugins documentation' );
     let pluginsHome = md2html.render( fs.readFileSync( path.join( pluginsPath + '/README.md' ) ).toString() );
     
@@ -254,7 +254,7 @@ function generateNav () {
                     <a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
                     <a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a>
                     <div class="dropdown" id="reference">
-                        <a class="nav-subitem" id="root" href="/docs/reference">Home</a>`
+                        <a class="nav-subitem" id="reference-home" href="/docs/reference">Home</a>`
     for ( let item in docPages ) {
         if ( docPages[ item ] === 'index' ) {} else {
             fileStruct += `<a class="nav-subitem" id="${ docPages[ item ].slice( 0, docPages[ item ].length - 5 ) }" href="/docs/reference/${ docPages[ item ] }">${ docPages[ item ].slice( 0, docPages[ item ].length - 5 ) }</a>`;
@@ -478,7 +478,7 @@ function buildExamplesPage () {
         <div id="navbar"></div>
         <div class="title">
             <div class="title-content">
-                <h1 class="heading">Examples</h1>
+                <h1 class="heading">Exam&shy;ples</h1>
             </div>
                 ${ html_list }
                 </ul>

website/docs/top.html

@@ -7,7 +7,7 @@
     <body>
         <div class="top-container">
             <div class="top-wrapper">
-                <button onclick="toggleDarkMode();" id="darkToggle">&#9789;</button>
+                <button onclick="setTheme();" id="darkToggle">&#9789;</button>
             </div>
         </div>
     </body>

website/download.html

@@ -13,7 +13,7 @@
         <div id="navbar"></div>
         <div class="title">
             <div class="title-content">
-                <h1 class="heading">Download impress.js</h1>
+                <h1 class="heading">Down&shy;load imp&shy;ress.js</h1>
                 <h2 class="subheading">Ready to bring your presentations to the next level?</h2>
             </div>
             <div class="title-buttons">

website/index.html

@@ -18,7 +18,7 @@
         <div id="navbar"></div>
         <div class="title">
             <div class="title-content">
-                <h1 class="heading">impress.js</h1>
+                <h1 class="heading">imp&shy;ress.js</h1>
             </div>
             <div class="title-buttons">
                 <a class="button" id="demobutton" href="/demo/">Watch the demo</a>

website/js/docs/loader.js

@@ -4,67 +4,32 @@ theme = sessionStorage.getItem( 'theme' ) || getPreferredTheme();
 $( document ).ready( function () {
     $( '#nav' ).load( '/docs/nav.html' );
     $( '#top' ).load( '/docs/top.html' );
-    setTimeout( setTheme, 300 );
 } );
 
-
-
 // set theme on page load
+theme = localStorage.getItem( 'theme' ) ?? '';
+if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || theme === 'dark' ) {
+    document.documentElement.classList.add( 'dark' );
+    setTimeout( () => {
+        document.getElementById( 'darkToggle' ).innerHTML = '☼';
+    }, 300 );
+    localStorage.setItem( 'theme', 'dark' );
+} else {
+    document.documentElement.classList.add( 'light' );
+    localStorage.setItem( 'theme', 'light' );
+}
+
 function setTheme () {
-    if ( theme == 'dark' ) {
+    theme = localStorage.getItem( 'theme' ) ?? '';
-        document.getElementById( 'darkToggle' ).innerHTML = '☼';
+    if ( theme === 'dark' ) {
-        $( '.content' ).css( 'background-color', 'rgb(46, 46, 46)' );
-        $( '.top-container' ).css( 'background-color', 'rgb(100, 100, 100)' );
-        $( '.content' ).css( 'color', 'white' );
-        $( '.nav-subitem' ).css( 'background-color', 'rgb(18, 18, 99)' );
-        $( '.navitem' ).css( 'background-color', 'rgb(12, 12, 60)' );
-        $( '.nav-container' ).css( 'background-color', 'rgb(0, 0, 100)' );
-        $( '#doc-container a' ).css( 'color', 'white' );
-        $( '#darkToggle' ).css( 'color', 'white' );
-    }
-}
-
-// retreive preferred theme from browser preferences if not in session storage
-function getPreferredTheme () {
-    if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
-        setPreferredTheme( 'dark' );
-        return 'dark';
-    } else {
-        setPreferredTheme( 'light' );
-        return 'light';
-    };
-}
-
-// set theme in session storage
-function setPreferredTheme ( userTheme ) {
-    sessionStorage.setItem( 'theme', userTheme );
-    theme = userTheme;
-}
-
-// change theme
-function toggleDarkMode () {
-    if ( theme == 'light' ) {
-        $( '.content' ).animate( { 'background-color': 'rgb(46, 46, 46)' } );
-        $( '.content' ).animate( { 'color': 'white' } );
-        $( '#doc-container a' ).animate( { 'color': 'white' } );
-        $( '.top-container' ).animate( { 'background-color': 'rgb(100, 100, 100)' } );
-        $( '.nav-subitem' ).animate( { 'background-color': 'rgb(18, 18, 99)' } );
-        $( '.navitem' ).animate( { 'background-color': 'rgb(12, 12, 60)' } );
-        $( '.nav-container' ).animate( { 'background-color': 'rgb(0, 0, 100)' } );
-        $( '#darkToggle' ).animate( { 'color': 'white' } );
-        document.getElementById( 'darkToggle' ).innerHTML = '☼';
-        setPreferredTheme( 'dark' );
-    } else {
-        $( '.content' ).animate( { 'background-color': 'white' } );
-        $( '.content' ).animate( { 'color': 'black' } );
-        $( '#doc-container a' ).animate( { 'color': 'blue' } );
-        $( '.nav-subitem' ).animate( { 'background-color': 'rgb(27, 27, 165)' } );
-        $( '.navitem' ).animate( { 'background-color': 'rgb(22, 22, 117)' } );
-        $( '.nav-container' ).animate( { 'background-color': 'blue' } );
-        $( '.top-container' ).animate( { 'background-color': 'rgb(223, 223, 223)' } );
-        $( '#darkToggle' ).animate( { 'color': 'black' } );
         document.getElementById( 'darkToggle' ).innerHTML = '☽';
-        setPreferredTheme( 'light' );
+        document.documentElement.classList.remove( 'dark' );
+        document.documentElement.classList.add( 'light' );
+        localStorage.setItem( 'theme', 'light' );
+    } else if ( theme === 'light' ) {
+        document.getElementById( 'darkToggle' ).innerHTML = '☼';
+        document.documentElement.classList.remove( 'light' );
+        document.documentElement.classList.add( 'dark' );
+        localStorage.setItem( 'theme', 'dark' );
     }
-    setTimeout( highlightPath, 1000 ); 
 }

website/js/docs/nav.js

@@ -1,86 +1,23 @@
-let bannedIDs = [];
-
-function highlightPath () { 
-    if ( $( location ).attr( 'pathname' ).slice( 6, location.pathname.length ) === '' ) {
-        $( '#home' ).animate( { 'background-color': 'black' }, 200 );
-        bannedIDs.push( 'home' );
-    } else if ( $( location ).attr( 'pathname' ).slice( 6, location.pathname.length ) === 'gettingStarted.html' ) {
-        $( '#gettingStarted' ).animate( { 'background-color': 'black' }, 200 );
-        bannedIDs.push( 'gettingStarted' );
-    } else if ( $( location ).attr( 'pathname' ).slice( 6, 16 ) === 'reference/' ) {
-        $( '#referenceNav' ).animate( { 'background-color': 'black' }, 200 );
-        $( '#reference' ).slideDown();
-        bannedIDs.push( 'referenceNav' );
-        setTimeout( highlightSubPath( 16 ), 300 );
-    } else if ( $( location ).attr( 'pathname' ).slice( 6, 14 ) === 'plugins/' ) {
-        $( '#pluginsNav' ).animate( { 'background-color': 'black' }, 200 );
-        $( '#plugins' ).slideDown();
-        bannedIDs.push( 'pluginsNav' );
-        setTimeout( highlightSubPath( 14 ), 300 );
-    } else if ( $( location ).attr( 'pathname' ).slice( 6, 19 ) === 'contributing/' ) {
-        $( '#contributingNav' ).animate( { 'background-color': 'black' }, 200 );
-        $( '#contributing' ).slideDown();
-        bannedIDs.push( 'contributingNav' );
-        if ( $( location ).attr( 'pathname' ).length < 21 ) {
-            $( '#contributing-gettingStarted' ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 200 );
-            bannedIDs.push( 'contributing-gettingStarted' );
-        } else {
-            setTimeout( highlightSubPath( 19 ), 300 );
-        };
-    }
-};
-
-function highlightSubPath ( sliceStart ) {
-    if ( $( location ).attr( 'pathname' ).slice( sliceStart, parseInt( location.pathname.length ) - 5 ) === '' ) {
-        if ( $(location).attr( 'pathname' ).slice( 6, 13 ) === 'plugins' ) {
-            $( '#plugins-home' ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 200 );
-        } else {
-            $( '#root' ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 200 );
-        }
-        bannedIDs.push( 'root' );
-    } else {
-        $( `#${location.pathname.slice( sliceStart, parseInt( location.pathname.length ) - 5 )}` ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 200 );
-        bannedIDs.push( `${location.pathname.slice( sliceStart, parseInt( location.pathname.length ) - 5 )}` );
-    };
-}
-
-$( document ).ready( function () {
-    $( '.navitem' ).mouseenter( function () {
-        $( this ).stop();
-        $( this ).animate( { 'background-color': 'black' }, 100 );
-    } );
-
-    $( '.navitem' ).mouseleave( function () {
-        if ( !bannedIDs.includes( this.id ) ) {
-            if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
-                $( this ).stop();
-                $( this ).animate( { 'background-color': 'rgb(12, 12, 60)' }, 100 );
-            } else {
-                $( this ).stop();
-                $( this ).animate( { 'background-color': 'rgb(22, 22, 117)' }, 100 );
-            };
-        };
-    } );
-
-    $( '.nav-subitem' ).mouseenter( function () { 
-        $( this ).stop();
-        $( this ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 100 );
-    } );
-
-    $( '.nav-subitem' ).mouseleave( function () { 
-        if ( !bannedIDs.includes( this.id ) ) {
-            if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
-                $( this ).stop();
-                $( this ).animate( { 'background-color': 'rgb(18, 18, 99)' }, 100 );
-            } else {
-                $( this ).stop();
-                $( this ).animate( { 'background-color': 'rgb(27, 27, 165)' }, 100 );
-            };
-        };
-    } );
-    setTimeout( highlightPath, 300 );
-});
-
 function toggleList ( id ) {
     $( `#${id}` ).slideToggle();
-};
+};
+
+$( () => {
+    setTimeout( () => {
+        if ( location.pathname.substring( 6 ) === '' ) {
+            document.getElementById( 'home' ).classList.add( 'active' );
+        } else {
+            if ( location.pathname.substring( location.pathname.length - 1 ) === '/' ) {
+                document.getElementById( location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) + 'Nav' ).classList.add( 'active' );
+                document.getElementById( location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) + '-home' ).classList.add( 'active' );
+                $( '#' + location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) ).slideDown( 300 );
+            } else if( location.pathname.substring( 6 ).includes( '/' ) ) {
+                document.getElementById( location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) + 'Nav' ).classList.add( 'active' );
+                document.getElementById( location.pathname.substring( location.pathname.substring( 6 ).indexOf( '/' ) + 7, location.pathname.length - 5 ) ).classList.add( 'active' );
+                $( '#' + location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) ).slideDown( 300 );
+            } else {
+                document.getElementById( location.pathname.substring( 6, location.pathname.length - 5 ) ).classList.add( 'active' );
+            }
+        }
+    }, 300 );
+} );

website/js/index.js

@@ -1,15 +1,4 @@
 $( document ).ready( function () {
     $( '#navbar' ).load( '/nav.html' );
     $( '#footer' ).load( '/footer.html' );
-
-    $( document ).ready(function () {
-        $( '.button' ).mouseenter( function () {
-            $( this ).stop();
-            $( this ).animate( { 'background-color':'rgba(65, 211, 65, 1)', 'border-radius': '0px' }, 200 );
-        });
-        $( '.button' ).mouseleave( function () {
-            $( this ).stop();
-            $( this ).animate( { 'background-color':'rgba(0, 128, 0, 1)', 'border-radius': '500px' }, 200 );
-        });
-    });
 });