From 198c7d1e0e5e0fd7777435a4742c39f75f00c63b Mon Sep 17 00:00:00 2001 From: Niki Roo Date: Tue, 12 May 2020 16:45:08 +0200 Subject: [PATCH] web server: max size -> media query --- src/be/nikiroo/fanfix/library/web/style.css | 27 ++++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/src/be/nikiroo/fanfix/library/web/style.css b/src/be/nikiroo/fanfix/library/web/style.css index aadbf33..5c4d1bb 100644 --- a/src/be/nikiroo/fanfix/library/web/style.css +++ b/src/be/nikiroo/fanfix/library/web/style.css @@ -24,7 +24,6 @@ table { } .main { - max-width: 800px; margin: auto; } @@ -156,22 +155,15 @@ a.viewer.link:hover { padding-right: 10px; } -.bar.navbar { - padding-left: calc(min(50%, 800px / 2) - (4 * 64px / 2)); -} +.bar.navbar { padding-left: calc(50% - (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 +199,14 @@ 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'); } + +@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)); } +} -- 2.27.0