summaryrefslogtreecommitdiffstats
path: root/site/common/css
diff options
context:
space:
mode:
Diffstat (limited to 'site/common/css')
-rw-r--r--site/common/css/cssbox/README.md7
-rw-r--r--site/common/css/cssbox/cssbox.css22
2 files changed, 22 insertions, 7 deletions
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:
- <img class="cssbox_thumb" tabindex=1 src="image_thumbnail.png" /><img class="cssbox_full" src="image_full.png" />
+ <img class="cssbox_thumb" tabindex=1 src="image_thumbnail.png" /><span class="cssbox_full"><img src="image_full.png" /></span>
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;
}