diff options
| author | xengineering <me@xengineering.eu> | 2021-12-02 15:31:09 +0100 |
|---|---|---|
| committer | xengineering <me@xengineering.eu> | 2021-12-02 15:31:09 +0100 |
| commit | 8aa41f90200e35bd388af931eaa8bb80fa688928 (patch) | |
| tree | 558bcdd1631d15a583b63b52e7aed8b53b5f8b33 | |
| parent | 84bd757804c587835b201522bbb96b3b97af54e6 (diff) | |
| download | libweb-8aa41f90200e35bd388af931eaa8bb80fa688928.tar libweb-8aa41f90200e35bd388af931eaa8bb80fa688928.tar.zst libweb-8aa41f90200e35bd388af931eaa8bb80fa688928.zip | |
Remove <nav> Support
| -rw-r--r-- | libweb.css | 61 | ||||
| -rw-r--r-- | libweb.js | 71 | ||||
| -rw-r--r-- | test.html | 12 |
3 files changed, 6 insertions, 138 deletions
@@ -76,33 +76,6 @@ head { display: none; /* do not display anything from the head section */ } -/* body */ - -nav { - background-color: var(--background-color-dark); -} - -#menu-button { - width: 100%; - padding-top: 1em; - padding-bottom: 1em; - margin: 0; - text-align: center; - color: var(--font-color-light2); - background-color: var(--background-color-dark); -} - -.menu-anchor { - padding-top: 1em; - padding-bottom: 1em; - padding-left: 0; - padding-right: 0; - margin: 0; - text-align: center; - color: var(--font-color-light2); - background-color: var(--background-color-dark); -} - main { padding-left: 3vw; padding-right: 3vw; @@ -166,7 +139,6 @@ a { button { margin-top: var(--vertical-space-medium); margin-bottom: var(--vertical-space-medium); - display: block; padding: 0.7em; margin-left: auto; margin-right: auto; @@ -252,37 +224,10 @@ h1, h2, h3, h4, h5, h6 { @media only screen and (min-aspect-ratio: 14/9) { -nav { - display: inline-block; - height: 100%; - width: 13vw; - position: fixed; - margin 0; - padding 0; -} - -#menu-button { - display: none; -} - -.menu-anchor { - text-align: left; - padding-left: 1em; - padding-right: 1em; -} - -.menu-anchor:hover { - color: black; - background-color: lightgray; -} - main { - width: auto; - margin: 0; - margin-left: 15vw; - padding: 0; - padding-left: 15vw; - padding-right: 15vw; + max-width: 70vw; + margin-left: auto; + margin-right: auto; } button:hover { diff --git a/libweb.js b/libweb.js deleted file mode 100644 index d82db88..0000000 --- a/libweb.js +++ /dev/null @@ -1,71 +0,0 @@ -/* -vim: shiftwidth=2 tabstop=2 expandtab - -libweb - reusable code for websites - - Copyright (C) 2021 xengineering - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see <https://www.gnu.org/licenses/>. - -contact via mail: me@xengineering.eu -*/ - -// define menu state -const MenuState = { - Desktop: "Desktop", - MobileCollapsed: "MobileCollapsed", - MobileExpanded: "MobileExpanded" -} -var state; - -// init menu state and add mediaChange handler -var isMobile = window.matchMedia("(max-aspect-ratio: 14/9)"); -mediaChange(isMobile); -isMobile.addListener(mediaChange) - -function mediaChange(isMobile) { - if (isMobile.matches) { - state = MenuState.MobileCollapsed; - handleState(state); - } else { - state = MenuState.Desktop; - handleState(state); - } -} - -function toggleMenu() { - switch (state) { - case MenuState.MobileCollapsed: - state = MenuState.MobileExpanded; - handleState(state); - break; - case MenuState.MobileExpanded: - state = MenuState.MobileCollapsed; - handleState(state); - break; - } -} - -function handleState(state) { - var items = document.getElementsByTagName("a"); - for(var i=0; i<items.length; i++) { - if (items[i].parentNode.tagName == "NAV") { - if (state == MenuState.MobileCollapsed) { - items[i].style.display = "none"; - } else { - items[i].style.display = "block"; - } - } - } -} @@ -37,13 +37,6 @@ contact via mail: me@xengineering.eu <body> - <nav> - <button id="menu-button" onclick=toggleMenu()>MENU</button> - <a class="menu-anchor" href="https://xengineering.eu">xengineering.eu</a> - <a class="menu-anchor" href="https://xengineering.eu">xengineering.eu</a> - <a class="menu-anchor" href="https://xengineering.eu">xengineering.eu</a> - </nav> - <main> <!-- h1 h2 h3 h4 h5 h6 --> @@ -90,6 +83,9 @@ contact via mail: me@xengineering.eu <!-- a --> <a href="https://example.com">Example Link</a> + <!-- button --> + <button>button</button> + <!-- img --> <img src="./demo.png" alt="An example image"> <img src="null.jpg" alt="Not existing image"> @@ -168,8 +164,6 @@ echo "I am $(whoami)" </main> - <script src="./libweb.js"></script> - </body> </html> |