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

---
 src/index.html.mustache |  5 +++++
 src/styles.css          | 45 ++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 45 insertions(+), 5 deletions(-)

(limited to 'src')

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