Add styles for principles section

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">

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 {