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

assets/images/favicon-old/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

assets/images/favicon-old/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

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/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;
@@ -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;
+    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;
   }
 }

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
@@ -148,12 +157,13 @@ body {
     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-contrast: var(--cover-text-color);
+    --highlight: #{$primary-color};
+    --highlight-contrast: #{$light-color};
     /*inverse colors used for :hover */
-    --highlight-inverse: var(--cover-text-color);
-    --highlight-inverse-contrast: rgb(249, 238, 187);
+    --highlight-inverse: #{$secondary-color};
+    --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-text-shadow: rgb(119, 45, 0) 1px 1px 5px;
+    --cover-title-and-description-guard-bg-color: #{$light-color};
+    // --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

@@ -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[item_index='" + (l) + "']").addClass("active")
+            $(".fn-item").removeClass("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 li").prepend('<span class="fa-li"><i class="fa ' + ulLiIcon + '"></i></span>');
+      $("ul").addClass("fa-ul");
+      $("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 }}