diff options
Diffstat (limited to 'css')
-rw-r--r-- | css/xengineering_nav_main.css | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/css/xengineering_nav_main.css b/css/xengineering_nav_main.css new file mode 100644 index 0000000..ac0ebe1 --- /dev/null +++ b/css/xengineering_nav_main.css @@ -0,0 +1,104 @@ +/* +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 +*/ + +/***************************** DEFAULT / MOBILE *******************************/ + +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-light); + 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-light); + background-color: var(--background-color-dark); +} + +/******************************************************************************/ + + + +/********************************** TABLET ************************************/ + +@media only screen and (min-aspect-ratio: 11/12) { + +} + +/******************************************************************************/ + + + +/********************************* DESKTOP ************************************/ + +@media only screen and (min-aspect-ratio: 14/9) { + +nav { + display: inline-block; + height: 100%; + width: 15vw; + 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; +} + +} + +/******************************************************************************/ |