video stuff

package-lock.json

@@ -1068,6 +1068,11 @@
         "siema": "^1.5.1"
       }
     },
+    "@glidejs/glide": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@glidejs/glide/-/glide-3.4.1.tgz",
+      "integrity": "sha512-C34AEcK1HjSyxilRToUL54I6KAoodojUbeRlXoruobZuG0eGm8xfDL+3kgkWj7AJK4EZtunSOYfoqMp70eDtwg=="
+    },
     "@polka/url": {
       "version": "1.0.0-next.11",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",

package.json

@@ -12,6 +12,7 @@
     "test": "run-p --race dev cy:run"
   },
   "dependencies": {
+    "@glidejs/glide": "^3.4.1",
     "animejs": "^3.2.0",
     "compression": "^1.7.1",
     "polka": "next",

src/routes/home.html

@@ -1,14 +0,0 @@
-<section class="row fullheight">
-i
-sa
-da
-d
-da
-sd
-ads
-sd
-
-sad
-sad
-sa
-</section>

src/routes/index.svelte

@@ -214,6 +214,10 @@
 	});
 </script>
 
+<svelte:head>
+	<title>PedF UK Spolky | </title>
+</svelte:head>
+
 <Logo/>
 
 <main id="container">

src/routes/prebiram.svelte

@@ -11,6 +11,10 @@
 	import ZjistiBtn from '../components/zjisti-vice.svelte';
 </script>
 
+<svelte:head>
+	<title>PedF UK Spolky | Přebírám spolek</title>
+</svelte:head>
+
 <MenuBtn/>
 
 <main id="root">
@@ -250,6 +254,10 @@
 				<p>
 					Aby toho všeho nebylo málo, tady máš rady od bývalých i současných předsedů:
 				</p>
+        		<video class="smol-video" controls style="width: 100%; margin-top: 2vh">
+        			<source src="/video/10_veru.mp4" type="video/webm">
+        			Your browser does not support video.
+        		</video>
 			</div>
 		</div>
 	</div>

src/routes/predseda.svelte

@@ -9,8 +9,17 @@
 	import UpArrow from '../components/up.svelte';
 	import MenuBtn from '../components/menu-btn.svelte';
 	import ZjistiBtn from '../components/zjisti-vice.svelte';
+	import { onMount } from 'svelte';
+
+	onMount(async () => {
+		window.currentSlide(1);
+	})
 </script>
 
+<svelte:head>
+	<title>PedF UK Spolky | Předseda spolku</title>
+</svelte:head>
+
 <MenuBtn/>
 
 <main id="root">
@@ -57,12 +66,12 @@
 			A jak na ní?
 		</h5>
 		<h5 style="padding-left: 4vw; margin-top:0" class="text-primary">
-			To ti řekne Verča
+			To ti řekne Nela
 		<h5>
 	</div>
 	<div class="col-5">
 		<video class="smol-video" controls>
-			<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
+			<source src="/video/3_nela.mp4" type="video/webm">
 			Your browser does not support video.
 		</video>
 	</div>
@@ -265,6 +274,7 @@ S tímhle ale přichází i nějaké povinnosti, které je potřeba dodržovat:
 			<a href="www.naucmese.cz">www.naucmese.cz</a> nebo na
 			<a href="https://www.acsa.cz">https://www.acsa.cz</a>
 		</p>
+		<h4>A jak to dělají další spolky na fakultě?</h4>
 	</div>
 </section>
 <section class="row" style="margin-top: 4vh" id="dalsi">
@@ -276,31 +286,23 @@ S tímhle ale přichází i nějaké povinnosti, které je potřeba dodržovat:
 		  <!-- Full-width images with number and caption text -->
 		  <div class="mySlides fade">
 		    <div class="numbertext">1 / 3</div>
-		    <img src="img/trump.jpg" style="width:100%" alt="">
+    		<video class="smol-video" controls style="width: 100%">
-		    <div class="text">Caption Text</div>
+    			<source src="/video/5_lenka.mp4" type="video/webm">
+    			Your browser does not support video.
+    		</video>
 		  </div>
 
 		  <div class="mySlides fade">
 		    <div class="numbertext">2 / 3</div>
-		    <img src="img/trump.jpg" style="width:100%" alt="">
+    		<video class="smol-video" controls style="width: 100%">
-		    <div class="text">Caption Two</div>
+    			<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
-		  </div>
+    			Your browser does not support video.
-
+    		</video>
-		  <div class="mySlides fade">
-		    <div class="numbertext">3 / 3</div>
-		    <img src="img/trump.jpg" style="width:100%" alt="">
-		    <div class="text">Caption Three</div>
-		  </div>
-
-		  <div class="mySlides fade">
-		    <div class="numbertext">3 / 3</div>
-		    <img src="img/trump.jpg" style="width:100%" alt="">
-		    <div class="text">Caption Three</div>
 		  </div>
 
 		  <!-- Next and previous buttons -->
