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;

themes/tse/package-lock.json

@@ -0,0 +1,56 @@
+{
+  "name": "tse",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "tse",
+      "version": "1.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "prettier": "^2.8.7",
+        "prettier-plugin-go-template": "0.0.13"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-go-template": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-go-template/-/prettier-plugin-go-template-0.0.13.tgz",
+      "integrity": "sha512-gG/xT5kd+kCzoMaTchXvdfBdsunyRCV6G8cgdPGPd2V5JGGKXUG7SjzBKU7jaGh2RTeblcAdBb/E+S/duOAMsA==",
+      "dev": true,
+      "dependencies": {
+        "ulid": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "prettier": "^2.0.0"
+      }
+    },
+    "node_modules/ulid": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ulid/-/ulid-2.3.0.tgz",
+      "integrity": "sha512-keqHubrlpvT6G2wH0OEfSW4mquYRcbe/J8NMmveoQOjUqmo+hXtO+ORCpWhdbZ7k72UtY61BL7haGxW6enBnjw==",
+      "dev": true,
+      "bin": {
+        "ulid": "bin/cli.js"
+      }
+    }
+  }
+}