sbrl-github/GalleryShare
1
0
Fork 0
mirror of https://gitlab.com/sbrl/GalleryShare.git synced 2018-06-12 22:45:16 +00:00
Code Activity

Use display: flex; to make the footer always appear at the bottom of the screen

Browse source
This commit is contained in:
Starbeamrainbowlabs 2017-07-21 21:02:30 +01:00
parent 75da9a779c
commit 543d09b2e8
1 changed files with 59 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
GalleryShare/Embed/Theme.css
View file

@ -2,21 +2,23 @@
:root :root
{ {
--transparent-checkerboard-size: 2.5em; --transparent-checkerboard-size: 2.5em;
--checkerboard-bg: rgba(200, 200, 200, 0.2); --checkerboard-bg: rgba(200, 200, 200, 0.2);
--figcaption-bg-size: 13em; --figcaption-bg-size: 13em;
--figcaption-bg-position-y: 0.7em; --figcaption-bg-position-y: 0.7em;
} }
html, body { min-height: 100%; font-size: 100%; } html, body { min-height: 100vh; font-size: 100%; }
body body
{ {
margin: 0; display: flex;
flex-direction: column;
margin: 0;
font-family: sans-serif; font-family: sans-serif;
background: url('/!images/Background-Texture.png'), 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(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(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%), linear-gradient(225deg, hsla(30, 96%, 45%, 1) 10%, hsla(30, 96%, 45%, 0) 80%),
@ -25,82 +27,83 @@ body
h1 h1
{ {
margin: 0; padding: 1em; margin: 0; padding: 1em;
text-align: center; text-align: center;
font-weight: lighter; font-weight: lighter;
color: white; color: white;
background: rgba(75, 75, 75, 0.4); background: rgba(75, 75, 75, 0.4);
} }
main main
{ {
width: 100%; flex: 1;
width: 100%;
text-align: center; text-align: center;
line-height: 0.8em; line-height: 0.8em;
/*background: rgba(75, 75, 75, 0.4);*/ /*background: rgba(75, 75, 75, 0.4);*/
/*background: rgba(125, 125, 125, 0.4);*/ /*background: rgba(125, 125, 125, 0.4);*/
} }
.preview-backdrop .preview-backdrop
{ {
width: 15em; height: 10em; width: 15em; height: 10em;
display: inline-block; display: inline-block;
padding: 0; padding: 0;
background-color: #eee; background-color: #eee;
background-image: 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)),
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-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); background-position: 0 0, calc(var(--transparent-checkerboard-size) / 2) calc(var(--transparent-checkerboard-size) / 2);
} }
figure figure
{ {
position: relative; position: relative;
width: 15em; height: 10em; width: 15em; height: 10em;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
} }
figcaption figcaption
{ {
position: absolute; bottom: 0; left: 0; right: 0; position: absolute; bottom: 0; left: 0; right: 0;
padding: 0.2em; padding: 0.2em;
text-align: center; text-align: center;
line-height: 1em; line-height: 1em;
color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.3);
background-image: url('/!images/Background-Caption.png'); background-image: url('/!images/Background-Caption.png');
background-color: rgba(10, 10, 10, 0.2); background-color: rgba(10, 10, 10, 0.2);
background-size: var(--figcaption-bg-size) var(--figcaption-bg-size); background-size: var(--figcaption-bg-size) var(--figcaption-bg-size);
background-position: 0 var(--figcaption-bg-position-y); background-position: 0 var(--figcaption-bg-position-y);
transition: all 0.25s; transition: all 0.25s;
} }
figure:hover figcaption figure:hover figcaption
{ {
color: white; color: white;
background-color: rgb(25, 25, 25); background-color: rgb(25, 25, 25);
} }
footer footer
{ {
padding: 1em; padding: 1em;
text-align: center; text-align: center;
color: white; color: white;
} }
footer img footer img
{ {
vertical-align: middle; vertical-align: middle;
} }