From db8649daef5658b84edf1191e53cff1f4b08ab27 Mon Sep 17 00:00:00 2001
From: Charles Cabergs <me@cacharle.xyz>
Date: Tue, 8 Dec 2020 01:11:13 +0100
Subject: Added fancy site title

---
 index.template.html  |  6 +++++-
 static/css/index.css | 43 +++++++++++++++++++++++++++++++++----------
 static/css/style.css |  4 ++++
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/index.template.html b/index.template.html
index 13c0fb1..55a1df7 100644
--- a/index.template.html
+++ b/index.template.html
@@ -1,4 +1,8 @@
-<h1 id="site-title">cacharle</h1>
+<h1 id="site-title">
+  <!-- <div class="site&#45;title&#45;row"> -->
+    <div>c</div><div>a</div><div>c</div><div>h</div><div>a</div><div>r</div><div>l</div><div>e
+  <!-- </div> -->
+</h1>
 
 <div class="slogan">
   <div class="slogan-row">
diff --git a/static/css/index.css b/static/css/index.css
index 3c8786d..e1213c2 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -8,33 +8,56 @@
 }
 
 #site-title {
+  --color-blue: #0E26B1;
+
+  display: flex;
   font-family: Montserrat-Light, sans-serif;
-  font-size: 17vw;
+  font-size: 14vw;
   font-weight: 100;
   width: 100%;
   margin: 0px auto;
   text-align: center;
   text-transform: uppercase;
+  background-color: var(--color-blue);
+  padding: 40px 10px;
 }
 
 @media screen and (min-width: 1100px) {
   #site-title {
-    font-size: 10rem;
+    font-size: 9.0rem;
   }
 }
 
-@media screen and (max-width: 500px) {
-  #site-title {
-    font-size: 15vw;
-  }
+#site-title div:nth-child(odd) {
+  transform: translateY(15%);
+}
+
+#site-title div:nth-child(even) {
+  transform: translateY(-15%);
 }
 
+#site-title:hover div {
+  transform: translateY(0);
+}
+
+/* after hover to avoid transition on page load */
+#site-title div {
+  transition: transform .3s ease-in-out;
+}
+
+/* #site-title::before { */
+/*   content: ''; */
+/*   height: 5px; */
+/*   width: 100%; */
+/*   background-color: var(--color-white); */
+/* } */
+
 /*****************************************************************************/
 /* solgan                                                                    */
 
 .slogan {
-  margin: 50px auto;
-  padding: 30px 20px;
+  margin: 0 auto 50px auto;
+  padding: 50px 20px;
   background: black;
   color: red;
   text-transform: uppercase;
@@ -42,13 +65,13 @@
   font-weight: bold;
   font-style: italic;
   font-size: 2rem;
-  letter-spacing: 5px;
+  letter-spacing: 10px;
 }
 
 @media screen and (min-width: 600px) {
   .slogan {
     font-size: 2.3rem;
-    padding: 30px 70px;
+    padding: 50px 70px;
   }
 }
 
diff --git a/static/css/style.css b/static/css/style.css
index 0fda80b..b28af2a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -8,6 +8,10 @@
   --color-white:        #eee;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 @font-face {
   font-family: OpenSans;
   font-weight: normal;
-- 
cgit