draft for a navbar
This commit is contained in:
parent
692982da00
commit
06d62c6825
|
@ -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">☰</span>Chaos Computer Club Dresden
|
||||
</a>
|
||||
<a class="closer" href="#" title="Navigation schließen">⨯</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…
Reference in New Issue