summaryrefslogtreecommitdiff
path: root/templates/fluid/styles.css
AgeCommit message (Collapse)AuthorFilesLines
2021-01-15fluid: Rework index item thumbnailsTomas Bzatek1-4/+15
Even the recent Firefox still doesn't support the background-image:image-set CSS styles for HiDPI thumbnails. Rework this to a regular image placed inside the <a> tag.
2021-01-15fluid: CSS gradient fixesTomas Bzatek1-28/+28
As pointed out by the CSS validator.
2021-01-15fluid: Rounded borders for album imagesTomas Bzatek1-1/+3
2021-01-15fluid: Use box-shadow for index item bordersTomas Bzatek1-12/+8
Fractional HiDPI scaling (1.5x) on newer Webkit-based browsers tend to cause extra black borders around the index item thumbnails due to rounding error. Turned out borders created by CSS box-shadow are rendered differently and less prone to rounding errors. Though this way of border rendering is slightly different but generally more acceptable.
2021-01-15fluid: Set thumbnail size to an even valuesTomas Bzatek1-1/+1
Odd base image sizes are a real problem for fractional scaling (HiDPI 1.5x).
2021-01-15fluid: Set default link colour before loading the common CSS fileTomas Bzatek1-5/+0
Recent Webkit-based browsers tend to animate link colour from builtin one (blue) once the common CSS stylesheet file gets loaded, resulting in unwanted animation. So set a sane default color within the HTML files so that the animation goes unnoticed. Still would be great to disable initial transitions altogether.
2019-05-11templates/fluid: Disable index items dimming/highlight on hoverTomas Bzatek1-9/+2
Let the album thumbnails shine, no need to dim them as we really want to present the albums.
2016-09-23fluid: Use CSS media queries to determine displayed image sizeTomas Bzatek1-1/+6
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.
2016-04-03New 'fluid' themeTomas Bzatek1-0/+757
Introducing a modern looking theme that changes gallery philosophy a bit. Instead of having thumbnails on an album page and photos on separate pages this new design brings emphasis on story telling. Viewer is advised to go through the whole album sequentially, bringing atmosphere to the whole set. All photos are loaded within a single page and keyboard navigation via left/right arrows is supposed to be used to switch the presentation mode on. Three photo sizes are supported now with the 'preview' size being the default. High resolution size has been introduced for 2560x1440 screens and larger. Note that this template uses code from 3rd parties, see CREDITS for details. I haven't been able to contact anyone behind the TheCodePlayer.com project so licensing of the breadcrumbs might be an issue.