Merge pull request 'feature/styling-adjustment' (#2) from feature/styling-adjustment into development

Reviewed-on: #2
Reviewed-by: Stephane Boniffacy <stephane.boniffacy@bbee.fr>

.gitignore

@@ -13,3 +13,5 @@ hugo.linux
 # Temporary lock file while building
 /.hugo_build.lock
 
+# node_modules
+/themes/tse/node_modules

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "epsf-miniwebsite",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

themes/tse/assets/css/content.scss

@@ -252,7 +252,7 @@ table {
 
     th,
     td {
-        padding: 2rem;
+        padding: 1rem;
         line-height: 20px;
         text-align: left;
         vertical-align: top;

themes/tse/assets/css/custom.scss

@@ -21,11 +21,11 @@ table.cv td, table th {
 
 .table {
     border: 1px solid;
-    font-size: 80%;
+    font-size: 1.2rem;
     border-color: var(--section-light-bg-color);
     //background-color: var(--section-light-bg-color);
     background-color: var(--highlight-inverse-contrast);
-    color: var(--section-light-text-color);
+    color: var(--section-dark-text-color);
 }
 
 .table td, table th {

themes/tse/assets/css/generic.css

@@ -14,17 +14,21 @@
  */
 .inner {
   position: relative;
-    width: 80%;
+  /* width: 80%; */
-    max-width: 800px;
+  /* max-width: 800px; */
-    margin: 0 auto;
+  /* margin: 0 auto; */
 }
 
 /**
  Centres vertically yo. (IE8+)
  */
 .vertical {
-    display: table-cell;
+  /* display: table-cell;
-    vertical-align: middle;
+    vertical-align: middle; */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
 }
 
 /**

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;
@@ -38,7 +37,7 @@
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     min-height: 240px;
-    padding: 15% 0;
+    // padding: 15% 0;
     height: 100%;
     margin-bottom: 0rem;
   }
@@ -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,14 +115,14 @@
   }
 
   #blog-logo {
-    max-height: 80px;
+    max-height: 6rem;
+    margin-left: 1.5rem;
+    max-width: 40%;
   }
 
   .inner,
   .pagination {
     width: auto;
-    margin-left: 16px;
-    margin-right: 16px;
   }
 
   .post {
@@ -117,9 +133,10 @@
     line-height: 1.6em;
   }
 
-  #site-head {
+  #site-head,
-    padding: 10% 0;
+  #site-head.withCenteredImage {
-    height: 65%;
+    // padding: 1.5rem;
+    height: 90%;
   }
 
   #header-arrow {
@@ -128,14 +145,18 @@
 
   a.btn {
     margin-top: 10px;
+    font-size: 1.1rem;
   }
 
   .blog-title {
     font-size: 3rem;
   }
 
-  .blog-description {
+  #site-head .blog-description,
-    font-size: 2.2rem;
+  #site-head.withCenteredImage .blog-description {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    padding: 0 1rem;
   }
 
   h1,
@@ -164,4 +185,27 @@
   .site-footer {
     font-size: 1.1rem;
   }
+  #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: center;
+    padding-right: 1rem;
+  }
+  #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 0.3rem;
+    font-size: 1rem;
+  }
 }

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,10 +24,10 @@ body {
 }
 
 #site-head, #site-head.withCenteredImage {
-  position: relative;
+  // position: relative;
   display: table;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   margin-bottom: 0rem;
   text-align: center;
   color: var(--highlight);
@@ -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);
@@ -79,29 +79,36 @@ body {
   }
 
   #top-banner {
-    position: absolute;
+    // position: absolute;
-    top: 0px;
+    // top: 0px;
-    left: 0px;
+    // left: 0px;
-    max-width: 100%;
+    // max-width: 100%;
-    width: 100%;
+    // width: 100%;
-    height: fit-content;
+    // 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;
-    width: fit-content;
+    order: 1;
-    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    // width: fit-content;
+    // height: 100%;
   }
 
   #site-languages .btn-lang {
@@ -127,10 +134,11 @@ body {
 
   #site-head-content {
     
-    position: absolute;
+    // position: absolute;
-    bottom: 200px;
+    // bottom: 200px;
-    max-width: 100%;
+    // max-width: 100%;
-    align-content: center;
+    align-content: end;
+    height: 100%;
   }
 
   // Landing screen menu
@@ -145,16 +153,17 @@ body {
     border-radius: 4px;
     -webkit-border-radius: 4px;
     display: inline-block;
-    font-size: 16px;
+    // font-size: 16px;
     letter-spacing: 1px;
     margin: 1rem;
      overflow: visible;
-    padding: 10px 20px 10px 20px;
+    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);

themes/tse/assets/css/variables.scss

@@ -1,33 +1,40 @@
+    $light-color: #ffffff;
+    $dark-color: #2a0045ff ;
+    $primary-color: #183c8f; 
+    $secondary-color: rgb(143, 33, 191); 
+    $tertiary-color: #4eca2cff;
+// #{}
+// #{$tertiary-color}
 :root {
 
     /* === Cover / Landing area === */
-    --cover-text-color: rgb(0, 52, 141);
+    --cover-text-color: #{$secondary-color};
     /* Used for Landing screen menu buttons, but potentially usable for highlighting other things */
-    --highlight: #ffc800;
+    --highlight: #{$primary-color};
-    --highlight-contrast: var(--cover-text-color);
+    --highlight-contrast: #{$light-color};
     /*inverse colors used for :hover */
-    --highlight-inverse: var(--cover-text-color);
+    --highlight-inverse: #{$secondary-color};
-    --highlight-inverse-contrast: rgb(249, 238, 187);
+    --highlight-inverse-contrast: rgb(255, 255, 255);
 
     /* visual guard around title and description, when the feature is enabled */
-    --cover-title-and-description-guard-bg-color: rgba(85, 27, 2, 0.67);
+    --cover-title-and-description-guard-bg-color: #{$light-color};
-    --cover-title-text-shadow: rgb(119, 45, 0) 1px 1px 5px;
+    // --cover-title-text-shadow: rgb(119, 45, 0) 1px 1px 5px;
 
 
     /* === sticky top/left navigation menus === */
-    --sticky-menu-text-color: #d65301ea;
+    --sticky-menu-text-color: #{$light-color};
 
 
     /* === Alternating content (post) sections  === */
     /* Light section - text color */
-    --section-light-text-color:rgb(119, 45, 0);
+    --section-light-text-color:#{$light-color};
     /* Light section - background color */
-    --section-light-bg-color: #ebbc4f;
+    --section-light-bg-color: #{$primary-color};
 
     /* Dark section - text color */
-    --section-dark-text-color: var(--section-light-bg-color);
+    --section-dark-text-color: #{$primary-color};
     /* Dark section - background color */
-    --section-dark-bg-color: #652200;
+    --section-dark-bg-color: #{$light-color}; 
 
     /* Light&Dark section >quote. Suppressive color, compared to 'Light section - text color'*/
     --section-uni-quote: grey;

themes/tse/assets/js/index.js

@@ -18,7 +18,7 @@ var $sitehead = $("#site-head");
         scrollTop: el.offset().top,
       },
       dur,
-      function() {
+      function () {
         window.location.hash = el.attr("id");
       }
     );
@@ -40,7 +40,7 @@ var $sitehead = $("#site-head");
 
       // cover arrow button
       $("#header-arrow").click(function (e) {
-        e.preventDefault()
+        e.preventDefault();
         srcTo($first);
       });
     }
@@ -55,15 +55,20 @@ var $sitehead = $("#site-head");
 
         if (w >= Math.floor(g) && w <= Math.ceil(h)) {
           $(".fixed-nav").fadeOut("fast");
+        } else if (w < Math.floor(g)) {
+          $(".fixed-nav").fadeOut("fast");
         } else {
           $(".fixed-nav").css("display", "flex").fadeIn("fast");
         }
 
         $post.each(function () {
-          if (($(window).height() + w) > ($(document).height() - $(".site-footer").height())) {
+          if (
+            $(window).height() + w >
+            $(document).height() - $(".site-footer").height()
+          ) {
             var l = $postholder.length;
-            $(".fn-item").removeClass("active")
+            $(".fn-item").removeClass("active");
-            $(".fn-item[item_index='" + (l) + "']").addClass("active")
+            $(".fn-item[item_index='" + l + "']").addClass("active");
           } else {
             var f = $(this).offset().top;
             var b = $(this).offset().top + $(this).height();
@@ -88,10 +93,14 @@ var $sitehead = $("#site-head");
       });
     }
 
-    var ulLiIcon = getComputedStyle(document.documentElement).getPropertyValue('--ul-li-icon');
+    var ulLiIcon = getComputedStyle(document.documentElement).getPropertyValue(
+      "--ul-li-icon"
+    );
     if (ulLiIcon.length > 0) {
-      $('ul').addClass("fa-ul");
+      $("ul").addClass("fa-ul");
-      $("ul li").prepend('<span class="fa-li"><i class="fa ' + ulLiIcon + '"></i></span>');
+      $("ul li").prepend(
+        '<span class="fa-li"><i class="fa ' + ulLiIcon + '"></i></span>'
+      );
     }
     $("blockquote p").prepend('<span class="quo fa fa-quote-left"></span>');
     $("blockquote p").append('<span class="quo fa fa-quote-right"></span>');

themes/tse/layouts/_default/index.html

@@ -64,6 +64,8 @@
       <div id="top-banner" class="inner">
         {{ $num_lang := len $translations }}
         {{ if and (gt $num_lang 1) $.Site.Params.language_menu }}
+        {{ with resources.Get .Params.header_logo }}<img id="blog-logo" alt="" src="{{ .RelPermalink }}" />{{ end }}
+
         <div id="site-languages" class="inner">
           {{ range $translations }}
             {{ $lang_title := .Lang | strings.ToUpper }}
@@ -104,7 +106,6 @@
         <div id="site-head-content" class="inner">
 
           {{ if .Site.Params.title_guard }}<div class="title-and-description-guard">{{ end }}
-	          {{ with resources.Get .Params.header_logo }}<img id="blog-logo" alt="" src="{{ .RelPermalink }}" />{{ end }}
 
             {{ with .Params.header_subheadline }}<h2 class="blog-description">{{ . | safeHTML }}</h2>{{ end }}
             {{ with .Params.header_subsubheadline }}<h3 class="blog-description">{{ . | safeHTML }}</h3>{{ end }}

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"
+      }
+    }
+  }
+}