X-Git-Url: http://git.nikiroo.be/?a=blobdiff_plain;f=src%2Fbe%2Fnikiroo%2Ffanfix%2Flibrary%2Fweb%2Fstyle.css;h=fb0119015fecd15c0faae17aca548a94cfe8cd72;hb=db9146bc53fcfd0912910f5bd21a6cc917018b36;hp=aadbf332a566e546933e738103c661cdfc18c5dc;hpb=8032f93f5a57a60e728946e170fd5d469ca0723c;p=fanfix.git

diff --git a/src/be/nikiroo/fanfix/library/web/style.css b/src/be/nikiroo/fanfix/library/web/style.css
index aadbf33..fb01190 100644
--- a/src/be/nikiroo/fanfix/library/web/style.css
+++ b/src/be/nikiroo/fanfix/library/web/style.css
@@ -6,10 +6,6 @@ html, body, .main {
 	height: 100%;
 }
 
-table {
-	width: 100%;
-}
-
 .banner {
 }
 
@@ -24,7 +20,6 @@ table {
 }
 
 .main {
-	max-width: 800px;
 	margin: auto;
 }
 
@@ -137,41 +132,15 @@ h3 {
 	margin: auto;
 }
 
-.viewer {
-	padding-top: 64px;
-	padding-bottom: 64px;
-}
+.bar.navbar       { padding-left: calc(50% - (4 * 64px / 2)); }
 
-.viewer.img {
-	margin: auto;
-	display: block;
-}
-
-a.viewer.link:hover {
-	background-color: transparent;
-}
-
-.viewer.text {
-	padding-left: 10px;
-	padding-right: 10px;
-}
-
-.bar.navbar {
-	padding-left: calc(min(50%, 800px / 2) - (4 * 64px / 2));
-}
+.bar.optionbar.s1 { padding-left: calc(50% - (1 * 64px / 2)); }
+.bar.optionbar.s4 { padding-left: calc(50% - (4 * 64px / 2)); }
 
 .bar.optionbar {
 	bottom: 0;
 }
 
-.bar.optionbar.s1 {
-	padding-left: calc(min(50%, 800px / 2) - (1 * 64px / 2));
-}
-
-.bar.optionbar.s4 {
-	padding-left: calc(min(50%, 800px / 2) - (4 * 64px / 2));
-}
-
 .bar .button {
 	height: 54px;
 	width: 54px;
@@ -207,3 +176,37 @@ a.viewer.link:hover {
 .bar .button.zoomreal   { background-image: url('/actual_size-32x32.png');   }
 .bar .button.zoomwidth  { background-image: url('/fit_to_width-32x32.png');  }
 .bar .button.zoomheight { background-image: url('/fit_to_height-32x32.png'); }
+
+.viewer {
+	padding-top: 64px;
+	padding-bottom: 64px;
+}
+
+.viewer.img {
+	margin: auto;
+	display: block;
+}
+
+a.viewer.link:hover {
+	background-color: transparent;
+}
+
+.viewer.text {
+	padding-left: 10px;
+	padding-right: 10px;
+}
+
+.desc {
+	display: flex;
+}
+
+@media(min-width: 800px) {
+	 .main {
+	 	max-width: 800px;
+	 }
+	 
+	.bar.navbar       { padding-left: calc(400px - (4 * 64px / 2)); }
+	
+	.bar.optionbar.s1 { padding-left: calc(400px - (1 * 64px / 2)); }
+	.bar.optionbar.s4 { padding-left: calc(400px - (4 * 64px / 2)); }
+}