diff basic.css @ 82:e0e5e5197bb8

Refactor for somewhat more mobile-bullshit-friendly style and usage.
author Matti Hamalainen <ccr@tnsp.org>
date Wed, 14 Sep 2016 23:00:04 +0300
parents f2ba5a9f0aa8
children 6558eb187e4b
line wrap: on
line diff
--- a/basic.css	Wed Sep 14 22:50:29 2016 +0300
+++ b/basic.css	Wed Sep 14 23:00:04 2016 +0300
@@ -22,7 +22,7 @@
 	padding: 0.5em;
 }
 
-#contents h1 {
+h1 {
 	font-size: 2em;
 	font-family: helvetica;
 	margin-top: 0;
@@ -110,11 +110,6 @@
 div.imageBox img, div.imageCtrl img {
 	border: 0.2em solid black;
 	border-radius: 0.3em;
-	box-shadow: 4px 4px 4px black;
-}
-
-div.imageCtrl {
-	width: 15%;
 }
 
 div.imageBox a:hover img, div.imageBox a:active img, div.imageBox a:focus img,
@@ -122,6 +117,10 @@
 	border: 0.2em solid white;
 }
 
+div.galleryEntry div.imageBox img {
+	box-shadow: 4px 4px 4px black;
+}
+
 img.albumIcon {
 	border: 0.2em solid black;
 	border-radius: 0.6em;
@@ -132,19 +131,75 @@
 	border: 0.2em solid white;
 }
 
-div.imageCBox {
-	text-align: center;
+#imageCBox {
+	position: relative;
+}
+
+div.imageCtrl {
+	min-width: 150px;
+	width: 20%;
+	position: absolute;
+	top: 0;
+	bottom: 2em;
+	background: rgba(0,0,0,0.35);
+}
+
+div.imageCtrl.next, div.imageCtrl.nextBtm {
+	right: 0;
+}
+
+
+div.imageCtrl.prev, div.imageCtrl.prevBtm {
+	left: 0;
+}
+
+
+div.imageCtrl a {
+	display: block;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
 }
 
-div.imageCtrl, div.imageCBox div.imageBox {
-	display: inline-block;
-	vertical-align: middle;
+div.imageCtrl a img {
+	position: relative;
+	display: block;
+	margin: auto;
+}
+
+
+div.imageCtrl.nextBtm, div.imageCtrl.prevBtm {
+	z-index: 1;
+}
+
+div.imageCtrl.prev, div.imageCtrl.next {
+	background: rgba(0,0,0,0.35);
+	opacity: 0;
+	transition: opacity 0.15s linear;
+	z-index: 10;
 }
 
-div.imageCtrl.next {
-	left: 0;
+div.imageCtrl.prev:hover, div.imageCtrl.next:hover {
+	opacity: 1;
 }
 
+
+#imageImage {
+	position: relative;
+	z-index: 5;
+	max-width: 100%;
+	max-height: 100%;
+}
+
+div.imageCtrl * img {
+	position: absolute;
+	top: 40%;
+}
+
+
+
 div.imageCaption {
 	text-align: center;
 	font-size: 1.5em;
@@ -161,13 +216,30 @@
 
 
 div.infoBox {
+	position: absolute;
+	bottom: 3em;
+	left: 1em;
+	right: 1em;
+	height: auto;
+	min-height: 5em;
+	background: rgba(0,0,0, 0.5);
+
 	text-align: center;
 	margin: 0.5em;
 	padding: 0.5em;
 	border: 0.2em solid white;
 	border-radius: 0.5em;
+
+	opacity: 0;
+	transition: opacity 0.15s linear;
+	z-index: 12;
 }
 
+div.infoBox:hover {
+	opacity: 1;
+}
+
+
 span.infoDateTime {
 	display: block;
 	color: white;
@@ -180,6 +252,7 @@
  * Navigation controls
  */
 div.naviControls {
+	display: none;
 	font-size: 1.5em;
 	text-align: center;
 	margin: 0.5em;