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

themes/tse/assets/css/theme.scss

@@ -7,10 +7,10 @@ body {
 
 #blog-logo {
   //display: flex;
-  max-height: 160px;
+  max-height: 6rem;
   width: auto;
-  margin: 0 auto;
   line-height: 0;
+  object-fit: contain; 
 }
 
 #flag-logo {
@@ -24,7 +24,7 @@ body {
 }
 
 #site-head, #site-head.withCenteredImage {
-  position: relative;
+  // position: relative;
   display: table;
   width: 100%;
   height: 100vh;
@@ -71,7 +71,7 @@ body {
     font-weight: 400;
     font-family: "Roboto Slab", serif;
     letter-spacing: 0;
-    text-shadow: var(--cover-title-text-shadow);
+    // text-shadow: var(--cover-title-text-shadow);
     //-webkit-text-fill-color: white; /* Will override color (regardless of order) */
     //-webkit-text-stroke: 2px var(--cover-title-text-shadow);
     -webkit-text-stroke: 5px var(--section-dark-bg-color);
@@ -85,22 +85,30 @@ body {
     // max-width: 100%;
     // width: 100%;
     // height: fit-content;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 2rem;
     background-color: var(--cover-title-and-description-guard-bg-color);
   }
 
   #site-languages {
     //text-align: right;
     width: fit-content;
-    height: 100%;
+    // height: 100%;
     position: relative;
     float: right;
+    order: 2;
   }
 
   #site-menu {
     position: relative;
     float: left;
+    order: 1;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
     // width: fit-content;
-    height: 100%;
+    // height: 100%;
   }
 
   #site-languages .btn-lang {
@@ -129,7 +137,8 @@ body {
     // position: absolute;
     // bottom: 200px;
     // max-width: 100%;
-    align-content: center;
+    align-content: end;
+    height: 100%;
   }
 
   // Landing screen menu
@@ -147,13 +156,14 @@ body {
     // font-size: 16px;
     letter-spacing: 1px;
     margin: 1rem;
-    overflow: visible;
-    padding: 10px 20px 10px 20px;
+     overflow: visible;
+    padding: 0.5rem 1rem;
     position: relative;
     cursor: pointer;
     text-transform: uppercase;
     font-weight:normal;
-    border: solid 1px var(--highlight-contrast);
+    height: fit-content;
+    // border: solid 1px var(--highlight-contrast);
 
     &:hover {
       color: var(--highlight-inverse-contrast);