-		  <a class="prev" onclick="plusSlides(-1)" href="#0">&#10094;</a>
+		  <a class="prev" onclick="plusSlides(-1)" href="/predseda#0">&#10094;</a>
-		  <a class="next" onclick="plusSlides(1)" href="#0">&#10095;</a>
+		  <a class="next" onclick="plusSlides(1)" href="/predseda#0">&#10095;</a>
 		</div>
 		<br>
 
@@ -308,8 +310,6 @@ S tímhle ale přichází i nějaké povinnosti, které je potřeba dodržovat:
 		<div style="text-align:center">
 		  <span class="dot" onclick="currentSlide(1)"></span>
 		  <span class="dot" onclick="currentSlide(2)"></span>
-		  <span class="dot" onclick="currentSlide(3)"></span>
-		  <span class="dot" onclick="currentSlide(4)"></span>
 		</div>
 	</section>
 	<script src="js/carousel.js"></script>

src/routes/zalozit-spolek.svelte

@@ -11,6 +11,10 @@
 	import ZjistiBtn from '../components/zjisti-vice.svelte';
 </script>
 
+<svelte:head>
+	<title>PedF UK Spolky | Založit spolek</title>
+</svelte:head>
+
 <MenuBtn/>
 
 <main id="root">

src/routes/zapojit-se.svelte

@@ -13,10 +13,19 @@
 	import MenuBtn from '../components/menu-btn.svelte';
 	import ZjistiBtn from '../components/zjisti-vice.svelte';
 	import Carousel from '@beyonk/svelte-carousel';
+	import { onMount } from 'svelte';
+	import Glide from '@glidejs/glide';
+
+	onMount(async () => {
+		new Glide('.glide').mount()
+	});
 </script>
 
-<MenuBtn/>
+<svelte:head>
+	<title>PedF UK Spolky | Chci se zapojit</title>
+</svelte:head>
 
+<MenuBtn/>
 <main id="root">
 <section class="row fullheight">
 	<Logo/>
@@ -147,12 +156,22 @@
 </section>
 <section class="row" style="margin-top: 4vh">
     <section class="col">
-		 <Carousel>
+		<video class="smol-video" controls style="width: 100%">
-		    <img src="https://source.unsplash.com/random/600x300?a" alt="" style="width: 100%">
+			<source src="/video/7_jana.mp4" type="video/webm">
-		    <img src="https://source.unsplash.com/random/600x300?s" alt="" style="width: 100%">
+			Your browser does not support video.
-		    <img src="https://source.unsplash.com/random/600x300?c" alt="" style="width: 100%">
+		</video>
-		    <img src="https://source.unsplash.com/random/600x300?v" alt="" style="width: 100%">
+    </section>
-		 </Carousel>
+    <section class="col">
+		<video class="smol-video" controls style="width: 100%">
+			<source src="/video/8_stepan.mp4" type="video/webm">
+			Your browser does not support video.
+		</video>
+    </section>
+	<section class="col">
+		<video class="smol-video" controls style="width: 100%">
+			<source src="/video/1_verca_1.mp4" type="video/webm">
+			Your browser does not support video.
+		</video>
 	</section>
 </section>
 <section class="row" style="margin-top: 14vh">
@@ -164,12 +183,28 @@
 </section>
 <section class="row" style="margin-top: 4vh">
     <section class="col">
-		 <Carousel>
+		<video class="smol-video" controls style="width: 100%">
-		    <img src="https://source.unsplash.com/random/600x300?as" alt="" style="width: 100%">
+			<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
-		    <img src="https://source.unsplash.com/random/600x300?ss" alt="" style="width: 100%">
+			Your browser does not support video.
-		    <img src="https://source.unsplash.com/random/600x300?cs" alt="" style="width: 100%">
+		</video>
-		    <img src="https://source.unsplash.com/random/600x300?vs" alt="" style="width: 100%">
+    </section>
-		 </Carousel>
+    <section class="col">
+		<video class="smol-video" controls style="width: 100%">
+			<source src="/video/6_petr.mp4" type="video/webm">
+			Your browser does not support video.
+		</video>
+    </section>
+	<section class="col">
+		<video class="smol-video" controls style="width: 100%">
+			<source src="/video/11_lenka_2.mp4" type="video/webm">
+			Your browser does not support video.
+		</video>
+	</section>
+	<section class="col">
+		<video class="smol-video" controls style="width: 100%">
+			<source src="/video/9_devce.mp4" type="video/webm">
+			Your browser does not support video.
+		</video>
 	</section>
 </section>
 <section class="row" style="margin-top: 5vh">

