Layout changes.

jduar · Dec 27, 2023 · b8b397e · b8b397e
1 parent 204584a
commit b8b397e
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 59 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
-pictures/
 public/
 images/
 pages/
+.src/
 
 # Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,python
 # Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,python

diff --git a/template/base.html b/template/base.html
@@ -9,6 +9,8 @@
   </head>
   <body>
     <script src="js/gallery.js"></script>
-    {% block body %}{% endblock %}
+    <div class="container">
+      {% block body %}{% endblock %}
+    </div>
   </body>
 </html>
diff --git a/template/css/style.css b/template/css/style.css
@@ -4,21 +4,24 @@ body {
   font-family: "Courier New", monospace, Helvetica, verdana, sans-serif;
 }
 
+.container {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
 .pages {
   flex-direction: row;
-  padding-right: 25px;
-  padding-left: 25px;
 }
 
 .pages a {
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-right: 10px;
   text-decoration: none;
 }
 
 .pages ul {
   padding-left: 0;
-  margin-top: 0;
+  margin-top: 20px;
+  margin-bottom: 0;
   list-style: none;
 }
 
@@ -39,25 +42,23 @@ body {
   padding-top: 10px;
   padding-bottom: 10px;
   width: 100%;
+  color: rgb(95, 95, 95);
 }
 
-.gallery {
-  padding-right: 10px;
-  padding-left: 10px;
-}
-
-.gallery ul {
+.image-gallery {
   padding-left: 0;
   margin-top: 0;
 }
 
-.gallery li {
+.image-gallery>li {
   list-style-type: none;
-  padding: 5px;
+  padding-top: 5px;
+  padding-bottom: 5px;
 }
 
 .title {
-  padding: 20px 25px 15px 25px;
+  padding-top: 20px;
+  padding-bottom: 15px;
   font-size: 1.5em;
 }
 
@@ -80,11 +81,6 @@ a:focus {
   color: rgb(138, 178, 218);
 }
 
-.photo-page {
-  padding-right: 15px;
-  padding-left: 15px;
-}
-
 .small-font {
   font-size: small;
 }
@@ -114,8 +110,6 @@ a:focus {
     display: flex;
     flex-direction: column;
     width: 20%;
-    padding-right: 0;
-    padding-left: 0;
   }
 
   .pages ul {
@@ -127,15 +121,9 @@ a:focus {
   }
 
   .content {
-    color: rgb(95, 95, 95);
     width: 78%;
   }
 
-  .gallery {
-    padding-right: 0px;
-    padding-left: 0px;
-  }
-
   .image-gallery {
     display: flex;
     flex-wrap: wrap;
@@ -146,6 +134,7 @@ a:focus {
     height: 195px;
     flex: auto;
     position: relative;
+    padding: 5px;
   }
 
   .image-gallery li a {
@@ -175,10 +164,6 @@ a:focus {
     flex-direction: row;
   }
 
-  .top-space {
-    margin-top: 20px;
-  }
-
   .photo-page {
     padding-top: 10px;
   }

diff --git a/template/gallery.html b/template/gallery.html
@@ -1,14 +1,12 @@
-<div class="gallery">
-  <ul id="gallery" class="image-gallery">
-    {% for photo in photos %}
-      <li class="image-outer">
-        <a href={{ photo.page }} class="mobile-lazy-loading">
-          <img class="photo gallery-image jsonly" loading="lazy" src={{ photo.thumbnail }} width={{ photo.width }} height={{ photo.height }} alt="{{ photo.alt }}">
-          <noscript>
-            <img class="photo gallery-image" src={{ photo.thumbnail }} alt="{{ photo.alt }}">
-          </noscript>
-        </a>
-      </li>
-    {% endfor %}
-  </ul>
-</div>
+<ul id="gallery" class="image-gallery">
+  {% for photo in photos %}
+    <li class="image-outer">
+      <a href={{ photo.page }} class="mobile-lazy-loading">
+        <img class="photo gallery-image jsonly" loading="lazy" src={{ photo.thumbnail }} width={{ photo.width }} height={{ photo.height }} alt="{{ photo.alt }}">
+        <noscript>
+          <img class="photo gallery-image" src={{ photo.thumbnail }} alt="{{ photo.alt }}">
+        </noscript>
+      </a>
+    </li>
+  {% endfor %}
+</ul>
diff --git a/template/main_layout.html b/template/main_layout.html
@@ -8,18 +8,25 @@
   </div>
   <div class="horizontal">
     <div class="pages">
-      <ul>
-        {% for text_page in text_pages %}
-          <li{% if loop.first %} class="top-space"{% endif %}>
-            <a href="{{ text_page }}">{{ text_page }}</a>
-          </li>
-        {% endfor %}
-        {% for photo_page in photo_pages %}
-          <li{% if loop.first %} class="top-space"{% endif %}>
-            <a href="{{ photo_page }}">{{ photo_page }}</a>
-          </li>
-        {% endfor %}
-      </ul>
+      {% if text_pages %}
+        <ul>
+          {% for text_page in text_pages %}
+            <li>
+              <a href="{{ text_page }}">{{ text_page }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+        <br/>
+      {% endif %}
+      {% if photo_pages %}
+        <ul>
+          {% for photo_page in photo_pages %}
+            <li>
+              <a href="{{ photo_page }}">{{ photo_page }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
     </div>
     <div class="content">{{ page.content }}</div>
   </div>