Add stories list to main page

index.html

@@ -132,6 +132,35 @@
 		<section class="stories" id="pribehy">
 			<h1>Příběhy</h1>
 			<p class="wrap narrow text-center">Každé dítě a tím i každý případ je jedinečný a musíme k němu přistupovat individuálně. Svou třídu často známe a dokážeme proto odhadnout, jak může žák na určité informace nebo jednání reagovat. Můžeme se však inspirovat konkrétními příběhy a tím, jak ideálně danou situaci řešit.</p>
+			<div class="wrap stories-list">
+				<a href="" class="story">
+					<div class="title">
+						Radek
+					</div>
+					<p>Radkovi je 14 let, žije svou devítiletou sestrou Bětkou a tatínkem. Jsou spolu ve třech už čtyři roky. Máma je ve vězení za drobné krádeže a podvody&hellip;</p>
+					<div class="readmore">
+						Přečíst příběh
+					</div>
+				</a>
+				<a href="" class="story">
+					<div class="title">
+						Lenka
+					</div>
+					<p>Lence je 11 let a už od svých osmi žije u tety, sestry svého táty. O tom, že u ní bude žít, rozhodl soud poté, co zjistil, že Lenčina máma dceru zanedbává a Lenka zůstává doma často samotná&hellip;</p>
+					<div class="readmore">
+						Přečíst příběh
+					</div>
+				</a>
+				<a href="" class="story">
+					<div class="title">
+						Hanka
+					</div>
+					<p>Hance je 13 let a po rozvodu rodičů žije pouze s matkou, s otcem se vídá jednou týdně. Její matka začala po rozvodu nadměrně pít. Hanka ji musí často budit do práce&hellip;</p>
+					<div class="readmore">
+						Přečíst příběh
+					</div>
+				</a>
+			</div>
 		</section>
 		<section class="wrap" id="kontakty">
 			<h1>Na koho se obrátit</h1>

sass/style.scss

@@ -414,6 +414,66 @@ body.noscroll {
 	h1 {
 		padding-top: 0;
 	}
+
+	.stories-list {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 1rem;
+		margin: 4rem auto;
+
+		.story {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			max-width: 40rem;
+			border: 1pt solid $col-secondary;
+			border-radius: 1.5rem;
+			padding: 1.5em;
+			color: inherit;
+			text-decoration: none;
+			transition: all .1s ease-out;
+
+			&:hover {
+				background-color: $col-accent;
+				border-color: $col-accent;
+
+				.title {
+					color: $col-white;
+				}
+
+				.readmore:before {
+					background-color: $col-white;
+				}
+			}
+
+			.title {
+				color: #A4A4A4;
+				font-weight: bold;
+				font-size: 1.25em;
+			}
+
+			.readmore {
+				position: relative;
+				font-size: 1.25em;
+				font-weight: bold;
+				padding-top: 1em;
+				margin-top: auto;
+
+				&:before {
+					content: "";
+					display: block;
+					position: absolute;
+					left: 0;
+					top: .5em;
+					width: 3em;
+					height: 1pt;
+					background-color: $col-secondary;
+				}
+			}
+		}
+	}
 }
 
 .contact-list {
@@ -666,6 +726,11 @@ footer {
 		}
 	}
 
+	.stories .stories-list {
+		flex-direction: row;
+		align-items: stretch;
+	}
+
 	.contact-list {
 		flex-direction: row;