variante mit der pseudoklasse :target zum bedienen des menus
This commit is contained in:
example
parent
28c99ad5f1
commit
25bfc8d9a1
167
index.html
167
index.html
|
|
@ -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. V.<li>
|
||||
<li>Hackspace Jena e. V.</li>
|
||||
<li>Krautgasse 26</li>
|
||||
<li>07743 Jena</li>
|
||||
</ul>
|
||||
|
|
@ -379,4 +359,5 @@
|
|||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</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;
|
||||
|
|
@ -13,10 +15,10 @@
|
|||
|
||||
html, body {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
line-height: 150%;
|
||||
font-size: 100%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -34,22 +36,26 @@ ul.indent {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #333333;
|
||||
text-decoration: underline 1px dotted #333333;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div.center-content {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
div.max-width {
|
||||
max-width: 75em;
|
||||
a:hover, a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hidden, hr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.center-content {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.max-width {
|
||||
max-width: 72em;
|
||||
}
|
||||
|
||||
.flex-box-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -57,158 +63,76 @@ div.max-width {
|
|||
}
|
||||
|
||||
.flex-box-column {
|
||||
display: table; /* fallback IE<9 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
main section {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
/*** head with navigation menu ***/
|
||||
|
||||
/**** fixed elements ****************************/
|
||||
/************************************************/
|
||||
|
||||
/**** 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 {
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.8);
|
||||
color: #ffffff;
|
||||
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;
|
||||
}
|
||||
|
||||
#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 ****/
|
||||
|
||||
|
|
@ -282,7 +206,7 @@ ul.aside {
|
|||
footer {
|
||||
padding: 0 5% 10% 5%;
|
||||
color: #ffffff;
|
||||
background-color: #333333;
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
ul#navigation-menu {
|
||||
nav#menu {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul#navigation-menu li {
|
||||
padding: 0 0 0 1em;
|
||||
nav p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 980px) {
|
||||
nav#menu ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
div.with-aside {
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue