<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="<% author %>" /> <meta name="generator" content="MinigalNano <% version %>" /> <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.php" /> <link rel="stylesheet" href="<% gallery_root %>css/mediaboxWhite.css" type="text/css" media="screen" /> <style type="text/css"> html { font-size:62.5%; } body { width:100%; margin:0; padding:0; 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, #backtop, #backtop:hover, #backtop:active, .b-lazy { -webkit-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; } .clear { clear:both; } footer { font-weight: bold; padding-top: 2rem; margin: 25px 0px; text-align: center; } /*----Back to top button---*/ #backtop { display: block; position: fixed; bottom: 0; right: 0; padding: 1rem 4rem; background-color: #FFF; color: #0063dc; font-weight: bold; -webkit-box-shadow: 0px 0px 2px -1px #000; box-shadow: 0px 0px 2px -1px #000; } #backtop:hover, #backtop:active{ background-color: #0063dc; color: #FFF; padding: 2rem 8rem; } /*----lazyloading---*/ .b-lazy { 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> <script src="<% gallery_root %>js/lazy.js"></script> <script src="<% gallery_root %>js/script.js"></script> <script src="<% gallery_root %>js/mootools1.5.0.js"></script> <script src="<% gallery_root %>js/mediabox1.5.4.js"></script> </head> <body> <header id="top" 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> <nav class="clear" role="navigation"><% page_navigation %></nav> <a href="#top" id="backtop">top</a> <footer role="contentinfo"> Gallery by <% author %> / <a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank"> Powered by MiniGal Nano <% version %> </a> / <a href="http://tomcanac.com/minigal/" title="Tom Canac" target="_blank"> Squares theme by Tom Canac </a> / <a title="<% title %> RSS" href="rss.php"> RSS </a> </footer> </body> </html>