General theme changes & Fixing warnings

themes/hugo-theme-stack/assets/scss/general.scss

@@ -18,8 +18,6 @@ a {
 
 .section-title {
     text-transform: uppercase;
-    margin-top: 0;
-    margin-bottom: 10px;
     display: block;
     font-size: 1.6rem;
     font-weight: bold;

themes/hugo-theme-stack/assets/scss/grid.scss

@@ -91,10 +91,9 @@ main.main {
 .main-container {
     min-height: 100vh;
     align-items: flex-start;
-    padding: 0 15px;
     gap: var(--section-separation);
-    padding-top: var(--main-top-padding);
-    
+    padding: var(--main-top-padding) 15px 0;
+
     @include respond(md) {
         padding: 0 20px;
     }

themes/hugo-theme-stack/assets/scss/partials/layout/article.scss

@@ -14,6 +14,15 @@
         box-shadow: var(--shadow-l1);
         overflow: hidden;
 
+        @media (max-width:768px) {
+            border-radius: unset;
+            width: 100vw;
+            position: relative;
+            left: 50%;
+            transform: translateX(-50%);
+            max-width: none;
+        }
+
         .article-header {
             .article-image {
                 img {

themes/hugo-theme-stack/assets/scss/partials/menu.scss

@@ -218,6 +218,30 @@
     flex-direction: row;
     gap: 10px;
 
+    @media (max-width: 768px) {
+        display: none;
+    }
+
+    svg {
+        width: 24px;
+        height: 24px;
+        stroke: var(--body-text-color);
+        stroke-width: 1.33;
+    }
+}
+
+.social-menu-waffle {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+
+    @media (min-width: 768px) {
+        display: none;
+    }
+
     svg {
         width: 24px;
         height: 24px;

themes/hugo-theme-stack/assets/scss/partials/sidebar.scss

@@ -90,6 +90,10 @@
     flex-direction: column;
     gap: var(--sidebar-element-separation);
 
+    @media (max-width: 768px) {
+        flex-direction: row;
+    }
+
     @include respond(md) {
         padding: 0;
     }

themes/hugo-theme-stack/assets/scss/partials/widgets.scss

@@ -14,6 +14,13 @@
 
 /* Tag cloud widget */
 .tagCloud {
+    a {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        align-items: center;
+    }
+
     .tagCloud-tags {
         display: flex;
         flex-wrap: wrap;
@@ -43,6 +50,13 @@
         background-color: var(--card-background);
     }
 
+    a {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        align-items: center;
+    }
+
     .archives-year {
         &:not(:last-of-type) {
             border-bottom: 1.5px solid var(--card-separator-color);

themes/hugo-theme-stack/layouts/partials/comments/provider/disqusjs.html

@@ -2,7 +2,7 @@
 {{- $disqusjs := .Site.Params.Comments.disqusjs -}}
 {{- if and (not $pc.Disable) (and $disqusjs.Shortname $disqusjs.ApiKey) -}}
 
-{{- $style := resources.Get "scss/partials/comments/disqusjs.scss" | resources.ToCSS | minify -}}
+{{- $style := resources.Get "scss/partials/comments/disqusjs.scss" | css.Sass | minify -}}
 <link rel="stylesheet" href="{{ $style.RelPermalink }}">
 
 <div class="disqus-container">

themes/hugo-theme-stack/layouts/partials/head/style.html

@@ -1,3 +1,3 @@
 {{ $sass := resources.Get "scss/style.scss" }}
-{{ $style := $sass | resources.ToCSS | minify | resources.Fingerprint "sha256" }}
+{{ $style := $sass | css.Sass | minify | resources.Fingerprint "sha256" }}
 <link rel="stylesheet" href="{{ $style.RelPermalink }}">

themes/hugo-theme-stack/layouts/partials/sidebar/left.html

@@ -1,10 +1,4 @@
 <aside class="sidebar left-sidebar sticky {{ if .Site.Params.sidebar.compact }}compact{{ end }}">
-    <button class="hamburger hamburger--spin" type="button" id="toggle-menu" aria-label="{{ T `toggleMenu` }}">
-        <span class="hamburger-box">
-            <span class="hamburger-inner"></span>
-        </span>
-    </button>
-
     <header>
         {{ with .Site.Params.sidebar.avatar }}
             {{ if (default true .enabled) }}
@@ -35,6 +29,12 @@
             <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
             <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
         </div>
+
+        <button class="hamburger hamburger--spin" type="button" id="toggle-menu" aria-label="{{ T `toggleMenu` }}">
+            <span class="hamburger-box">
+                <span class="hamburger-inner"></span>
+            </span>
+        </button>
     </header>
 
     {{- with .Site.Menus.social -}}
@@ -76,18 +76,6 @@
         {{ end }}
 
         <div class="menu-bottom-section">
-            {{- $currentLanguageCode := .Language.Lang -}}
-            {{ with .Site.Home.AllTranslations }}
-                <li id="i18n-switch">  
-                    {{ partial "helper/icon" "language" }}
-                    <select name="language" onchange="window.location.href = this.selectedOptions[0].value">
-                        {{ range . }}
-                            <option value="{{ .Permalink }}" {{ if eq .Language.Lang $currentLanguageCode }}selected{{ end }}>{{ .Language.LanguageName }}</option>
-                        {{ end }}
-                    </select>
-                </li>
-            {{ end }}
-            
             {{ if (default false .Site.Params.colorScheme.toggle) }}
                 <li id="dark-mode-toggle">
                     {{ partial "helper/icon" "toggle-left" }}
@@ -95,6 +83,26 @@
                     <span>{{ T "darkMode" }}</span>
                 </li>
             {{ end }}
+
+            {{- with .Site.Menus.social -}}
+            <ol class="social-menu-waffle">
+                {{ range . }}
+                <li>
+                    <a
+                            href='{{ .URL }}'
+                            {{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
+                            {{ with .Name }}title="{{ . }}"{{ end }}
+                            rel="me"
+                    >
+                        {{ $icon := default "link" .Params.Icon }}
+                        {{ with $icon }}
+                        {{ partial "helper/icon" . }}
+                        {{ end }}
+                    </a>
+                </li>
+                {{ end }}
+            </ol>
+            {{- end -}}
         </div>
     </ol>
 </aside>

themes/hugo-theme-stack/layouts/partials/widget/toc.html

@@ -1,11 +1,12 @@
 {{ if (.Context.Scratch.Get "TOCEnabled") }}
     <section class="widget archives">
-        <div class="widget-icon">
-            {{ partial "helper/icon" "hash" }}
-        </div>
-        <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
-        
         <div class="widget--toc">
+            <div style="display: flex; flex-direction: row; align-items: center; gap: 0.5rem; padding-top: 1rem; padding-left: 1rem; border-bottom: 1.5px solid var(--card-separator-color);">
+                <div class="widget-icon" style="width: 32px; height: 32px;">
+                    {{ partial "helper/icon" "hash" }}
+                </div>
+                <h2 class="widget-title section-title" style="text-anchor: middle">{{ T "article.tableOfContents" }}</h2>
+            </div>
             {{ .Context.TableOfContents }}
         </div>
     </section>