Krautspace/webseite-krautspace
6
0
Fork 1
Code Issues Pull requests Projects Releases Wiki Activity

variante mit der pseudoklasse :target zum bedienen des menus

Browse source
This commit is contained in:
example 2022-02-06 01:47:08 +01:00
parent 28c99ad5f1
commit 25bfc8d9a1
2 changed files with 186 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

167
index.html
View file

@ -27,90 +27,63 @@
<body>
<a href="#space"
title="Springe zum Inhalt"
alt="Springe zum Inhalt">Zum Inhalt springen</a>
<!-- head with banner and navigation ---------------------------------->
<!-- fixed elements -------------------------------------------------->
<div id="space-status-div" class="flex-box-column">
<div id="space-status-icon-div" aria-hidden="true">
<img id="logo"
alt="Raumstatus"
src="./images/user-times.svg" />
</div>
<div id="space-status-text-div" class="flex-box-column">
<p class="hidden">Raumstatus:</p>
<div>C</div>
<div>l</div>
<div>o</div>
<div>s</div>
<div>e</div>
<div>d</div>
</div>
</div>
<!-- head with title and navigation ---------------------------------->
<div id="head-fix">
<header>
<div class="center-content max-width">
<div id="headline" class="flex-box-row">
<header role="banner">
<h1>kraut.space</h1>
<hr/>
</header>
<!-- navigation -->
<nav role="navigation" class="flex-box-column">
<label id="responsiv-navi-label"
for="responsiv-navi-checkbox"
role="button"
aria-hidden="true">
<div id="hamburger" class=flex-box-column>
<div class="hamburger-scheibe"></div>
<div class="hamburger-scheibe"></div>
<div class="hamburger-scheibe"></div>
</div>
</label>
<input type="checkbox"
aria-hidden="true"
id="responsiv-navi-checkbox" />
<ul id="navigation-menu"
role="menu"
class="flex-box-column">
<li role="menuitem">
<a title="Was ist der Krautspace?"
href="#space">Krautspace</a>
</li>
<li role="menuitem">
<a title="Neuigkeiten, Termine und Kontaktmöglichkeiten rund um den Space"
href="#treffpunkte">Treffpunkte</a>
</li>
<li role="menuitem">
<a title="Trägerverein, Mitgliedschaft, Vorstand"
href="#verein">Verein</a>
</li>
<li role="menuitem">
<a title="Der physische Raum und Anfahrt"
href="#raum">Raum</a>
</li>
<li role="menuitem">
<a class="extern" title="Unser Wiki"
href="https://wiki.kraut.space">Wiki</a>
</li>
<li role="menuitem">
<a class="extern" title="Unser Blog im Wiki"
href="https://wiki.kraut.space/blog:start">Blog</a>
</li>
</ul>
</nav>
<hr/>
<div>
<p>
<a id="banner" href="#"
role="banner"
title="Zum Seitenanfang">kraut.space</a></p>
</div>
<div class="flex-box-row">
<p>
<a id="open-menu"
href="#menu">Menu</a>
</p>
<nav id="menu" class="flex-box-column">
<p>
<a id="close-menu"
href="#open-menu">Close</a>
</p>
<ul role="menu">
<li role="menuitem">
<a title="Was ist der Krautspace?"
href="#space">Krautspace</a>
</li>
<li role="menuitem">
<a title="Neuigkeiten, Termine und Kontaktmöglichkeiten rund um den Space"
href="#treffpunkte">Treffpunkte</a>
</li>
<li role="menuitem">
<a title="Trägerverein, Mitgliedschaft, Vorstand"
href="#verein">Verein</a>
</li>
<li role="menuitem">
<a title="Der physische Raum und Anfahrt"
href="#raum">Raum</a>
</li>
<li role="menuitem">
<a class="extern" title="Unser Wiki"
href="https://wiki.kraut.space">Wiki</a>
</li>
<li role="menuitem">
<a class="extern" title="Unser Blog im Wiki"
href="https://wiki.kraut.space/blog:start">Blog</a>
</li>
</ul>
</nav>
<a id="backdrop"
href="#open-menu"
tabindex="-1"></a>
</div>
</div>
</div>
</div>
</header>
<!-- big image at the top, should be further a slider --------------->
<!-- big image at the top, should be further a slider ----------------->
<div id="start-image-container" aria-hidden="true">
<div class="center-content max-width">
@ -169,15 +142,15 @@
<ul>
<li>Dienstag, 20:00 Uhr: "Chaostreff"</li>
<li>Offene Runde</li>
<li>Jitsi: <a
href="https://kraut.space/chaostreff">https://kraut.space/chaostreff</a></li>
<li>Jitsi: <a href="https://kraut.space/chaostreff"
>https://kraut.space/chaostreff</a></li>
</ul>
<ul>
<li>Donnerstag, 20:00 Uhr: "Linux User Group"</li>
<li>Linux User Group</li>
<li>Jitsi: <a
href="https://kraut.space/lug">https://kraut.space/lug</a></li>
href="https://kraut.space/lug">https://kraut.space/lug</a></li>
</ul>
</div>
@ -185,28 +158,35 @@
<h3>Kontakt</h3>
<div class="sb-item">
<h4 class="aside">Matrix</h4>
<p><a
href="https://matrix.to/#/#krautchan:matrix.kraut.space">#krautchan:matrix.kraut.space</a>
<ul class="aside">
<li><a href="https://matrix.to/#/#krautchan:matrix.kraut.space"
>#krautchan:matrix.kraut.space</a>
</li>
</ul>
</div>
<div class="sb-item">
<h4 class="aside">Jabber</h4>
<ul class="aside">
<li>MUC: <a
href="xmpp:krautchan@chat.krautspace.de">krautchan@chat.krautspace.de</a></li>
<li>Webchat: <a
href="https://kraut.space/chat">kraut.space/chat</a></li>
<li>MUC: <a href="xmpp:krautchan@chat.krautspace.de"
>krautchan@chat.krautspace.de</a></li>
<li>Webchat: <a href="https://kraut.space/chat">kraut.space/chat</a></li>
</ul>
</div>
<div class="sb-item">
<h4 class="aside">iCalendar</h4>
<p><a href="https://kraut.space/krautspace.ics"
>kraut.space/krautspace.ics</a>
</p>
<ul class="aside">
<li>
<a href="https://kraut.space/krautspace.ics">kraut.space/krautspace.ics</a>
</li>
</ul>
</div>
<div class="sb-item">
<h4 class="aside">Twitter</h4>
<p><a href="https://twitter.com/krautspace">twitter.com/krautspace"</a>
</p>
<ul class="aside">
<li>
<a href="https://twitter.com/krautspace">twitter.com/krautspace</a>
</li>
</ul>
</div>
</aside>
</div>
@ -259,7 +239,7 @@
</p>
<ul class="indent">
<li>Hackspace Jena e.&#x202f;V.<li>
<li>Hackspace Jena e.&#x202f;V.</li>
<li>Krautgasse 26</li>
<li>07743 Jena</li>
</ul>
@ -379,4 +359,5 @@
</div>
</body>
</html>