variante mit der pseudoklasse :target zum bedienen des menus
This commit is contained in:
example
parent
28c99ad5f1
commit
25bfc8d9a1
2 changed files with 186 additions and 256 deletions
167
index.html
167
index.html
|
|
@ -27,90 +27,63 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<a href="#space"
|
<!-- head with banner and navigation ---------------------------------->
|
||||||
title="Springe zum Inhalt"
|
|
||||||
alt="Springe zum Inhalt">Zum Inhalt springen</a>
|
|
||||||
|
|
||||||
<!-- fixed elements -------------------------------------------------->
|
<header>
|
||||||
|
|
||||||
<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">
|
|
||||||
<div class="center-content max-width">
|
<div class="center-content max-width">
|
||||||
<div id="headline" class="flex-box-row">
|
<div id="headline" class="flex-box-row">
|
||||||
<header role="banner">
|
<div>
|
||||||
<h1>kraut.space</h1>
|
<p>
|
||||||
<hr/>
|
<a id="banner" href="#"
|
||||||
</header>
|
role="banner"
|
||||||
|
title="Zum Seitenanfang">kraut.space</a></p>
|
||||||
<!-- navigation -->
|
</div>
|
||||||
|
<div class="flex-box-row">
|
||||||
<nav role="navigation" class="flex-box-column">
|
<p>
|
||||||
<label id="responsiv-navi-label"
|
<a id="open-menu"
|
||||||
for="responsiv-navi-checkbox"
|
href="#menu">Menu</a>
|
||||||
role="button"
|
</p>
|
||||||
aria-hidden="true">
|
<nav id="menu" class="flex-box-column">
|
||||||
<div id="hamburger" class=flex-box-column>
|
<p>
|
||||||
<div class="hamburger-scheibe"></div>
|
<a id="close-menu"
|
||||||
<div class="hamburger-scheibe"></div>
|
href="#open-menu">Close</a>
|
||||||
<div class="hamburger-scheibe"></div>
|
</p>
|
||||||
</div>
|
<ul role="menu">
|
||||||
</label>
|
<li role="menuitem">
|
||||||
<input type="checkbox"
|
<a title="Was ist der Krautspace?"
|
||||||
aria-hidden="true"
|
href="#space">Krautspace</a>
|
||||||
id="responsiv-navi-checkbox" />
|
</li>
|
||||||
<ul id="navigation-menu"
|
<li role="menuitem">
|
||||||
role="menu"
|
<a title="Neuigkeiten, Termine und Kontaktmöglichkeiten rund um den Space"
|
||||||
class="flex-box-column">
|
href="#treffpunkte">Treffpunkte</a>
|
||||||
<li role="menuitem">
|
</li>
|
||||||
<a title="Was ist der Krautspace?"
|
<li role="menuitem">
|
||||||
href="#space">Krautspace</a>
|
<a title="Trägerverein, Mitgliedschaft, Vorstand"
|
||||||
</li>
|
href="#verein">Verein</a>
|
||||||
<li role="menuitem">
|
</li>
|
||||||
<a title="Neuigkeiten, Termine und Kontaktmöglichkeiten rund um den Space"
|
<li role="menuitem">
|
||||||
href="#treffpunkte">Treffpunkte</a>
|
<a title="Der physische Raum und Anfahrt"
|
||||||
</li>
|
href="#raum">Raum</a>
|
||||||
<li role="menuitem">
|
</li>
|
||||||
<a title="Trägerverein, Mitgliedschaft, Vorstand"
|
<li role="menuitem">
|
||||||
href="#verein">Verein</a>
|
<a class="extern" title="Unser Wiki"
|
||||||
</li>
|
href="https://wiki.kraut.space">Wiki</a>
|
||||||
<li role="menuitem">
|
</li>
|
||||||
<a title="Der physische Raum und Anfahrt"
|
<li role="menuitem">
|
||||||
href="#raum">Raum</a>
|
<a class="extern" title="Unser Blog im Wiki"
|
||||||
</li>
|
href="https://wiki.kraut.space/blog:start">Blog</a>
|
||||||
<li role="menuitem">
|
</li>
|
||||||
<a class="extern" title="Unser Wiki"
|
</ul>
|
||||||
href="https://wiki.kraut.space">Wiki</a>
|
</nav>
|
||||||
</li>
|
<a id="backdrop"
|
||||||
<li role="menuitem">
|
href="#open-menu"
|
||||||
<a class="extern" title="Unser Blog im Wiki"
|
tabindex="-1"></a>
|
||||||
href="https://wiki.kraut.space/blog:start">Blog</a>
|
</div>
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<hr/>
|
|
||||||
</div>
|
</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 id="start-image-container" aria-hidden="true">
|
||||||
<div class="center-content max-width">
|
<div class="center-content max-width">
|
||||||
|
|
@ -169,15 +142,15 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li>Dienstag, 20:00 Uhr: "Chaostreff"</li>
|
<li>Dienstag, 20:00 Uhr: "Chaostreff"</li>
|
||||||
<li>Offene Runde</li>
|
<li>Offene Runde</li>
|
||||||
<li>Jitsi: <a
|
<li>Jitsi: <a href="https://kraut.space/chaostreff"
|
||||||
href="https://kraut.space/chaostreff">https://kraut.space/chaostreff</a></li>
|
>https://kraut.space/chaostreff</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>Donnerstag, 20:00 Uhr: "Linux User Group"</li>
|
<li>Donnerstag, 20:00 Uhr: "Linux User Group"</li>
|
||||||
<li>Linux User Group</li>
|
<li>Linux User Group</li>
|
||||||
<li>Jitsi: <a
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -185,28 +158,35 @@
|
||||||
<h3>Kontakt</h3>
|
<h3>Kontakt</h3>
|
||||||
<div class="sb-item">
|
<div class="sb-item">
|
||||||
<h4 class="aside">Matrix</h4>
|
<h4 class="aside">Matrix</h4>
|
||||||
<p><a
|
<ul class="aside">
|
||||||
href="https://matrix.to/#/#krautchan:matrix.kraut.space">#krautchan:matrix.kraut.space</a>
|
<li><a href="https://matrix.to/#/#krautchan:matrix.kraut.space"
|
||||||
|
>#krautchan:matrix.kraut.space</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="sb-item">
|
<div class="sb-item">
|
||||||
<h4 class="aside">Jabber</h4>
|
<h4 class="aside">Jabber</h4>
|
||||||
<ul class="aside">
|
<ul class="aside">
|
||||||
<li>MUC: <a
|
<li>MUC: <a href="xmpp:krautchan@chat.krautspace.de"
|
||||||
href="xmpp:krautchan@chat.krautspace.de">krautchan@chat.krautspace.de</a></li>
|
>krautchan@chat.krautspace.de</a></li>
|
||||||
<li>Webchat: <a
|
<li>Webchat: <a href="https://kraut.space/chat">kraut.space/chat</a></li>
|
||||||
href="https://kraut.space/chat">kraut.space/chat</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="sb-item">
|
<div class="sb-item">
|
||||||
<h4 class="aside">iCalendar</h4>
|
<h4 class="aside">iCalendar</h4>
|
||||||
<p><a href="https://kraut.space/krautspace.ics"
|
<ul class="aside">
|
||||||
>kraut.space/krautspace.ics</a>
|
<li>
|
||||||
</p>
|
<a href="https://kraut.space/krautspace.ics">kraut.space/krautspace.ics</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="sb-item">
|
<div class="sb-item">
|
||||||
<h4 class="aside">Twitter</h4>
|
<h4 class="aside">Twitter</h4>
|
||||||
<p><a href="https://twitter.com/krautspace">twitter.com/krautspace"</a>
|
<ul class="aside">
|
||||||
</p>
|
<li>
|
||||||
|
<a href="https://twitter.com/krautspace">twitter.com/krautspace</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -259,7 +239,7 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<ul class="indent">
|
<ul class="indent">
|
||||||
<li>Hackspace Jena e. V.<li>
|
<li>Hackspace Jena e. V.</li>
|
||||||
<li>Krautgasse 26</li>
|
<li>Krautgasse 26</li>
|
||||||
<li>07743 Jena</li>
|
<li>07743 Jena</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -379,4 +359,5 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
275
style.css
275
style.css
|
|
@ -1,8 +1,10 @@
|
||||||
/* style.css für kraut.space */
|
/* file: style3.css
|
||||||
|
* date: 2022-02-06
|
||||||
|
* user: bernd@nr18.space
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
/********** allgemein ***************************/
|
/*** general ***/
|
||||||
/************************************************/
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -13,10 +15,10 @@
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 100%;
|
|
||||||
color: #333333;
|
color: #333333;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
line-height: 150%;
|
font-size: 100%;
|
||||||
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -34,22 +36,26 @@ ul.indent {
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #333333;
|
color: inherit;
|
||||||
text-decoration: underline 1px dotted #333333;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.center-content {
|
a:hover, a:focus {
|
||||||
margin: 0 auto;
|
text-decoration: underline;
|
||||||
}
|
|
||||||
|
|
||||||
div.max-width {
|
|
||||||
max-width: 75em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden, hr {
|
.hidden, hr {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.center-content {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.max-width {
|
||||||
|
max-width: 72em;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-box-row {
|
.flex-box-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
@ -57,158 +63,76 @@ div.max-width {
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-box-column {
|
.flex-box-column {
|
||||||
display: table; /* fallback IE<9 */
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
main section {
|
|
||||||
padding-left: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
/*** head with navigation menu ***/
|
||||||
|
|
||||||
/**** fixed elements ****************************/
|
header {
|
||||||
/************************************************/
|
|
||||||
|
|
||||||
/**** space status ****/
|
|
||||||
|
|
||||||
div#space-status-div {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 3em;
|
|
||||||
height: 3em;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 1.5em;
|
|
||||||
border-bottom-right-radius: 1.5em;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #ffffff;
|
|
||||||
z-index: 10;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div#space-status-div:hover {
|
|
||||||
height: 12em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**** fixed header ****/
|
|
||||||
|
|
||||||
div#head-fix {
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #ffffff;
|
color: #ffffff;
|
||||||
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.8);
|
background-color: #333333;
|
||||||
|
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.6);
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
div#headline {
|
||||||
|
padding: 0 1em 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a#banner:hover,
|
||||||
|
a#banner:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav#menu {
|
||||||
|
/* 'height: 100%' geht nur mit 'position: fixed'. mit 'position: absolute'
|
||||||
|
* wird nur der teil innerhalb der headline angezeigt. dann muß 'height:
|
||||||
|
* 100%' entfernt werden und das menu nimmt sich den platz, den es
|
||||||
|
* braucht. */
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100%;
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding: 0 1em 2em 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav#menu ul {
|
||||||
|
margin: initial;
|
||||||
|
padding: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav#menu li {
|
||||||
|
padding: 1em;
|
||||||
|
border-top: 1px solid #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav#menu a {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* changed by clicking menu button */
|
||||||
|
|
||||||
|
nav#menu:target {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
background: black;
|
||||||
|
background: rgba(50, 50, 50, 0.85);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
#headline {
|
|
||||||
margin: 0;
|
|
||||||
padding: 1em;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
align-self: flex-start;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**** fixed navigation ****/
|
|
||||||
|
|
||||||
nav {
|
|
||||||
height: 100%;
|
|
||||||
align-items: flex-end;
|
|
||||||
flex-grow: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
label#responsiv-navi-label {
|
|
||||||
width: 1.5em;
|
|
||||||
height: 1.5em;
|
|
||||||
display: flex;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
input#responsiv-navi-checkbox {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div#hamburger {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-scheibe {
|
|
||||||
width: 100%;
|
|
||||||
height: 20%;
|
|
||||||
background-color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
#hamburger-menu:after {
|
|
||||||
content: 'Menu';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
ul#navigation-menu {
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-end;
|
|
||||||
list-style: none;
|
|
||||||
display: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul#navigation-menu > li {
|
|
||||||
padding: 0.5em 0 0 0;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul#navigation-menu li a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
#responsiv-navi-checkbox:checked ~ ul#navigation-menu {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**** go-to-top ****/
|
|
||||||
|
|
||||||
div#go-to-top {
|
|
||||||
position: fixed;
|
|
||||||
right: 2%;
|
|
||||||
bottom: 2%;
|
|
||||||
width: 2em;
|
|
||||||
height: 2em;
|
|
||||||
border-radius: 0.5em;
|
|
||||||
background-color: #ffffff;
|
|
||||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
img#to-top {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**** flexible elements *************************/
|
|
||||||
/************************************************/
|
|
||||||
|
|
||||||
/**** startimage ****/
|
/**** startimage ****/
|
||||||
|
|
||||||
|
|
@ -282,7 +206,7 @@ ul.aside {
|
||||||
footer {
|
footer {
|
||||||
padding: 0 5% 10% 5%;
|
padding: 0 5% 10% 5%;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #333333;
|
background-color: rgba(0, 0, 0, 0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
div#footer {
|
div#footer {
|
||||||
|
|
@ -301,31 +225,56 @@ a.link-footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**** media querys ******************************/
|
/**** go-to-top ****/
|
||||||
/************************************************/
|
|
||||||
|
|
||||||
@media only screen and (min-width: 680px) {
|
div#go-to-top {
|
||||||
|
position: fixed;
|
||||||
|
right: 2%;
|
||||||
|
bottom: 2%;
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
label#responsiv-navi-label {
|
img#to-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* media query für breitere screens */
|
||||||
|
/************************************/
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
|
||||||
|
a#open-menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul#navigation-menu {
|
nav#menu {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul#navigation-menu li {
|
nav p {
|
||||||
padding: 0 0 0 1em;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
nav#menu ul {
|
||||||
|
display: flex;
|
||||||
@media only screen and (min-width: 980px) {
|
}
|
||||||
|
|
||||||
div.with-aside {
|
div.with-aside {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue