Add single photo pages, navigateable by arrow keys and touch gestures.

public/css/default.css

@@ -474,6 +474,103 @@ textarea {
 }
 
 
+/* Styling for the photo pages
+--------------------------------*/
+#photo_frame {
+	overflow: hidden;
+	text-align: center;
+}
+#photo_frame a {
+	background: #fff;
+	border: 0.9em solid #fff;
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	cursor: -moz-zoom-in;
+	display: inline-block;
+}
+#photo_frame a img {
+	border: none;
+	display: block;
+	height: auto;
+	width: 100%;
+}
+
+#previous_photo, #next_photo {
+	background: #fff;
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	color: #678FA4;
+	font-size: 3em;
+	line-height: 0.5;
+	padding: 32px 8px;
+	position: fixed;
+	text-decoration: none;
+	top: 45%;
+}
+#previous_photo em, #next_photo em {
+	position: absolute;
+	top: -1000em;
+	left: -1000em;
+}
+span#previous_photo, span#next_photo {
+	opacity: 0.25;
+}
+a#previous_photo:hover, a#next_photo:hover {
+	background: #eee;
+	color: #000;
+}
+#previous_photo {
+	left: 0;
+}
+#previous_photo:before {
+	content: '←';
+}
+#next_photo {
+	right: 0;
+}
+#next_photo:before {
+	content: '→';
+}
+
+#sub_photo h2, #sub_photo h3, #photo_exif_box h3 {
+	font: 600 20px/30px "Open Sans", sans-serif;
+	margin: 0 0 10px;
+}
+#sub_photo h3 {
+	font-size: 16px;
+}
+
+#sub_photo {
+	background: #fff;
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	float: left;
+	padding: 2%;
+	margin: 25px 3.5% 25px 0;
+	width: 68.5%;
+}
+
+#photo_exif_box {
+	background: #fff;
+	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+	margin: 25px 0 25px 0;
+	overflow: auto;
+	padding: 2%;
+	float: right;
+	width: 20%;
+}
+#photo_exif_box dt {
+	font-weight: bold;
+	float: left;
+	clear: left;
+	width: 120px;
+}
+#photo_exif_box dt:after {
+	content: ':';
+}
+#photo_exif_box dd {
+	float: left;
+	margin: 0;
+}
+
+
 /* Responsive: smartphone in portrait
 ---------------------------------------*/
 @media only screen and (max-width: 895px) {