xoy
/
ctdo.de
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

[Mobile View Nav Toggle]

This commit is contained in:
xoy 2023-10-04 13:00:10 +02:00
parent 756e8b2931
commit 7a644428be
4 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/main.css
View File

@ -67,6 +67,17 @@ a.imgLink div h2 {
header { header {
background-color: var(--logo-background-color); background-color: var(--logo-background-color);
padding: 0 !important;
}
header a#navToggle {
color: white !important;
font-size: 64px;
display: none;
background-color: var(--nav-background-color);
padding: 20px 100px 20px 0;
text-decoration: none !important;
text-align: right;
} }
nav { nav {
@ -181,6 +192,14 @@ a.green-text {
} }
@media only screen and (max-width: 885px) { @media only screen and (max-width: 885px) {
header a#navToggle {
display: block;
}
header nav {
display: none;
}
nav ul li { nav ul li {
display: block; display: block;
font-size: 200%; font-size: 200%;

18
js/nav.js Normal file
View File

@ -0,0 +1,18 @@
var nav = document.getElementsByTagName("nav")[0];
function ToggleNav() {
showNav = nav.style.display != "" && nav.style.display != "none";
if (showNav) {
nav.style.display = "none";
} else {
nav.style.display = "block";
}
}
window.addEventListener("resize", function(){
if (window.innerWidth > 885) {
nav.style.display = "block";
} else {
nav.style.display = "none";
}
});

2
pages/index.md
View File

@ -1,4 +1,4 @@
![Raum 2 mit gemütlichen Sofas](/images/header.jpg) [![Raum 2 mit gemütlichen Sofas](/images/header.jpg)](https://www.chaostreff-dortmund.de/rundgang/)
# Hi # Hi

8
templates/default.twig
View File

@ -10,11 +10,13 @@
{% for item in css %} {% for item in css %}
<link rel="stylesheet" href="/css/{{ item }}.css"> <link rel="stylesheet" href="/css/{{ item }}.css">
{% endfor %} {% endfor %}
</head> </head>
<body> <body>
<div class="newBanner"><a href="https://www.chaostreff-dortmund.de/rundgang/" target="_blank">Rundgang</a></div> <!-- <div class="newBanner"><a href="https://www.chaostreff-dortmund.de/rundgang/" target="_blank">Rundgang</a></div> -->
<header> <header>
<a href="#" onclick="ToggleNav()" id="navToggle">=</a>
<nav> <nav>
<ul> <ul>
{% for item in nav %} {% for item in nav %}
@ -42,9 +44,11 @@
<ul> <ul>
<li> <a href="/?page=impressum">impressum</a> </li> <li> <a href="/?page=impressum">impressum</a> </li>
<li> <a href="/?page=datenschutz">datenschutz</a> </li> <li> <a href="/?page=datenschutz">datenschutz</a> </li>
<li> <a href="https://git.ctdo.de/xoy/ctdo.de/_edit/main/{{ file_to_edit }}" target="_blank">Seite bearbeiten</a> </li> <li> <a href="https://git.ctdo.de/xoy/ctdo.de/_edit/main/{{ file_to_edit }}" target="_blank">seite bearbeiten</a> </li>
</ul> </ul>
</nav> </nav>
</footer> </footer>
<script src="js/nav.js"></script>
</body> </body>
</html> </html>