From bfc1dc89538177ff6c8b4bbb780dd0d057898eaf Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Mon, 20 Feb 2023 16:08:59 +0100
Subject: [PATCH] Link to sections from nav and smooth scroll

---
 index.html      | 22 +++++++++++-----------
 sass/style.scss |  2 ++
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 1a5cc50..f2da7d6 100644
--- a/index.html
+++ b/index.html
@@ -13,11 +13,11 @@
 					<div class="border-container">
 						<img src="/static/logo.svg" alt="Logo" class="logo">
 						<nav>
-							<a href="#">Obecné zásady</a>
-							<a href="#">Učitelský checklist</a>
-							<a href="#">Příběhy</a>
-							<a href="#">Na koho se obrátit</a>
-							<a href="#">FAQ</a>
+							<a href="#zasady">Obecné zásady</a>
+							<a href="#checklist">Učitelský checklist</a>
+							<a href="#pribehy">Příběhy</a>
+							<a href="#kontakty">Na koho se obrátit</a>
+							<a href="#faq">FAQ</a>
 						</nav>
 						<div class="menu-button">
 							.
@@ -38,12 +38,12 @@
 		</div>
 		<section>
 		</section>
-		<section class="wrap">
+		<section class="wrap" id="zasady">
 			<h1>Obecné Zásady</h1>
 			<p class="narrow text-center">Ut vel mattis leo. Ut rutrum id urna eget congue. Vestibulum sed lobortis magna, eget hendrerit tortor. Nulla tempus viverra neque, in egestas quam aliquet eu. Curabitur tempor eros ac ante bibendum, quis hendrerit odio vehicula. Cras consectetur tellus sit amet ante semper, pharetra gravida nisl laoreet. Donec vel condimentum nisi. Aliquam lorem est, consequat eget diam et, sollicitudin tincidunt risus.</p>
 		</section>
-		<section class="wrap">
-			<h1>Učitleský checklist</h1>
+		<section class="wrap" id="checklist">
+			<h1>Učitelský checklist</h1>
 			<p class="narrow text-center">Phasellus porta, velit sit amet varius laoreet, libero ex hendrerit diam, et commodo magna est non odio. Donec lacinia fringilla egestas. Nullam quis urna sit amet eros dignissim varius in non justo. In hac habitasse platea dictumst. Maecenas quis nisi mollis, fringilla justo et, eleifend purus. Donec convallis fringilla sem.</p>
 			<div class="checklist">
 				<div class="card" data-tilt>
@@ -69,11 +69,11 @@
 				</div>
 			</div>
 		</section>
-		<section class="wrap">
+		<section class="wrap" id="pribehy">
 			<h1>Vzorové příběhy</h1>
 			<p class="narrow text-center">Donec dapibus quis dui at interdum. Vivamus vel libero lorem. Suspendisse eu hendrerit lorem. Suspendisse nec nisi quis sem venenatis sagittis. Etiam ut porttitor dolor. Integer in tristique quam.</p>
 		</section>
-		<section class="wrap">
+		<section class="wrap" id="kontakty">
 			<h1>Na koho se obrátit</h1>
 			<p class="narrow text-center">Na koho se obrátit a kde najít pomoc? Níže najdete stručný seznam kontaktů na organizace a instituce, které se touto problematikou zabývají a mohou vám poskytnout odbornou výpomoc.</p>
 			<div class="contact-list">
@@ -95,7 +95,7 @@
 			<img src="/static/placeholder-logo.svg" alt="Placeholder">
 			<img src="/static/placeholder-logo.svg" alt="Placeholder">
 		</section>
-		<section>
+		<section id="faq">
 			<h1>FAQ</h1>
 			<p class="narrow text-center">Possimus totam officia unde odit voluptate sint iste. At explicabo sunt et iusto sint. Enim ipsam aliquam eos quos aspernatur beatae. Nostrum architecto sed excepturi eaque et. </p>
 			<div class="faq-list narrow">
diff --git a/sass/style.scss b/sass/style.scss
index 8d7144b..bb373e1 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -13,6 +13,8 @@ $col-accent: #845368;
 	box-sizing: border-box;
 }
 
+html { scroll-behavior: smooth }
+
 body {
 	margin: 0;
 	padding: 0;