Added fancy site title

2 files changed, 37 insertions, 10 deletions

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;