lazy loading finished
Tom Canac
0
.gitattributes
vendored
Normal file → Executable file
0
.gitignore
vendored
Normal file → Executable file
0
.htaccess
Normal file → Executable file
0
README.md
Normal file → Executable file
0
config.php
Normal file → Executable file
0
createthumb.php
Normal file → Executable file
0
css/mediaboxAdvBlack21.css
Normal file → Executable file
0
css/mediaboxAdvWhite.css
Normal file → Executable file
0
humans.txt
Normal file → Executable file
0
images/50.gif
Normal file → Executable file
|
Before Width: | Height: | Size: 77 B After Width: | Height: | Size: 77 B |
0
images/80.png
Normal file → Executable file
|
Before Width: | Height: | Size: 146 B After Width: | Height: | Size: 146 B |
|
Before Width: | Height: | Size: 11 KiB |
0
images/cannotopen.jpg
Normal file → Executable file
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
0
images/close.png
Normal file → Executable file
|
Before Width: | Height: | Size: 417 B After Width: | Height: | Size: 417 B |
0
images/filetype_DOCX.png
Normal file → Executable file
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
0
images/filetype_GZ.png
Normal file → Executable file
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
0
images/filetype_PDF.png
Normal file → Executable file
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
0
images/filetype_PPTX.png
Normal file → Executable file
|
Before Width: | Height: | Size: 9 KiB After Width: | Height: | Size: 9 KiB |
0
images/filetype_RAR.png
Normal file → Executable file
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
0
images/filetype_TAR.png
Normal file → Executable file
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
0
images/filetype_XLXS.png
Normal file → Executable file
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
0
images/filetype_ZIP.png
Normal file → Executable file
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
0
images/folder_black.png
Normal file → Executable file
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
0
images/folder_blue.png
Normal file → Executable file
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
0
images/folder_green.png
Normal file → Executable file
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
0
images/folder_grey.png
Normal file → Executable file
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
0
images/folder_purple.png
Normal file → Executable file
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
0
images/folder_vista.png
Normal file → Executable file
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
BIN
images/loader.gif
Executable file
|
After Width: | Height: | Size: 404 B |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 11 KiB |
0
images/questionmark.jpg
Normal file → Executable file
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
4
index.php
Normal file → Executable file
|
|
@ -236,13 +236,13 @@ if (file_exists($currentdir ."/captions.txt"))
|
|||
"name" => $file,
|
||||
"date" => filemtime($currentdir . "/" . $file),
|
||||
"size" => filesize($currentdir . "/" . $file),
|
||||
"html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><span></span><img class=\"b-lazy\" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src='" . GALLERY_ROOT . "createthumb.php?filename=" . $thumbdir . "/" . $file . "&size=$thumb_size' alt='$label_loading' /></a></li>");
|
||||
"html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><img class=\"b-lazy\" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src='" . GALLERY_ROOT . "createthumb.php?filename=" . $thumbdir . "/" . $file . "&size=$thumb_size' alt='$label_loading' /></a></li>");
|
||||
} else {
|
||||
$files[] = array (
|
||||
"name" => $file,
|
||||
"date" => filemtime($currentdir . "/" . $file),
|
||||
"size" => filesize($currentdir . "/" . $file),
|
||||
"html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><span></span><img src='" . GALLERY_ROOT . "createthumb.php?filename=" . $thumbdir . "/" . $file . "&size=$thumb_size' alt='$label_loading' /></a></li>");
|
||||
"html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><img src='" . GALLERY_ROOT . "createthumb.php?filename=" . $thumbdir . "/" . $file . "&size=$thumb_size' alt='$label_loading' /></a></li>");
|
||||
}
|
||||
}
|
||||
// Other filetypes
|
||||
|
|
|
|||
0
integrate.php
Normal file → Executable file
0
js/lazy.js
Normal file → Executable file
0
js/mediaboxAdv-1.3.4b.js
Normal file → Executable file
0
js/mootools.js
Normal file → Executable file
0
system_check.php
Normal file → Executable file
1
templates/board.html
Normal file → Executable file
|
|
@ -13,7 +13,6 @@
|
|||
var bLazy = new Blazy;
|
||||
}, false);
|
||||
</script>
|
||||
|
||||
<script src="<% gallery_root %>js/mootools.js"></script>
|
||||
<script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js"></script>
|
||||
<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />
|
||||
|
|
|
|||
0
templates/darkgold2.html
Normal file → Executable file
0
templates/exhibition.html
Normal file → Executable file
371
templates/rounded.html
Normal file → Executable file
|
|
@ -7,190 +7,209 @@
|
|||
<title><% title %></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>
|
||||
<script src="<% gallery_root %>js/lazy.js"></script>
|
||||
<script>
|
||||
window.addEventListener('load', function(){
|
||||
var bLazy = new Blazy;
|
||||
}, false);
|
||||
</script>
|
||||
<script src="<% gallery_root %>js/mootools.js"></script>
|
||||
<script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js"></script>
|
||||
<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />
|
||||
|
||||
<style type="text/css">
|
||||
html {
|
||||
font-size:62.5%;
|
||||
}
|
||||
.clear {
|
||||
clear:both;
|
||||
}
|
||||
body {
|
||||
width:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family:Helvetica,Arial,sans-serif;
|
||||
font-size:1.5rem;
|
||||
color:#FFF;
|
||||
background:#3B3A37;
|
||||
}
|
||||
a {
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
color:#FFF;
|
||||
}
|
||||
h1 {
|
||||
margin:20px 0 0;
|
||||
font-family:Georgia,Lucida,serif;
|
||||
font-style:italic;
|
||||
}
|
||||
h1 a {
|
||||
color:#E63D24;
|
||||
}
|
||||
body > header {
|
||||
padding:1px;
|
||||
text-align:center;
|
||||
}
|
||||
#container,
|
||||
#innerheader {
|
||||
margin:0 auto;
|
||||
max-width:<% gallery_width %>;
|
||||
}
|
||||
#container header {
|
||||
padding:2rem 0;
|
||||
}
|
||||
img {
|
||||
border:none;
|
||||
}
|
||||
nav {
|
||||
padding-top:15px;
|
||||
font-size:1.3em;
|
||||
}
|
||||
body > nav {
|
||||
text-align:center;
|
||||
}
|
||||
#folder_comment {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
#folder_comment a {
|
||||
text-decoration:none;
|
||||
color:#FFCC11;
|
||||
}
|
||||
#gallery {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
#gallery li,
|
||||
#gallery li img {
|
||||
border-radius:4px;
|
||||
}
|
||||
#gallery li {
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:.5%;
|
||||
}
|
||||
#gallery li img {
|
||||
width:100%;
|
||||
border-radius:100%;
|
||||
-webkit-box-shadow:0 0 2px -1px #000;
|
||||
box-shadow:0 0 2px -1px #000;
|
||||
}
|
||||
#gallery li:hover img {
|
||||
-webkit-box-shadow:0 0 5px 0 #000;
|
||||
box-shadow:0 0 5px 0 #000;
|
||||
}
|
||||
#gallery li:hover img,
|
||||
#gallery li img,
|
||||
#gallery li em,
|
||||
#gallery li:hover em {
|
||||
-webkit-transition:all .2s ease-in;
|
||||
-ms-transition:all .2s ease-in;
|
||||
-o-transition:all .2s ease-in;
|
||||
transition:all .2s ease-in;
|
||||
}
|
||||
#gallery em {
|
||||
position:absolute;
|
||||
top:-1px;
|
||||
bottom:-1px;
|
||||
zoom:1;
|
||||
width:100%;
|
||||
margin:-0.5px 0 0 -0.5px;
|
||||
padding:40% 0;
|
||||
border:1px solid #000;
|
||||
border-radius:100%;
|
||||
text-align:center;
|
||||
font-family:Georgia,Lucida,serif;
|
||||
font-size:2.5rem;
|
||||
font-style:italic;
|
||||
color:#FFF;
|
||||
opacity:0;
|
||||
background:#000;
|
||||
filter:alpha(opacity=0);
|
||||
}
|
||||
#gallery li:hover em {
|
||||
zoom:1;
|
||||
opacity:1;
|
||||
filter:alpha(opacity=1);
|
||||
}
|
||||
footer {
|
||||
margin:25px 0;
|
||||
text-align:center;
|
||||
}
|
||||
footer a {
|
||||
text-decoration:none;
|
||||
color:#666;
|
||||
}
|
||||
/*----responsive----*/
|
||||
#gallery li {
|
||||
width:24%;
|
||||
height:0;
|
||||
padding-bottom:24%;
|
||||
}
|
||||
@media(max-width:1000px) {
|
||||
#gallery li {
|
||||
width:32%;
|
||||
padding-bottom:32%;
|
||||
<style type="text/css">
|
||||
html {
|
||||
font-size:62.5%;
|
||||
}
|
||||
}
|
||||
@media(max-width:800px) {
|
||||
#gallery li {
|
||||
width:48%;
|
||||
padding-bottom:48%;
|
||||
.clear {
|
||||
clear:both;
|
||||
}
|
||||
}
|
||||
@media(max-width:450px) {
|
||||
#gallery li {
|
||||
body {
|
||||
width:100%;
|
||||
padding-bottom:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family:Helvetica,Arial,sans-serif;
|
||||
font-size:1.5rem;
|
||||
color:#FFF;
|
||||
background:#3B3A37;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
a {
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
color:#FFF;
|
||||
}
|
||||
h1 {
|
||||
margin:20px 0 0;
|
||||
font-family:Georgia,Lucida,serif;
|
||||
font-style:italic;
|
||||
}
|
||||
h1 a {
|
||||
color:#E63D24;
|
||||
}
|
||||
body > header {
|
||||
padding:1px;
|
||||
text-align:center;
|
||||
}
|
||||
#container,
|
||||
#innerheader {
|
||||
margin:0 auto;
|
||||
max-width:<% gallery_width %>;
|
||||
}
|
||||
#container header {
|
||||
padding:2rem 0;
|
||||
}
|
||||
img {
|
||||
border:none;
|
||||
}
|
||||
nav {
|
||||
padding-top:15px;
|
||||
font-size:1.3em;
|
||||
}
|
||||
body > nav {
|
||||
text-align:center;
|
||||
}
|
||||
#folder_comment {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
#folder_comment a {
|
||||
text-decoration:none;
|
||||
color:#FFCC11;
|
||||
}
|
||||
#gallery {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
#gallery li,
|
||||
#gallery li img {
|
||||
border-radius:4px;
|
||||
}
|
||||
#gallery li {
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:.5%;
|
||||
}
|
||||
#gallery li img {
|
||||
width:100%;
|
||||
border-radius:100%;
|
||||
-webkit-box-shadow:0 0 2px -1px #000;
|
||||
box-shadow:0 0 2px -1px #000;
|
||||
}
|
||||
#gallery li:hover img {
|
||||
-webkit-box-shadow:0 0 5px 0 #000;
|
||||
box-shadow:0 0 5px 0 #000;
|
||||
}
|
||||
#gallery li:hover img,
|
||||
#gallery li img,
|
||||
#gallery li em,
|
||||
#gallery li:hover em {
|
||||
-webkit-transition:all .2s ease-in;
|
||||
-ms-transition:all .2s ease-in;
|
||||
-o-transition:all .2s ease-in;
|
||||
transition:all .2s ease-in;
|
||||
}
|
||||
#gallery em {
|
||||
position:absolute;
|
||||
top:-1px;
|
||||
bottom:-1px;
|
||||
zoom:1;
|
||||
width:100%;
|
||||
margin:-0.5px 0 0 -0.5px;
|
||||
padding:40% 0;
|
||||
border:1px solid #000;
|
||||
border-radius:100%;
|
||||
text-align:center;
|
||||
font-family:Georgia,Lucida,serif;
|
||||
font-size:2.5rem;
|
||||
font-style:italic;
|
||||
color:#FFF;
|
||||
opacity:0;
|
||||
background:#000;
|
||||
filter:alpha(opacity=0);
|
||||
}
|
||||
#gallery li:hover em {
|
||||
zoom:1;
|
||||
opacity:1;
|
||||
filter:alpha(opacity=1);
|
||||
}
|
||||
footer {
|
||||
margin:25px 0;
|
||||
text-align:center;
|
||||
}
|
||||
footer a {
|
||||
text-decoration:none;
|
||||
color:#666;
|
||||
}
|
||||
/*----lazyloading---*/
|
||||
.loader{
|
||||
background: url('images/loader.gif') center center no-repeat;
|
||||
}
|
||||
.b-lazy {
|
||||
-webkit-transition: opacity 100ms ease-in-out 10ms;
|
||||
-moz-transition: opacity 100ms ease-in-out 10ms;
|
||||
-o-transition: opacity 100ms ease-in-out 10ms;
|
||||
transition: opacity 100ms ease-in-out 10ms;
|
||||
opacity: 0;
|
||||
}
|
||||
.b-lazy.b-loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
/*----responsive----*/
|
||||
#gallery li {
|
||||
width:24%;
|
||||
height:0;
|
||||
padding-bottom:24%;
|
||||
}
|
||||
@media(max-width:1000px) {
|
||||
#gallery li {
|
||||
width:32%;
|
||||
padding-bottom:32%;
|
||||
}
|
||||
}
|
||||
@media(max-width:800px) {
|
||||
#gallery li {
|
||||
width:48%;
|
||||
padding-bottom:48%;
|
||||
}
|
||||
}
|
||||
@media(max-width:450px) {
|
||||
#gallery li {
|
||||
width:100%;
|
||||
padding-bottom:100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header role="banner">
|
||||
<div id="innerheader">
|
||||
<h1><a href="<% gallery_root %>"><% title %></a></h1>
|
||||
<% messages %>
|
||||
<nav role="navigation"><% breadcrumb_navigation %></nav>
|
||||
</div>
|
||||
</header>
|
||||
<body>
|
||||
<header role="banner">
|
||||
<div id="innerheader">
|
||||
<h1><a href="<% gallery_root %>"><% title %></a></h1>
|
||||
<% messages %>
|
||||
<nav role="navigation"><% breadcrumb_navigation %></nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="container">
|
||||
<header><% folder_comment %></header>
|
||||
<ul id="gallery">
|
||||
<% thumbnails %>
|
||||
</ul>
|
||||
</main>
|
||||
<main id="container">
|
||||
<header><% folder_comment %></header>
|
||||
<ul id="gallery">
|
||||
<% thumbnails %>
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<div class="clear"></div>
|
||||
<nav role="navigation"><% page_navigation %></nav>
|
||||
<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
|
||||
<footer role="contentinfo">
|
||||
Gallery by <% author %>.
|
||||
<a href="https://github.com/tmos/miniboardnano" title="Powered by MiniGal Nano" target="_blank">
|
||||
Made with miniboardNano by Tom Canac.
|
||||
</a>
|
||||
<a href="http://tomcanac.com/miniboardnano/" title="Tom Canac" target="_blank">
|
||||
Rounded theme by Tom Canac.
|
||||
</a>
|
||||
<a title="<% title %> RSS" href="rss/" />
|
||||
RSS
|
||||
<a>
|
||||
</footer>
|
||||
</body>
|
||||
<div class="clear"></div>
|
||||
<nav role="navigation"><% page_navigation %></nav>
|
||||
<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
|
||||
<footer role="contentinfo">
|
||||
Gallery by <% author %>.
|
||||
<a href="https://github.com/tmos/miniboardnano" title="Powered by MiniGal Nano" target="_blank">
|
||||
Made with miniboardNano by Tom Canac.
|
||||
</a>
|
||||
<a href="http://tomcanac.com/miniboardnano/" title="Tom Canac" target="_blank">
|
||||
Rounded theme by Tom Canac.
|
||||
</a>
|
||||
<a title="<% title %> RSS" href="rss/" />
|
||||
RSS
|
||||
<a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
316
templates/squares.html
Normal file → Executable file
|
|
@ -7,161 +7,183 @@
|
|||
<title><% title %></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>
|
||||
<script src="<% gallery_root %>js/lazy.js"></script>
|
||||
<script>
|
||||
window.addEventListener('load', function(){
|
||||
var bLazy = new Blazy;
|
||||
}, false);
|
||||
</script>
|
||||
<script src="<% gallery_root %>js/mootools.js"></script>
|
||||
<script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js"></script>
|
||||
<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />
|
||||
|
||||
<style type="text/css">
|
||||
html {
|
||||
font-size:62.5%;
|
||||
}
|
||||
.clear {
|
||||
clear:both;
|
||||
}
|
||||
body {
|
||||
width:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
text-shadow:0 1px 0 #000;
|
||||
font-family:Helvetica,Arial,sans-serif;
|
||||
font-size:1.5rem;
|
||||
color:#FFF;
|
||||
background:#232321;
|
||||
}
|
||||
a,
|
||||
h1 a {
|
||||
text-decoration:none;
|
||||
color:#FF0084;
|
||||
}
|
||||
h1 {
|
||||
margin:20px 0 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
body > header {
|
||||
padding:1px;
|
||||
text-align:center;
|
||||
}
|
||||
#container,
|
||||
#innerheader {
|
||||
margin:0 auto;
|
||||
}
|
||||
#container header {
|
||||
padding:2rem;
|
||||
}
|
||||
nav {
|
||||
padding-top:15px;
|
||||
font-size:1.3em;
|
||||
}
|
||||
body > nav {
|
||||
text-align:center;
|
||||
}
|
||||
#folder_comment {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
#folder_comment a {
|
||||
text-decoration:none;
|
||||
color:#FFCC11;
|
||||
}
|
||||
#gallery li:hover img,
|
||||
#gallery li img,
|
||||
#gallery li em,
|
||||
#gallery li:hover em {
|
||||
-webkit-transition:all .2s ease-in;
|
||||
-ms-transition:all .2s ease-in;
|
||||
-o-transition:all .2s ease-in;
|
||||
transition:all .2s ease-in;
|
||||
}
|
||||
#gallery {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
#gallery li {
|
||||
float:left;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
#gallery li img {
|
||||
width:100%;
|
||||
}
|
||||
#gallery em {
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:100%;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
padding:40% 0;
|
||||
text-align:center;
|
||||
font-family:Georgia,Lucida,serif;
|
||||
font-size:2.5rem;
|
||||
font-style:italic;
|
||||
color:#FFF;
|
||||
background:rgba(0,0,0,.9);
|
||||
}
|
||||
#gallery li:hover em {
|
||||
top:0;
|
||||
}
|
||||
footer {
|
||||
margin:25px 0;
|
||||
text-align:center;
|
||||
}
|
||||
/*----responsive----*/
|
||||
#gallery li {
|
||||
width:25%;
|
||||
height:0;
|
||||
padding-bottom:24%;
|
||||
}
|
||||
@media(max-width:1000px) {
|
||||
#gallery li {
|
||||
width:32%;
|
||||
padding-bottom:32%;
|
||||
<style type="text/css">
|
||||
html {
|
||||
font-size:62.5%;
|
||||
}
|
||||
}
|
||||
@media(max-width:800px) {
|
||||
#gallery li {
|
||||
width:48%;
|
||||
padding-bottom:48%;
|
||||
.clear {
|
||||
clear:both;
|
||||
}
|
||||
}
|
||||
@media(max-width:450px) {
|
||||
#gallery li {
|
||||
.loader{
|
||||
background: url('<% gallery_root %>/img/loader.gif') center center no-repeat
|
||||
}
|
||||
body {
|
||||
width:100%;
|
||||
padding-bottom:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
text-shadow:0 1px 0 #000;
|
||||
font-family:Helvetica,Arial,sans-serif;
|
||||
font-size:1.5rem;
|
||||
color:#FFF;
|
||||
background:#232321;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
a,
|
||||
h1 a {
|
||||
text-decoration:none;
|
||||
color:#FF0084;
|
||||
}
|
||||
h1 {
|
||||
margin:20px 0 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
body > header {
|
||||
padding:1px;
|
||||
text-align:center;
|
||||
}
|
||||
#container,
|
||||
#innerheader {
|
||||
margin:0 auto;
|
||||
}
|
||||
#container header {
|
||||
padding:2rem;
|
||||
}
|
||||
nav {
|
||||
padding-top:15px;
|
||||
font-size:1.3em;
|
||||
}
|
||||
body > nav {
|
||||
text-align:center;
|
||||
}
|
||||
#folder_comment {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
#folder_comment a {
|
||||
text-decoration:none;
|
||||
color:#FFCC11;
|
||||
}
|
||||
#gallery li:hover img,
|
||||
#gallery li img,
|
||||
#gallery li em,
|
||||
#gallery li:hover em {
|
||||
-webkit-transition:all .2s ease-in;
|
||||
-ms-transition:all .2s ease-in;
|
||||
-o-transition:all .2s ease-in;
|
||||
transition:all .2s ease-in;
|
||||
}
|
||||
#gallery {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
#gallery li {
|
||||
float:left;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
#gallery li img {
|
||||
width:100%;
|
||||
}
|
||||
#gallery em {
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:100%;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
padding:40% 0;
|
||||
text-align:center;
|
||||
font-family:Georgia,Lucida,serif;
|
||||
font-size:2.5rem;
|
||||
font-style:italic;
|
||||
color:#FFF;
|
||||
background:rgba(0,0,0,.9);
|
||||
}
|
||||
#gallery li:hover em {
|
||||
top:0;
|
||||
}
|
||||
footer {
|
||||
margin:25px 0;
|
||||
text-align:center;
|
||||
}
|
||||
/*----lazyloading---*/
|
||||
.loader{
|
||||
background: url('images/loader.gif') center center no-repeat;
|
||||
}
|
||||
.b-lazy {
|
||||
-webkit-transition: opacity 100ms ease-in-out 10ms;
|
||||
-moz-transition: opacity 100ms ease-in-out 10ms;
|
||||
-o-transition: opacity 100ms ease-in-out 10ms;
|
||||
transition: opacity 100ms ease-in-out 10ms;
|
||||
opacity: 0;
|
||||
}
|
||||
.b-lazy.b-loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
/*----responsive----*/
|
||||
#gallery li {
|
||||
width:25%;
|
||||
height:0;
|
||||
padding-bottom:24%;
|
||||
}
|
||||
@media(max-width:1000px) {
|
||||
#gallery li {
|
||||
width:32%;
|
||||
padding-bottom:32%;
|
||||
}
|
||||
}
|
||||
@media(max-width:800px) {
|
||||
#gallery li {
|
||||
width:48%;
|
||||
padding-bottom:48%;
|
||||
}
|
||||
}
|
||||
@media(max-width:450px) {
|
||||
#gallery li {
|
||||
width:100%;
|
||||
padding-bottom:100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header role="banner">
|
||||
<div id="innerheader">
|
||||
<h1><a href="<% gallery_root %>"><% title %></a></h1>
|
||||
<% messages %>
|
||||
<nav role="navigation"><% breadcrumb_navigation %></nav>
|
||||
</div>
|
||||
</header>
|
||||
<body>
|
||||
<header role="banner">
|
||||
<div id="innerheader">
|
||||
<h1><a href="<% gallery_root %>"><% title %></a></h1>
|
||||
<% messages %>
|
||||
<nav role="navigation"><% breadcrumb_navigation %></nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="container">
|
||||
<header><% folder_comment %></header>
|
||||
<ul id="gallery">
|
||||
<% thumbnails %>
|
||||
</ul>
|
||||
</main>
|
||||
<main id="container">
|
||||
<header><% folder_comment %></header>
|
||||
<ul id="gallery">
|
||||
<% thumbnails %>
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<div class="clear"></div>
|
||||
<nav role="navigation"><% page_navigation %></nav>
|
||||
<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
|
||||
<footer role="contentinfo">
|
||||
Gallery by <% author %>.
|
||||
<a href="https://github.com/tmos/miniboardnano" title="Powered by MiniGal Nano" target="_blank">
|
||||
Made with miniboardNano by Tom Canac.
|
||||
</a>
|
||||
<a href="http://tomcanac.com/miniboardnano/" title="Tom Canac" target="_blank">
|
||||
Squares theme by Tom Canac.
|
||||
</a>
|
||||
<a title="<% title %> RSS" href="rss/" />
|
||||
RSS
|
||||
<a>
|
||||
</footer>
|
||||
</body>
|
||||
<div class="clear"></div>
|
||||
<nav role="navigation"><% page_navigation %></nav>
|
||||
<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
|
||||
<footer role="contentinfo">
|
||||
Gallery by <% author %>.
|
||||
<a href="https://github.com/tmos/miniboardnano" title="Powered by MiniGal Nano" target="_blank">
|
||||
Made with miniboardNano by Tom Canac.
|
||||
</a>
|
||||
<a href="http://tomcanac.com/miniboardnano/" title="Tom Canac" target="_blank">
|
||||
Squares theme by Tom Canac.
|
||||
</a>
|
||||
<a title="<% title %> RSS" href="rss/" />
|
||||
RSS
|
||||
<a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||