Add download button to checklist cards

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>

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;
+			}
+		}
 	}
 }
 

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>