back to top button added in the 3 main themes

templates/board.html

@@ -20,7 +20,6 @@
 			html{
 				font-size: 62.5%;
 			}
-			.clear{clear:both;}
 			body {
 				margin: 0;
 				padding: 0;
@@ -73,7 +72,15 @@
 				color: #FFCC11;
 				text-decoration: none;
 			}
-
+			#backtop,
+			#backtop:hover,
+			#backtop:active,
+			.b-lazy {
+				-webkit-transition:all .2s ease-in;
+				-ms-transition:all .2s ease-in;
+				-o-transition:all .2s ease-in;
+				transition:all .2s ease-in;
+			}
 			#gallery {
 				list-style: none;
 				margin: 0;
@@ -104,6 +111,8 @@
 				width: 100%;
 			}
 			footer {
+				clear:both;
+				padding-top: 2rem;
 				margin: 25px 0px;
 				text-align: center;
 			}
@@ -111,15 +120,25 @@
 				text-decoration: none;
 				color: #666;
 			}
+			/*----Back to top button---*/
+			#backtop {
+				display: block;
+				position: fixed;
+				bottom: 0;
+				right: 0;
+				padding: 1rem 4rem;
+				background-color: #CC2027;
+				color: #FFF;
+				margin: .5%;
+				border-radius: 4px;
+				-webkit-box-shadow:  0px 0px 2px -1px #000;
+				box-shadow:  0px 0px 2px -1px #000;
+			}
 			/*----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 {
@@ -161,17 +180,15 @@
 				<aside><% folder_comment %></aside>
 			</div>
 		</header>
-
+		
 		<main id="container">
-			
 			<ul id="gallery">
 				<% thumbnails %>
 			</ul>
 		</main>
 
-		<div class="clear"></div>
+		<nav class="clear" role="navigation"><% page_navigation %></nav>
-		<nav role="navigation"><% page_navigation %></nav>
+		<a href="#top" id="backtop">top</a>
-		<!-- 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">

templates/rounded.html

@@ -20,9 +20,6 @@
 			html {
 				font-size:62.5%;
 			}
-			.clear {
-				clear:both;
-			}
 			body {
 				width:100%;
 				margin:0;
@@ -42,7 +39,8 @@
 				font-family:Georgia,Lucida,serif;
 				font-style:italic;
 			}
-			h1 a {
+			h1 a,
+			a {
 				color:#E63D24;
 			}
 			body > header {
@@ -101,7 +99,11 @@
 			#gallery li:hover img,
 			#gallery li img,
 			#gallery li em,
-			#gallery li:hover em {
+			#gallery li:hover em
+			#backtop,
+			#backtop:hover,
+			#backtop:active,
+			.b-lazy {
 				-webkit-transition:all .2s ease-in;
 				-ms-transition:all .2s ease-in;
 				-o-transition:all .2s ease-in;
@@ -132,22 +134,33 @@
 				filter:alpha(opacity=1);
 			}
 			footer {
-				margin:25px 0;
+				clear:both;
-				text-align:center;
+				padding-top: 2rem;
+				margin: 25px 0px;
+				text-align: center;
 			}
 			footer a {
 				text-decoration:none;
-				color:#666;
+			}	
+			/*----Back to top button---*/
+			#backtop {
+				display: block;
+				position: fixed;
+				bottom: 0;
+				right: 0;
+				padding: 4rem;
+				background-color: #E63D24;
+				color: #FFF;
+				margin: 1rem;
+				border-radius: 100%;
+				-webkit-box-shadow:  0px 0px 2px -1px #000;
+				box-shadow:  0px 0px 2px -1px #000;
 			}
 			/*----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 {
@@ -188,17 +201,15 @@
 				<nav role="navigation"><% breadcrumb_navigation %></nav>
 			</div>
 		</header>
-
+		<a href="#top" id="backtop">top</a>
 		<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 -->
+		<a href="#top" id="backtop">top</a>
 		<footer role="contentinfo">
 			Gallery by <% author %>.
 			<a href="https://github.com/tmos/miniboardnano" title="Powered by MiniGal Nano" target="_blank">

templates/squares.html

@@ -20,17 +20,10 @@
 			html {
 				font-size:62.5%;
 			}
-			.clear {
-				clear:both;
-			}
-			.loader{
-				background: url('<% gallery_root %>/img/loader.gif') center center no-repeat
-			}
 			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;
@@ -73,7 +66,11 @@
 			#gallery li:hover img,
 			#gallery li img,
 			#gallery li em,
-			#gallery li:hover em {
+			#gallery li:hover em,
+			#backtop,
+			#backtop:hover,
+			#backtop:active,
+			.b-lazy {
 				-webkit-transition:all .2s ease-in;
 				-ms-transition:all .2s ease-in;
 				-o-transition:all .2s ease-in;
@@ -110,18 +107,34 @@
 				top:0;
 			}
 			footer {
-				margin:25px 0;
+				font-weight: bold;
-				text-align:center;
+				clear:both;
+				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---*/
-			.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 {
@@ -155,14 +168,14 @@
 	</head>
 
 	<body>
-		<header  role="banner">
+		<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">
@@ -170,9 +183,8 @@
 			</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 -->
+		<a href="#top" id="backtop">top</a>
 		<footer role="contentinfo">
 			Gallery by <% author %>.
 			<a href="https://github.com/tmos/miniboardnano" title="Powered by MiniGal Nano" target="_blank">