From e5665d755be57e044bd91058f95ebf0d36e2d470 Mon Sep 17 00:00:00 2001 From: Francis Rowe Date: Sun, 24 Jan 2016 14:42:37 -0500 Subject: merge cssbox 5842aaa0a071b712419316cbba2f55ef9f288e5b --- (limited to 'site/common/css') diff --git a/site/common/css/cssbox/README.md b/site/common/css/cssbox/README.md index 8a55ab1..ceed61a 100644 --- a/site/common/css/cssbox/README.md +++ b/site/common/css/cssbox/README.md @@ -2,7 +2,7 @@ A simple, pure-CSS Lightbox replacement. ## Why CSSBox? -* Actually lightweight (643b including comments, 347b excluding comments, unminified!) +* Actually lightweight (843b including comments, 547b excluding comments, unminified!) * Centers the image with a nice, yet simple border * Completely responsive, works on any screen size * Has a pretty fade in animation @@ -12,11 +12,14 @@ Upload cssbox.css to your server and add a stylesheet link to it in your CSS. Add your images like this: - + When a visitor clicks the tumbnail, the fullsize preview will appear in the center of the screen. +## Example +An example page is available in the gh-pages branch, or online on [GitHub Pages](https://thelastproject.github.io/CSSBox/). + ## License Creative Commons Zero 1.0 diff --git a/site/common/css/cssbox/cssbox.css b/site/common/css/cssbox/cssbox.css index 9efc9f0..ca96b53 100644 --- a/site/common/css/cssbox/cssbox.css +++ b/site/common/css/cssbox/cssbox.css @@ -1,20 +1,32 @@ /* The work below, CSSBox, is released under the Creative Commons Zero 1.0 license and is available on https://notabug.org/SylvieLorxu/CSSBox */ -img.cssbox_full { +span.cssbox_full { position: fixed; + height: 100%; + width: 100%; + background-color: rgba(0,0,0,0.8); + top: 0; + left: 0; + opacity: 0; + visibility: hidden; + transition: visibility 0s, opacity 0.5s linear; +} + +span.cssbox_full img { + position: fixed; + background-color: white; margin: 0; padding: 0px; + max-height: 90%; + max-width: 90%; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); border: 5px solid black; - visibility: hidden; - opacity: 0; - transition: visibility 0s, opacity 0.5s linear; } -img.cssbox_thumb:focus + img.cssbox_full { +img.cssbox_thumb:focus + span.cssbox_full { visibility: visible; opacity: 1; } -- cgit v0.9.1