diff --git a/_includes/getting-started.md b/_includes/getting-started.md index 491859f405..e05bacfcb9 100644 --- a/_includes/getting-started.md +++ b/_includes/getting-started.md @@ -1,5 +1,12 @@ The instructions below cover both Scala 2 and Scala 3. +
+{% 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` channel of +[our Discord](https://discord.com/invite/scala).* +{% endaltDetails %} +
+ ## Try Scala without installing anything To start experimenting with Scala right away, use “Scastie” in your browser. diff --git a/_plugins/alt-details-lib/alt-details.rb b/_plugins/alt-details-lib/alt-details.rb index 4ddbee64f4..f7bf5058a6 100644 --- a/_plugins/alt-details-lib/alt-details.rb +++ b/_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 diff --git a/_plugins/alt-details-lib/template.erb b/_plugins/alt-details-lib/template.erb index 6aba6f127f..95d65eb3ef 100644 --- a/_plugins/alt-details-lib/template.erb +++ b/_plugins/alt-details-lib/template.erb @@ -1,5 +1,5 @@
-
+
diff --git a/_sass/base/helper.scss b/_sass/base/helper.scss index d0f6281ea0..dc1ed0ddc0 100755 --- a/_sass/base/helper.scss +++ b/_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; } diff --git a/_sass/components/alt-details.scss b/_sass/components/alt-details.scss index b058364039..c86febae5d 100644 --- a/_sass/components/alt-details.scss +++ b/_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; diff --git a/_sass/layout/footer.scss b/_sass/layout/footer.scss index d21eb9e50e..e6f690fd4e 100755 --- a/_sass/layout/footer.scss +++ b/_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;