pedf
/
spolky
Archived
1
0
Fork 0

najdi ten svuj

master
Lukáš Hozda 4 years ago
parent e6462d142b
commit ba79317025

@ -0,0 +1,131 @@
<style>
</style>
<script>
import { fade } from 'svelte/transition';
import Spolek from '../components/spolek.svelte';
export let selected = "hudba";
function click(n) {
console.log("click");
selected = n;
setTimeout(() => window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: 'smooth'}), 600);
setTimeout(() => console.log("timed lol"), 600);
}
</script>
<section class="row" style="margin-top: 5vh">
<div class="col flexy-boi">
<h5 style="color: var(--color-primary)"><b>Najdi ten svůj</b></h5>
</div>
</section>
<section class="row" style="margin-top: 5vh">
<div class="col-1"></div>
<div class="col flexy-boi">
<div class="horizontal-menu no-underline" style="position: relative; text-decoration: none !important; font-weight: 900;">
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('hudba')}>Hudba</span>
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('human')}>Humanitní</span>
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('jazyky')}>Jazyky</span>
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('pedag')}>Pedagogika</span>
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('prirod')}>Přírodovědné</span>
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('psych')}>Psychologie</span>
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('sport')}>Sport</span>
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('tech')}>Technika</span>
<span style="font-size: calc(var(--font-size) / 1.6)" on:click|preventDefault={() => click('umeni')}>Umění</span>
</div>
</div>
<div class="col-1"></div>
</section>
<section class="row" style="margin-top: 3vh">
<div class="col-1"></div>
{#if selected == "hudba"}
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Hudební výchovy"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
</div>
{:else if selected == "human"}
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://spolekagora.cz/" name="Agora"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="http://kps.pedf.cuni.cz/" name="Na slovíčko"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
</div>
{:else if selected == "jazyky"}
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Anglického jazyka"/>
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Německého jazyka"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Českého jazyka"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Francouzského jazyka"/>
</div>
{:else if selected == "pedag"}
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Učitelství pro 1. st. ZŠ"/>
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR PED"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR MŠ"/>
<Spolek href="http://pedagogickyspolekemil.cz/" name="Pedagogický spolek Emil"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR SPECPED"/>
<Spolek href="https://otevreno.org" name="SOR SPECPED"/>
</div>
{:else if selected == "prirod"}
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Biologie"/>
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR VZ"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Chemie"/>
<Spolek href="http://drosophila.cz/" name="Drosophila"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Matematiky"/>
</div>
{:else if selected == "psych"}
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Psychologie"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
</div>
{:else if selected == "sport"}
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR Tělocviku"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
</div>
{:else if selected == "tech"}
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR IT"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://microlab.space" name="microlab"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
</div>
{:else if selected == "umeni"}
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://pedf.cuni.cz/PEDF-386.html" name="SOR VV"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://www.facebook.com/spolekCult/" name="CULT"/>
</div>
<div class="col" transition:fade="{{delay: 250, duration: 300}}">
<Spolek href="https://www.facebook.com/LaVieBohemePedFUK/" name="La Vie Bohème"/>
</div>
{/if}
<div class="col-1"></div>
</section>

@ -0,0 +1,24 @@
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
</style>
<script>
export let href;
export let name;
export let img="/img/def-spolek.png"
</script>
<div class="container">
<a class="hover-man" href={href}><img src="{img}" alt="" style="width:100%; height: auto"></a>
<div class="bottom-left">{name}</div>
</div>

@ -212,7 +212,7 @@
<section class="row" style="margin-top: 9vh"> <section class="row" style="margin-top: 9vh">
<div class="col-1"></div> <div class="col-1"></div>
<div class="col-5" style="font-size: calc(var(--font-size) / 1.7); padding-right: 4vw"> <div class="col-5" style="font-size: calc(var(--font-size) / 1.7); padding-right: 4vw">
<h3 style="font-size: 2.5em">Akce a nahlašování akcí</h3> <h3 style="font-size: 2.5em" id="akce">Akce a nahlašování akcí</h3>
<hr class="thing-hr"> <hr class="thing-hr">
<p style="margin-top: 5vh"> <p style="margin-top: 5vh">
Pokud ses rozhodl uspořádat akci na fakultě, tak pamatuj, že musí být nahlášena přes Pokud ses rozhodl uspořádat akci na fakultě, tak pamatuj, že musí být nahlášena přes

@ -13,6 +13,7 @@
import MenuBtn from '../components/menu-btn.svelte'; import MenuBtn from '../components/menu-btn.svelte';
import ZjistiBtn from '../components/zjisti-vice.svelte'; import ZjistiBtn from '../components/zjisti-vice.svelte';
import Carousel from '@beyonk/svelte-carousel'; import Carousel from '@beyonk/svelte-carousel';
import Galerie from '../components/galerie.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
onMount(async () => { onMount(async () => {
@ -274,32 +275,7 @@
<hr class="thing-hr"> <hr class="thing-hr">
</div> </div>
</section> </section>
<section class="row" style="margin-top: 5vh"> <Galerie/>
<div class="col flexy-boi">
<h5 style="color: var(--color-primary)"><b>Najdi ten svůj</b></h5>
</div>
</section>
<section class="row" style="margin-top: 5vh">
<div class="col-1"></div>
<div class="col flexy-boi">
<div class="horizontal-menu no-underline" style="position: relative; text-decoration: none !important; font-weight: 900;">
<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Sport</a>
<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Umění</a>
<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Psychologie</a>
<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Pedagogika</a>
<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Logika</a>
<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Filozofie</a>
<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Společnost</a>
<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Hudba</a>
<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Dějiny</a>
</div>
</div>
<div class="col-1"></div>
</section>
<section class="row" style="margin-top: 3vh">
<div class="col-1"></div>
<div class="col-1"></div>
</section>
</main> </main>
<UpArrow/> <UpArrow/>

@ -135,6 +135,17 @@ canvas {
border-bottom: solid 2px var(--color-primary); border-bottom: solid 2px var(--color-primary);
opacity: 1 !important; opacity: 1 !important;
} }
.horizontal-menu.no-underline span {
color: #000;
font-size: calc(var(--font-size) / 1.7);
cursor: pointer;
transition: 0.1s;
box-sizing: content-box;
}
.horizontal-menu.no-underline span:hover {
border-bottom: solid 2px var(--color-primary);
opacity: 1 !important;
}
.thing-hr { .thing-hr {
width: 10vw; width: 10vw;
height: 0.6vh; height: 0.6vh;
@ -237,6 +248,7 @@ canvas {
} }
.hover-man { .hover-man {
transition: 0.3s; transition: 0.3s;
cursor: pointer;
} }
.hover-man:hover { .hover-man:hover {
filter: brightness(0.7) contrast(0.7); filter: brightness(0.7) contrast(0.7);

@ -130,6 +130,15 @@ body > canvas
&:hover &:hover
border-bottom: solid 2px var(--color-primary) border-bottom: solid 2px var(--color-primary)
opacity: 1 !important opacity: 1 !important
&.no-underline span
color: #000
font-size calc(var(--font-size) / 1.7)
cursor pointer
transition .1s
box-sizing: content-box
&:hover
border-bottom: solid 2px var(--color-primary)
opacity: 1 !important
.thing-hr .thing-hr
width: 10vw; width: 10vw;
@ -216,11 +225,11 @@ body > canvas
content: counter(list, lower-alpha) ") "; content: counter(list, lower-alpha) ") ";
.row .row
// width: 100vw
text-transform none text-transform none
.hover-man .hover-man
transition: .3s transition: .3s
cursor: pointer
&:hover &:hover
filter brightness(.7) contrast(.7) filter brightness(.7) contrast(.7)