pedf
/
spolky
Archived
1
0
Fork 0
master
Lukáš Hozda 4 years ago
parent cec8451554
commit e6462d142b

@ -2,7 +2,7 @@
.logo { .logo {
position: absolute; position: absolute;
right: 3vh; right: 3vh;
top: 3vh; top: 7vh;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.2s;
width: 123px; width: 123px;

@ -1,3 +1,33 @@
<style>
.panel {
display: grid;
grid-template-columns: 1fr 7fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: "btn menu";
position: sticky;
background-color: rgba(255, 255, 255, 0.8);
width: 100vw;
height: max(3vw, 1.7em);
left: 0;
top: 0;
z-index: 1000;
}
.btn {
display: flex;
grid-area: btn;
width: max(3vw, 1.7em);
align-items: center;
justify-items: center;
}
.menu {
grid-area: menu;
display: flex;
align-items: center;
justify-items: center;
}
</style>
<script> <script>
function click() { function click() {
console.log("click"); console.log("click");
@ -13,7 +43,15 @@
}; };
</script> </script>
<div class="cross menu-btn" on:click|preventDefault="{click}" style="position: fixed">
<div class="panel">
<div class="btn">
<div class="cross menu-btn" on:click|preventDefault="{click}" style="z-index: 1001">
<img src="/svg/menu1.svg" class="idle" alt="idle"> <img src="/svg/menu1.svg" class="idle" alt="idle">
<img src="/svg/menu2.svg" class="active" alt="active"> <img src="/svg/menu2.svg" class="active" alt="active">
</div> </div>
</div>
<div class="menu">
<slot></slot>
</div>
</div>

@ -18,17 +18,18 @@
import ZjistiBtn from '../components/zjisti-vice.svelte'; import ZjistiBtn from '../components/zjisti-vice.svelte';
</script> </script>
<MenuBtn/> <MenuBtn>
<main id="root">
<section class="row fullheight">
<Logo/>
<div class="horizontal-menu"> <div class="horizontal-menu">
<a href="oborovky/#zalozit">Chci založit SOR</a> <a href="oborovky/#zalozit">Chci založit SOR</a>
<a href="oborovky/#povinnosti">Povinnosti člena SOR</a> <a href="oborovky/#povinnosti">Povinnosti člena SOR</a>
<a href="oborovky/#mluvci">Mluvčí SOR</a> <a href="oborovky/#mluvci">Mluvčí SOR</a>
<a href="oborovky/#prebiram">Přebírám SOR</a> <a href="oborovky/#prebiram">Přebírám SOR</a>
</div> </div>
</MenuBtn>
<main id="root">
<section class="row fullheight">
<Logo/>
<div class="row" style="width: 100%"> <div class="row" style="width: 100%">
<section class="col-1"></section> <section class="col-1"></section>
<section class="col-5"> <section class="col-5">
@ -134,10 +135,18 @@
<li>účastnit se společných setkání se zástupci vedení fakulty</li> <li>účastnit se společných setkání se zástupci vedení fakulty</li>
<li>spolupracovat při akcích typu předstudijní soustředění, den otevřených dveří apod.</li> <li>spolupracovat při akcích typu předstudijní soustředění, den otevřených dveří apod.</li>
</ul> </ul>
<div class="side-line">
<h6><b>Jednání rady a vedení</b></h6>
</div>
<ul style="margin-top:2vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
<li>rada má právo na jednání s vedoucím katedry (případně jeho zástupcem) nejméně jednou za semestr, kdy vedoucí katedry zajistí
projednání otázek spadajících pod činnosti rady</li>
<li>mluvčí rady se také účastní jednání SOR a spolků s vedením fakulty o kterém vedení informuje alespoň 14 dní předem</li>
<li>další jednání probíhají po vzájemné dohodě</li>
</ul>
</div> </div>
</div> </div>
<div class="col-5" style="line-height: 1"> <div class="col-5" style="line-height: 1">
<div style="height: 8vh"></div>
<div class="down" style="margin-right: 3vw"> <div class="down" style="margin-right: 3vw">
<div class="side-line" style="margin-bottom: 1vh" id="mluvci"> <div class="side-line" style="margin-bottom: 1vh" id="mluvci">
<h6 style="margin-bottom: 0"><b>Mluvčí SOR</b></h6> <h6 style="margin-bottom: 0"><b>Mluvčí SOR</b></h6>
@ -146,15 +155,6 @@
Mluvčí je zvolený zástupce z členů SOR. Jedná za SOR navenek, komunikuje s vedením a dohlíží na to, aby SOR fungovala jak má. Mluvčí je zvolený zástupce z členů SOR. Jedná za SOR navenek, komunikuje s vedením a dohlíží na to, aby SOR fungovala jak má.
</p> </p>
<div class="side-line"> <div class="side-line">
<h6><b>Jednání rady a vedení</b></h6>
</div>
<ul style="margin-top:2vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
<li>rada má právo na jednání s vedoucím katedry (případně jeho zástupcem) nejméně jednou za semestr, kdy vedoucí katedry zajistí
projednání otázek spadajících pod činnosti rady</li>
<li>mluvčí rady se také účastní jednání SOR a spolků s vedením fakulty o kterém vedení informuje alespoň 14 dní předem</li>
<li>další jednání probíhají po vzájemné dohodě</li>
</ul>
<div class="side-line">
<h6><b>Důležité</b></h6> <h6><b>Důležité</b></h6>
</div> </div>
<p style="margin-top:2vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)"> <p style="margin-top:2vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
@ -260,6 +260,7 @@
<source src="/video/8_stepan.mp4" type="video/webm"> <source src="/video/8_stepan.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Jaké to bylo v oborovce?: Štěpán Gabriel, bývalý člen SOR biologie</h6>
</div> </div>
</section> </section>
<section class="row" style="margin-top: 5vh"> <section class="row" style="margin-top: 5vh">

@ -15,16 +15,17 @@
<title>PedF UK Spolky | Přebírám spolek</title> <title>PedF UK Spolky | Přebírám spolek</title>
</svelte:head> </svelte:head>
<MenuBtn/>
<main id="root"> <MenuBtn>
<section class="row fullheight">
<Logo/>
<div class="horizontal-menu"> <div class="horizontal-menu">
<a href="prebiram/#formalni">Formální spolek</a> <a href="prebiram/#formalni">Formální spolek</a>
<a href="prebiram/#postup">Postup přebírání</a> <a href="prebiram/#postup">Postup přebírání</a>
<a href="prebiram/#neformalni">Neformální spolek</a> <a href="prebiram/#neformalni">Neformální spolek</a>
</div> </div>
</MenuBtn>
<main id="root">
<section class="row fullheight">
<Logo/>
<div class="row" style="width: 100%"> <div class="row" style="width: 100%">
<section class="col-1"></section> <section class="col-1"></section>
<section class="col-5"> <section class="col-5">
@ -270,6 +271,7 @@
<source src="/video/10_veru.mp4" type="video/webm"> <source src="/video/10_veru.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Jaké to bylo být předsedou?: Veronika Müllerová, bývalá předsedkyně spolku Agora</h6>
</div> </div>
</section> </section>
<section class="row" style="margin-top: 9rem"> <section class="row" style="margin-top: 9rem">

@ -20,11 +20,7 @@
<title>PedF UK Spolky | Předseda spolku</title> <title>PedF UK Spolky | Předseda spolku</title>
</svelte:head> </svelte:head>
<MenuBtn/> <MenuBtn>
<main id="root">
<section class="row fullheight">
<Logo/>
<div class="horizontal-menu"> <div class="horizontal-menu">
<a href="predseda/#vyrocni-zprava">Výroční zpráva</a> <a href="predseda/#vyrocni-zprava">Výroční zpráva</a>
<a href="predseda/#spolkova-mistnost">Spolková místnost</a> <a href="predseda/#spolkova-mistnost">Spolková místnost</a>
@ -33,6 +29,11 @@
<a href="predseda/#dalsi">Další spolky</a> <a href="predseda/#dalsi">Další spolky</a>
<a href="predseda/#predpisy">Předpisy a pravidla</a> <a href="predseda/#predpisy">Předpisy a pravidla</a>
</div> </div>
</MenuBtn>
<main id="root">
<section class="row fullheight">
<Logo/>
<div class="row" style="width: 100%"> <div class="row" style="width: 100%">
<section class="col-1"></section> <section class="col-1"></section>
<section class="col-5"> <section class="col-5">
@ -73,6 +74,7 @@
<source src="/video/3_nela.mp4" type="video/webm"> <source src="/video/3_nela.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Výroční zpráva: Nela Pastrnková, bývalá místopředsedkyně spolku Agora</h6>
</div> </div>
</section> </section>
<section class="row" style="margin-top: 5vh"> <section class="row" style="margin-top: 5vh">
@ -267,6 +269,7 @@
<source src="/video/5_lenka.mp4" type="video/webm"> <source src="/video/5_lenka.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Lenka Nováková, předsedkyně spolku Agora</h6>
</div> </div>
<div class="mySlides fade"> <div class="mySlides fade">
@ -275,6 +278,7 @@
<source src="/video/4_holka_pozvanka.mp4" type="video/webm"> <source src="/video/4_holka_pozvanka.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Michala Chudobová, předsedkyně Pedagogického spolku Emil</h6>
</div> </div>
<!-- Next and previous buttons --> <!-- Next and previous buttons -->

@ -15,17 +15,18 @@
<title>PedF UK Spolky | Založit spolek</title> <title>PedF UK Spolky | Založit spolek</title>
</svelte:head> </svelte:head>
<MenuBtn/> <MenuBtn>
<main id="root">
<section class="row fullheight">
<Logo/>
<div class="horizontal-menu"> <div class="horizontal-menu">
<a href="zalozit-spolek/#formalni">Formální spolek</a> <a href="zalozit-spolek/#formalni">Formální spolek</a>
<a href="zalozit-spolek/#formalni-info">Informace k založení formálního spolku</a> <a href="zalozit-spolek/#formalni-info">Informace k založení formálního spolku</a>
<a href="zalozit-spolek/#neformalni">Neformální spolek</a> <a href="zalozit-spolek/#neformalni">Neformální spolek</a>
<a href="zalozit-spolek/#neformalni-info">Info k založení neformálního spolku</a> <a href="zalozit-spolek/#neformalni-info">Info k založení neformálního spolku</a>
</div> </div>
</MenuBtn>
<main id="root">
<section class="row fullheight">
<Logo/>
<div class="row" style="width: 100%"> <div class="row" style="width: 100%">
<section class="col-1"></section> <section class="col-1"></section>
<section class="col-7"> <section class="col-7">
@ -135,22 +136,6 @@
<div class="number-thing"> <div class="number-thing">
<div class="down"> <div class="down">
<span>6.</span> <span>6.</span>
<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Registruj se jako fakultní spolek</b></h6>
<p>
Formulář je potřeba vyplnit, aby byl tvůj spolek zapsán na fakultě. Odkaz najdeš
<a href="http://wwwmod.pedf.cuni.cz/udeska/files/opatreni_dekana/formular_opad_c._192017_spolky.pdf">tady</a>.
</p>
</div>
</div>
</div>
<div class="col-1"></div>
</section>
<section class="row">
<div class="col-1"></div>
<div class="col">
<div class="number-thing">
<div class="down">
<span>7.</span>
<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Základní předpisy</b></h6> <h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Základní předpisy</b></h6>
<ol style="list-style-type: lower-alpha; margin-left: 0; padding-left: 0"> <ol style="list-style-type: lower-alpha; margin-left: 0; padding-left: 0">
<li style="margin-left: 0; padding-left: 0;"> <li style="margin-left: 0; padding-left: 0;">
@ -169,19 +154,23 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-1"></div>
</section>
<section class="row">
<div class="col-1"></div>
<div class="col"> <div class="col">
<div class="number-thing"> <div class="number-thing">
<div class="down"> <div class="down">
<span>8.</span> <span>7.</span>
<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Povinnosti a práva spolku</b></h6> <h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Povinnosti a práva spolku</b></h6>
<p>Tohle jsme ti podrobněji sepsali <a>tady</a>.</p> <p>Tohle jsme ti podrobněji sepsali <a href="/zalozit-spolek#zakladni-prava">tady</a>.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="number-thing"> <div class="number-thing">
<div class="down"> <div class="down">
<span>9.</span> <span>8.</span>
<h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Nahlašování akcí</b></h6> <h6 style="font-size: calc(var(--font-size) / 1.5); color: var(--color-primary)"><b>Nahlašování akcí</b></h6>
<p> <p>
Všechny akce, které spolek bude pořádat je nutné nahlašovat prostřednictvím Všechny akce, které spolek bude pořádat je nutné nahlašovat prostřednictvím
@ -190,6 +179,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col">
</div>
<div class="col-1"></div> <div class="col-1"></div>
</section> </section>
<section class="row"> <section class="row">
@ -235,9 +226,9 @@
<div style="height: 8vh"></div> <div style="height: 8vh"></div>
<div class="down" style="margin-right: 3vw"> <div class="down" style="margin-right: 3vw">
<div class="side-line" style="margin-bottom: 1vh" id="mluvci"> <div class="side-line" style="margin-bottom: 1vh" id="mluvci">
<h6 style="margin-bottom: 0"><b>Základní práva a povinnosti spolku</b></h6> <h6 style="margin-bottom: 0" id="zakladni-prava"><b>Základní práva a povinnosti spolku</b></h6>
</div> </div>
<ul style="list-style-type: alphanum; margin-top:2vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)"> <ul class="spaced-ul" style="list-style-type: alphanum; margin-top:2vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.7)">
<li> <li>
Musíš do 30. 4. odevzdat výroční zprávu. Musíš do 30. 4. odevzdat výroční zprávu.
</li> </li>
@ -276,7 +267,7 @@
<section class="col-1"></section> <section class="col-1"></section>
<section class="col bg-circle bg-center bg-auto" id="neformalni"> <section class="col bg-circle bg-center bg-auto" id="neformalni">
<h3 style="margin-bottom: 1vh">Neformální spolek</h3> <h3 style="margin-bottom: 1vh">Neformální spolek</h3>
<hr class="thing-hr" style="margin-left: 17vw;margin-bottom: 5vh; "> <hr class="thing-hr" style="margin-bottom: 5vh; ">
<p style="font-size: calc(var(--font-size) / 1.8); margin-right: 15vw"> <p style="font-size: calc(var(--font-size) / 1.8); margin-right: 15vw">
Hodí se pro partu lidí, které spojují společné zájmy a koníčky, jako například divadlo. Hodí se pro partu lidí, které spojují společné zájmy a koníčky, jako například divadlo.
Nemusí mít sice žádné volby a orgány, ale má zase menší rozpočet a ve chvíli, kdy se začne rozrůstat, Nemusí mít sice žádné volby a orgány, ale má zase menší rozpočet a ve chvíli, kdy se začne rozrůstat,

@ -167,6 +167,7 @@
<source src="/video/7_jana.mp4" type="video/webm"> <source src="/video/7_jana.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Jana Gombík Ruszó, zakladatelka spolku Drosophila</h6>
</div> </div>
<div class="mySlides2 fade"> <div class="mySlides2 fade">
@ -175,6 +176,7 @@
<source src="/video/8_stepan.mp4" type="video/webm"> <source src="/video/8_stepan.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Štěpán Gabriel, bývalý člen SOR biologie</h6>
</div> </div>
<div class="mySlides2 fade"> <div class="mySlides2 fade">
@ -183,6 +185,7 @@
<source src="/video/1_verca_1.mp4" type="video/webm"> <source src="/video/1_verca_1.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Veronika Valínová, bývalá členka spolku Agora</h6>
</div> </div>
<!-- Next and previous buttons --> <!-- Next and previous buttons -->
@ -220,6 +223,7 @@
<source src="/video/4_holka_pozvanka.mp4" type="video/webm"> <source src="/video/4_holka_pozvanka.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Michala Chudobová, předsedkyně Pedagogického spolku Emil</h6>
</div> </div>
<div class="mySlides3 fade"> <div class="mySlides3 fade">
@ -228,6 +232,7 @@
<source src="/video/6_petr.mp4" type="video/webm"> <source src="/video/6_petr.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Petr Holub, předseda spolku Drosophila</h6>
</div> </div>
<div class="mySlides3 fade"> <div class="mySlides3 fade">
@ -236,6 +241,7 @@
<source src="/video/11_lenka_2.mp4" type="video/webm"> <source src="/video/11_lenka_2.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Lenka Nováková, předsedkyně spolku Agora</h6>
</div> </div>
<div class="mySlides3 fade"> <div class="mySlides3 fade">
<div class="numbertext">4 / 4</div> <div class="numbertext">4 / 4</div>
@ -243,6 +249,7 @@
<source src="/video/9_devce.mp4" type="video/webm"> <source src="/video/9_devce.mp4" type="video/webm">
Your browser does not support video. Your browser does not support video.
</video> </video>
<h6 style="font-size: calc(var(--font-size) / 1.9)">Linda Pleskačová, radní pro PR spolku Otevřeno</h6>
</div> </div>
<!-- Next and previous buttons --> <!-- Next and previous buttons -->

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

@ -21,15 +21,19 @@ body > canvas {
opacity: 0; opacity: 0;
z-index: -1000; z-index: -1000;
} }
.navigation-overlay .logo {
position: fixed !important;
}
.open-nav { .open-nav {
opacity: 1; opacity: 1;
z-index: 1000; z-index: 1000;
} }
.cross { .cross {
cursor: pointer; cursor: pointer;
position: absolute; left: 1vh;
left: 2vh; top: 1vh;
top: 2vh; width: 2vw;
height: 2vw;
} }
.cross .idle { .cross .idle {
opacity: 1; opacity: 1;
@ -38,6 +42,7 @@ body > canvas {
transition: 0.5s; transition: 0.5s;
width: 2vw; width: 2vw;
height: 2vw; height: 2vw;
margin-left: 1vw;
} }
.cross .active { .cross .active {
opacity: 0; opacity: 0;
@ -46,6 +51,7 @@ body > canvas {
transition: 0.5s; transition: 0.5s;
width: 2vw; width: 2vw;
height: 2vw; height: 2vw;
margin-left: 1vw;
} }
.cross img { .cross img {
max-width: inherit; max-width: inherit;
@ -61,6 +67,7 @@ body > canvas {
top: 3vh; top: 3vh;
} }
#root { #root {
margin-top: 3vw;
transition: 0.6s; transition: 0.6s;
min-height: 100vh; min-height: 100vh;
} }
@ -121,10 +128,11 @@ canvas {
color: #000; color: #000;
font-size: calc(var(--font-size) / 1.7); font-size: calc(var(--font-size) / 1.7);
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.1s;
box-sizing: content-box;
} }
.horizontal-menu a:hover { .horizontal-menu a:hover {
border: solid 2px var(--color-primary); border-bottom: solid 2px var(--color-primary);
opacity: 1 !important; opacity: 1 !important;
} }
.thing-hr { .thing-hr {
@ -269,3 +277,21 @@ canvas {
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
.menu .horizontal-menu {
bottom: auto;
top: 0;
padding-top: 1vw;
padding-left: 4vw;
box-sizing: border-box;
padding-right: 1vw;
}
.menu .horizontal-menu a {
text-decoration: none;
}
.panel .btn .menu-btn {
left: auto;
top: auto;
}
.spaced-ul li {
margin-bottom: 1em;
}

@ -21,6 +21,8 @@ body > canvas
transition: .7s; transition: .7s;
opacity 0 opacity 0
z-index -1000 z-index -1000
& .logo
position: fixed !important
.open-nav .open-nav
opacity 1 opacity 1
@ -28,10 +30,10 @@ body > canvas
.cross .cross
cursor pointer cursor pointer
position absolute left 1vh
top 1vh
left 2vh width max(2vw, 1.5em)
top 2vh height max(2vw, 1.5em)
.idle .idle
opacity: 1 opacity: 1
position: absolute position: absolute
@ -39,6 +41,7 @@ body > canvas
transition: .5s transition: .5s
width max(2vw, 1.5em) width max(2vw, 1.5em)
height max(2vw, 1.5em) height max(2vw, 1.5em)
margin-left 1vw
.active .active
opacity: 0 opacity: 0
position: absolute position: absolute
@ -46,6 +49,7 @@ body > canvas
transition: .5s transition: .5s
width max(2vw, 1.5em) width max(2vw, 1.5em)
height max(2vw, 1.5em) height max(2vw, 1.5em)
margin-left 1vw
img img
max-width: inherit max-width: inherit
&:hover .active &:hover .active
@ -58,6 +62,7 @@ body > canvas
top 3vh top 3vh
#root #root
margin-top: max(3vw, 1.7em)
transition .6s transition .6s
min-height 100vh min-height 100vh
// min-width 100vw // min-width 100vw
@ -120,9 +125,10 @@ body > canvas
color: #000 color: #000
font-size calc(var(--font-size) / 1.7) font-size calc(var(--font-size) / 1.7)
cursor pointer cursor pointer
transition .2s transition .1s
box-sizing: content-box
&:hover &:hover
border: solid 2px var(--color-primary) border-bottom: solid 2px var(--color-primary)
opacity: 1 !important opacity: 1 !important
.thing-hr .thing-hr
@ -256,3 +262,23 @@ body > canvas
left:0; left:0;
z-index:1; z-index:1;
} }
.menu .horizontal-menu
bottom: auto;
top: 0;
padding-top: max(1vw, 0.4em);
padding-left: max(4vw, 1.8em);
box-sizing: border-box;
padding-right: 1vw;
& a
text-decoration none
.panel .btn .menu-btn {
left: auto;
top: auto;
}
.spaced-ul li {
margin-bottom: 1em
}