From 28c3402de0c2988a8ed94c20dafc6817854cd71f Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Thu, 23 Feb 2023 14:52:47 +0100
Subject: [PATCH] Add download button to checklist cards

---
 index.html                   | 24 ++++++++++++++++++++++++
 sass/style.scss              | 31 ++++++++++++++++++++++++++++++-
 static/img/download-icon.svg |  1 +
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 static/img/download-icon.svg

diff --git a/index.html b/index.html
index c170e0c..ef6e283 100644
--- a/index.html
+++ b/index.html
@@ -55,6 +55,14 @@
 						Pěstounská péče
 					</div>
 					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
+					<a class="download">
+						<div class="title">
+							Stáhnout
+						</div>
+						<div class="meta">
+							(PDF 2,8MB)
+						</div>
+					</a>
 				</div>
 				<div class="card" data-tilt>
 					<img src="static/img/pedf-logo-white.svg" alt="">
@@ -62,6 +70,14 @@
 						Pěstounská péče
 					</div>
 					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
+					<a class="download">
+						<div class="title">
+							Stáhnout
+						</div>
+						<div class="meta">
+							(PDF 2,8MB)
+						</div>
+					</a>
 				</div>
 				<div class="card" data-tilt>
 					<img src="static/img/pedf-logo-white.svg" alt="">
@@ -69,6 +85,14 @@
 						Pěstounská péče
 					</div>
 					<p>Et quasi reprehenderit architecto enim dicta modi consequuntur delectus.</p>
+					<a class="download">
+						<div class="title">
+							Stáhnout
+						</div>
+						<div class="meta">
+							(PDF 2,8MB)
+						</div>
+					</a>
 				</div>
 			</div>
 		</section>
diff --git a/sass/style.scss b/sass/style.scss
index 121ad2d..f9bfd09 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -189,12 +189,13 @@ body.noscroll {
 		padding: 2em;
 		background-color: $col-bg;
 		text-align: left;
+		user-select: none;
 
 		img {
 			width: 100%;
 		}
 
-		.title {
+		&>.title {
 			position: relative;
 			font-weight: bold;
 			font-size: 1.138rem;
@@ -211,6 +212,34 @@ body.noscroll {
 				background-color: #fff;
 			}
 		}
+
+		.download {
+			margin-top: 1rem;
+			cursor: pointer;
+
+			&:hover {
+				color: lighten($col-accent, 25%);
+			}
+
+			.title {
+				display: flex;
+				align-items: baseline;
+				font-size: 1.25em;
+				font-weight: bold;
+				margin-bottom: .25em;
+
+				&:after {
+					content: url("/static/img/download-icon.svg");
+					display: inline-block;
+					height: 1em;
+					margin-left: .5rem;
+				}
+			}
+			.meta {
+				color: darken(#fff, 50%);
+				font-size: .85em;
+			}
+		}
 	}
 }
 
diff --git a/static/img/download-icon.svg b/static/img/download-icon.svg
new file mode 100644
index 0000000..66de203
--- /dev/null
+++ b/static/img/download-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.588" height="13.588"><path d="M7.926 5.662h2.831l-3.963 4.529-3.963-4.529h2.831V0h2.264zM10.312.993l-.687.907a5.662 5.662 0 1 1-5.662 0L3.276.993a6.794 6.794 0 1 0 7.035 0z" fill="#fff"/></svg>
\ No newline at end of file