more menu stuff

This commit is contained in:
Leif Niemczik 2022-11-24 00:34:25 +01:00
parent e29fce9ce9
commit 61fe048a31
2 changed files with 25 additions and 13 deletions

View file

@ -21,22 +21,25 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
<a href='/' class={title ? '' : 'invisible'}> <a href='/' class={title ? '' : 'invisible'}>
<img class='logo' src='/design-resources/logo/slashes.svg' /> <img class='logo' src='/design-resources/logo/slashes.svg' />
</a> </a>
<input type='checkbox' id='nav-toggle' class='hidden' /> <input type='checkbox' id='nav-toggle' />
<nav> <nav>
<label for='nav-toggle' class='mobile-only'>Close</label> <label for='nav-toggle' class='mobile-only'>Close</label>
<ul class='nav-links'> <ul class='nav-links'>
<li> <li>
<a href='/'>Home</a> <a href='/'>Home</a>
</li>| </li>
<li> <li>
<a href='https://pretix.hip-berlin.de/hip2022/hip2022/' <a href='https://pretix.hip-berlin.de/hip2022/hip2022/'
>Buy tickets</a >Buy tickets</a
> >
</li>| </li>
<li><a href='/merch/'>Merch</a></li>| <li><a href='/merch/'>Merch{' '}</a></li>
<li> <li>
<a href='https://pretalx.c3voc.de/hip-berlin-2022/cfp'>CfP</a> <a href='https://pretalx.c3voc.de/hip-berlin-2022/cfp'>CfP</a>
</li> </li>
<li>
<a href='/resources/'>Resources</a>
</li>
</ul> </ul>
<Socials additionalClass='mobile-only' /> <Socials additionalClass='mobile-only' />
</nav> </nav>
@ -130,8 +133,6 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
transition: transform 0.25s ease-in-out; transition: transform 0.25s ease-in-out;
z-index: 10; z-index: 10;
// desktop menu styles
label { label {
align-self: flex-end; align-self: flex-end;
} }
@ -141,15 +142,22 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
list-style: none; list-style: none;
padding: 0; padding: 0;
gap: 2rem; gap: 2rem;
li:not(:last-child):after {
content: '////';
opacity: 0.5;
display: block;
}
} }
// desktop menu styles
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
flex-direction: row; flex-direction: row;
padding: 0; padding: 0;
position: relative; position: relative;
font-size: 1.25rem; font-size: 1rem;
width: 100%; width: 100%;
height: 100%; height: auto;
transform: none; transform: none;
background: none; background: none;
justify-content: center; justify-content: center;
@ -157,15 +165,19 @@ const permaTitle = 'Hacking in Parallel 2022 //// Berlin'
.nav-links { .nav-links {
display: flex; display: flex;
gap: 0.75rem; gap: 0.75rem;
li:not(:last-child):after {
content: '/';
display: inline;
}
} }
} }
} }
#nav-toggle { #nav-toggle {
height: 0;
width: 0;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
left: -99999px; left: -99999px;
top: -9999px;
} }
#nav-toggle:checked + nav { #nav-toggle:checked + nav {
transform: none; transform: none;

View file

@ -25,8 +25,8 @@ import Layout from '../layouts/Layout.astro'
<section> <section>
<p> <p>
A part of our chaotic decentralized intergalactic community will be A part of our chaotic decentralized intergalactic community will be
meeting in the rooms of "ETI Schauspielschule Berlin" at ///Hacking in meeting in the rooms of "ETI Schauspielschule Berlin" at Hacking in
Parallel/// this year. Parallel //// this year.
</p> </p>
<p> <p>
The ETI, 900m away from the bcc, is directly at the Spree, in The ETI, 900m away from the bcc, is directly at the Spree, in
@ -47,7 +47,7 @@ import Layout from '../layouts/Layout.astro'
rooms with space for workshops, assemblies/projects and your ideas. rooms with space for workshops, assemblies/projects and your ideas.
All talks on the stages can be recorded and streamed via <a All talks on the stages can be recorded and streamed via <a
href='https://media.ccc.de'>media.ccc</a href='https://media.ccc.de'>media.ccc</a
> We are looking forward to <a >. We are looking forward to <a
href='https://pretalx.c3voc.de/hip-berlin-2022/cfp' href='https://pretalx.c3voc.de/hip-berlin-2022/cfp'
rel='nofollower noreferrer' rel='nofollower noreferrer'
target='_blank'>your submission</a target='_blank'>your submission</a