From 92001be3dad0ed07c2e4bb5ddd04a71e1d3ec8d7 Mon Sep 17 00:00:00 2001
From: froggleston <robertdavey@carpentries.org>
Date: Wed, 18 Sep 2024 14:27:55 +0100
Subject: [PATCH] Improve CSS styling, add better sticky sidebar, fix logos

---
 _layouts/glossary.html          | 41 +++++++++-----
 assets/css/glossary.scss        | 96 ++++++++++++++++-----------------
 assets/js/sticky-sidebar.min.js |  8 +++
 static/site.css                 | 11 ++--
 4 files changed, 88 insertions(+), 68 deletions(-)
 create mode 100644 assets/js/sticky-sidebar.min.js
diff --git a/_layouts/glossary.html b/_layouts/glossary.html
index 44dd9d20..066fe179 100644
--- a/_layouts/glossary.html
+++ b/_layouts/glossary.html
@@ -14,26 +14,32 @@
     <link rel="stylesheet" type="text/css" href="{{ relative_root_path }}/assets/css/glossary.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     {% include matomo.html %}
+
+    <script type="text/javascript" src="{{site.baseurl}}/assets/js/sticky-sidebar.min.js"></script>
 </head>
 <body>
 <main>
     {% include title.html %}
-    <div id="content-wrapper">
-        <div class="inner clearfix">
-          <section id="main-content-{{ direction }}">
-                {% include glossary.html headings = headings %}
-            </section>
-            <div class="sticky-{{ direction }}">
-                {% assign char_arr = headings | split: '' %}
-                {% for char in char_arr %}
-                        <a class="letter_links"
-                           href="#{{char}}">{{char}}</>
-                        </a>
-                        <br>
-                {% endfor %}
+
+    <div class="main-content clearfix">
+        <div id="main-content-{{ direction }}" class="content">
+            {% include glossary.html headings = headings %}
+        </div>
+        <div id="sidebar" class="sidebar sticky-{{ direction }}">
+            <div class="sidebar__inner">
+            {% assign char_arr = headings | split: '' %}
+            {% for char in char_arr %}
+                <div id="{{char}}" class="letter">
+                    <a class="letter_links"
+                        href="#{{char}}">{{char}}</>
+                    </a>
+                </div>
+                    <!-- <br> -->
+            {% endfor %}
             </div>
         </div>
     </div>
+
 </main>
 <footer>
     <p>
@@ -49,3 +55,12 @@
     </p>
 </footer>
 </body>
