From 44109e0811f66737d6bb4cd015c8882ed044e7bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Hozda?= <luk.hozda@gmail.com>
Date: Thu, 8 Oct 2020 21:56:01 +0200
Subject: [PATCH] cosmetic changes

---
 src/components/logo.svelte     | 16 +++++++++-
 src/components/menu-btn.svelte |  5 ++++
 src/routes/index.svelte        | 53 ++++++++++++++++++++++++----------
 3 files changed, 58 insertions(+), 16 deletions(-)

diff --git a/src/components/logo.svelte b/src/components/logo.svelte
index 09503a5..33cd4f2 100644
--- a/src/components/logo.svelte
+++ b/src/components/logo.svelte
@@ -11,8 +11,22 @@
 	.logo:hover {
 	  transform: scale(1.15);
 	}
+	.keep {
+		display: block;
+	}
+	@media screen and (max-width: 800px) {
+		.logo {
+			display: none;
+		}
+		.keep {
+			display: block !important;
+		}
+	}
 </style>
+<script>
+    export let keep = false;
+</script>
 
-<div class="logo">
+<div class="logo" class:keep>
 	<a href="https://pedf.cuni.cz/PEDF-1.html"><img src="/img/logo.png" alt="logo"></a>
 </div>
diff --git a/src/components/menu-btn.svelte b/src/components/menu-btn.svelte
index 2673c59..e21d60e 100644
--- a/src/components/menu-btn.svelte
+++ b/src/components/menu-btn.svelte
@@ -25,6 +25,11 @@
     	align-items: center;
     	justify-items: center;
     }
+	@media screen and (max-width: 800px) {
+		.panel {
+			background: none;
+		}
+	}
 </style>
 
 <script>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index df89477..d30e6b2 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -169,6 +169,9 @@
 		opacity: 0;
 	}
 @media screen and (max-width: 800px) {
+	#plusko {
+		display: none
+	}
 	#cinnosti {
 		left: auto;
 		right: auto;
@@ -176,24 +179,39 @@
 	}
 	#predseda {
 		top: 10vh;
-left: 50%;
-    transform: translate(-50%, 0);	}
+		width: 100%;
+		left: 0;
+		padding: 0;
+		padding-left: 20px;
+	}
 	#prebiram {
 		top: 20vh;
-left: 50%;
-    transform: translate(-50%, 0);	}
+		width: 100%;
+		left: 0;
+		padding: 0;
+		padding-left: 20px;
+	}
 	#zapojit {
 		top: 30vh;
-left: 50%;
-    transform: translate(-50%, 0);	}
+		width: 100%;
+		left: 0;
+		padding: 0;
+		padding-left: 20px;
+	}
 	#zalozit {
 		top: 60vh;
-left: 50%;
-    transform: translate(-50%, 0);	}
+		width: 100%;
+		left: 0;
+		padding: 0;
+		padding-left: 20px;
+	}
 	#oborovky {
 		top: 70vh;
-left: 50%;
-    transform: translate(-50%, 0);	}
+		width: 100%;
+		left: 0;
+		padding: 0;
+		padding-left: 20px;
+	}
 	.cross {
 		display: none;
 		width: 0 !important;
@@ -350,13 +368,18 @@ left: 50%;
         var result = (y*value) / 100;
         return result;
       }
+
+      onMount(() => {
+      	if (window.innerWidth <= 800)
+      		clicked = true;
+      })
 </script>
 
 <svelte:head>
 	<title>Spolky a SORky PedF UK | Chci se zapojit</title>
 </svelte:head>
 
-<Logo/>
+<Logo keep={true}/>
 
 <main id="container">
 	<div id="plusko" on:mouseover="{spin}" on:mouseout="{unspin}" class:active="{clicked}" on:click="{clicked_fun}">
@@ -370,14 +393,14 @@ left: 50%;
     	{/if}
     </div>
 
-	{#if clicked}
+	{#if clicked }
 	<div class="labels">
 		<div class="label label2" id="predseda">
 			<span><a href="/predseda">Předseda spolku</a></span>
 			<div class="cross bottom-right"></div>
 		</div>
 		<div class="label label2" id="prebiram">
-			<span style="padding-left: 0.5em; padding-right: 0.5em"><a href="/prebiram">Přebírám spolek</a></span>
+			<span style="padding-right: 0.5em"><a href="/prebiram">Přebírám spolek</a></span>
 			<div class="cross bottom-left"></div>
 		</div>
 		<div class="label label2" id="zapojit">
@@ -385,11 +408,11 @@ left: 50%;
 			<div class="cross top-right"></div>
 		</div>
 		<div class="label label2" id="zalozit">
-			<span style="padding-left: 0.5em; padding-right: 0.5em"><a href="/zalozit-spolek">Chci založit spolek</a></span>
+			<span style="padding-right: 0.5em"><a href="/zalozit-spolek">Chci založit spolek</a></span>
 			<div class="cross top-left"></div>
 		</div>
 		<div class="label label2" id="oborovky">
-			<span style="padding-left: 0.5em; padding-right: 0.5em"><a href="/oborovky">Chci vědět víc o oborovkách</a></span>
+			<span style="padding-right: 0.5em"><a href="/oborovky">Chci vědět víc o oborovkách</a></span>
 			<div class="cross top-right"></div>
 		</div>
 	</div>