From e72ef726de0b4807c9059785c83113b8cf663c52 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Mon, 27 Feb 2023 11:37:40 +0100
Subject: [PATCH] Add contact list

---
 index.html                 | 39 +++++++++++++++++++--
 sass/style.scss            | 70 ++++++++++++++++++++++++++++++++++++++
 static/img/icons/email.svg |  1 +
 static/img/icons/phone.svg |  1 +
 static/img/icons/web.svg   |  1 +
 5 files changed, 109 insertions(+), 3 deletions(-)
 create mode 100644 static/img/icons/email.svg
 create mode 100644 static/img/icons/phone.svg
 create mode 100644 static/img/icons/web.svg

diff --git a/index.html b/index.html
index 8568389..28b82f0 100644
--- a/index.html
+++ b/index.html
@@ -143,13 +143,46 @@
 			<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">
 				<div class="contact">
-					...
+					<div class="title">
+						Orgnaizace "Budu Pomáhat"
+					</div>
+					<p>Nezisková organizace, která se zabývá sociální pomocí obětem domácího násilí.</p>
+					<div class="meta">
+						<div class="phone">
+							<a href="tel:+420777555888">+420 777 555 888</a>
+						</div>
+						<div class="website">
+							<a href="http://www.budupomahat.cz" target="_blank">www.budupomahat.cz</a>
+						</div>
+					</div>
 				</div>
 				<div class="contact">
-					...
+					<div class="title">
+						Mgr. Bederka Tomáš
+					</div>
+					<p>Osoba, která se touto problematikou zabývá již dlouhá léta.</p>
+					<div class="meta">
+						<div class="phone">
+							<a href="tel:+420777555888">+420 777 555 888</a>
+						</div>
+						<div class="email">
+							<a href="mailto:bederka.tomas@pedf.cuni.cz">bederka.tomas@pedf.cuni.cz</a>
+						</div>
+					</div>
 				</div>
 				<div class="contact">
-					...
+					<div class="title">
+						Orgnaizace "Budu Pomáhat"
+					</div>
+					<p>Nezisková organizace, která se zabývá sociální pomocí obětem domácího násilí.</p>
+					<div class="meta">
+						<div class="phone">
+							<a href="tel:+420777555888">+420 777 555 888</a>
+						</div>
+						<div class="website">
+							<a href="http://www.budupomahat.cz" target="_blank">www.budupomahat.cz</a>
+						</div>
+					</div>
 				</div>
 			</div>
 		</section>
diff --git a/sass/style.scss b/sass/style.scss
index 98ec1e1..909af0d 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -407,6 +407,66 @@ body.noscroll {
 	}
 }
 
+.contact-list {
+	display: flex;
+	flex-direction: column;
+	margin: 5rem 0;
+
+	.contact {
+		padding: 3rem 0;
+		border-bottom: 1px solid #8493A4;
+		flex: 1;
+
+		&:last-child {
+			border: none;
+		}
+
+		.title {
+			font-weight: bold;
+			font-size: 1.25em;
+		}
+
+		.meta {
+			display: flex;
+			flex-direction: column;
+			gap: 1rem;
+			font-weight: bold;
+
+			&>div {
+				display: flex;
+				align-items: center;
+				gap: 1rem;
+
+				&:before {
+					content: "";
+					height: 2rem;
+					width: 2rem;
+					border: 1px solid #8493A4;
+					border-radius: .5rem;
+					background-size: 50%;
+					background-position: center;
+					background-repeat: no-repeat;
+				}
+			}
+
+			.phone:before {
+				background-image: url("/static/img/icons/phone.svg");
+			}
+			.website:before {
+				background-image: url("/static/img/icons/web.svg");
+			}
+			.email:before {
+				background-image: url("/static/img/icons/email.svg");
+			}
+
+			a {
+				text-decoration: none;
+				color: inherit;
+			}
+		}
+	}
+}
+
 .partners {
 	display: flex;
 	justify-content: center;
@@ -580,6 +640,16 @@ footer {
 		}
 	}
 
