From cddc6956aa0e307043e58076b88405bef07f5781 Mon Sep 17 00:00:00 2001
From: Evan Pratten <evan@ewpratten.com>
Date: Tue, 26 Nov 2024 16:44:10 -0500
Subject: [PATCH] Image page

---
 .../_photos/2022-01-18-snow-day-in-space.md   |  2 +-
 src/_layouts/default.html                     |  8 ++-
 src/_layouts/photo.html                       | 10 +++-
 src/_sass/default.scss                        | 28 ++++++++++
 src/_sass/photo.scss                          | 56 +++++++++++++++++++
 src/assets/css/default_compiled.scss          |  4 ++
 src/assets/css/photo_compiled.scss            |  4 ++
 7 files changed, 105 insertions(+), 7 deletions(-)
 create mode 100644 src/_sass/default.scss
 create mode 100644 src/_sass/photo.scss
 create mode 100644 src/assets/css/default_compiled.scss
 create mode 100644 src/assets/css/photo_compiled.scss
diff --git a/src/_collections/_photos/2022-01-18-snow-day-in-space.md b/src/_collections/_photos/2022-01-18-snow-day-in-space.md
index 2f083e1..649ca48 100644
--- a/src/_collections/_photos/2022-01-18-snow-day-in-space.md
+++ b/src/_collections/_photos/2022-01-18-snow-day-in-space.md
@@ -3,4 +3,4 @@ layout: photo
 title: "Snow Day in Space"
 date: 2022-01-18
 file: 2022-01-18-snow-day-in-space.jpg
----
\ No newline at end of file
+---
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
index 8b076e4..77bd4f4 100644
--- a/src/_layouts/default.html
+++ b/src/_layouts/default.html
@@ -7,19 +7,21 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% if page.override_title %}{{page.override_title}}{% else %}{{page.title}} | {{site.title}}{% endif %}
+    <title>
+        {% if page.override_title %}{{page.override_title}}{% else %}{{page.title}} | {{site.title}}{% endif %}
     </title>
+    <link rel="stylesheet" href="/assets/css/default_compiled.css">
 </head>
 
 <body>
     <header>
-        
+
     </header>
     <main>
         {{ content }}
     </main>
-    <hr>
     <footer>
+        <hr>
         <p>
             Copyright &copy; 2017 - {{ site.time | date: '%Y' }}
             <strong>
diff --git a/src/_layouts/photo.html b/src/_layouts/photo.html
index e7fa7d0..4e1e035 100644
--- a/src/_layouts/photo.html
+++ b/src/_layouts/photo.html
@@ -8,14 +8,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>"{{page.title}}" by {{site.title}}</title>
+    <link rel="stylesheet" href="/assets/css/photo_compiled.css">
 </head>
 
 <body>
     <main>
         <img src="/assets/photography/{{ page.file }}" alt="A photo titled: {{ page.title }}" style="width: 100%;">
-        <div style="display: flex; justify-content: space-between;">
-            <span>{{ page.title }}</span>
-            <span>{{ page.date | date: "%Y-%m-%d" }}</span>
+        <div class="description">
+            <h1>{{ page.title }}</h1>
+            <span id="date">Shot {{ page.date | date: "%Y-%m-%d" }} by <a href="/">Evan Pratten</a></span>
+            <p>
+                {{ content }}
+            </p>
         </div>
     </main>
 </body>
diff --git a/src/_sass/default.scss b/src/_sass/default.scss
new file mode 100644
index 0000000..86f4133
--- /dev/null
+++ b/src/_sass/default.scss
@@ -0,0 +1,28 @@
+// Fonts
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Overlock:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");
+
+body {
+  // Keep websites thin!
+  max-width: 800px;
+  margin: auto;
+
+  // Default font
+  font-family: "Overlock", sans-serif;
+
+  // Default background color
+  background-color: #f0f0f0;
+
+  header {
+  }
+
+  main {
+    img {
+      border-radius: 5px;
+    }
+  }
+
+  footer {
+    text-align: center;
+  }
+}
diff --git a/src/_sass/photo.scss b/src/_sass/photo.scss
new file mode 100644
index 0000000..df6c297
--- /dev/null
+++ b/src/_sass/photo.scss
@@ -0,0 +1,56 @@
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Overlock:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100vw;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+
+  font-family: "Overlock", sans-serif;
+  background-color: #f0f0f0;
+
+  main {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap-reverse;
+
+    &>*{
+      margin: 1em;
+    }
+
+    img {
+      max-width: 800px;
+      border: 5px solid black;
+    }
+
+    div.description {
+
+      @media screen and (min-width: 1300px) {
+        max-width: 400px;
+      }
+      @media screen and (max-width: 1300px) {
+        max-width: 800px;
+      }
+
+      h1 {
+        font-family: "IBM Plex Serif", serif;
+        margin-bottom: 0;
+      }
+
+      span#date {
+        color: gray;
+        text-transform: uppercase;
+
+        a {
+          color: inherit;
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/css/default_compiled.scss b/src/assets/css/default_compiled.scss
new file mode 100644
index 0000000..ad33392
--- /dev/null
+++ b/src/assets/css/default_compiled.scss
@@ -0,0 +1,4 @@
+---
+---
+
+@use "default";
diff --git a/src/assets/css/photo_compiled.scss b/src/assets/css/photo_compiled.scss
new file mode 100644
index 0000000..91ef421
--- /dev/null
+++ b/src/assets/css/photo_compiled.scss
@@ -0,0 +1,4 @@
+---
+---
+
+@use "photo";
