Add newer version of game.

_config.yml

@@ -20,6 +20,6 @@ minima:
 plugins:
 - jekyll-remote-theme
 header_pages:
+  - navigation/game.md
   - navigation/blog.md
-  - navigation/game2.html
   - navigation/search.html

_sass/minima/dracula/_dracula.scss

@@ -1,3 +1,4 @@
 @import "styles"; 
 @import "theme";
 @import "dark-mode"; 
+@import "light-mode"; 

_sass/minima/dracula/dark-mode.scss

@@ -1,109 +1,137 @@
-:root {
-    --default-canvas-filter: invert(100%);
-}
 
-$high-emph: rgba(white, 0.87);
-$med-emph: rgba(white, 0.69); 
-$low-emph: rgba(white, 0.38);
-$dark-grey : #121212; 
-// $dark-grey : #1F1B24;
-$overlay: mix($dark-grey, white, 95%);
-$overlay-light: mix($dark-grey, white, 86%);
-
-html, body, input, textarea, select, button {   
-  color: $high-emph !important;
-  background-color: $dark-grey !important;
-}
-
-a {
-    color: rgb(75, 186, 255) !important;
-}
-
-a:hover {
-    color:$high-emph !important;
-}
-
-.site-title, .site-title:visited, .site-nav, .page-link {
-    color: $high-emph !important;
-}
-
-.site-nav {
-    background-color: $dark-grey;
-    border-color: $overlay-light;
-}
-
-* {
-    scrollbar-color: $dark-grey $overlay-light;
-}
-
-pre, code {
-    // BVas a lighter colour to better highlight short code words
-    border-color: $overlay-light;
-    background-color: $overlay;
-}
-
-.page-description {
-    color: $med-emph;
-}
-
-.post-meta {
-    color: $low-emph;
-}
-
-.post-content p, .post-content li {
-    color: $med-emph;
-}
-
-.btn {
-    background-color: $overlay !important;
-    color: $high-emph !important;
-    border-color: $overlay-light !important;
-}
-
-.btn:hover {
-    background-color: $dark-grey !important;
-}
-
-table th{
-    background-color: $overlay;
-    border-color: $overlay-light;
-    color: $high-emph;
-}
-
-table td{
-    background-color: $dark-grey;
-    border-color: $overlay-light;
-    color: $med-emph;
-}
-
-.flash {
-    color: $dark-grey !important;
-    filter: brightness(80%);
-}
-
-canvas {
-    filter: var(--default-canvas-filter);
-}
-
-.post-list > li > div {
-    box-shadow: none !important;
-    background-color: $overlay;
-    border: none !important;
-}
-
-li .post-meta-description {
-    color: $med-emph !important;
-}
-
-.search-result-preview{
-    color: lightgray !important; 
-}
-
-.search-result-highlight {
-    color:yellow !important;
-    font-weight:bold !important;
-}
-
-.search-results-list-item .search-result-title {
-    color: cornflowerblue !important;
-}
+.dark-mode {  
+    background-color: black;
+
+    a {
+        color: rgb(75, 186, 255);
+    }
+
+    a:hover {
+        color: #7a7976;
+    }
+    .site-title, .site-title:visited, .site-nav, .page-link {
+        color: #FFFFFF;
+    }
+
+    .site-nav {
+        background-color: #000000;
+        border-color: #FFFFFF;
+    }
+
+    * {
+        scrollbar-color: #FFFFFF; 
+    }
+
+    pre, code {
+        // BVas a lighter colour to better highlight short code words
+        border-color: #FFFFFF;
+        background-color:#000000 ;
+    }
+
+    .page-description {
+        color: #FFFFFF
+    }
+
+    .post-meta {
+        color: #FFFFFF;
+    }
+
+    .post-content p, .post-content li {
+        color: #FFFFFF;
+    }
+
+    .btn {
+        background-color: #000000;
+        color: #FFFFFF;
+        border-color: #FFFFFF;
+    }
+
+    .btn:hover {
+        background-color: #7a7976;
+    }
+
+    table th{
+        background-color: #000000;
+        border-color: #FFFFFF;
+        color: #FFFFFF;
+    }
+
+    table td{
+        background-color: #000000;
+        border-color: #FFFFFF;
+        color: #FFFFFF;
+    }
+
+    .flash {
+        color: #5e5d5b;
+        filter: brightness(80%);
+    }
+
+    .post-list > li > div {
+        box-shadow: none;
+        background-color: #FFFFFF;
+        border: none;
+    }
+
+    li .post-meta-description {
+        color: #FFFFFF;
+    }
+
+    .search-result-preview{
+        color: #FFFFFF; 
+    }
+
+    .search-result-highlight {
+        color:yellow !important;
+        font-weight:bold !important;
+    }
+
+    .search-results-list-item .search-result-title {
+        color: cornflowerblue !important;
+    }
+
+    .button#startGame {
+        color:#FFFFFF;
+        background-color: #000000;
+    }
+
+    .leaderboard-button {
+        color:#FFFFFF;
+        background-color: #000000;
+    }
+
+    .input.userID {
+        background: #000000;
+    }
+
+    .table.levels {
+        background-color: #000000;
+    }
+
+    .sidebar {
+        color:#000000;
+        background-color: #FFFFFF;
+    }
+    .p {
+        color: #FFFFFF;
+    }
+
+    .submenu {
+        color: #FFFFFF;
+        background-color: #000000
+    }
+
+    .menu-icon {
+        color: #000000;
+    }
+
+    .div {
+        color:#000000;
+        background-color:#FFFFFF;
+    }
+    .container canvas {
+        /* Reset styles for canvases within .container */
+        background: none;
+        /* Add any other styles you want to reset */
+    }
+}