+	.contact-list {
+		flex-direction: row;
+
+		.contact {
+			padding: 0 3rem;
+			border-bottom: none;
+			border-right: 1px solid #8493A4;
+		}
+	}
+
 	.faq-list .faq {
 		&:before,
 		&:last-child:after {
diff --git a/static/img/icons/email.svg b/static/img/icons/email.svg
new file mode 100644
index 0000000..196c9bd
--- /dev/null
+++ b/static/img/icons/email.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.89" height="20.89"><path d="M10.445 20.89a10.171 10.171 0 0 1-4.074-.823 10.429 10.429 0 0 1-5.549-5.549 10.5 10.5 0 0 1 0-8.147A10.429 10.429 0 0 1 6.371.822a10.5 10.5 0 0 1 8.147 0 10.429 10.429 0 0 1 5.549 5.549 10.171 10.171 0 0 1 .823 4.074v1.384a3.312 3.312 0 0 1-1.031 2.471 3.474 3.474 0 0 1-2.52 1.005 3.646 3.646 0 0 1-1.776-.457 3.1 3.1 0 0 1-1.28-1.293 4.13 4.13 0 0 1-1.7 1.319 5.44 5.44 0 0 1-2.141.431 4.732 4.732 0 0 1-3.46-1.41 4.667 4.667 0 0 1-1.423-3.447 4.753 4.753 0 0 1 1.423-3.473 4.688 4.688 0 0 1 3.46-1.436 4.688 4.688 0 0 1 3.46 1.436 4.753 4.753 0 0 1 1.423 3.473v1.384a1.783 1.783 0 0 0 .588 1.358 2.01 2.01 0 0 0 1.423.548 1.978 1.978 0 0 0 1.4-.548 1.783 1.783 0 0 0 .588-1.358v-1.387a8.565 8.565 0 0 0-2.585-6.293 8.565 8.565 0 0 0-6.293-2.585 8.565 8.565 0 0 0-6.294 2.585 8.565 8.565 0 0 0-2.585 6.293 8.565 8.565 0 0 0 2.585 6.293 8.565 8.565 0 0 0 6.293 2.585h5.588v1.567zm0-7.155a3.221 3.221 0 0 0 2.35-.953 3.156 3.156 0 0 0 .966-2.337A4.756 4.756 0 0 0 10.445 7.1a3.3 3.3 0 0 0-3.316 3.342 3.156 3.156 0 0 0 .966 2.337 3.221 3.221 0 0 0 2.35.956z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/static/img/icons/phone.svg b/static/img/icons/phone.svg
new file mode 100644
index 0000000..7b1d35f
--- /dev/null
+++ b/static/img/icons/phone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.344" height="19.35"><path d="M15.497 19.35a8.268 8.268 0 0 1-3.794-1.3 24.736 24.736 0 0 1-5.969-4.462A22.621 22.621 0 0 1 1.247 7.62C-.345 4.728-.073 3.209.23 2.561a4.037 4.037 0 0 1 1.586-1.7 7.637 7.637 0 0 1 1.23-.656L3.171.15a1.361 1.361 0 0 1 .583-.154c.462 0 .8.3 1.265.759a14.907 14.907 0 0 1 2.253 3.344c.543 1.167.677 1.587-.109 2.658-.056.077-.112.15-.166.221-.33.433-.4.557-.354.78a8.189 8.189 0 0 0 1.995 2.959 7.782 7.782 0 0 0 2.925 1.947.584.584 0 0 0 .122.014c.178 0 .357-.13.683-.38l.2-.15a2.179 2.179 0 0 1 1.308-.585 3.129 3.129 0 0 1 1.376.481 16.518 16.518 0 0 1 3.333 2.244c.688.7.953 1.08.606 1.849l-.054.122a7.587 7.587 0 0 1-.657 1.228 4.03 4.03 0 0 1-1.7 1.585 2.921 2.921 0 0 1-1.283.278zM3.713 1.426l-.132.057a6.233 6.233 0 0 0-1 .534 2.683 2.683 0 0 0-1.1 1.129c-.086.184-.443 1.23.976 3.807a21.185 21.185 0 0 0 4.251 5.653 23.2 23.2 0 0 0 5.669 4.239 7.167 7.167 0 0 0 3.12 1.123 1.527 1.527 0 0 0 .7-.153 2.678 2.678 0 0 0 1.134-1.1 6.189 6.189 0 0 0 .535-1 4.26 4.26 0 0 1 .056-.127 6.523 6.523 0 0 0-.315-.336 15.193 15.193 0 0 0-2.973-1.975 3.841 3.841 0 0 0-.754-.334 2.719 2.719 0 0 0-.483.312l-.183.139a2.43 2.43 0 0 1-1.523.664 1.974 1.974 0 0 1-.411-.045 8.878 8.878 0 0 1-3.612-2.32 9.151 9.151 0 0 1-2.37-3.648 2.178 2.178 0 0 1 .606-1.907l.152-.2c.339-.462.339-.462-.03-1.256a13.891 13.891 0 0 0-1.97-2.943c-.17-.16-.276-.251-.343-.313z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/static/img/icons/web.svg b/static/img/icons/web.svg
new file mode 100644
index 0000000..8ca11d1
--- /dev/null
+++ b/static/img/icons/web.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.89" height="20.89"><path d="M10.445 20.89a10.236 10.236 0 0 1-4.1-.823 10.548 10.548 0 0 1-3.316-2.233 10.332 10.332 0 0 1-2.22-3.329A10.474 10.474 0 0 1 0 10.393a10.284 10.284 0 0 1 .809-4.087A10.407 10.407 0 0 1 3.029 3 10.194 10.194 0 0 1 6.345.8a10.526 10.526 0 0 1 4.1-.8 10.526 10.526 0 0 1 4.1.8A10.194 10.194 0 0 1 17.861 3a10.407 10.407 0 0 1 2.22 3.3 10.284 10.284 0 0 1 .809 4.087 10.474 10.474 0 0 1-.809 4.113 10.332 10.332 0 0 1-2.22 3.329 10.548 10.548 0 0 1-3.316 2.233 10.236 10.236 0 0 1-4.1.828zm0-1.515a8.691 8.691 0 0 0 1.528-2.154 12.97 12.97 0 0 0 1.005-2.885h-5.04a13.243 13.243 0 0 0 .979 2.82 8.9 8.9 0 0 0 1.528 2.22zm-2.22-.313A12.485 12.485 0 0 1 7.1 16.921a15.643 15.643 0 0 1-.783-2.585H2.4a9.365 9.365 0 0 0 2.3 2.912 11.473 11.473 0 0 0 3.526 1.814zm4.465-.026a10.455 10.455 0 0 0 3.382-1.8 9.352 9.352 0 0 0 2.415-2.9H14.6a18.917 18.917 0 0 1-.8 2.559 11.853 11.853 0 0 1-1.11 2.141zM1.88 12.769h4.152q-.078-.705-.091-1.266t-.013-1.11q0-.653.026-1.162t.1-1.136H1.88a7.614 7.614 0 0 0-.248 1.123 9.151 9.151 0 0 0-.065 1.175 10.117 10.117 0 0 0 .065 1.214 7.361 7.361 0 0 0 .248 1.162zm5.771 0h5.614q.1-.81.131-1.319t.026-1.058q0-.522-.026-1.005t-.131-1.293H7.651q-.1.809-.131 1.293t-.026 1.005q0 .548.026 1.058t.131 1.319zm7.181 0h4.178a7.361 7.361 0 0 0 .248-1.162 10.117 10.117 0 0 0 .065-1.214 9.151 9.151 0 0 0-.065-1.175 7.614 7.614 0 0 0-.248-1.123h-4.152q.078.914.1 1.4t.026.9q0 .574-.039 1.084t-.118 1.293zm-.261-6.241h3.917a8.461 8.461 0 0 0-2.363-3 9 9 0 0 0-3.46-1.7 11.382 11.382 0 0 1 1.11 2.089 16.983 16.983 0 0 1 .796 2.611zm-6.633 0H13a10.185 10.185 0 0 0-.966-2.677 10.682 10.682 0 0 0-1.593-2.285 5.742 5.742 0 0 0-1.41 1.854 16.861 16.861 0 0 0-1.1 3.107zm-5.536 0h3.943a14.7 14.7 0 0 1 .731-2.52A12.4 12.4 0 0 1 8.2 1.854a8.615 8.615 0 0 0-5.8 4.674z" fill="#fff"/></svg>
\ No newline at end of file