Added slogan

2 files changed, 79 insertions, 20 deletions

diff --git a/static/css/index.css b/static/css/index.css
index 607e8b5..3c8786d 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,11 +1,14 @@
+/*****************************************************************************/
+/* site title                                                                */
+
 @font-face {
-  font-family: Montserrat, sans-serif;
+  font-family: Montserrat-Light;
   font-weight: 100;
-  src: url(../font/Montserrat/Montserrat-ExtraLight.ttf);
+  src: url(../font/Montserrat/Montserrat-Thin.ttf);
 }
 
 #site-title {
-  font-family: Montserrat;
+  font-family: Montserrat-Light, sans-serif;
   font-size: 17vw;
   font-weight: 100;
   width: 100%;
@@ -14,25 +17,79 @@
   text-transform: uppercase;
 }
 
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 1100px) {
   #site-title {
     font-size: 10rem;
   }
 }
 
+@media screen and (max-width: 500px) {
+  #site-title {
+    font-size: 15vw;
+  }
+}
+
+/*****************************************************************************/
+/* solgan                                                                    */
+
+.slogan {
+  margin: 50px auto;
+  padding: 30px 20px;
+  background: black;
+  color: red;
+  text-transform: uppercase;
+  font-family: Montserrat, sans-serif;
+  font-weight: bold;
+  font-style: italic;
+  font-size: 2rem;
+  letter-spacing: 5px;
+}
+
+@media screen and (min-width: 600px) {
+  .slogan {
+    font-size: 2.3rem;
+    padding: 30px 70px;
+  }
+}
+
+.slogan-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.slogan-row:first-child {
+  margin-bottom: 20px;
+}
+
+.slogan:hover .slogan-row {
+  transition: 0.5s;
+  justify-content: center;
+}
+
+
+/*****************************************************************************/
+/* links                                                                     */
+
 .links {
   display: flex;
   justify-content: space-between;
-  max-width: 320px;
+  max-width: 350px;
   margin: 10px auto 40px auto;
 }
 
 .links a.links-item {
   display: block;
+  background-color: var(--color-dark);
+  padding: 5px 15px;
+  border-radius: 10px;
 }
 
 .links a.links-item img {
   height: 30px;
   width: 30px;
-  filter: grayscale(1) invert(1);
+  filter: grayscale(1) invert(1) brightness(200%);
+}
+
+.links-item:hover {
+  filter: invert(1);
 }
diff --git a/static/css/style.css b/static/css/style.css
index 35abb1b..35c5dfb 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5,6 +5,7 @@
   --color-lighter-blue: #89D0F2;
   --color-grey:         #2D3436;
   --color-light-grey:   #636E72;
+  --color-white:        #eee;
 }
 
 @font-face {
@@ -47,12 +48,12 @@ body {
 /* header                                                                    */
 
 header {
-  padding: 10px;
+  padding: 0 10px;
   background-color: var(--color-darker);
 }
 
 header .header-container {
-  max-width: 300px;
+  max-width: 450px;
   margin: auto;
   display: flex;
   justify-content: space-between;
@@ -60,26 +61,27 @@ header .header-container {
 
 a.header-link {
   display: block;
+  padding: 10px 5px;
   font-weight: bold;
   text-decoration: none;
   text-transform: capitalize;
 }
 
-a.header-link:not(:last-child)::after {
-  content: '/';
-  position: relative;
-  right: -10px;
-}
+/* a.header-link:not(:last-child)::after { */
+/*   content: '/'; */
+/*   position: relative; */
+/*   right: -10px; */
+/* } */
 
 a.header-link,
 a.header-link:visited {
-  color: #eee;
+  color: var(--color-white);
+  background-color: var(--color-darker);
 }
 
-a.header-link:hover,
-a.header-link:focus,
-a.header-link:active {
-  color: var(--color-light-grey);
+a.header-link:hover {
+  color: var(--color-white);
+  filter: invert(1);
 }
 
 /*****************************************************************************/
@@ -113,7 +115,7 @@ a:hover, a:focus, a:active {
 /* title */
 
 @font-face {
-  font-family: Montserrat, sans-serif;
+  font-family: Montserrat-Bold, sans-serif;
   font-weight: bold;
   src: url(../font/Montserrat/Montserrat-Bold.ttf);
 }
@@ -122,7 +124,7 @@ h1, h2, h3, h4 {
   margin: 10px 0 5px 0;
   line-height: 1.42;
   font-weight: bold;
-  font-family: Montserrat;
+  font-family: Montserrat-Bold;
   letter-spacing: 0.1rem;
 }