Add gallery

_layouts/default.html

@@ -45,7 +45,42 @@
 			}
 
 			main img {
-				width: 100%;
+				max-width: 100%;
+			}
+
+			#gallery {
+				display: flex;
+				flex-wrap: wrap;
+				flex-direction: row;
+				flex-grow: 1;
+				flex-shrink: 1;
+				padding: 0;
+				margin: 0 -10px;
+			}
+
+			#gallery a {
+				flex: 1;
+				display: block;
+				padding: 0;
+				margin: 10px;
+				min-width: 370px;
+				max-width: 470px;
+			}
+
+			#gallery a:hover {
+				text-decoration: none;
+			}
+
+			#gallery a img {
+				display: block;
+				border-radius: 8px;
+			}
+
+			#gallery a span {
+				display: block;
+				margin: 10px;
+				color: white;
+				text-align: center;
 			}
 		</style>
 	</head>
@@ -56,6 +91,7 @@
 			<span>
 				<a href="{{ page.root }}">About</a>
 				<a href="{{ page.root }}#maps">Maps</a>
+				<a href="{{ page.root }}gallery">Gallery</a>
 			</span>
 		</header>
 		<main>

gallery/index.html

@@ -0,0 +1,29 @@
+---
+title: Gallery
+layout: default
+root: ../
+images:
+- caption: Saren Mansion, my first build
+  url: saren_mansion.png
+- caption: Ruben Express store
+  url: ru_store.png
+- caption: Private residence
+  url: r.png
+- caption: Advert for shop
+  url: ad.png
+- caption: Tower in Nameless Town
+  url: tower2.png
+- caption: Tower in Nameless Town
+  url: tower.png
+---
+
+<h2>My Builds</h2>
+
+<div id="gallery">
+{% for img in page.images %}
+	<a href="{{ img.url }}">
+		<img src="{{ img.url | replace:'.png','_thumb.jpg' }}" alt="{{ img.caption }}" />
+		<span>{{ img.caption }}</span>
+	</a>
+{% endfor %}
+</div>