betterlinks (#101)

- **Improve useability of prv/next buttons** - **Make buttons nice**
theevocater · Oct 31, 2024 · 7b9846d · 7b9846d
1 parent 39dbd0f
commit 7b9846d
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 23 deletions.
diff --git a/daily.photo b/daily.photo
@@ -119,25 +119,20 @@ def generate_day(
 
     print(f"Generating {output_name}")
 
-    yesterday = today - datetime.timedelta(days=1)
-    tomorrow = today + datetime.timedelta(days=1)
-
     with open(metadata_file) as f:
         metadata = json.load(f)
 
+    # TODO get rid of the parallel index.html and the lastday.html. its
+    # confusing
+    yesterday = today - datetime.timedelta(days=1)
     if no_prev:
-        yesterday_text = "&lt;-"
-    else:
-        yesterday_text = '<a href="{}">&lt;-</a>'.format(
-            format_filename("/", yesterday),
-        )
+        yesterday = today
+    yesterday_text = format_filename("/", yesterday)
 
+    tomorrow = today + datetime.timedelta(days=1)
     if no_next or index:
-        tomorrow_text = "-&gt;"
-    else:
-        tomorrow_text = '<a href="{}">-&gt;</a>'.format(
-            format_filename("/", tomorrow),
-        )
+        tomorrow = today
+    tomorrow_text = format_filename("/", tomorrow)
 
     try:
         shot_date = photo_date(metadata.get("date"))

diff --git a/main.css b/main.css
@@ -1,4 +1,4 @@
-* {
+body {
   background: #222222;
   color: white;
   font-family: sans-serif;
@@ -18,12 +18,33 @@ main {
 
 .arrow {
   width: 5%;
+  height: 10em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   text-align: center;
   font-weight: bold;
   font-size: 2em;
+  background: #303030;
+  color: #888888;
+  text-decoration: none;
+}
+
+.arrow:hover {
+  background: #888888;
+  color: #bbbbbb;
+}
+
+.arrow-left {
+  border-radius: 0em .5em .5em 0em;
+}
+
+.arrow-right {
+  border-radius: .5em 0em 0em .5em;
 }
 
-#main {
+#center {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
@@ -38,6 +59,7 @@ img {
   max-width: 100%;
   max-height: 1400px;
   border: 2em solid white;
+  padding
 }
 
 #img {
@@ -55,6 +77,6 @@ img {
   text-align: right
 }
 
-.header {
+.meta_header {
   color: grey;
 }
diff --git a/template.html b/template.html
@@ -19,28 +19,28 @@
       <h1>$date</h1>
     </header>
     <main>
-      <div class="arrow">$yesterday</div>
-      <div id="main">
+      <a class="arrow arrow-left" href="$yesterday"><div>&lt;</div></a>
+      <div id="center">
         <div id="img"><img src="$image" alt="$alt" title="$alt"></div>
         <div id="alt">
-          <h2 class="title">$subtitle</h2>
+          <h2>$subtitle</h2>
         </div>
         <div id="metadata">
           <div>
-            <div class="header">Taken</div>
+            <div class="meta_header">Taken</div>
             <div>$shot_date</div>
           </div>
           <div>
-            <div class="header">Film</div>
+            <div class="meta_header">Film</div>
             <div>$film</div>
           </div>
           <div>
-            <div class="header">Camera</div>
+            <div class="meta_header">Camera</div>
             <div>$camera</div>
           </div>
         </div>
       </div>
-      <div class="arrow">$tomorrow</div>
+      <a class="arrow arrow-right" href="$tomorrow"><div>&gt;</div></a>
     </main>
   </body>
 </html>