Added slogan

1 files changed, 63 insertions, 6 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);
 }