Add themes; add favicon

index.css

@@ -2,8 +2,21 @@
   box-sizing: border-box;
 }
 
+:root{
+  --background: #333;
+  --margin: 5px;
+  --border_width: 2px;
+  --default_border_color: rgba(255,255,0,0.6);
+  --focused_border_color: rgba(255,0,0,0.6);
+  --floating_border_color: rgba(255,255,0,0.6);
+}
+
 html, body{ 
-  background-color: #333;
+  background: var(--background);
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
   color: #FFF;
   padding: 0;
   margin:0;
@@ -28,6 +41,7 @@ h1{
   z-index: 2;
   position: relative;
   margin-bottom: 4em;
+  border: var(--border_width) solid var(--floating_border_color);
   background-color: rgba(0,0,0,0.8);
   padding-left: 5vw;
   padding-top: 1em;
@@ -36,6 +50,19 @@ h1{
 }
 
 nav{
+  z-index: 3;
+  background: rgba(0,0,0,0.8);
+  border: var(--border_width) solid var(--floating_border_color);
+  padding: 0.5em;
+  border-radius: 4px;
+  position:fixed;
+  top: 0px;
+  right: 0px;
+}
+
+nav select{
+  height: 30px;
+  border-radius: 10px;
 }
 
 h2{
@@ -60,15 +87,23 @@ section {
 section {
   position: relative;
   z-index: 2;
-  border-right: 1px solid rgba(255,255,0,0.6);
+  /* To show everything, like the WM itself does */
+  left: var(--border_width);
+/*  border-right: 1px solid rgba(255,255,0,0.6);
   border-top: 1px solid rgba(255,255,0,0.6);
   border-bottom: 1px solid rgba(255,255,0,0.6);
+*/
+  border: var(--border_width) solid var(--default_border_color);
   margin: 3em 0;
   padding: 1em 5vw 1em 5vw;
   background-color: rgba(0,0,0,0.9);
   border-radius: 4px;
 }
 
+section:hover, h1:hover, nav:hover{
+  border: var(--border_width) solid var(--focused_border_color);
+}
+
 .screenshot{
   width: 49%;
 }

index.html

@@ -6,6 +6,13 @@
     <title>LeftWM - A tiling window manager for Adventurers</title>
     <link rel="stylesheet" type="text/css" href="index.css" >
 
+    <!-- Favicons -->
+    <link rel="shortcut icon" type="image/png" href="/logo.png"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-36670173-5"></script>
     <script>
@@ -25,12 +32,16 @@
     <h1>LeftWM - A tiling window manager for Adventurers</h1>
 
 		<nav>
+      <label for='theme'>Theme:&nbsp;&nbsp;&nbsp;</label>
+      <select id='theme' name='theme'>
+        <option value = 'default'>Default</option>
+      </select>
 		</nav>
 
     <article>
 
       <section>
-        <h2>Why go left</h2>
+        <h2>Why go left?</h2>
         <p>Left is a tiling window manager written in rust for stability and performance. The core of left is designed to do one thing and one thing well. Be a window manager. Because you probably want more than just a black screen LeftWM is built around the concept of theming. With themes you can choose between different bar / compositor / background / colors, whatever makes you happy.</p>
         <p>
           LeftWM has been built from the very beginning to support multiple screens and has been built around ultrawide monitors. You will see this with the default key bindings
@@ -74,6 +85,147 @@ <h3>Dual Display</h3>
     </article>
 
     <script type='text/javascript'>
+    let theme_element = document.getElementById("theme");
+    theme_element.addEventListener("change", updateTheme);
+
+    let themes = {
+  "orange-forest": {
+    "background": "https://raw.githubusercontent.com/PVautour/leftwm-theme-orange-forest/master/background.jpg",
+    "border_width": 4,
+    "margin": 10,
+    "default_border_color": "#1E272B",
+    "floating_border_color": "#1E272B",
+    "focused_border_color": "#78824B"
+  },
+  "soothe": {
+    "background": "https://raw.githubusercontent.com/b4skyx/leftwm-soothe/master/theme/background.jpg",
+    "border_width": 1,
+    "margin": 4,
+    "default_border_color": "#8a76c2",
+    "floating_border_color": "#8dace3",
+    "focused_border_color": "#746acc"
+  },
+  "tng": {
+    "background": "https://raw.githubusercontent.com/lex148/leftwm-tng/master/background.jpg",
+    "border_width": 10,
+    "margin": 20,
+    "default_border_color": "#9797cb",
+    "floating_border_color": "#9797cb",
+    "focused_border_color": "#fdcc66"
+  },
+  "windows-xp": {
+    "background": "https://raw.githubusercontent.com/lex148/leftwm-windowsxp/master/wallpaper.jpg",
+    "border_width": 3,
+    "margin": 20,
+    "default_border_color": "#122932",
+    "floating_border_color": "#2a4d73",
+    "focused_border_color": "#2a4d73"
+  },
+  "dracula-rounded": {
+    "background": "https://raw.githubusercontent.com/AethanFoot/leftwm-theme-dracula-rounded/master/background.jpg",
+    "border_width": 2,
+    "margin": [
+      8,
+      8
+    ],
+    "default_border_color": "#bd93f9",
+    "floating_border_color": "#bd93f9",
+    "focused_border_color": "#ff79c6"
+  },
+  "forest": {
+    "background": "https://raw.githubusercontent.com/lex148/forest/master/background.jpg",
+    "border_width": 5,
+    "margin": 20,
+    "default_border_color": "#222222",
+    "floating_border_color": "#005500",
+    "focused_border_color": "#FFB53A"
+  },
+  "ground-zero": {
+    "background": "https://raw.githubusercontent.com/Qwart376/Ground-Zero/master/background.jpg",
+    "border_width": 2,
+    "margin": 10,
+    "default_border_color": "#3d3b3c",
+    "floating_border_color": "#3d3b3c",
+    "focused_border_color": "#2cb8b5"
+  },
+  "red-moon": {
+    "background": "https://raw.githubusercontent.com/Qwart376/Red-Moon/master/background.jpg",
+    "border_width": 2,
+    "margin": 10,
+    "default_border_color": "#3b3f40",
+    "floating_border_color": "#3b3f40",
+    "focused_border_color": "#b44e4c"
+  },
+  "blue-coffee": {
+    "background": "https://raw.githubusercontent.com/Qwart376/Blue-Coffee/master/background.jpg",
+    "border_width": 0,
+    "margin": 0,
+    "default_border_color": "#15304e",
+    "floating_border_color": "#15304e",
+    "focused_border_color": "#4d5a8a"
+  },
+  "sunflower": {
+    "background": "https://raw.githubusercontent.com/mautamu/leftwm-sunflower/master/background.jpg",
+    "border_width": 4,
+    "margin": [
+      10,
+      10
+    ],
+    "default_border_color": "#df6d26",
+    "floating_border_color": "#df6d26",
+    "focused_border_color": "#fba914"
+  },
+  "bumblebee": {
+    "background": "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
+    "border_width": 2,
+    "margin": 6,
+    "default_border_color": "#4A433D",
+    "floating_border_color": "#E6E5E5",
+    "focused_border_color": "#FFD000"
+  },
+  "changed-sunset": {
+    "background": "https://raw.githubusercontent.com/Syudagye/changed-sunset/master/background.jpg",
+    "border_width": 1,
+    "margin": 4,
+    "default_border_color": "#1e1e1e",
+    "floating_border_color": "#e2c08c",
+    "focused_border_color": "#b27e23"
+  },
+  "garden": {
+    "background": "https://raw.githubusercontent.com/taylor85345/leftwm-theme-garden/master/background.jpg",
+    "border_width": 1,
+    "margin": [
+      8,
+      8
+    ],
+    "default_border_color": "#F48FB1",
+    "floating_border_color": "#F1FF52",
+    "focused_border_color": "#53E2AE"
+  }
+};
+
+for(var key in themes){
+  theme_element.innerHTML += "<option value="+key+">"+key+"</option>";
+}
+
+let root = document.documentElement;
+
+    function updateTheme(){
+      if(theme_element.value == 'default'){
+      root.style.setProperty('--background', "#333");
+      root.style.setProperty('--margin', "5px");
+      root.style.setProperty('--border_width', "2px");
+      root.style.setProperty('--default_border_color', "rgba(255,255,0,0.6)");
+      root.style.setProperty('--focused_border_color', "rgba(255,0,0,0.6)");
+      root.style.setProperty('--floating_border_color', "rgba(255,255,0,0.6)");
+      } 
+      root.style.setProperty('--background', "url(" + themes[theme_element.value].background+") no-repeat center center fixed");
+      root.style.setProperty('--margin', themes[theme_element.value].margin+"px");
+      root.style.setProperty('--border_width', themes[theme_element.value].border_width+"px");
+      root.style.setProperty('--default_border_color', themes[theme_element.value].default_border_color);
+      root.style.setProperty('--focused_border_color', themes[theme_element.value].focused_border_color);
+      root.style.setProperty('--floating_border_color', themes[theme_element.value].floating_border_color);
+    }
     </script>
 
   </body>

site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}