From 422d9e45a09435bb919a742b2279cae7db43d3b1 Mon Sep 17 00:00:00 2001
From: codevictory <main@codevictory.net>
Date: Wed, 28 Apr 2021 18:35:18 +0300
Subject: [PATCH] Responsive landing page.

---
 assets/css/layout.scss      |  6 ++++++
 assets/css/pages/index.scss | 39 +++++++++++++++++++++++++++++--------
 2 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/assets/css/layout.scss b/assets/css/layout.scss
index e330dd6..040124e 100644
--- a/assets/css/layout.scss
+++ b/assets/css/layout.scss
@@ -2,6 +2,7 @@ body {
   font-family: 'Crimson Text', sans-serif;
   color: #2f273e;
   font-size: 1.1rem;
+  margin: 0px;
 }
 
 @media screen and (max-width: 600px) {
@@ -109,6 +110,11 @@ footer {
 
     .right {
       text-align: right;
+
+      .email-link {
+        color: blue;
+        text-decoration: underline;
+      }
     }
   }
 
diff --git a/assets/css/pages/index.scss b/assets/css/pages/index.scss
index 5d290e2..14068dd 100644
--- a/assets/css/pages/index.scss
+++ b/assets/css/pages/index.scss
@@ -5,20 +5,24 @@ section.logo {
   border-radius: 3px;
   padding-top: 3px;
 
-  &::after {
-    content: '@Sanna Hukkanen';
-    font-size: 90%;
-    text-align: right;
-    position: relative;
-    left: 88%;
-  }
-
   img {
     width: 100%;
   }
+
+  #logo-credits {
+    font-size: 90%;
+    display: flex;
+    justify-content: right;
+    background-color: #d5caf2;
+    max-width: 990px;
+    padding-right: 10px;
+  }
 }
 
 section.text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   width: 80%;
   max-width: 1000px;
   background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #d5caf2);
@@ -26,6 +30,19 @@ section.text {
 
   p {
     padding: 0px 20px;
+    max-width: 56%;
+  }
+
+  @media screen and (max-width: 600px) {
+    p {
+      max-width: 90% !important;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  section.text {
+    width: 90% !important;
   }
 }
 
@@ -36,3 +53,9 @@ section.text {
     margin: 0px;
   }
 }
+
+@media screen and (max-width: 600px) {
+  .time-and-place {
+    font-size: 1.1rem;
+  }
+}