From e927155e589881b63d39f559e6a04fa0d6005b8c Mon Sep 17 00:00:00 2001 From: Tomas Bzatek Date: Fri, 23 Sep 2016 22:36:52 +0200 Subject: fluid: Use CSS media queries to determine displayed image size This is a huge step forward in terms of usability and simplicity. Image sizes are now determined by browser automatically based on window width. As a result the image size switch buttons have been removed and only a single page is generated (index.html). Note: in order to make image title, description and EXIF table dynamically aligned to the image width, "display: table" and relatives were used. This may not be the best webdesigner practice but it's an effective and sufficient approach for the moment. --- templates/fluid/styles.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'templates/fluid/styles.css') diff --git a/templates/fluid/styles.css b/templates/fluid/styles.css index 547ff6f..b0dc29a 100644 --- a/templates/fluid/styles.css +++ b/templates/fluid/styles.css @@ -385,7 +385,7 @@ div.photos { div.photos div.photo { margin-top: 60px; margin-bottom: 80px; - display: inline-block; + display: inline-table; text-align: left; } @@ -394,6 +394,11 @@ div.photo img { margin-bottom: 4px; } +div.photos div.photo-content { + display: table-caption; + caption-side: bottom; +} + div.photo div.photo-title { font-family: 'Open Sans', sans-serif; text-align: center; -- cgit v1.2.3