draft for a navbar

master
Stefan Majewsky 3 years ago
parent 692982da00
commit 06d62c6825
  1. 1
      README.md
  2. 43
      draft/index.html
  3. 34
      draft/res/highlevel-desktop.scss
  4. 40
      draft/res/highlevel-phone.scss
  5. 33
      draft/res/main.scss
  6. 32
      draft/res/navbar-logo.svg
  7. 46
      draft/res/navbar.scss

@ -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)

@ -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>

@ -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 */
}
}

@ -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;
}
}
}

@ -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';

@ -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

@ -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;
}
}
}
}

Loading…
Cancel
Save