From 58e0151fd1e9beb1c392163393f3669bfaa7eae1 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jans.tuomi@gmail.com>
Date: Thu, 14 Jul 2022 20:50:22 +0300
Subject: Add contact me template, improve styling

---
 build.js                | 11 ++++++++++-
 src/index.html.mustache |  5 +++++
 src/styles.css          | 45 ++++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/build.js b/build.js
index b5a43b7..b81c740 100644
--- a/build.js
+++ b/build.js
@@ -18,10 +18,12 @@ function transpose(matrix) {
 }
 
 const GALLERY_DIR = "_gallery";
+const SITE_CONFIG_DIR = "_configuration";
 const SRC_DIR = "src";
 const DIST_DIR = "dist";
 const HTML_TEMP_PATH = path.join(SRC_DIR, "index.html.mustache");
 const HTML_OUT_PATH = path.join(DIST_DIR, "index.html");
+const CONTACT_INFO_PATH = path.join(SITE_CONFIG_DIR, "contact_info.json");
 
 fs.rmSync(DIST_DIR, { recursive: true, force: true });
 fs.cpSync(SRC_DIR, DIST_DIR, { recursive: true });
@@ -56,7 +58,14 @@ const galleryViews = galleryJsonList
         };
     });
 
-const view = { galleries: galleryViews };
+const contactInfoJson = fs.readFileSync(CONTACT_INFO_PATH, "utf-8")
+const contactInfoView = JSON.parse(contactInfoJson);
+
+const view = {
+    galleries: galleryViews,
+    contact_info_title: contactInfoView["title"],
+    contact_info_body: contactInfoView["body"],
+};
 const renderedHtml = M.render(htmlTemplate, view);
 fs.writeFileSync(HTML_OUT_PATH, renderedHtml);
 
diff --git a/src/index.html.mustache b/src/index.html.mustache
index 4f51721..d324803 100644
--- a/src/index.html.mustache
+++ b/src/index.html.mustache
@@ -36,5 +36,10 @@
             {{/columns}}
         </div>
         {{/galleries}}
+
+        <h3>{{contact_info_title}}</h3>
+        <div class="contact-info">
+            {{&contact_info_body}}
+        </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index c83169c..38eb3ba 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,6 +1,7 @@
 :root {
     --purple: #683863;
     --grid-gap: 10px;
+    --body-w-relative: 0.7;
 }
 
 html {
@@ -10,8 +11,8 @@ html {
 }
 
 body {
-    max-width: 1440px;
-    margin: 78px auto;
+    max-width: calc(100% * var(--body-w-relative));
+    margin: 70px auto 120px;
     padding: 10px;
 
     display: flex;
@@ -28,7 +29,7 @@ h1 {
     font-family: 'Amiri', serif;
     font-size: 128px;
     font-weight: 400;
-    line-height: 109px;
+    line-height: 100%;
     margin: 5px 0;
     padding: 0;
     white-space: nowrap;
@@ -38,6 +39,7 @@ h2 {
     font-family: 'Roboto', sans-serif;
     font-size: 30px;
     font-weight: 400;
+    line-height: 100%;
     color: var(--purple);
     margin: 0;
 }
@@ -46,6 +48,8 @@ h3 {
     font-family: 'Amiri', serif;
     font-size: 48px;
     font-weight: 400;
+    line-height: 100%;
+    margin: 20px 0 8px;
 }
 
 #swoosh {
@@ -61,6 +65,30 @@ h3 {
     left: 612px;
 }
 
+@media screen and (max-width: 1920px) {
+    body {
+        max-width: calc(1920px * var(--body-w-relative));
+        margin-top: 40px;
+    }
+
+    header {
+        margin-bottom: 100px; 
+    }
+
+    h1 {
+        font-size: 100px;
+    }
+
+    h2 {
+        font-size: 25px;
+    }
+
+    #logo {
+        top: 49px;
+        left: 460px;
+    }
+}
+
 @media screen and (max-width: 850px) {
     h1 {
         font-size: 14vw;
@@ -73,7 +101,6 @@ h3 {
 
     h3 {
         font-size: 8vw;
-        margin-bottom: 8px;
     }
     
     #logo {
@@ -81,7 +108,7 @@ h3 {
     }
 
     header {
-        margin-bottom: 20px;
+        margin-bottom: 30px;
     }
 }
 
@@ -109,3 +136,11 @@ h3 {
 .gallery .column img {
     width: 100%;
 }
+
+.contact-info {
+    font-size: 28px;
+}
+
+.contact-info a {
+    color: var(--purple) !important;
+}
\ No newline at end of file
-- 
cgit v1.3