Styling : adding logo + modifying colors to match logo's colors + adjusting responsiveness + adding new favicons

themes/tse/assets/css/responsiveness.scss

@@ -1,9 +1,8 @@
-
 /* ==========================================================================
    8. Media Queries - Smaller than 1130px
    ========================================================================== */
 
-@media only screen and (max-width: 1130px) {
+@media only screen and (max-width: 900px) {
   /* makes it a top sticky menu */
   .fixed-nav {
     opacity: 1;
@@ -60,7 +59,7 @@
 
   /* skip the top menu when scrolling */
   .post-holder .post {
-      scroll-margin-top: 48px;
+    scroll-margin-top: 48px;
   }
 
   .post-template .post {
@@ -87,6 +86,23 @@
   h4 {
     font-size: 2.8rem;
   }
+
+  #site-head #site-menu, #site-head.withCenteredImage #site-menu {
+    font-size: 1.5rem;
+    flex: 1;
+    order: 2;
+    flex-basis: 100%; 
+    justify-content: start;
+  }
+  #top-banner {
+    flex-wrap: wrap;
+  }
+  #site-head #site-languages,
+  #site-head.withCenteredImage #site-languages {
+    order: 1;
+  }
+  #blog-logo {
+  }
 }
 
 /* ==========================================================================
@@ -99,13 +115,14 @@
   }
 
   #blog-logo {
-    max-height: 80px;
+    max-height: 6rem;
+    margin-left: 1.5rem;
+    max-width: 40%;
   }
 
   .inner,
   .pagination {
     width: auto;
-
   }
 
   .post {
@@ -116,9 +133,10 @@
     line-height: 1.6em;
   }
 
-  #site-head {
+  #site-head,
+  #site-head.withCenteredImage {
     // padding: 1.5rem;
-    height: 65%;
+    height: 90%;
   }
 
   #header-arrow {
@@ -134,8 +152,11 @@
     font-size: 3rem;
   }
 
-  .blog-description {
-    font-size: 2.2rem;
+  #site-head .blog-description,
+  #site-head.withCenteredImage .blog-description {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    padding: 0 1rem;
   }
 
   h1,
@@ -164,22 +185,27 @@
   .site-footer {
     font-size: 1.1rem;
   }
-  #top-banner {
-    flex-direction: column;
+  #site-head #top-banner,
+  #site-head.withCenteredImage #top-banner {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    width: 100vw;
+    padding: 1rem 0;
   }
 
-  #site-languages{
-    align-self: end;
+  #site-languages {
+    align-self: center;
     padding-right: 1rem;
   }
-  #site-menu{
-    width: 100%;
-    display: flex;
-    justify-content: space-around;
+  #site-head #site-menu,
+  #site-head.withCenteredImage #site-menu {
+    display: none;
   }
 
-  #site-head #site-languages .btn-lang, #site-head.withCenteredImage #site-languages .btn-lang{
-    margin: 1rem .3rem;
+  #site-head #site-languages .btn-lang,
+  #site-head.withCenteredImage #site-languages .btn-lang {
+    margin: 1rem 0.3rem;
+    font-size: 1rem;
   }
-}
+}