_sass/minima/dracula/light-mode.scss

@@ -0,0 +1,137 @@
+
+.light-mode {  
+    background-color: white;
+
+a {
+    color: rgb(75, 186, 255);
+}
+
+a:hover {
+    color: #7a7976;
+}
+.site-title, .site-title:visited, .site-nav, .page-link {
+    color: #000000;
+}
+
+.site-nav {
+    background-color: #FFFFFF;
+    border-color: #000000;
+}
+
+* {
+    scrollbar-color: #FFFFFF; 
+}
+
+pre, code {
+    // BVas a lighter colour to better highlight short code words
+    border-color: #000000;
+    background-color:#FFFFFF ;
+}
+
+.page-description {
+    color: #000000
+}
+
+.post-meta {
+    color: #000000;
+}
+
+.post-content p, .post-content li {
+    color: #000000;
+}
+
+.btn {
+    background-color: #FFFFFF;
+    color: #000000;
+    border-color: #000000;
+}
+
+.btn:hover {
+    background-color: #7a7976;
+}
+
+table th{
+    background-color: #FFFFFF;
+    border-color: #000000;
+    color: #000000;
+}
+
+table td{
+    background-color: #FFFFFF;
+    border-color: #000000;
+    color: #000000;
+}
+
+.flash {
+    color: #5e5d5b;
+    filter: brightness(80%);
+}
+
+.post-list > li > div {
+    box-shadow: none;
+    background-color: #FFFFFF;
+    border: none;
+}
+
+li .post-meta-description {
+    color: #000000;
+}
+
+.search-result-preview{
+    color: #000000; 
+}
+
+.search-result-highlight {
+    color:yellow;
+    font-weight:bold;
+}
+
+.search-results-list-item .search-result-title {
+    color: cornflowerblue;
+}
+
+.button#startGame {
+    color:#000000;
+    background-color: #FFFFFF;
+}
+
+.leaderboard-button {
+    color:#000000;
+    background-color: #FFFFFF;
+}
+
+.input.userID {
+    background: #FFFFFF
+}
+
+.table.levels {
+    background-color: #FFFFFF;
+}
+
+.sidebar {
+    color:#000000;
+    background-color: #FFFFFF;
+}
+.p {
+    color: #000000
+}
+
+.submenu {
+    color: #000000;
+    background-color: #FFFFFF
+}}
+
+.menu-icon {
+    color: #000000
+}
+
+.div {
+    color:#000000;
+    background-color:#FFFFFF;
+}
+
+.container canvas {
+    /* Reset styles for canvases within .container */
+    background: none;
+    /* Add any other styles you want to reset */
+}