From 543d09b2e83d126f174dcb30f02fb320d40f74cf Mon Sep 17 00:00:00 2001
From: Starbeamrainbowlabs <sbrl@starbeamrainbowlabs.com>
Date: Fri, 21 Jul 2017 21:02:30 +0100
Subject: [PATCH] Use display: flex; to make the footer always appear at the
 bottom of the screen

---
 GalleryShare/Embed/Theme.css | 115 ++++++++++++++++++-----------------
 1 file changed, 59 insertions(+), 56 deletions(-)

diff --git a/GalleryShare/Embed/Theme.css b/GalleryShare/Embed/Theme.css
index 85d91e0..148a4ca 100644
--- a/GalleryShare/Embed/Theme.css
+++ b/GalleryShare/Embed/Theme.css
@@ -2,21 +2,23 @@
 
 :root
 {
-    --transparent-checkerboard-size: 2.5em;
-    --checkerboard-bg: rgba(200, 200, 200, 0.2);
-    --figcaption-bg-size: 13em;
-    --figcaption-bg-position-y: 0.7em;
+	--transparent-checkerboard-size: 2.5em;
+	--checkerboard-bg: rgba(200, 200, 200, 0.2);
+	--figcaption-bg-size: 13em;
+	--figcaption-bg-position-y: 0.7em;
 }
 
-html, body { min-height: 100%; font-size: 100%; }
+html, body { min-height: 100vh; font-size: 100%; }
 body
 {
-    margin: 0;
-    
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	
 	font-family: sans-serif;
 	
 	background: url('/!images/Background-Texture.png'),
-        /* Adapted from http://www.webcore-it.com/colorful-background */
+		/* Adapted from http://www.webcore-it.com/colorful-background */
 		linear-gradient(45deg, hsla(30, 92%, 46%, 1) 0%, hsla(30, 92%, 46%, 0) 70%),
 		linear-gradient(135deg, hsla(330, 96%, 50%, 1) 10%, hsla(330, 96%, 50%, 0) 80%),
 		linear-gradient(225deg, hsla(30, 96%, 45%, 1) 10%, hsla(30, 96%, 45%, 0) 80%),
@@ -25,82 +27,83 @@ body
 
 h1
 {
-    margin: 0; padding: 1em;
-    
-    text-align: center;
-    font-weight: lighter;
-    color: white;
-    
-    background: rgba(75, 75, 75, 0.4);
+	margin: 0; padding: 1em;
+	
+	text-align: center;
+	font-weight: lighter;
+	color: white;
+	
+	background: rgba(75, 75, 75, 0.4);
 }
 
 main
 {
-    width: 100%;
+	flex: 1;
+	width: 100%;
 	text-align: center;
-    line-height: 0.8em;
-    
-    /*background: rgba(75, 75, 75, 0.4);*/
-    /*background: rgba(125, 125, 125, 0.4);*/
+	line-height: 0.8em;
+	
+	/*background: rgba(75, 75, 75, 0.4);*/
+	/*background: rgba(125, 125, 125, 0.4);*/
 }
 
 .preview-backdrop
 {
-    width: 15em; height: 10em;
-    display: inline-block;
-    padding: 0;
-    
-    background-color: #eee;
-    background-image:
-        linear-gradient(45deg, var(--checkerboard-bg) 25%, transparent 25%, transparent 75%, var(--checkerboard-bg) 75%, var(--checkerboard-bg)),
-        linear-gradient(45deg, var(--checkerboard-bg) 25%, transparent 25%, transparent 75%, var(--checkerboard-bg) 75%, var(--checkerboard-bg));
-    background-size: var(--transparent-checkerboard-size) var(--transparent-checkerboard-size);
-    background-position: 0 0, calc(var(--transparent-checkerboard-size) / 2) calc(var(--transparent-checkerboard-size) / 2);
+	width: 15em; height: 10em;
+	display: inline-block;
+	padding: 0;
+	
+	background-color: #eee;
+	background-image:
+		linear-gradient(45deg, var(--checkerboard-bg) 25%, transparent 25%, transparent 75%, var(--checkerboard-bg) 75%, var(--checkerboard-bg)),
+		linear-gradient(45deg, var(--checkerboard-bg) 25%, transparent 25%, transparent 75%, var(--checkerboard-bg) 75%, var(--checkerboard-bg));
+	background-size: var(--transparent-checkerboard-size) var(--transparent-checkerboard-size);
+	background-position: 0 0, calc(var(--transparent-checkerboard-size) / 2) calc(var(--transparent-checkerboard-size) / 2);
 }
 
 figure
 {
-    position: relative;
-    width: 15em; height: 10em;
-    display: inline-block;
-    margin: 0;
-    overflow: hidden;
-    
-    background-size: cover;
-    background-position: center center;
+	position: relative;
+	width: 15em; height: 10em;
+	display: inline-block;
+	margin: 0;
+	overflow: hidden;
+	
+	background-size: cover;
+	background-position: center center;
 }
 
 figcaption
 {
 	position: absolute; bottom: 0; left: 0; right: 0;
-    padding: 0.2em;
-    
+	padding: 0.2em;
+	
 	text-align: center;
-    line-height: 1em;
-    color: rgba(255, 255, 255, 0.3);
-    
-    background-image: url('/!images/Background-Caption.png');
-    background-color: rgba(10, 10, 10, 0.2);
-    background-size: var(--figcaption-bg-size) var(--figcaption-bg-size);
-    background-position: 0 var(--figcaption-bg-position-y);
-    
-    transition: all 0.25s;
+	line-height: 1em;
+	color: rgba(255, 255, 255, 0.3);
+	
+	background-image: url('/!images/Background-Caption.png');
+	background-color: rgba(10, 10, 10, 0.2);
+	background-size: var(--figcaption-bg-size) var(--figcaption-bg-size);
+	background-position: 0 var(--figcaption-bg-position-y);
+	
+	transition: all 0.25s;
 }
 figure:hover figcaption
 {
-    color: white;
-    background-color: rgb(25, 25, 25);
+	color: white;
+	background-color: rgb(25, 25, 25);
 }
 
 footer
 {
-    padding: 1em;
-    
-    text-align: center;
-    color: white;
+	padding: 1em;
+	
+	text-align: center;
+	color: white;
 }
 
 footer img
 {
-    vertical-align: middle;
+	vertical-align: middle;
 }