draft for a navbar

This commit is contained in:
Stefan Majewsky 2019-06-25 21:59:45 +02:00
parent 692982da00
commit 06d62c6825
7 changed files with 198 additions and 31 deletions

View File

@ -57,6 +57,7 @@ $ ( cd draft && python -m http.server 8080 )
* Über uns
* Anfahrt
* Kontakt (= E-Mail + Chat)
* Chaos macht Schule
* Mitgliedschaft
* Unterstützen
* Veranstaltungen (+ Seiten pro Veranstaltung)

View File

@ -8,11 +8,48 @@
<link rel="stylesheet" type="text/css" href="/res/c3d2.css" />
</head>
<body>
<nav>
<p>Navigation</p>
<nav id="nav">
<a class="opener" href="#nav" title="Navigation öffnen">
<!--
TODO: Was beschriften wir hier? Dasselbe wie in <title>? Könnte
ein nerviges Duplikat mit dem <h1> vom <main> sein.
-->
<span class="menu-icon">&#9776;</span>Chaos Computer Club Dresden
</a>
<a class="closer" href="#" title="Navigation schließen">&#10799;</a>
<a href="/" class="sitelogo" title="Zur Startseite">
<img src="/res/navbar-logo.svg" alt="C3D2-Logo">
</a>
<ul>
<li><a href="#">Über uns</a><ul>
<li><a href="#">Anfahrt</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Chaos macht Schule</a></li>
<li><a href="#">Mitgliedschaft</a></li>
<li><a href="#">Unterstützen</a></li>
</ul></li>
<li><a href="#">Veranstaltungen</a><ul>
<li><a href="#">Kalender</a></li>
<li><a href="#">Themenabende</a></li>
<li><a href="#">Events</a></li>
</ul></li>
<li><a href="#">Podcasts</a><ul>
<li><a href="#">Pentaradio</a></li>
<li><a href="#">Pentacast</a></li>
<li><a href="#">Pentamusic</a></li>
<li><a href="#">Abonnieren</a></li>
</ul></li>
<li><a href="#">Mehr Inhalte</a><ul>
<li><a href="#">Wiki</a></li>
<li><a href="#">Artwork</a></li>
</ul></li>
</ul>
</nav>
<main>
<p>Main matter</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
<footer>
<p>Footer</p>

View File

@ -0,0 +1,34 @@
body {
/* if you don't have any idea what's going on here, read
* <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>
*/
display: grid;
min-height: 100vh;
grid-template:
"nav main" 1fr
"nav footer" min-content
/ 23ch 1fr;
grid-gap: 0;
grid-auto-rows: auto;
& > nav {
grid-area: nav;
.opener, .closer {
/* on desktop, the <nav> is always there, so we don't need an opener */
display: none;
}
/* everything else about <nav> is in navbar.scss */
}
& > main {
grid-area: main;
/* everything else about <nav> is in content.scss */
}
& > footer {
grid-area: footer;
/* everything else about <nav> is in footer.scss */
}
}

View File

@ -0,0 +1,40 @@
body {
& > nav {
position: relative; /* there are children with position:absolute */
&:not(:target) > :not(.opener) {
display: none;
}
&:target > .opener {
display: none;
}
& > a.opener {
padding: 0 1rem;
line-height: 3rem;
color: inherit;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
& > .menu-icon {
padding-right: 1rem;
}
}
& > a.closer {
position: absolute;
left: 0;
top: 0;
width: 3rem;
font-size: 2.5rem;
text-align: center;
line-height: 3rem;
color: inherit;
text-decoration: none;
}
}
}

View File

@ -1,33 +1,10 @@
@import 'reset.scss';
body {
/* if you don't have any idea what's going on here, read
* <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>
*/
display: grid;
min-height: 100vh;
grid-template:
"nav main" 1fr
"nav footer" min-content
/ minmax(min-content, 20vw) 1fr;
grid-gap: 0;
grid-auto-rows: auto;
& > nav {
grid-area: nav;
max-width: 40ch;
/* everything else about <nav> is in navbar.scss */
}
& > main {
grid-area: main;
/* everything else about <nav> is in content.scss */
}
& > footer {
grid-area: footer;
/* everything else about <nav> is in footer.scss */
}
@media (min-width: 60ch) {
@import 'highlevel-desktop.scss';
}
@media (max-width: 59.99999ch) {
@import 'highlevel-phone.scss';
}
@import 'navbar.scss';

32
draft/res/navbar-logo.svg Normal file
View File

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg1"
height="243.6125"
width="742.85004"
y="0.0000000"
x="0.0000000"
version="1.0">
<metadata
id="metadata8">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3" />
<path
style="stroke-width:0.5;fill:#ffffff;fill-opacity:1"
id="path1103"
d="m 188.61252,122.43125 37.5,-59.375 c 0,0 34.375,0 34.375,0 0,0 -34.375,59.375 -34.375,59.375 0,0 34.375,58.125 34.375,58.125 h -37.5 z m 43.75,0 34.375,-59.375 c 0,0 37.5,0 37.5,0 0,0 -34.375,59.375 -34.375,59.375 l 34.375,58.125 h -37.5 z m 43.75,0 34.375,-59.375 c 0,0 37.5,0 37.5,0 0,0 -33.75,59.375 -33.75,59.375 l 33.75,58.125 h -37.5 z m 121.875,-59.375 c 0,0 34.375,0 34.375,0 l -43.75,117.5 h -34.375 z m 75,59.375 c 0,0 -34.375,-59.375 -34.375,-59.375 0,0 37.5,0 37.5,0 0,0 34.375,59.375 34.375,59.375 l -34.375,58.125 h -37.5 c 0,0 34.375,-58.125 34.375,-58.125 z m 9.375,58.125 c 0,0 34.375,-58.125 34.375,-58.125 0,0 -34.375,-59.375 -34.375,-59.375 h 37.5 l 34.375,59.375 -34.375,58.125 c 0,0 -37.5,0 -37.5,0 z" />
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,4 +1,50 @@
body > nav {
background: black;
color: white;
a.sitelogo {
display: block;
width: 100%;
& img {
width: 100%;
}
}
& > ul {
list-style: none;
padding: 0 0.75rem;
& > li {
padding: 0.5rem 0;
&:not(:first-child) {
border-top: 1px solid #444;
}
line-height: 1.5rem;
& > ul {
list-style: none;
& > li {
color: #CCC;
padding-left: 1rem;
line-height: 1.5rem;
}
}
}
li.current {
& > a {
font-weight: bold;
}
}
a {
text-decoration: none;
color: inherit;
&:active, &:hover, &:focus {
color: #DAB737;
}
}
}
}