+[[!img images/screen.png link="images/screen.png" alt="awesome screenshot"]]
+
+
+
# Concepts
A window manager is probably one of the most used software applications in
@@ -39,7 +48,7 @@ window manager.
* Very stable, fast and small codebase and footprint.
* First window manager using the asynchronous [XCB](http://xcb.freedesktop.org)
library instead of the old, synchronous
- [Xlib](http://en.wikipedia.org/wiki/Xlib), which makes **awesome** less
+ [Xlib](http://en.wikipedia.org/wiki/Xlib), which makes **awesome** less
subject to latency compared to other window managers.
* Documented source code and API.
* No mouse needed: everything can be performed with the keyboard.
diff --git a/local.css b/local.css
deleted file mode 100644
index d870935..0000000
--- a/local.css
+++ /dev/null
@@ -1,312 +0,0 @@
-/* Styles for https://awesomewm.org/
- * Source: https://github.com/awesomeWM/awesome-www
- * Originally created by Devit Schizoper (01.12.2006)
- */
-
-body {
- font-family: Verdana, Arial, sans-serif;
- font-size: 0.8em;
- margin: 0;
- width: 100%;
-}
-
-p {
- margin: 11px 0 10px 0;
- padding: 0;
- text-align: justify;
-}
-
-ul {
- list-style-image: url(images/bullet.gif);
- margin:0;
- padding:0;
-}
-
-h1 {
- color: #3f4c4b;
-}
-
-a {
- color: #006699;
-}
-
-ul.active-menu-about li.menu-about,
-ul.active-menu-download li.menu-download,
-ul.active-menu-community li.menu-community,
-ul.active-menu-recipes li.menu-recipes,
-ul.active-menu-screenshots li.menu-screenshots,
-ul.active-menu-doc li.menu-doc {
- text-decoration: underline;
-}
-
-a:hover {
- text-decoration: none;
-}
-
-blockquote{
- background: #F7FDE3;
- color: #606060;
- padding: 10px;
-}
-
-/**** Main Container ***/
-
-#wrap {
- height: 100%;
- width: 100%;
-}
-
-
-/**** Top ***/
-
-#top {
- display: inline-block;
- font-size: 1.0em;
- margin-left: 0;
- overflow:hidden;
- width: 100%;
-}
-
-#top h2 {
- display:block;
- float:left;
- font-size: 3.0em;
- font-weight: bold;
- letter-spacing: 3px;
- margin-right: 20px;
- position: relative;
- top: 5px;
-}
-
-#top h2 a {
- text-decoration: none;
-}
-
-#top h2 a:hover {
- color: black;
-}
-
-/**** Center Logo ****/
-
-#center-logo img {
- margin-left: 40%;
- padding-top: 20px;
- width: 20%;
-}
-
-/**** Main Menu ***/
-
-#menu {
- display: inline-block;
- height: 50px;
- width: 100%;
-}
-
-#menu ul {
- display: flex;
- justify-content: center;
- overflow: auto;
- width: 100%;
-}
-
-#menu ul {
- float: right;
-}
-
-#menu ul {
- list-style: none;
-}
-
-#menu li {
- display: block;
- float: left;
-}
-
-#menu li a {
- display: block;
- font-size: 0.99em;
- font-weight: bold;
- padding: 20px 15px 50px 15px;
- text-decoration: none;
-}
-
-* html #menu a {width:1%;}
-
-#menu li a:hover {
- color: black;
-}
-
-#menu li a.current {
- color: gray;
- letter-spacing: 1px;
-}
-
-/**** Content Container ***/
-
-#content {
- width: 100%;
-}
-
-#content h1 {
- margin: 0;
- padding: 10px 0 10px 0;
-}
-
-#content h2 {
- margin: 0;
- padding: 10px 0 10px 0;
-}
-
-
-/**** Content ***/
-
-.screenshot {
- margin: 32px 32px 32px 32px;
- text-align: center;
-}
-.screenshot img {
- border: 2px solid #347272;
-}
-
-.screenshot p {
- padding-left: 80px;
-}
-
-#left ul {
- margin:0;
- padding: 15px 0 15px 35px;
-}
-
-#left li {
- margin-bottom:5px;
-}
-
-#left {
- display: block;
- display: inline;
- float:left;
- margin-left: 20%;
- width: 60%;
-}
-
-
-/**** Sidebar ***/
-
-#right {
- display:block;
- float: right;
- margin-top: 10px;
- width: 0px;
-}
-
-#right .box {
- background: #F6F9FB;
- border: 1px solid #E1E1E1;
- float: right;
- padding:10px 10px 15px 10px;
- width: 24em;/*280px*/
-}
-
-#right .box h2 {
- font-size: 1.1em;
- margin: 0 0 0 0;
- padding: 0 0 5px 0;
-}
-
-#right .box a {
- font-size: 10px;
- margin: 10px 0 10px 0;
-}
-
-#right .box p {
- line-height: 15px;
- margin: 5px 0 10px 0;
-}
-
-#right .box ul {
- margin:10px 0 10px 0;
- padding: 0 0 7px 20px;
-}
-
-#right .box li {
- margin-top:5px;
-}
-
-#nav {
- float: right;
- list-style: none;
- margin: 2.0em 0;
- width: 25em;
-}
-#nav li {
- padding: 0;
- margin: 0;
-}
-#nav a {
- background-color: #F7F9FB;
- border-bottom: 2px;
- border-top: 2px;
- display: block;
- font-weight: bold;
- height: 2.0em;
- padding: 0.3em 0.3em 0.3em 0.8em;
- text-decoration: none;
-}
-
-#nav a:hover{
- background: url(images/bg_t.gif) no-repeat;
- background-color: #fff;
- color: #1a1a1a;
- font-weight: bold;
-}
-
-/**** Clear Div ***/
-
-#clear {
- clear: both;
- display: block;
- height:1px;
- overflow:hidden;
- width: 100%;
-}
-
-
-/**** Footer ***/
-
-#pageinfo {
- border-top: 0;
- margin: 0 0;
-}
-
-#footer {
- border-top: dashed 1px gray;
- margin: 40px auto 0 auto;
- padding: 20px 0 20px 0;
- text-align: center;
- width: 70%;
-}
-
-#footer p {
- margin: 0;
- padding: 0;
-}
-
-#donate {
- margin: 1em 0;
- text-align: center;
-}
-#donate p, #donate div {
- text-align: center;
-}
-
-.standout {
- font-size:larger;
- font-weight:bold;
- color: #A94442;
-}
-
-.standout a {
- color: red;
-}
-
-/* vim: set sw=2 et: */
diff --git a/script/dark-light-mode-switch.js b/script/dark-light-mode-switch.js
new file mode 100644
index 0000000..c637122
--- /dev/null
+++ b/script/dark-light-mode-switch.js
@@ -0,0 +1,51 @@
+const checkbox = document.querySelector("input[type='checkbox']");
+const mode_switch_icon = document.querySelector(".mode-switch-icon");
+
+// configure and set correct state of theme checkbox
+checkbox.checked = siteVars['theme_active'] == 'dark'
+checkbox.addEventListener("click", () => {
+ theme_switch();
+ set_theme_checkbox();
+});
+
+set_theme_checkbox();
+
+// apply specific styling after page reload
+document.getElementById('navbar').classList.add("topBotomBordersOut");
+
+// set correct state of dark/light theme mode
+function set_theme_checkbox() {
+ if (checkbox.checked) {
+ mode_switch_icon.classList.add("mode-switch-dark");
+ mode_switch_icon.classList.remove("mode-switch-light");
+ } else {
+ mode_switch_icon.classList.add("mode-switch-light");
+ mode_switch_icon.classList.remove("mode-switch-dark");
+ }
+}
+
+// switch dark/light mode and store the state to local storage
+function theme_switch() {
+ if (siteVars['theme_active'] == 'light') {
+ siteVars['theme_active'] = siteVars['theme_forced'] = 'dark';
+
+ document.getElementById('css-darkmode').setAttribute('media', 'all');
+ document.getElementById('css-darkmode').disabled = false;
+
+ document.getElementById('css-lightmode').setAttribute('media', 'not all');
+ document.getElementById('css-lightmode').disabled = true;
+ } else {
+ siteVars['theme_active'] = siteVars['theme_forced'] = 'light';
+
+ document.getElementById('css-darkmode').setAttribute('media', 'not all');
+ document.getElementById('css-darkmode').disabled = true;
+
+ document.getElementById('css-lightmode').setAttribute('media', 'all');
+ document.getElementById('css-lightmode').disabled = false;
+ }
+ localStorage.setItem('theme_forced', siteVars['theme_active']);
+
+ document.body.classList.add('expand');
+ document.body.offsetHeight;
+ document.body.classList.remove('expand');
+}
diff --git a/script/dark-light-mode.js b/script/dark-light-mode.js
new file mode 100644
index 0000000..837d7a4
--- /dev/null
+++ b/script/dark-light-mode.js
@@ -0,0 +1,37 @@
+var siteVars = new Array();
+siteVars['theme_active'] = 'light';
+siteVars['theme_forced'] = '';
+
+// combine prefers color theme or custom selected user dark/light theme
+let themeForcedStored = localStorage.getItem('theme_forced');
+if (themeForcedStored == 'light' || themeForcedStored == 'dark') {
+ siteVars['theme_forced'] = themeForcedStored;
+}
+
+siteVars['theme_active'] = 'light';
+if ((window.matchMedia &&
+ window.matchMedia('(prefers-color-scheme: dark)').matches) ||
+ siteVars['theme_forced'] == 'dark') {
+ siteVars['theme_active'] = 'dark';
+}
+
+if (siteVars['theme_forced'] != '') {
+ siteVars['theme_active'] = siteVars['theme_forced'];
+}
+
+if (siteVars['theme_forced'] != '') {
+ if (siteVars['theme_forced'] == 'dark') {
+ document.getElementById('css-darkmode').setAttribute('media', 'all');
+ document.getElementById('css-darkmode').disabled = false;
+
+ document.getElementById('css-lightmode').setAttribute('media', 'not all');
+ document.getElementById('css-lightmode').disabled = true;
+
+ } else {
+ document.getElementById('css-darkmode').setAttribute('media', 'not all');
+ document.getElementById('css-darkmode').disabled = true;
+
+ document.getElementById('css-lightmode').setAttribute('media', 'all');
+ document.getElementById('css-lightmode').disabled = false;
+ }
+}
diff --git a/templates/page.tmpl b/templates/page.tmpl
index fd23024..d149b01 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -1,154 +1,144 @@
-
+
-
-
-
-
-
-
-
-
-
-
-
- 
+ 
+ -
+
+
+