From 3bc97e736df5d811a32b7db9d361e0bffb364743 Mon Sep 17 00:00:00 2001
From: Emil Miler <emil.miler@pedf.cuni.cz>
Date: Wed, 23 Jun 2021 14:23:39 +0200
Subject: [PATCH] =?UTF-8?q?Sekce=20main=20a=20scroll=20p=C5=99i=20kliknut?=
 =?UTF-8?q?=C3=AD=20na=20=C5=A1ipku?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html |  7 +++++--
 style.css  | 18 +++++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index cc1b4f3..89d5bf7 100644
--- a/index.html
+++ b/index.html
@@ -17,9 +17,12 @@
 	<header>
 		<h1>Projekt SPIN</h1>
 		<p>Projekt SPIN &ndash; <i>Spolupráce a inovace</i> &ndash; vznikl z&nbsp;iniciativy <strong>katedry matematiky a didaktitky matematiky</strong> a <strong>katedry preprimární a primární pedagogiky PedF UK</strong> za podpory <strong>Nadace České spořitelny</strong>. Jeho hlavním cílem je zkvalitnit a inovovat přípravu budoucích učitelů prvního stupně. Největší důraz se klade na propojovaní teorie a praxe, například prostřednictvím tandemové výuky v&nbsp;rámci vysokoškolských kurzů, práce s&nbsp;čerstvými absolventy nebo tutoringu.</p>
-		<img src="img/arrow.svg" alt="Arrow" class="arrow">
+		<a href="#main">
+			<img src="img/arrow.svg" alt="Arrow" class="arrow">
+		</a>
 	</header>
-	<main>
+	<main id="main">
+		<h2>Lorem Ipsum</h2>
 	</main>
 </body>
 </html>
diff --git a/style.css b/style.css
index c3073ee..3c8db6f 100644
--- a/style.css
+++ b/style.css
@@ -1,9 +1,15 @@
+:root {
+	--width: 1000px;
+}
+
 @font-face {
 	font-family: montserrat;
 	src: url(fnt/montserrat-light.ttf) format("truetype");
 }
 
+
 * { box-sizing: border-box }
+html { scroll-behavior: smooth }
 
 body {
 	margin: 0;
@@ -13,19 +19,19 @@ body {
 	font-family: montserrat, sans;
 }
 
+header, main { min-height: 100vh }
+
 header {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 
-	min-height: 100vh;
 	padding: 1rem;
-
 	font-size: 1.5rem;
 }
 header p {
-	max-width: 65rem;
+	max-width: var(--width);
 	text-align: justify;
 }
 header .arrow {
@@ -33,3 +39,9 @@ header .arrow {
 	margin-top: 3em;
 }
 
+main {
+	max-width: var(--width);
+	margin: 0 auto;
+	padding: 1em;
+}
+