add sticky help message to get started

Author: bishabosha

_includes/getting-started.md

@@ -1,5 +1,11 @@
 The instructions below cover both Scala 2 and Scala 3.
 
+<div class="inline-sticky-top">
+{% altDetails need-help-info-box 'Need Help?' class=help-info %}
+*If you are having trouble with setting up Scala, feel free to ask for help in the [#scala-users](https://discord.com/channels/632150470000902164/632150470000902166) channel of our Discord.*
+{% endaltDetails %}
+</div>
+
 ## Try Scala without installing anything
 
 To start experimenting with Scala right away, use <a href="https://scastie.scala-lang.org/pEBYc5VMT02wAGaDrfLnyw" target="_blank">“Scastie” in your browser</a>.

_plugins/alt-details-lib/alt-details.rb

@@ -3,7 +3,7 @@
 module Jekyll
     module AltDetails
         class AltDetailsBlock < Liquid::Block
-            SYNTAX = /^\s*(#{Liquid::QuotedFragment})\s+(#{Liquid::QuotedFragment})/o
+            SYNTAX = /^\s*(#{Liquid::QuotedFragment})\s+(#{Liquid::QuotedFragment})(?=\s+class=(#{Liquid::QuotedFragment}))?/o
             Syntax = SYNTAX
 
             alias_method :render_block, :render
@@ -18,6 +18,11 @@ def initialize(block_name, markup, tokens)
                 if markup =~ SYNTAX
                     @name = unquote($1)
                     @title = unquote($2)
+                    @css_classes = ""
+                    if $3
+                        # append $3 to @css_classes
+                        @css_classes = "#{@css_classes} #{unquote($3)}"
+                    end
                 else
                     raise SyntaxError.new("Block #{block_name} requires an id and a title")
                 end

_plugins/alt-details-lib/template.erb

@@ -1,5 +1,5 @@
 <div class="place-inline">
-  <div id="<%= @name %>" class="alt-details">
+  <div id="<%= @name %>" class="alt-details<%= @css_classes %>">
     <input class="alt-details-control" type="checkbox" id="<%= @name %>__control" hidden aria-hidden="true">
     <label class="alt-details-toggle" for="<%= @name %>__control"><%= @title %></label>
     <div class="alt-details-detail">

_sass/base/helper.scss

@@ -3,35 +3,45 @@
 //------------------------------------------------
 
 .wrap {
-	@include outer-container;
-	@include padding(0 20px);
+    @include outer-container;
+    @include padding(0 20px);
 }
 
 .place-inline {
-	// add vertical margin
-	@include outer-container;
-	@include margin(20px 0);
+    // add vertical margin
+    @include outer-container;
+    @include margin(20px 0);
+}
+
+.inline-sticky-top {
+    position: sticky;
+    top: 15px;
+    background: #fff;
+    -webkit-box-shadow: 0 0 18px 20px #fff;
+    -moz-box-shadow: 0 0 18px 20px #fff;
+    box-shadow: 0 0 18px 20px #fff;
+    z-index: 999;
 }
 
 .wrap-inline {
-	// add vertical padding
-	@include outer-container;
-	@include padding(20px 0);
+    // add vertical padding
+    @include outer-container;
+    @include padding(20px 0);
 }
 
 .wrap-tab {
-	@extend .wrap-narrow;
-	margin-top: 20px;
-	margin-bottom: 20px;
+    @extend .wrap-narrow;
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 .wrap-narrow {
-	@include outer-container;
-	@include padding(0 10px);
+    @include outer-container;
+    @include padding(0 10px);
 }
 
 .dot {
-	font-size: 10px;
-	color: rgba($base-font-color-light, 0.6);
-	margin: 0 3px;
+    font-size: 10px;
+    color: rgba($base-font-color-light, 0.6);
+    margin: 0 3px;
 }

_sass/components/alt-details.scss

@@ -2,6 +2,21 @@
 //------------------------------------------------
 //------------------------------------------------
 
+.alt-details.help-info {
+    .alt-details-toggle {
+        background-color: $brand-primary;
+        color: white;
+
+        &:hover {
+            background-color: darken($brand-primary, 15%);
+        }
+    }
+
+    .alt-details-detail {
+        background: #fae6e6
+    }
+}
+
 .alt-details {
     @include span-columns(12);
 
@@ -35,6 +50,10 @@
 
     }
 
+    .alt-details-control {
+        margin: 0;
+    }
+
     .alt-details-control+.alt-details-toggle+.alt-details-detail {
         // by default, hide the details
         position: absolute;

_sass/layout/footer.scss

@@ -84,7 +84,7 @@
       text-align: center;
       z-index: 2;
       color: #f0f3f3;
-      background-color: #dc322f;
+      background-color: $brand-primary;
       border-radius: 50%;
       display: none;