Styling : adapting site-head section to mobile version + aligning site-head-content

themes/tse/assets/css/generic.css

@@ -4,40 +4,44 @@
  Hides stuff
  */
 .hidden {
-    text-indent: -9999px;
-    visibility: hidden;
-    display: none;
+  text-indent: -9999px;
+  visibility: hidden;
+  display: none;
 }
 
 /**
  Creates a responsive wrapper that makes our content scale nicely
  */
 .inner {
-    position: relative;
-    width: 80%;
-    max-width: 800px;
-    margin: 0 auto;
+  position: relative;
+  /* width: 80%; */
+  /* max-width: 800px; */
+  /* margin: 0 auto; */
 }
 
 /**
  Centres vertically yo. (IE8+)
  */
 .vertical {
-    display: table-cell;
-    vertical-align: middle;
+  /* display: table-cell;
+    vertical-align: middle; */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
 }
 
 /**
  Floating tools
  */
 .left {
-    float: left;
+  float: left;
 }
 
 .right {
-    float: right;
+  float: right;
 }
 
 .clear {
-    clear: both;
-}
+  clear: both;
+}

themes/tse/assets/css/responsiveness.scss

@@ -38,7 +38,7 @@
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     min-height: 240px;
-    padding: 15% 0;
+    // padding: 15% 0;
     height: 100%;
     margin-bottom: 0rem;
   }
@@ -105,8 +105,7 @@
   .inner,
   .pagination {
     width: auto;
-    margin-left: 16px;
-    margin-right: 16px;
+
   }
 
   .post {
@@ -118,7 +117,7 @@
   }
 
   #site-head {
-    padding: 10% 0;
+    // padding: 1.5rem;
     height: 65%;
   }
 
@@ -128,6 +127,7 @@
 
   a.btn {
     margin-top: 10px;
+    font-size: 1.1rem;
   }
 
   .blog-title {
@@ -164,4 +164,22 @@
   .site-footer {
     font-size: 1.1rem;
   }
+  #top-banner {
+    flex-direction: column;
+    display: flex;
+  }
+
+  #site-languages{
+    align-self: end;
+    padding-right: 1rem;
+  }
+  #site-menu{
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+  }
+
+  #site-head #site-languages .btn-lang, #site-head.withCenteredImage #site-languages .btn-lang{
+    margin: 1rem .3rem;
+  }
 }

themes/tse/assets/css/theme.scss

@@ -27,7 +27,7 @@ body {
   position: relative;
   display: table;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   margin-bottom: 0rem;
   text-align: center;
   color: var(--highlight);
@@ -79,14 +79,13 @@ body {
   }
 
   #top-banner {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    max-width: 100%;
-    width: 100%;
-    height: fit-content;
+    // position: absolute;
+    // top: 0px;
+    // left: 0px;
+    // max-width: 100%;
+    // width: 100%;
+    // height: fit-content;
     background-color: var(--cover-title-and-description-guard-bg-color);
-
   }
 
   #site-languages {
@@ -100,7 +99,7 @@ body {
   #site-menu {
     position: relative;
     float: left;
-    width: fit-content;
+    // width: fit-content;
     height: 100%;
   }
 
@@ -127,9 +126,9 @@ body {
 
   #site-head-content {
     
-    position: absolute;
-    bottom: 200px;
-    max-width: 100%;
+    // position: absolute;
+    // bottom: 200px;
+    // max-width: 100%;
     align-content: center;
   }
 
@@ -145,7 +144,7 @@ body {
     border-radius: 4px;
     -webkit-border-radius: 4px;
     display: inline-block;
-    font-size: 16px;
+    // font-size: 16px;
     letter-spacing: 1px;
     margin: 1rem;
     overflow: visible;