CSS Grid Layout

css/style.css

@@ -1,127 +1,155 @@
+/*
+   Very Simple Image Gallery 
+     CSS Style Version 0.1
+      (C) seiichiro  2021
+*/
+
+/* General Style Settings */
 body {
-  font-family: sans;
   background-color: #000000;
+  font-family: sans;
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
 }
 
-a:link {
+/* Page Header Styling */
-  text-decoration: none;
-  color: #c0c0c0;
-}
-a:visited {
-  text-decoration: none;
-  color: #c0c0c0;
-}
-a:hover { 
-  text-decoration: none;
-  color: #c0c0c0;
-}
-a:active {
-  text-decoration: none;
-  color: #c0c0c0;
-}
-
 .page-header {
-  padding: 10px;
+  padding: 8px;
+  margin: 0px 0px 10px 0px;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  
   background-color: #404040;
   color: #c0c0c0;
-  margin-bottom: 10px;
+  
   display: grid;
   grid-template-columns: 3fr 1fr;
   align-items: center;
+
+  height: 3em;
 }
 
-.title {
+.page-header .title {
   font-size: 2em;
   vertical-align: center;
+  padding-left: 8px;
 }
 
-.search {
+/* Search Form Styling */
-  justify-self: end;
+.page-header .search {
+  justify-self: right;
 }
 
-.images {
+.page-header .search form input[type=text] {
-  padding: 4px;
+  padding: 10px;
-  position: relative;
+  font-size: 1em;
-}
+  border: 1px solid grey;
-
-.single {
-  height: 92vh;
-}
-.single-image {
-  position: absolute;
-}
-.multi-image {
   float: left;
-  padding: 6px;
+  width: 70%;
+  background: #f1f1f1;
+}
+
+.page-header .search form button {
+  float: left;
+  width: 15%;
+  padding: 10px;
+  background: #2196F3;
+  color: white;
+  font-size: 1em;
+  border: 1px solid grey;
+  border-left: none;
+  cursor: pointer;
+}
+
+.page-header .search form button:hover {
+  background: #0b7dda;
+}
+
+.page-header .search form::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+/* Gallery Styling */
+.content {
+  padding-top: 4em;
+  padding-bottom: 4em;
+
+  margin: 16px;
+
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
+}
+
+.content .multi-image {
+  margin: 4px;
+  padding: 0px;
+  width: 200px;
+  height: 200px;
+  background-color: greenyellow;
+}
+
+.content .multi-image img {
+  object-fit: contain;
   width:  200px;
   height: 200px;
 }
-.clickable {
+
-  display: block;
+/* Single Image Styling */
-  width: 39%;
+.content-single {
-  height: 80%;
+  position: absolute;
-  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 4em;
+  
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+}
+
+.content-single .single-image {
+  grid-column: 1 / 4;
+  grid-row: 1 / 3;
+
+  background-color: chartreuse;
+}
+
+.content-single .single-image img {
+  object-fit: contain;
+  grid-column: 1 / 4;
+  grid-row: 1 / 3;
+}
+
+/* Clickable Areas in Single Image View */
+.content-single .clickable {
   z-index: 9;
   opacity: 0;
-  background-color: #000000;
-  float: left;
-}
-.clickable-center {
-  width: 20%;
-  height: 50%;
-  margin-left: 1%;
-  margin-right: 1%;
-  float: center;
-}
-.clickable-right {
-  float: right;
-  height: 80%;
-}
- .single-image img {
-  object-fit: contain;
-  width:  98vw;
-  height: 92vh;
 }
 
-.multi-image img {
+.content-single .clickable-left {
-  object-fit: contain;
+  grid-column: 1 / 2;
-  width:  200px;
+  grid-row: 1 / 3;
-  height: 200px;
-}
-.footer {
-  padding: 10px;
-  margin-top: 10px;
-  background-color: #404040;
-  color: #c0c0c0;
-  display: block;
-  clear: both;
-  text-align: center;
 }
 
-.footer a {
+.content-single .clickable-center {
-  margin-left: 0.5em;
+  grid-column: 2 / 3;
-  margin-right: 0.5em;
+  grid-row: 1 / 2;
-  font-size: 3em;
-  font-weight: bold;
-  color: #ffffff;
 }
 
-.footer .info {
+.content-single .clickable-right {
-  margin-left: 0.5em;
+  grid-column: 3 / 4;
-  margin-right: 0.5em;
+  grid-row: 1 / 3;
-  font-size: 3em;
-  font-weight: bold;
-  color: #ffffff;
-}
-
-.footer .tag {
-  margin-left: 0.5em;
-  margin-right: 0.5em;
-  font-size: 0.4em !important;
-  font-weight: normal !important;
-  color: #00ff00;
 }
 
+/* Error Page */
 .error {
   margin-left: 0.5em;
   margin-right: 0.5em;
@@ -130,36 +158,47 @@ a:active {
   color: #ffffff;
 }
 
-/* Style the search field */
+/* Page Footer Styling */
-form.f-search input[type=text] {
+.page-footer {
-  padding: 10px;
+  padding: 8px;
-  font-size: 17px;
+  margin: 10px 0px 0px 0px;
-  border: 1px solid grey;
+  
-  float: left;
+  background-color: #404040;
-  width: 70%;
+  color: #c0c0c0;
-  background: #f1f1f1;
+
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3em;
+
+  text-align: center;
+
+  overflow: auto;
 }
 
-/* Style the submit button */
+.page-footer a {
-form.f-search button {
+  margin-left: 0.5em;
-  float: left;
+  margin-right: 0.5em;
-  width: 15%;
+  font-size: 2em;
-  padding: 10px;
+  font-weight: bold;
-  background: #2196F3;
+  color: #ffffff;
-  color: white;
+  text-decoration: none;
-  font-size: 17px;
-  border: 1px solid grey;
-  border-left: none; /* Prevent double borders */
-  cursor: pointer;
 }
 
-form.f-search button:hover {
+.page-footer .info {
-  background: #0b7dda;
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  font-size: 2em;
+  font-weight: bold;
+  color: #ffffff;
 }
 
-/* Clear floats */
+.page-footer .tag {
-form.f-search::after {
+  margin-left: 0.5em;
-  content: "";
+  margin-right: 0.5em;
-  clear: both;
+  font-size: 0.5em !important;
-  display: table;
+  font-weight: normal !important;
+  color: #00ff00;
 }

tpl/gallery.html

@@ -3,11 +3,11 @@
 {% block title %}Gallery{% endblock %}
 
 {% block content %}
-<div class="content">
+<div class="container">
   <div class="page-header">
     <div class="title"><a href="{{ $startpage }}">{{ $galleryname }}</a></div>
     <div class="search">
-    <form class="f-search" action="index.php" method="get">
+      <form action="index.php" method="get">
         <input type="text"placeholder="Suche.." name="f" />
         <button type="submit"><i class="fa fa-search"></i></button>
         <input type="hidden" name="d" value="{{ $dir }}">
@@ -15,7 +15,7 @@
       </form>
     </div>
   </div>
-<div class="images">
+  <div class="content">
   {% foreach($images as $image): %}
     <div class="multi-image">
       <a href="index.php?d={{ $dir }}&s=1&gs={{ $slice }}&p={{ $image['i'] }}{{ $filter }}">
@@ -24,7 +24,7 @@
     </div>
   {% endforeach %}
   </div>
-<div class="footer page-footer">
+  <div class="page-footer">
     <a id="link-first" href="/index.php?d={{ $dir }}&p=1&s={{ $slice }}{{ $filter }}">1</a>
     <a id="link-prev" href="/index.php?d={{ $dir }}&p={{ $prev_page }}&s={{ $slice }}{{ $filter }}"><i class="fa fa-caret-left"></i></a>
     <span class="info">{{ $page }}</span>

tpl/single.html

@@ -4,12 +4,13 @@
 
 {% block content %}
 
-<div class="content single">
+<div class="container">
+  <div class="content-single">
     <div class="single-image">
       <img src="{{ $imageurl }}" title="{{ $page }}/{{ $last_page }}" />
     </div>
     <a id="link-prev" href="/index.php?d={{ $dir }}&p={{ $prev_page }}&s=1&gs={{ $gallery_slice }}{{ $filter }}">
-    <div class="clickable"></div>
+      <div class="clickable clickable-left"></div>
     </a>
     <a id="link-home" href="/index.php?d={{ $dir }}&p={{ $gallery_page }}&s={{ $gallery_slice }}{{ $filter }}">
       <div class="clickable clickable-center"></div>
@@ -18,10 +19,10 @@
       <div class="clickable clickable-right"></div>
     </a>
   </div>
-<div class="footer">
+  <div class="page-footer">
     {% foreach($tags as $tag): %}
     <a href="/index.php?d={{ $dir }}&s={{ $gallery_slice }}&f={{{ $tag }}}"><span class="tag">{{ $tag }}</span></a>
     {% endforeach %}
   </div>
-
+</div>
 {% endblock %}