diff --git a/css/dark.css b/css/dark.css new file mode 100644 index 0000000..fc20f98 --- /dev/null +++ b/css/dark.css @@ -0,0 +1,50 @@ +/** + * AWESOME THEME DARK + * background: #222222 + * foreground: #c4c5c8 + * color0: #000300 + * color1: #b44631 + * color2: #6fc24e + * color3: #cab14c + * color4: #59929d + * color5: #926090 + * color6: #668d96 + * color7: #728c8d + * color8: #3f5f47 + * color9: #c1605d + * colorA: #a9c68e + * colorB: #decf50 + * colorC: #a6bbcb + * colorD: #ad79a2 + * colorE: #8aa1af + * colorF: #bababa + * color10: #755cf2 + */ + +:root { + --background-color: #222222; + --color: #c4c5c8; + --link-color: #59929d; + --image-filter: grayscale(50%); + --main-headline-color: #b44631; + --bullet-points-color: #b44631; + --accent-background-color: #00bcd4; + --accent-color: #050505; + --warning-message: #b44631; + --menu-hover-color: #ad79a2; + --screenshot-border-color: #347272; + --button-background-color: #59929d; + --button-text-color: #fafafa; + --button-hover-color: #00bcd4; + --nav-text-color: #59929d; + --nav-accent-color: #c4c5c8; +} + +img:not([src*=".svg"]) { + filter: var(--image-filter); +} + +.lightmode { + visibility: hidden; + display: none; +} diff --git a/css/light.css b/css/light.css new file mode 100644 index 0000000..65ae934 --- /dev/null +++ b/css/light.css @@ -0,0 +1,45 @@ +/** + * AWESOME THEME LIGHT + * background: #ffffff + * foreground: #000300 + * color0: #000300 + * color1: #b44631 + * color2: #6fc24e + * color3: #cab14c + * color4: #006194 + * color5: #926090 + * color6: #59929d + * color7: #3c4847 + * color8: #3f5f47 + * color9: #c1605d + * colorA: #a9c68e + * colorB: #decf50 + * colorC: #a6bbcb + * colorD: #ad79a2 + * colorE: #8aa1af + * colorF: #fafafa + * colorA: #4f5867 + */ + +:root { + --background-color: #ffffff; + --color: #000300; + --link-color: #006194; + --main-headline-color: #3c4847; + --bullet-points-color: #3c4847; + --accent-background-color: #006194; + --accent-color: #fafafa; + --warning-message: #b44631; + --menu-hover-color: #000300; + --screenshot-border-color: #347272; + --button-background-color: #535d6c; + --button-text-color: #fafafa; + --button-hover-color: #000300; + --nav-text-color: #006194; + --nav-accent-color: #000300; +} + +.darkmode { + visibility: hidden; + display: none; +} diff --git a/css/local.css b/css/local.css new file mode 100644 index 0000000..4fcc4e3 --- /dev/null +++ b/css/local.css @@ -0,0 +1,391 @@ +/* Styles for https://awesomewm.org/ + * Source: https://github.com/awesomeWM/awesome-www + * Originally created by Devit Schizoper (01.12.2006) + */ + +:root { + color-scheme: dark light; + supported-color-schemes: dark light; + --duration: 0.5s; + --timing: ease; +} + +*, +::before, +::after { + box-sizing: border-box; +} + +html { + font-family: Noto Sans, Verdana, Arial, sans-serif; + font-size: 0.9rem; +} + +body { + margin: 0; + width: 100%; + height: 100%; + background-color: var(--background-color); + color: var(--color); +} + +body.expand { + transition: + color var(--duration) var(--timing), + background-color var(--duration) var(--timing); +} + +.preload { + transition: none !important; +} + +:any-link { + color: var(--link-color); +} + +figure { + margin: 1rem 0; +} + +figcaption { + margin: 0.5rem 0; +} + +p { + margin: 11px 0 10px 0; + padding: 0; + text-align: justify; + line-height: 1.5; +} + +ul { + margin: 0; + padding: 0; +} + +li::marker { + color: var(--bullet-points-color); +} + +#arrow li { + background: url(/images/arrow.svg) no-repeat left; + background-size: 8px; + padding: 3px 0px 3px 18px; + list-style: none; + margin: 0; +} + +h1 { + color: var(--main-headline-color); + font-size: 1.9rem; + line-height: 1; +} + +a { + color: var(--link-color); +} + +a:hover { + text-decoration: none; +} + +blockquote { + background: var(--background-color); + color: var(--color); + padding: 10px; +} + +iframe { + border: 5px solid var(--screenshot-border-color); +} + +.align_center { + text-align: center; +} + +.align_right { + display: block; + text-align: right; +} + +.screenshot img { + border: 5px solid var(--screenshot-border-color); + display: block; + margin-left: auto; + margin-right: auto; + width: 80%; + height: auto; + max-width: 1024px; +} + +.fork-me-banner { + position: absolute; + top: 0; + left: 0; + border: 0; +} + +#justified-logo img { + display: block; + margin-left: auto; + margin-right: auto; + padding-top: 20px; + width: 40%; + max-width: 800px; +} + +.standout { + font-size: larger; + font-weight: bold; + color: var(--warning-message); +} + +.standout a { + color: var(--warning-message); +} + +/**** header ***/ + +#pageheader { + display: inline-block; + font-family: Noto Sans, Verdana, Arial, sans-serif; + font-size: 1.0em; + margin-left: 0; + overflow: hidden; + width: 100%; +} + +#pageheader h2 { + display: block; + float: left; + font-size: 3.0em; + font-weight: bold; + letter-spacing: 3px; + margin-right: 20px; + position: relative; + top: 5px; +} + +#pageheader h2 a { + text-decoration: none; +} + +#pageheader h2 a:hover { + color: var(--menu-hover-color); +} + +/**** article ***/ + +#content { + width: 100%; +} + +#content h1 { + margin: 0; + padding: 20px 0 5px 0; +} + +#content h2 { + margin: 0; + padding: 20px 0 5px 0; +} + +#content ul { + margin: 0; + padding: 11px 0 15px 20px; +} + +#content li { + margin-bottom: 5px; + padding-left: 3px; +} + +#content { + display: block; + display: inline; + float: left; + margin-left: 20%; + width: 60%; +} + +/**** clear div ***/ + +#clear { + clear: both; + display: block; + height: 1px; + overflow: hidden; + width: 100%; +} + +/**** footer ***/ + +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; +} + +#pageinfo { + border-top: 0; + margin: 0 0; +} + +#donate { + margin: 1em 0; + text-align: center; +} + +#donate p, +#donate div { + text-align: center; +} + +.aw-anniversary { + margin-left: 65px; +} + +/** buttons */ + +.flex-container { + display: flex; + height: 100%; + padding: 0; + margin: 20px; + align-items: center; + justify-content: center; +} + +.row { + width: auto; +} + +.flex-href { + display: flex; + justify-content: center; +} + +.btn { + display: inline-block; + background: #4E9CAF; + border-radius: 5px; + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border: 1px solid var(--button-background-color); + border-color: var(--button-background-color); + color: var(--button-background-color); + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; + font-size: 1rem; + font-weight: 900; + line-height: 1.5; + margin: 8px; + padding: 1.2em 2.2em; + text-decoration: none; + text-align: center; + text-transform: uppercase; +} + +.btn:hover, +.btn:focus { + color: var(--button-hover-color); + outline: 0; +} + +.shine { + border-color: var(--button-background-color); + color: var(--button-text-color); + box-shadow: 0 0 60px 60px var(--button-background-color) inset, 0 0 0 0 var(--button-background-color); + -webkit-transition: all 150ms ease-in-out; + transition: all 150ms ease-in-out; +} + +.shine:hover { + box-shadow: 0 0 1px 0 var(--button-background-color) inset, 0 0 1px 1px var(--button-background-color); +} + +/**** navigation ***/ + +nav.container { + font-family: Noto Sans; + font-weight: bold; + margin: 0 auto; + padding: 1em 1em; + text-align: center; +} + +nav.container a { + color: var(--link-color); + text-decoration: none; + font: 0.99em Noto Sans; + font-weight: bold; + margin: 0px 10px; + padding: 5px 10px; + position: relative; + z-index: 0; + cursor: pointer; +} + +nav.container a:hover { + color: var(--nav-accent-color); +} + +/* effect top-bottom borders go out */ +nav.topBotomBordersOut a:before, +nav.topBotomBordersOut a:after { + position: absolute; + left: 0px; + width: 100%; + height: 2px; + background: var(--nav-accent-color); + content: ""; + opacity: 0; + transition: all 0.3s; +} + +nav.topBotomBordersOut a:before { + top: 0px; + transform: translateY(10px); +} + +nav.topBotomBordersOut a:after { + bottom: 0px; + transform: translateY(-10px); +} + +nav.topBotomBordersOut a:hover:before, +nav.topBotomBordersOut a:hover:after { + opacity: 1; + transform: translateY(0px); +} + +/* selected menu item */ + +nav.active-menu-about a.menu-about, +nav.active-menu-download a.menu-download, +nav.active-menu-community a.menu-community, +nav.active-menu-recipes a.menu-recipes, +nav.active-menu-screenshots a.menu-screenshots, +nav.active-menu-doc a.menu-doc { + color: var(--nav-accent-color); + text-decoration-line: underline; + text-decoration-thickness: 1.7px; +} + +/* vim: set sw=2 et: */ \ No newline at end of file diff --git a/css/mode-switch.css b/css/mode-switch.css new file mode 100644 index 0000000..7d627c5 --- /dev/null +++ b/css/mode-switch.css @@ -0,0 +1,94 @@ +/** + * Dark/Light Theme Switcher build on Checkbox and UL/LI structure + */ + +.mode-switch { + display: flex; + position: absolute; + top: 0.5rem; + right: 0.5rem; +} + +.mode-switch>li { + list-style: none; + margin-right: 6px; +} + +.mode-switch-icon { + padding: 0px 0px 0px 32px; + list-style: none; + margin: 0; +} + +.mode-switch-dark { + background: url(../images/icons/moon.svg) no-repeat left top; + background-size: 32px 32px; + filter: invert(100%); +} + +.mode-switch-light { + background: url(../images/icons/sun.svg) no-repeat left top; + background-size: 32px 32px; +} + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +/* Hide default HTML checkbox */ +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: 0.4s; + transition: 0.4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: #fafafa; + -webkit-transition: 0.4s; + transition: 0.4s; +} + +input:checked+.slider { + background-color: #59929d; +} + +input:focus+.slider { + box-shadow: 0 0 1px #59929d; +} + +input:checked+.slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} diff --git a/images/6mon.small.png b/images/6mon.small.png index bdf0e5e..0002a16 100644 Binary files a/images/6mon.small.png and b/images/6mon.small.png differ diff --git a/images/arrow.svg b/images/arrow.svg new file mode 100644 index 0000000..ffb7bd5 --- /dev/null +++ b/images/arrow.svg @@ -0,0 +1,44 @@ + + + + diff --git a/images/awesome-15yrs-anniversary-dark.svg b/images/awesome-15yrs-anniversary-dark.svg new file mode 100644 index 0000000..55d9c4b --- /dev/null +++ b/images/awesome-15yrs-anniversary-dark.svg @@ -0,0 +1,172 @@ + + + + diff --git a/images/awesome-15yrs-anniversary.svg b/images/awesome-15yrs-anniversary.svg new file mode 100644 index 0000000..0394198 --- /dev/null +++ b/images/awesome-15yrs-anniversary.svg @@ -0,0 +1,154 @@ + + + + diff --git a/images/awesome-dark-1.svg b/images/awesome-dark-1.svg new file mode 100644 index 0000000..90c8980 --- /dev/null +++ b/images/awesome-dark-1.svg @@ -0,0 +1,277 @@ + + + + diff --git a/images/awesome-dark-2.svg b/images/awesome-dark-2.svg new file mode 100644 index 0000000..29871aa --- /dev/null +++ b/images/awesome-dark-2.svg @@ -0,0 +1,271 @@ + + + + diff --git a/images/awesome1.svg b/images/awesome1.svg new file mode 100644 index 0000000..02e89b5 --- /dev/null +++ b/images/awesome1.svg @@ -0,0 +1,245 @@ + + + + diff --git a/images/awesome2.svg b/images/awesome2.svg new file mode 100644 index 0000000..9a73673 --- /dev/null +++ b/images/awesome2.svg @@ -0,0 +1,239 @@ + + + + diff --git a/images/awesome3.svg b/images/awesome3.svg new file mode 100644 index 0000000..dcef6fe --- /dev/null +++ b/images/awesome3.svg @@ -0,0 +1,239 @@ + + + + diff --git a/images/icons/moon.svg b/images/icons/moon.svg new file mode 100644 index 0000000..24ef943 --- /dev/null +++ b/images/icons/moon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/icons/sun.svg b/images/icons/sun.svg new file mode 100644 index 0000000..ad38227 --- /dev/null +++ b/images/icons/sun.svg @@ -0,0 +1,127 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.mdwn b/index.mdwn index 7085468..e44198a 100644 --- a/index.mdwn +++ b/index.mdwn @@ -8,10 +8,19 @@ It is primarily targeted at power users, developers and any people dealing with every day computing tasks and who want to have fine-grained control on their graphical environment. +
+
+ awesome 4.3
documentation
(stable) + +Docs for latest git version +
+
+
-[[!img images/screen.png alt="awesome screenshot" size="382x216"]] +[[!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 @@ - + - -<TMPL_VAR TITLE> - awesome window manager - - - - - + + <TMPL_VAR TITLE> - awesome window manager + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
- -
- -
- -
- - -
- - - - - - - +
+ Last edited +
+ + + + + + + +