From f06bfe9c6c594efb63d911fd923a1340357b39c8 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Thu, 2 Mar 2023 09:59:52 +0100
Subject: [PATCH] Add styles for principles section

---
 index.html      |  29 ++++++++++++
 sass/style.scss | 120 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 149 insertions(+)

diff --git a/index.html b/index.html
index 8724b57..e7918c5 100644
--- a/index.html
+++ b/index.html
@@ -75,6 +75,35 @@
 		<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>
+			<div class="principles">
+				<div class="dropdown">
+					<!-- Used on mobile -->
+					<select name="principles" id="principles-dropdown">
+						<option value="principle-1">Prevence</option>
+					</select>
+				</div>
+				<div class="list">
+					<!-- Used on wide screens -->
+					<div class="active">
+						<p class="title">Prevence</p>
+						<p>Prevence pomáhá zamezovat nežádoucím situacím a slouží nám jako informační nástroj&hellip;</p>
+					</div>
+					<div>
+						<p class="title">Rozpoznání situace</p>
+						<p>Je důležité, aby se naše vnímání neomezilo jen na to, jestli se žák ve škole objevuje s modřinami nebo jinými známkami násilí&hellip;</p>
+					</div>
+					<div>
+						<p class="title">Prevence</p>
+						<p>Prevence pomáhá zamezovat nežádoucím situacím a slouží nám jako informační nástroj, pomocí kterého třídu seznamujeme&hellip;</p>
+					</div>
+				</div>
+				<div class="content">
+					<div id="principle-1">
+						<h2 class="title">Prevence</h2>
+						<p>Prevence pomáhá zamezovat nežádoucím situacím a slouží nám jako informační nástroj, pomocí kterého třídu seznamujeme s tím, co se ve společnosti a rodinách děje. Děti díky ní zjišťují, že nejsou na všechno samotné a učí se, jak spolu o citlivých věcech mluvit. Díky prevenci můžeme podat pomocnou ruku konkrétním žákům, kteří to potřebují – ať už tím, že jim sami pomůžeme, nebo jim nabídneme další nástroje řešení (Linka bezpečí, Dětské krizové centrum, Bílý kruh bezpečí, …). </p>
+					</div>
+				</div>
+			</div>
 		</section>
 		<section id="checklist">
 			<div class="wrap">
diff --git a/sass/style.scss b/sass/style.scss
index 5d76cb8..0b68ab2 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -320,6 +320,114 @@ body.noscroll {
 	}
 }
 
+.principles {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-column-gap: 8rem;
+	grid-row-gap: 2rem;
+	margin-top: 5em;
+
+	.dropdown {
+
+		select {
+			width: 100%;
+			padding: 1.5em;
+			background-color: $col-bg;
+			color: $col-white;
+			border: 1pt solid $col-accent;
+			border-radius: 1em;
+			font-size: 1rem;
+			font-weight: bold;
+			cursor: pointer;
+			transition: background-color .1s ease-out;
+
+			&:hover {
+				background-color: $col-accent;
+			}
+		}
+	}
+
+	.list {
+		display: none;
+		flex-direction: column;
+		gap: 2em;
+
+		&>div {
+			padding: 1.5em;
+			outline: 1pt solid $col-secondary;
+			outline-offset: -1pt;
+			border-radius: 1em;
+			cursor: pointer;
+			transition: background-color .1s ease-out;
+
+			&.active {
+				border-radius: 1em 0 0 1em;
+				position: relative;
+				overflow: visible;
+
+				&:after {
+					content: "";
+					display: block;
+					position: absolute;
+					right: 0;
+					top: 0;
+					width: 3em;
+					height: 100%;
+					background-color: $col-accent;
+					clip-path: polygon(0 0, 0 100%, 100% 50%);
+					transform: translatex(3em);
+				}
+			}
+
+			&.active, &:hover {
+				background-color: $col-accent;
+				outline: none;
+
+				p:last-child {
+					color: $col-white;
+				}
+			}
+
+			.title {
+				margin: 0;
+				font-weight: bold;
+				text-align: left;
+				font-size: 1.138rem;
+			}
+
+			p:last-child {
+				margin-bottom: 0;
+				color: $col-secondary;
+				font-size: 0.95em;
+			}
+		}
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		h2 {
+			position: relative;
+			text-align: left;
+			padding-bottom: 1rem;
+			margin-top: 0;
+
+			&:after {
+				content: "";
+				display: block;
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: 2em;
+				height: 1pt;
+				background-color: $col-secondary;
+			}
+		}
+	}
+}
+
 .checklist {
 	display: flex;
 	justify-content: flex-start;
@@ -776,6 +884,18 @@ footer {
 		}
 	}
 
+	.principles {
+		grid-template-columns: 1fr 1fr;
+
+		.dropdown{
+			display: none;
+		}
+
+		.list {
+			display: flex;
+		}
+	}
+
 	.checklist {
 
 		.card {