Zvětšování náhledových obrázků

sass/_lightbox.scss

@@ -0,0 +1,45 @@
+.lightbox {
+	display: none;
+
+	position: fixed;
+	z-index: 999;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	padding: 1em 0;
+
+	background: rgba(0, 0, 0, 0.8);
+	cursor: pointer;
+
+	&.visible {
+		display: block;
+		animation: fade-in .3s ease-out;
+
+		div { animation: zoom-in .2s ease-out }
+	}
+
+	div {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 1500px;
+		margin: 0 auto;
+
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: contain;
+	}
+}
+
+// Keyframes have to be used, because transition
+// does not work with `display: none`
+@keyframes fade-in {
+	0% { display: none; opacity: 0 }
+	1% { display: block; opacity: 0 }
+	100% { display: block; opacity: 1 }
+}
+@keyframes zoom-in {
+	0% { transform: scale(.5) }
+	100% { transform: scale(1) }
+}

sass/style.scss

@@ -5,6 +5,7 @@
 @import "tags";
 @import "tables";
 @import "fonts";
+@import "lightbox";
 
 
 *, *:before, *:after {
@@ -68,6 +69,7 @@ main {
 			margin:0 auto 2em auto;
 			border-radius:5px;
 			border:1px solid $border;
+			cursor: pointer;
 		}
 	
 		h2 { margin: 0.85em 0 }