src/template.html

@@ -13,6 +13,8 @@
 	<link href="/css/normalize.css" rel="stylesheet">
 	<link rel="stylesheet" href="https://unpkg.com/chota@latest">
 	<link href="/main.css" rel="stylesheet">
+    <link rel="stylesheet" href="/glide.core.min.css">
+    <link rel="stylesheet" href="/glide.theme.min.css">
 
 	%sapper.scripts%
 

static/glide.core.min.css

@@ -0,0 +1 @@
+.glide{position:relative;width:100%;box-sizing:border-box}.glide *{box-sizing:inherit}.glide__track{overflow:hidden}.glide__slides{position:relative;width:100%;list-style:none;backface-visibility:hidden;transform-style:preserve-3d;touch-action:pan-Y;overflow:hidden;padding:0;white-space:nowrap;display:flex;flex-wrap:nowrap;will-change:transform}.glide__slides--dragging{user-select:none}.glide__slide{width:100%;height:100%;flex-shrink:0;white-space:normal;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.glide__slide a{user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.glide__arrows{-webkit-touch-callout:none;user-select:none}.glide__bullets{-webkit-touch-callout:none;user-select:none}.glide--rtl{direction:rtl}

static/glide.theme.min.css

@@ -0,0 +1 @@
+.glide__arrow{position:absolute;display:block;top:50%;z-index:2;color:white;text-transform:uppercase;padding:9px 12px;background-color:transparent;border:2px solid rgba(255,255,255,0.5);border-radius:4px;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);text-shadow:0 0.25em 0.5em rgba(0,0,0,0.1);opacity:1;cursor:pointer;transition:opacity 150ms ease, border 300ms ease-in-out;transform:translateY(-50%);line-height:1}.glide__arrow:focus{outline:none}.glide__arrow:hover{border-color:white}.glide__arrow--left{left:2em}.glide__arrow--right{right:2em}.glide__arrow--disabled{opacity:0.33}.glide__bullets{position:absolute;z-index:2;bottom:2em;left:50%;display:inline-flex;list-style:none;transform:translateX(-50%)}.glide__bullet{background-color:rgba(255,255,255,0.5);width:9px;height:9px;padding:0;border-radius:50%;border:2px solid transparent;transition:all 300ms ease-in-out;cursor:pointer;line-height:0;box-shadow:0 0.25em 0.5em 0 rgba(0,0,0,0.1);margin:0 0.25em}.glide__bullet:focus{outline:none}.glide__bullet:hover,.glide__bullet:focus{border:2px solid white;background-color:rgba(255,255,255,0.5)}.glide__bullet--active{background-color:white}.glide--swipeable{cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.glide--dragging{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}

static/main.css

@@ -189,28 +189,35 @@ canvas {
   margin-left: 2vw;
   margin-top: 8vh;
 }
-.number-thing span {
+.number-thing span,
+.number-thing .down span {
   color: var(--color-primary);
   font-size: calc(var(--font-size) * 2.2);
 }
-.number-thing p {
+.number-thing p,
-  font-size: calc(var(--font-size) / 2.3);
+.number-thing .down p {
+  font-size: calc(var(--font-size) / 2);
   margin-bottom: 0;
 }
-.number-thing li {
+.number-thing li,
+.number-thing .down li {
   font-size: calc(var(--font-size) / 2);
   text-align: justify;
 }
-.number-thing ol {
+.number-thing ol,
+.number-thing .down ol {
   margin-top: 0;
   margin-left: 2vw;
 }
-.number-thing ol li {
+.number-thing ol li,
+.number-thing .down ol li {
   counter-increment: list;
   list-style-type: none;
+  font-size: calc(var(--font-size) / 2);
   position: relative;
 }
-.number-thing ol li:before {
+.number-thing ol li:before,
+.number-thing .down ol li:before {
   font-size: 110%;
   font-weight: 900;
   color: var(--color-primary);

static/main.styl

@@ -185,21 +185,22 @@ body > canvas
 	margin-right: 2vw
 	margin-left: 2vw
 	margin-top: 8vh
-	& span
+	& span, & .down span
 		color var(--color-primary)
 		font-size calc(var(--font-size) * 2.2)
-	& p
+	& p, & .down p
-		font-size calc(var(--font-size) / 2.3)
+		font-size calc(var(--font-size) / 2)
 		margin-bottom 0
-	& li
+	& li, & .down li
 		font-size calc(var(--font-size) / 2)
 		text-align justify
-	& ol
+	& ol, & .down ol
 		margin-top 0
 		margin-left 2vw
 		& li
 			counter-increment: list
 			list-style-type: none;
+			font-size calc(var(--font-size) / 2)
 			position: relative;
 			&:before
 				font-size 110%