From e5665d755be57e044bd91058f95ebf0d36e2d470 Mon Sep 17 00:00:00 2001
From: Francis Rowe <info@gluglug.org.uk>
Date: Sun, 24 Jan 2016 14:42:37 -0500
Subject: merge cssbox 5842aaa0a071b712419316cbba2f55ef9f288e5b

---
(limited to 'site')

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;
 }
diff --git a/site/faq/index.php b/site/faq/index.php
index 0170578..2c41548 100644
--- a/site/faq/index.php
+++ b/site/faq/index.php
@@ -713,11 +713,11 @@
 				</p>
 				<p>
 					SOIC-8 SPI flash chip:<br/>
-					<img class="thumb cssbox_thumb" tabindex=1 src="images/soic8.jpg" alt="SOIC-8 SPI flash chip" /><img class="cssbox_full" src="images/soic8.jpg" alt="SOIT-8 SPI flash chip" />
+					<img class="thumb cssbox_thumb" tabindex=1 src="images/soic8.jpg" alt="SOIC-8 SPI flash chip" /><span class="cssbox_full"><img src="images/soic8.jpg" alt="SOIT-8 SPI flash chip" /></span>
 				</p>
 				<p>
 					SOIC-16 SPI flash chip:<br/>
-					<img class="thumb cssbox_thumb" tabindex=1 src="images/soic16.jpg" alt="SOIC-16 SPI flash chip" /><img class="cssbox_full" src="images/soic16.jpg" alt="SOIC-16 SPI flash chip" />
+					<img class="thumb cssbox_thumb" tabindex=1 src="images/soic16.jpg" alt="SOIC-16 SPI flash chip" /><span class="cssbox_full"><img src="images/soic16.jpg" alt="SOIC-16 SPI flash chip" /></span>
 				</p>
 				<p>
 					<a href="#pagetop">Back to top of page</a>
--
cgit v0.9.1