+
+<script type="text/javascript">
+    var sidebar = new StickySidebar('.sidebar', {
+        topSpacing: 20,
+        bottomSpacing: 20,
+        containerSelector: '.main-content',
+        innerWrapperSelector: '.sidebar__inner'
+    });
+</script>
diff --git a/assets/css/glossary.scss b/assets/css/glossary.scss
index 34749477..30d060b2 100644
--- a/assets/css/glossary.scss
+++ b/assets/css/glossary.scss
@@ -48,9 +48,9 @@ a:hover {
 
     .button-ltr,
     .button-rtl {
-        width: 134px;
-        height: 58px;
-        padding-top: 22px;
+        width: 202px;
+        height: 84px;
+        padding-top: 16px;
         padding-left: 68px;
         font-family: 'Helvetica Neue', Helvetica, Arial, serif;
         font-size: 20px;
@@ -76,55 +76,65 @@ a:hover {
         display: block;
     }
 
+    .sidebar{
+        will-change: min-height;
+    }
+
+    .sidebar__inner{
+        transform: translate(0, 0); /* For browsers don't support translate3d. */
+        transform: translate3d(0, 0, 0);
+        will-change: position, transform;
+    }
+
     .sticky-home,
     .sticky-ltr,
     .sticky-rtl {
-        position: sticky;
         z-index: 0;
-        top: 0;
-        overflow: scroll;
-        overflow-x: hidden;
-        height: 95%;
         background-color: grey;
         color: white;
         text-align: center;
-        vertical-align: middle;
-        align-contents: center;
-        padding-top: 30px;
-        padding-bottom: 30px;
-        bottom: 30px;
     }
 
     .sticky-home {
         float: right;
-        margin-right: 1cm;
+        // margin-right: 1cm;
         right: 0;
         width: 20%;
     }
 
     .sticky-ltr {
         float: right;
-        margin-right: 1cm;
+        // margin-right: 1cm;
         right: 0;
         width: 6%;
     }
 
     .sticky-rtl {
         float: left;
-        margin-left: 1cm;
+        // margin-left: 1cm;
         left: 0;
         width: 6%;
     }
 
+    .letter {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        border: 1px solid grey;
+        background-color: grey;
+        color: white;
+    }
+
     .lang_links,
     .letter_links {
         font-family: Arial, Helvetica, sans-serif;
         text-align: center;
         vertical-align: middle;
         text-decoration: none;
-        font-size: 24;
+        font-size: px;
         color: white;
-        margin: 20px 0% 30px 0%;
+        margin: 10px 0% 10px 0%;
     }
 
     .lang_links {
@@ -139,8 +149,6 @@ a:hover {
     }
 
     #content-wrapper {
-        padding-top: 30px;
-        border-top: solid 1px #fff;
         margin-right: 0cm;
         margin-left: 0cm;
     }
@@ -156,8 +164,7 @@ a:hover {
 
     #main-content-home {
         float: left;
-        width: 60%;
-        max-width: 100%;
+        max-width: 73%;
         padding: 1cm 1cm 1cm 1cm;
         margin-left: 1cm;
     }
@@ -175,8 +182,7 @@ a:hover {
     #main-content-ltr,
     #main-content-rtl {
         padding: .5cm 1cm 1cm 1cm;
-        width: 75%;
-        max-width: 85%;
+        max-width: 87%;
     }
 
     #main-content-home,
@@ -191,9 +197,9 @@ a:hover {
 
     .button-ltr,
     .button-rtl {
-      width: 134px;
-      height: 58px;
-      padding-top: 22px;
+      width: 202px;
+      height: 84px;
+      padding-top: 16px;
       padding-left: 68px;
       font-family: 'Helvetica Neue', Helvetica, Arial, serif;
       font-size: 20px;
@@ -222,40 +228,38 @@ a:hover {
 
     .sticky-home {
         display: none;
-        margin-right: 1cm;
     }
 
     .sticky-ltr,
     .sticky-rtl {
-        position: sticky;
         z-index: 0;
-        top: 8;
-        overflow: scroll;
-        overflow-x: hidden;
-        height: 110%;
-        width: 12%;
         background-color: grey;
         color: white;
         text-align: center;
-        vertical-align: middle;
-        padding-bottom: 40px;
-        padding-top: 30px;
     }
 
     .sticky-ltr {
         float: right;
-        margin-right: 0cm;
         right: 0;
         bottom: 30px;
     }
 
     .sticky-rtl {
         float: left;
-        margin-left: .5cm;
         left: 0;
         bottom: 30px;
     }
 
+    .letter {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        border: 1px solid grey;
+        background-color: grey;
+        color: white;
+    }
+
     .lang_links { }
 
     .letter_links {
@@ -266,10 +270,7 @@ a:hover {
         text-decoration: none;
     }
 
-    #content-wrapper {
-        padding-top: 30px;
-        border-top: solid 1px #fff;
-    }
+    #content-wrapper { }
 
     .clearfix:after {
         display: block;
@@ -283,24 +284,21 @@ a:hover {
 
     #main-content-home {
         float: left;
-        width: 77%;
-        max-width: 80%;
+        max-width: 99%;
         padding: 1cm 1cm 1cm 1cm;
         margin-left: .5cm;
     }
 
     #main-content-ltr {
         float: left;
-        width: 65%;
-        max-width: 80%;
+        max-width: 87%;
         padding: 1cm .5cm 1cm 1cm;
         margin-left: .5cm;
     }
 
     #main-content-rtl {
         float: right;
-        width: 65%;
-        max-width: 80%;
+        max-width: 87%;
         padding: 1cm 1cm 1cm .5cm;
         margin-right: .5cm;
     }
diff --git a/assets/js/sticky-sidebar.min.js b/assets/js/sticky-sidebar.min.js
new file mode 100644
index 00000000..f8f10e8c
--- /dev/null
+++ b/assets/js/sticky-sidebar.min.js
@@ -0,0 +1,8 @@
+/**
+ * sticky-sidebar - A JavaScript plugin for making smart and high performance.
+ * @version v3.2.0
+ * @link https://github.com/abouolia/sticky-sidebar
+ * @author Ahmed Bouhuolia
+ * @license The MIT License (MIT)
+**/
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.StickySidebar=e()}(this,function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var e=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),i=function(){var i=".stickySidebar",n={topSpacing:0,bottomSpacing:0,containerSelector:!1,innerWrapperSelector:".inner-wrapper-sticky",stickyClass:"is-affixed",resizeSensor:!0,minWidth:!1};return function(){function s(e){var i=this,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(t(this,s),this.options=s.extend(n,o),this.sidebar="string"==typeof e?document.querySelector(e):e,void 0===this.sidebar)throw new Error("There is no specific sidebar element.");this.sidebarInner=!1,this.container=this.sidebar.parentElement,this.affixedType="STATIC",this.direction="down",this.support={transform:!1,transform3d:!1},this._initialized=!1,this._breakpoint=!1,this._resizeListeners=[],this.dimensions={translateY:0,topSpacing:0,bottomSpacing:0,sidebarHeight:0,sidebarWidth:0,containerTop:0,containerHeight:0,viewportHeight:0,viewportTop:0,lastViewportTop:0},["handleEvent"].forEach(function(t){i[t]=i[t].bind(i)}),this.initialize()}return e(s,[{key:"initialize",value:function(){var t=this;if(this._setSupportFeatures(),this.options.innerWrapperSelector&&(this.sidebarInner=this.sidebar.querySelector(this.options.innerWrapperSelector),null===this.sidebarInner&&(this.sidebarInner=!1)),!this.sidebarInner){var e=document.createElement("div");for(e.setAttribute("class","inner-wrapper-sticky"),this.sidebar.appendChild(e);this.sidebar.firstChild!=e;)e.appendChild(this.sidebar.firstChild);this.sidebarInner=this.sidebar.querySelector(".inner-wrapper-sticky")}if(this.options.containerSelector){var i=document.querySelectorAll(this.options.containerSelector);if((i=Array.prototype.slice.call(i)).forEach(function(e,i){e.contains(t.sidebar)&&(t.container=e)}),!i.length)throw new Error("The container does not contains on the sidebar.")}"function"!=typeof this.options.topSpacing&&(this.options.topSpacing=parseInt(this.options.topSpacing)||0),"function"!=typeof this.options.bottomSpacing&&(this.options.bottomSpacing=parseInt(this.options.bottomSpacing)||0),this._widthBreakpoint(),this.calcDimensions(),this.stickyPosition(),this.bindEvents(),this._initialized=!0}},{key:"bindEvents",value:function(){window.addEventListener("resize",this,{passive:!0}),window.addEventListener("scroll",this,{passive:!0}),this.sidebar.addEventListener("update"+i,this),this.options.resizeSensor&&"undefined"!=typeof ResizeSensor&&(new ResizeSensor(this.sidebarInner,this.handleEvent),new ResizeSensor(this.container,this.handleEvent))}},{key:"handleEvent",value:function(t){this.updateSticky(t)}},{key:"calcDimensions",value:function(){if(!this._breakpoint){var t=this.dimensions;t.containerTop=s.offsetRelative(this.container).top,t.containerHeight=this.container.clientHeight,t.containerBottom=t.containerTop+t.containerHeight,t.sidebarHeight=this.sidebarInner.offsetHeight,t.sidebarWidth=this.sidebar.offsetWidth,t.viewportHeight=window.innerHeight,this._calcDimensionsWithScroll()}}},{key:"_calcDimensionsWithScroll",value:function(){var t=this.dimensions;t.sidebarLeft=s.offsetRelative(this.sidebar).left,t.viewportTop=document.documentElement.scrollTop||document.body.scrollTop,t.viewportBottom=t.viewportTop+t.viewportHeight,t.viewportLeft=document.documentElement.scrollLeft||document.body.scrollLeft,t.topSpacing=this.options.topSpacing,t.bottomSpacing=this.options.bottomSpacing,"function"==typeof t.topSpacing&&(t.topSpacing=parseInt(t.topSpacing(this.sidebar))||0),"function"==typeof t.bottomSpacing&&(t.bottomSpacing=parseInt(t.bottomSpacing(this.sidebar))||0)}},{key:"isSidebarFitsViewport",value:function(){return this.dimensions.sidebarHeight<this.dimensions.viewportHeight}},{key:"observeScrollDir",value:function(){var t=this.dimensions;if(t.lastViewportTop!==t.viewportTop){var e="down"===this.direction?Math.min:Math.max;t.viewportTop===e(t.viewportTop,t.lastViewportTop)&&(this.direction="down"===this.direction?"up":"down")}}},{key:"getAffixType",value:function(){var t=this.dimensions,e=!1;this._calcDimensionsWithScroll();var i=t.sidebarHeight+t.containerTop,n=t.viewportTop+t.topSpacing,s=t.viewportBottom-t.bottomSpacing;return"up"===this.direction?n<=t.containerTop?(t.translateY=0,e="STATIC"):n<=t.translateY+t.containerTop?(t.translateY=n-t.containerTop,e="VIEWPORT-TOP"):!this.isSidebarFitsViewport()&&t.containerTop<=n&&(e="VIEWPORT-UNBOTTOM"):this.isSidebarFitsViewport()?t.sidebarHeight+n>=t.containerBottom?(t.translateY=t.containerBottom-i,e="CONTAINER-BOTTOM"):n>=t.containerTop&&(t.translateY=n-t.containerTop,e="VIEWPORT-TOP"):t.containerBottom<=s?(t.translateY=t.containerBottom-i,e="CONTAINER-BOTTOM"):i+t.translateY<=s?(t.translateY=s-i,e="VIEWPORT-BOTTOM"):t.containerTop+t.translateY<=n&&(e="VIEWPORT-UNBOTTOM"),t.translateY=Math.max(0,t.translateY),t.translateY=Math.min(t.containerHeight,t.translateY),t.lastViewportTop=t.viewportTop,e}},{key:"_getStyle",value:function(t){if(void 0!==t){var e={inner:{},outer:{}},i=this.dimensions;switch(t){case"VIEWPORT-TOP":e.inner={position:"fixed",top:this.options.topSpacing,left:i.sidebarLeft-i.viewportLeft,width:i.sidebarWidth};break;case"VIEWPORT-BOTTOM":e.inner={position:"fixed",top:"auto",left:i.sidebarLeft,bottom:this.options.bottomSpacing,width:i.sidebarWidth};break;case"CONTAINER-BOTTOM":case"VIEWPORT-UNBOTTOM":var n=this._getTranslate(0,i.translateY+"px");e.inner=n?{transform:n}:{position:"absolute",top:i.translateY,width:i.sidebarWidth}}switch(t){case"VIEWPORT-TOP":case"VIEWPORT-BOTTOM":case"VIEWPORT-UNBOTTOM":case"CONTAINER-BOTTOM":e.outer={height:i.sidebarHeight,position:"relative"}}return e.outer=s.extend({height:"",position:""},e.outer),e.inner=s.extend({position:"relative",top:"",left:"",bottom:"",width:"",transform:this._getTranslate()},e.inner),e}}},{key:"stickyPosition",value:function(t){if(!this._breakpoint){t=t||!1;var e=this.getAffixType(),n=this._getStyle(e);if((this.affixedType!=e||t)&&e){var o="affix."+e.toLowerCase().replace("viewport-","")+i;s.eventTrigger(this.sidebar,o),"STATIC"===e?s.removeClass(this.sidebar,this.options.stickyClass):s.addClass(this.sidebar,this.options.stickyClass);for(var r in n.outer)this.sidebar.style[r]=n.outer[r];for(var a in n.inner){var c="number"==typeof n.inner[a]?"px":"";this.sidebarInner.style[a]=n.inner[a]+c}var p="affixed."+e.toLowerCase().replace("viewport","")+i;s.eventTrigger(this.sidebar,p)}else this._initialized&&(this.sidebarInner.style.left=n.inner.left);this.affixedType=e}}},{key:"_widthBreakpoint",value:function(){window.innerWidth<=this.options.minWidth?(this._breakpoint=!0,this.affixedType="STATIC",this.sidebar.removeAttribute("style"),s.removeClass(this.sidebar,this.options.stickyClass),this.sidebarInner.removeAttribute("style")):this._breakpoint=!1}},{key:"updateSticky",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this._running||(this._running=!0,function(e){requestAnimationFrame(function(){switch(e){case"scroll":t._calcDimensionsWithScroll(),t.observeScrollDir(),t.stickyPosition();break;case"resize":default:t._widthBreakpoint(),t.calcDimensions(),t.stickyPosition(!0)}t._running=!1})}(e.type))}},{key:"_setSupportFeatures",value:function(){var t=this.support;t.transform=s.supportTransform(),t.transform3d=s.supportTransform(!0)}},{key:"_getTranslate",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;return this.support.transform3d?"translate3d("+t+", "+e+", "+i+")":!!this.support.translate&&"translate("+t+", "+e+")"}},{key:"destroy",value:function(){window.removeEventListener("resize",this),window.removeEventListener("scroll",this),this.sidebar.classList.remove(this.options.stickyClass),this.sidebar.style.minHeight="",this.sidebar.removeEventListener("update"+i,this);var t={inner:{},outer:{}};t.inner={position:"",top:"",left:"",bottom:"",width:"",transform:""},t.outer={height:"",position:""};for(var e in t.outer)this.sidebar.style[e]=t.outer[e];for(var n in t.inner)this.sidebarInner.style[n]=t.inner[n];this.options.resizeSensor&&"undefined"!=typeof ResizeSensor&&(ResizeSensor.detach(this.sidebarInner,this.handleEvent),ResizeSensor.detach(this.container,this.handleEvent))}}],[{key:"supportTransform",value:function(t){var e=!1,i=t?"perspective":"transform",n=i.charAt(0).toUpperCase()+i.slice(1),s=["Webkit","Moz","O","ms"],o=document.createElement("support").style;return(i+" "+s.join(n+" ")+n).split(" ").forEach(function(t,i){if(void 0!==o[t])return e=t,!1}),e}},{key:"eventTrigger",value:function(t,e,i){try{var n=new CustomEvent(e,{detail:i})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,i)}t.dispatchEvent(n)}},{key:"extend",value:function(t,e){var i={};for(var n in t)void 0!==e[n]?i[n]=e[n]:i[n]=t[n];return i}},{key:"offsetRelative",value:function(t){var e={left:0,top:0};do{var i=t.offsetTop,n=t.offsetLeft;isNaN(i)||(e.top+=i),isNaN(n)||(e.left+=n)}while(t=t.offsetParent);return e}},{key:"addClass",value:function(t,e){s.hasClass(t,e)||(t.classList?t.classList.add(e):t.className+=" "+e)}},{key:"removeClass",value:function(t,e){s.hasClass(t,e)&&(t.classList?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\b)"+e.split(" ").join("|")+"(\\b|$)","gi")," "))}},{key:"hasClass",value:function(t,e){return t.classList?t.classList.contains(e):new RegExp("(^| )"+e+"( |$)","gi").test(t.className)}}]),s}()}();return window.StickySidebar=i,i});
\ No newline at end of file
diff --git a/static/site.css b/static/site.css
index dd60cece..25246989 100644
--- a/static/site.css
+++ b/static/site.css
@@ -11,7 +11,7 @@ body {
     img.logo {
         float: left;
         vertical-align: middle;
-        width: 15%;
+        width: 150px;
     }
 
     .row {
@@ -35,7 +35,7 @@ body {
         float: right;
         width: 100%;
     }
-  
+
     .right-rtl {
         float: right;
         width: 25%;
@@ -45,16 +45,15 @@ body {
 }
 
 @media screen and (max-width: 768px) {
-    
+
     img.logo {
         float: left;
         vertical-align: middle;
-        width: 25%;
-    }  
+        width: 120px;
+    }
 
     .row {
         background: grey;
-        width: 100%;
         margin-left: .5cm;
         margin-right: 1cm;
     }
