-
- {{page.headerTitle}}
-{{page.headerSubtitle}}
- {% for release in site.data.scala-releases %} - {% if release.category == "current_version" %} - - Scala {{ release.version }} - - {% endif %} - {% endfor %} - - All Releases - -
-
diff --git a/_sass/components/alt-details.scss b/_sass/components/alt-details.scss
index e90c91efe..7c54ae315 100644
--- a/_sass/components/alt-details.scss
+++ b/_sass/components/alt-details.scss
@@ -30,7 +30,7 @@
&:after {
// show a right arrow at the end of the toggle element
content: "\f138"; //
- font-family: "FontAwesome";
+ font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 15px;
float: right;
diff --git a/_sass/components/code.scss b/_sass/components/code.scss
index 5e945b819..c4aed5e9a 100755
--- a/_sass/components/code.scss
+++ b/_sass/components/code.scss
@@ -1,22 +1,191 @@
// CODE
//------------------------------------------------
//------------------------------------------------
+
+.code-background {
+ background: #fdfdf7;
+}
+
+.code-background.dark {
+ background: $code-bg-color-dark;
+}
+
+.code-carousel {
+
+ .code-carousel_control {
+ display: none;
+ }
+
+ .progress-label {
+ position: absolute;
+ bottom: 5px;
+ right: 5px;
+ color: #222;
+
+ z-index: 40;
+
+ padding-left: 3px;
+
+ .progress-out-of {
+ color: #666;
+ font-size: $font-size-xsmall;
+ }
+
+ font-size: $font-size-small;
+ }
+
+ .progress-label.dark {
+ color: #fff;
+
+ .progress-out-of {
+ color: #aaa;
+ }
+ }
+
+ .content-area {
+ width: 100%;
+
+ section {
+ position: absolute;
+ top: -999em;
+ left: -999em;
+
+ pre {
+ opacity: 0;
+ }
+
+ transition: 400ms;
+ }
+
+ p {
+ text-align: center;
+ font-size: $font-size-small;
+ color: $base-font-color-inverse;
+ }
+ }
+
+
+ .code-element {
+ margin: 0 0 5px 0;
+ font-size: $font-size-medium;
+
+ pre {
+ margin: 0;
+ padding: 30px 25px 10px 25px;
+
+ code {
+ padding: 0;
+ }
+ }
+
+ &.compact {
+ pre {
+ padding: 10px 25px; // no top padding, buttons appear inline
+ }
+ @include bp(small) {
+ // restore non compact padding on small screens
+ pre {
+ padding: 30px 25px 10px 25px;
+ }
+ }
+ }
+
+
+ }
+
+ .arrow-switcher {
+ position: absolute; // so we can position the buttons
+ color: #444;
+ font-size: $font-size-carousel-arrow;
+ height: 100%;
+
+ z-index: 50;
+
+ label {
+ @include display(flex);
+ @include flex-direction(column);
+ @include justify-content(center);
+ height: 100%;
+ cursor: pointer;
+
+ &:hover {
+ background: rgba(#666, 0.3);
+ }
+ }
+ }
+
+ .arrow-switcher.dark {
+ color: #fff;
+
+ label {
+ &:hover {
+ background: rgba(#fff, 0.3);
+ }
+ }
+ }
+
+ .arrow-switcher_right {
+ right: 0px;
+
+ label {
+ padding: 5px 5px 5px 25px;
+ }
+ }
+
+ .arrow-switcher_left {
+ left: 0px;
+
+ label {
+ padding: 5px 25px 5px 5px;
+ }
+ }
+
+ input:checked:nth-child(1)~.content-area>section:nth-child(1),
+ input:checked:nth-child(2)~.content-area>section:nth-child(2),
+ input:checked:nth-child(3)~.content-area>section:nth-child(3),
+ input:checked:nth-child(4)~.content-area>section:nth-child(4),
+ input:checked:nth-child(5)~.content-area>section:nth-child(5),
+ input:checked:nth-child(6)~.content-area>section:nth-child(6),
+ input:checked:nth-child(7)~.content-area>section:nth-child(7),
+ input:checked:nth-child(8)~.content-area>section:nth-child(8),
+ input:checked:nth-child(9)~.content-area>section:nth-child(9) {
+ position: static;
+ pre {
+ opacity: 1;
+ }
+ }
+
+}
+
.code-element {
margin-bottom: 20px;
+ position: relative;
+
+ .code-snippet-buttons {
+ position: absolute;
+ z-index: 60;
+ right: 0px;
+ }
pre {
margin-top: 0;
}
code {
- padding: 20px;
+ // style that would be injected by hljs when JS is enabled
+ display: block;
+ font-family: 'Consolas';
+ border: none;
+ display: block;
+ overflow-x: auto;
+ padding: 0.5em;
}
.bar-code {
background: #B4BBBD;
text-align: center;
padding: 2px 0;
- font-size: $font-size-small;
+ font-size: $font-size-medium;
font-weight: $font-bold;
min-height: 26px;
@include border-radius($border-radius-base $border-radius-base 0 0);
@@ -24,6 +193,66 @@
}
}
+.code-element.dark {
+ code {
+ color: #adbac7;
+ }
+
+ .bar-code {
+ background: #404a4e;
+ color: #ccc;
+ }
+}
+
+.code-snippet-buttons {
+ @include display(flex);
+ @include flex-direction(row);
+ @include flex-wrap(wrap);
+ @include justify-content(flex-end);
+}
+
+.code-snippet-button {
+ // style shared by _includes/code-snippet.html and _includes/code-carousel.html
+ border: $base-border-gray;
+ background: #fff;
+ border-radius: 3px;
+ font-size: $font-size-small;
+ color: $gray-darker;
+ cursor: pointer;
+ margin: 4px;
+ padding: 3px 5px;
+
+ a {
+ color: $gray-darker;
+
+ &:hover {
+ color: $gray-darker;
+ text-decoration: none;
+ }
+ }
+}
+
+.code-snippet-buttons.dark {
+
+ .code-snippet-button {
+ background: $code-bg-color-dark;
+ color: #fff;
+
+ &:hover {
+ background: $code-bg-color-dark-highlight;
+ }
+
+ a {
+ color: #fff;
+
+ &:hover {
+ color: #fff;
+ text-decoration: none;
+ }
+ }
+ }
+}
+
.code-snippet-area {
position: relative; // so we can position the buttons
@@ -45,13 +274,5 @@
position: absolute; // so we can position the buttons
right: 3px;
top: 5px;
-
- button {
- border: none;
- background: #fff;
- font-size: $font-size-medium;
- color: $gray-darker;
- cursor: pointer;
- }
}
}
diff --git a/_sass/layout/header.scss b/_sass/layout/header.scss
index 2862cae72..1e224a433 100755
--- a/_sass/layout/header.scss
+++ b/_sass/layout/header.scss
@@ -7,7 +7,7 @@
background: $gray-darker;
.new-on-the-blog {
- background: rgba($gray-darker, 0.8);
+ background: rgba($banner-notice-bg, 0.8);
text-align: center;
padding: 8px 0;
color: #fff;
@@ -44,20 +44,9 @@
&.header-home {
background: none;
.header-background {
- background: rgba($gray-darker, 0.45);
+ background: $header-bg;
position: relative;
- padding-bottom: 150px;
-
- &:before {
- content: "";
- position: absolute;
- background: url("../img/frontpage/background-header-home.jpg") no-repeat center center;
- @include image-size();
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- }
+ padding-bottom: 120px;
}
}
}
diff --git a/_sass/layout/inner-text.scss b/_sass/layout/inner-text.scss
index 398cce412..9c06e0414 100755
--- a/_sass/layout/inner-text.scss
+++ b/_sass/layout/inner-text.scss
@@ -1,15 +1,23 @@
// INNER TEXT
//------------------------------------------------
//------------------------------------------------
-.inner-text {
- position: relative;
+.col-lg-6 {
+ @include span-columns(6);
+
+ @include bp(large) {
+ @include span-columns(12);
+ padding-bottom: 8px;
+ }
+}
+
+.inner-text {
h1 {
font-family: $base-font-family;
- font-size: 2.813rem;
+ font-size: min(2.85vw, 2.21rem);
font-weight: $font-black;
color: #fff;
- margin: $padding-medium 0 ($padding-medium / 2) 0;
+ margin: $padding-small 20px $padding-small 0;
}
p {
@@ -18,17 +26,14 @@
margin-bottom: $padding-medium;
}
- @include span-columns(8);
@include bp(large) {
- @include span-columns(12);
-
.button {
margin-bottom: 3px;
}
h1 {
- font-size: 2.213rem;
- margin: 0 0 ($padding-medium / 2) 0;
+ font-size: 2.5rem;
+ margin: ($padding-medium / 2) 0;
}
}
}
diff --git a/_sass/layout/nutshell.scss b/_sass/layout/nutshell.scss
index 059bf5c03..38e4c23fc 100755
--- a/_sass/layout/nutshell.scss
+++ b/_sass/layout/nutshell.scss
@@ -3,12 +3,12 @@
//------------------------------------------------
.nutshell {
- background: $gray;
+ background: $gray-nutshell;
.heading-line {
h2 {
span {
- background: $gray;
+ background: $gray-nutshell;
}
}
.call-to-action.action-medium {
diff --git a/_sass/layout/scala-main-resources.scss b/_sass/layout/scala-main-resources.scss
index 4009a228e..29c6260e0 100755
--- a/_sass/layout/scala-main-resources.scss
+++ b/_sass/layout/scala-main-resources.scss
@@ -3,8 +3,8 @@
//------------------------------------------------
.scala-main-resources {
- height: 100px;
- background: $gray-darker;
+ height: 105px;
+ background: $banner-bg;
position: relative;
.resources {
@@ -82,9 +82,11 @@
margin-right: 7px;
font-weight: $font-bold;
+ color: rgba(#fff, 0.90);
+
a {
- color: rgba(#fff, 0.90);
font-size: $font-size-medium;
+ color: rgba(#fff, 0.90);
&:active,
&:focus,
@@ -110,11 +112,11 @@
}
.scala-brand-circle {
- width: 280px;
- height: 280px;
+ width: 190px;
+ height: 190px;
left: 50%;
- top: -142px;
- margin-left: -140px;
+ top: -97px;
+ margin-left: -96px;
position: absolute;
z-index: 60;
@include display(flex);
@@ -122,16 +124,16 @@
@include justify-content(center);
.circle-solid {
- background: $gray-darker;
- width: 205px;
- height: 205px;
+ background: $gray-darkest;
+ width: 185px;
+ height: 185px;
border-radius: 100%;
text-align: center;
> img {
- width: 152px;
+ width: 120px;
height: auto;
- margin-top: -36px;
+ margin-top: -15px;
}
.scala-version {
diff --git a/_sass/layout/type-md.scss b/_sass/layout/type-md.scss
index 37f7786c8..6095a112b 100755
--- a/_sass/layout/type-md.scss
+++ b/_sass/layout/type-md.scss
@@ -164,7 +164,6 @@
overflow-x: auto;
display: block;
font-size: $font-size-medium;
- @include border-radius($border-radius-base);
padding: 10px 7px;
}
}
diff --git a/_sass/utils/_variables.scss b/_sass/utils/_variables.scss
index f4abd0aa7..0fa38b101 100755
--- a/_sass/utils/_variables.scss
+++ b/_sass/utils/_variables.scss
@@ -10,9 +10,11 @@ $brand-tertiary: #5CC6E4;
$brand-tertiary-dotty: #E45C77;
//-------------------------------------------------
+$gray-darkest: #002B36;
$gray-darker: #002B36;
$gray-dark: #073642;
$gray: #15414C;
+$gray-nutshell: $gray;
$gray-li: #244E58;
$gray-light: #E5EAEA;
$gray-lighter: #F0F3F3;
@@ -20,6 +22,15 @@ $apple-blue: #6dccf5;
$std-link: #23aad1;
$gray-heading: rgb(134, 161, 166);
+// $header-bg: #266270;
+$header-bg: #22525e;
+$banner-notice-bg: $gray-darkest;
+$banner-bg: #0c3540;
+
+//-------------------------------------------------
+$code-bg-color-dark: #22272e; // taken from github-dark-dimmed hljs theme
+$code-bg-color-dark-highlight: #464e5b;
+
//-------------------------------------------------
$headings-font-color: $gray-dark;
$base-font-color: #4A5659;
@@ -40,7 +51,8 @@ $heading-font-family: 'Roboto Slab', serif;
$em-base: 16px !global;
$base-font-size: $em-base;
//------------------------------------------------
-$font-size-logo-btn: 1.4rem; // 17px
+$font-size-carousel-arrow: 1.8rem;
+$font-size-logo-btn: 1.4rem;
$font-size-large: 1.063rem; // 17px
$font-size-medium: 0.9375rem; // 15px
$font-size-small: 0.875rem; // 14px
diff --git a/_scala_carousel_items/1-collections-ops.md b/_scala_carousel_items/1-collections-ops.md
new file mode 100644
index 000000000..9ae042320
--- /dev/null
+++ b/_scala_carousel_items/1-collections-ops.md
@@ -0,0 +1,20 @@
+---
+optionId: collections-ops
+scastieLink: 'https://scastie.scala-lang.org/UUmbjLZMRim4kogxDWncmw'
+codeTitle: 'Functional programming with immutable collections'
+description: "High-level operations avoid the need for complex and error-prone loops."
+---
+
+```scala
+val fruits =
+ List("apple", "banana", "avocado", "papaya")
+
+val countsToFruits = // count how many 'a' in each fruit
+ fruits.groupBy(fruit => fruit.count(_ == 'a'))
+
+for (count, fruits) <- countsToFruits do
+ println(s"with 'a' × $count = $fruits")
+// prints: with 'a' × 1 = List(apple)
+// prints: with 'a' × 2 = List(avocado)
+// prints: with 'a' × 3 = List(banana, papaya)
+```
diff --git a/_scala_carousel_items/2-json-codec.md b/_scala_carousel_items/2-json-codec.md
new file mode 100644
index 000000000..e300fb375
--- /dev/null
+++ b/_scala_carousel_items/2-json-codec.md
@@ -0,0 +1,20 @@
+---
+optionId: json-codec
+scastieLink: 'https://scastie.scala-lang.org/WNnVCqZeR1ufyXxyqsiqag'
+codeTitle: "Encode and decode custom data types to JSON"
+description: "The pluggable derivation system gives custom types new capabilities."
+---
+
+```scala
+case class Pet(
+ name: String,
+ kind: String
+) derives Codec // enable coding Pet to and from text
+
+val coco = Pet(name = "Coco", kind = "Cat")
+
+val message = writeJson(coco)
+// ^^^^^^^ contains the text: {"name":"Coco","kind":"Cat"}
+
+readJson[Pet](message) // convert message back to a Pet!
+```
diff --git a/_scala_carousel_items/3-js-dom.md b/_scala_carousel_items/3-js-dom.md
new file mode 100644
index 000000000..9c8535af3
--- /dev/null
+++ b/_scala_carousel_items/3-js-dom.md
@@ -0,0 +1,20 @@
+---
+optionId: js-dom-api
+scastieLink: 'https://scastie.scala-lang.org/YpcEab3ySieF4BkW5jE4Gw'
+codeTitle: 'Target the Web with Scala.js on the frontend'
+description: "Share code full-stack, interact with the DOM or use any JS library."
+---
+
+```scala
+val counter = Var(0)
+
+// create a counter button that increments on-click
+def counterButton() = button(
+ tpe := "button",
+ "count is ",
+ child.text <-- counter,
+ onClick --> { event => counter.update(c => c + 1) },
+)
+val app = dom.document.getElementById("app")
+render(app, counterButton())
+```
diff --git a/_scala_carousel_items/4-data-definitions.md b/_scala_carousel_items/4-data-definitions.md
new file mode 100644
index 000000000..a078cf9fe
--- /dev/null
+++ b/_scala_carousel_items/4-data-definitions.md
@@ -0,0 +1,20 @@
+---
+optionId: data-definitions
+scastieLink: 'https://scastie.scala-lang.org/2plItYkVS4enZCFwBIPnZA'
+codeTitle: 'Define data types and pattern match on them with ease'
+description: "Model domains precisely, and make choices based on the shape of data."
+---
+
+```scala
+enum Payment:
+ case Card(name: String, digits: Long, expires: Date)
+ case PayPal(email: String)
+
+def process(kind: Payment) = kind match
+ case Card(name, digits, expires) =>
+ s"Processing credit card $name, $digits, $expires"
+ case PayPal(email) =>
+ s"Processing PayPal account $email"
+
+process(Card(name, digits, expires))
+```
diff --git a/_scala_items/1-seamless-java-interop.md b/_scala_items/1-seamless-java-interop.md
index cf14c8c5e..b428e5060 100644
--- a/_scala_items/1-seamless-java-interop.md
+++ b/_scala_items/1-seamless-java-interop.md
@@ -1,11 +1,11 @@
---
shortTitle: "Seamless Java Interop"
shortDescription: "Scala runs on the JVM, so Java and Scala stacks can be freely mixed for totally seamless integration."
-scastieUrl:
+scastieUrl:
---
-
- 
-
- {{site.data.common.texts.frontpageMarker}}
+
-
- {{site.data.common.texts.frontpageMarker}}
+
+
+
+
{{page.headerTitle}}
+{{page.headerSubtitle}}
+ {% for release in site.data.scala-releases %} + {% if release.category == "current_version" %} + + Scala {{ release.version }} + + {% endif %} + {% endfor %} + + All Releases +
+ {% include code-carousel.html id='scala-main-carousel' collection=site.scala_carousel_items compact=true %}
+
-
+
-
diff --git a/_scala_items/2-type-inference.md b/_scala_items/2-type-inference.md
index 7e2edee38..25f759f53 100644
--- a/_scala_items/2-type-inference.md
+++ b/_scala_items/2-type-inference.md
@@ -1,11 +1,11 @@
---
shortTitle: "Type Inference"
shortDescription: "So the type system doesn’t feel so static. Don’t work for the type system. Let the type system work for you!"
-scastieUrl:
+scastieUrl:
---
class Author(val firstName: String,
val lastName: String) extends Comparable[Author] {
@@ -21,7 +21,7 @@ object Author {
def loadAuthorsFromFile(file: java.io.File): List[Author] = ???
}
+
-
\ No newline at end of file
+import static scala.collection.JavaConversions.asJavaCollection;
@@ -61,4 +61,4 @@ It also uses JavaConversions to convert between Scala collections
and Java collections.
-
diff --git a/_scala_items/3-concurrency-distribution.md b/_scala_items/3-concurrency-distribution.md
index 7a3989c2e..d03a8a269 100644
--- a/_scala_items/3-concurrency-distribution.md
+++ b/_scala_items/3-concurrency-distribution.md
@@ -1,11 +1,11 @@
---
shortTitle: "Concurrency & Distribution"
shortDescription: "Use data-parallel operations on collections, use actors for concurrency and distribution, or futures for asynchronous programming."
-scastieUrl:
+scastieUrl:
---
+
-
\ No newline at end of file
+ scala> class Person(val name: String, val age: Int) {
| override def toString = s"$name ($age)"
@@ -46,4 +46,4 @@ class and two functions. You can observe that the compiler infers the result
types of the functions automatically, as well as all the intermediate values.
-
+
val x = Future { someExpensiveComputation() }
val y = Future { someOtherExpensiveComputation() }
diff --git a/_scala_items/4-traits.md b/_scala_items/4-traits.md
index ed4d16061..fb49e2724 100644
--- a/_scala_items/4-traits.md
+++ b/_scala_items/4-traits.md
@@ -1,7 +1,7 @@
---
shortTitle: "Traits"
shortDescription: "Combine the flexibility of Java-style interfaces with the power of classes. Think principled multiple-inheritance."
-scastieUrl:
+scastieUrl:
---
{% comment %}
Borrowed from
@@ -9,7 +9,7 @@ https://gleichmann.wordpress.com/2009/10/21/scala-in-practice-composing-traits-l
{% endcomment %}
-
+
abstract class Spacecraft {
def engage(): Unit
@@ -46,4 +46,4 @@ engage the ship (provided a means to speed up) and a PulseEngine th
specifies how to speed up.
-
\ No newline at end of file
+
diff --git a/_scala_items/5-pattern-matching.md b/_scala_items/5-pattern-matching.md
index 8e8b2f517..3b0cb7ccd 100644
--- a/_scala_items/5-pattern-matching.md
+++ b/_scala_items/5-pattern-matching.md
@@ -20,7 +20,7 @@ deconstructs the arguments of a Node.
-
+
// Define a set of case classes for representing binary trees.
sealed abstract class Tree
diff --git a/_scala_items/6-higher-order-functions.md b/_scala_items/6-higher-order-functions.md
index 67997617c..77f6f5459 100644
--- a/_scala_items/6-higher-order-functions.md
+++ b/_scala_items/6-higher-order-functions.md
@@ -1,7 +1,7 @@
---
shortTitle: "Higher-order functions"
shortDescription: "Functions are first-class objects. Compose them with guaranteed type safety. Use them anywhere, pass them to anything."
-scastieUrl:
+scastieUrl:
---
@@ -10,7 +10,7 @@ scastieUrl:
with a concise syntax.
-
+
val people: Array[Person]
@@ -20,7 +20,7 @@ val (minors, adults) = people partition (_.age < 18)
-
+
List<Person> people;
diff --git a/_scala_items/7-education.md b/_scala_items/7-education.md
index 58d4218e6..310e84dcc 100644
--- a/_scala_items/7-education.md
+++ b/_scala_items/7-education.md
@@ -28,12 +28,12 @@ shortDescription: "Scala is ideal for teaching programming to beginners as well
-
+
@main def run() = println("Hello, World!")
-
+
// A module that can access the data stored in a database
class DatabaseAccess(connection: Connection):
@@ -51,7 +51,7 @@ class HttpServer(databaseAccess: DatabaseAccess):
-
+
/** A Player can either be a Bot, or a Human.
* In case it is a Human, it has a name.
@@ -61,7 +61,7 @@ enum Player:
case Human(name: String)
-
+
// Average number of contacts a person has according to age
def contactsByAge(people: Seq[Person]): Map[Int, Double] =
diff --git a/index.md b/index.md
index 7622e47b2..956a33f1e 100644
--- a/index.md
+++ b/index.md
@@ -1,6 +1,8 @@
---
layout: frontpage
+darkmodeCode: true
+
# Header texts
headerTitle: "The Scala Programming Language"
headerSubtitle: "Scala combines object-oriented and functional programming in one concise, high-level language. Scala's static types help avoid bugs in complex applications, and its JVM and JavaScript runtimes let you build high-performance systems with easy access to huge ecosystems of libraries."
diff --git a/resources/css/highlightjs-dark.css b/resources/css/highlightjs-dark.css
new file mode 100644
index 000000000..9db5b23d7
--- /dev/null
+++ b/resources/css/highlightjs-dark.css
@@ -0,0 +1,148 @@
+/*!
+ Theme: GitHub Dark Dimmed
+ Description: Dark dimmed theme as seen on github.com
+ Author: github.com
+ Maintainer: @Hirse
+ Updated: 2021-05-15
+
+ Colors taken from GitHub's CSS
+
+ BSD 3-Clause License
+
+ Copyright (c) 2006, Ivan Sagalaev.
+ All rights reserved.
+
+ Redistribution and use in source and binary forms,
+ with or without modification,
+ are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice,
+ this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,
+ this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ AND ANY EXPRESS OR IMPLIED WARRANTIES,
+ INCLUDING,
+ BUT NOT LIMITED TO,
+ THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,
+ INDIRECT,
+ INCIDENTAL,
+ SPECIAL,
+ EXEMPLARY,
+ OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ WHETHER IN CONTRACT,
+ STRICT LIABILITY,
+ OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
+ EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+.hljs {
+ color: #adbac7;
+ background: #22272e;
+}
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-variable.language_ {
+ /* prettylights-syntax-keyword */
+ color: #f47067;
+}
+
+.hljs-title,
+.hljs-type,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+ /* prettylights-syntax-entity */
+ color: #dcbdfb;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+ /* prettylights-syntax-constant */
+ color: #6cb6ff;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+ /* prettylights-syntax-string */
+ color: #96d0ff;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+ /* prettylights-syntax-variable */
+ color: #f69d50;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+ /* prettylights-syntax-comment */
+ color: #768390;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+ /* prettylights-syntax-entity-tag */
+ color: #8ddb8c;
+}
+
+.hljs-subst {
+ /* prettylights-syntax-storage-modifier-import */
+ color: #adbac7;
+}
+
+.hljs-section {
+ /* prettylights-syntax-markup-heading */
+ color: #316dca;
+ font-weight: bold;
+}
+
+.hljs-bullet {
+ /* prettylights-syntax-markup-list */
+ color: #eac55f;
+}
+
+.hljs-emphasis {
+ /* prettylights-syntax-markup-italic */
+ color: #adbac7;
+ font-style: italic;
+}
+
+.hljs-strong {
+ /* prettylights-syntax-markup-bold */
+ color: #adbac7;
+ font-weight: bold;
+}
+
+.hljs-addition {
+ /* prettylights-syntax-markup-inserted */
+ color: #b4f1b4;
+ background-color: #1b4721;
+}
+
+.hljs-deletion {
+ /* prettylights-syntax-markup-deleted */
+ color: #ffd8d3;
+ background-color: #78191b;
+}
+
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+ /* purposely ignored */
+}
diff --git a/resources/js/functions.js b/resources/js/functions.js
index 36bcfd735..5ad0b4ed4 100644
--- a/resources/js/functions.js
+++ b/resources/js/functions.js
@@ -323,6 +323,40 @@ $(document).ready(function () {
}
});
+$(document).ready(function () {
+ // set up automatic switching of code carousel
+ $(".code-carousel").each(function () {
+ var carousel = this;
+ var inputs = [];
+ $(carousel).children("input.code-carousel_control").each(function () {
+ inputs.push(this);
+ });
+
+ // if there is more than one section, set up automatic switching
+ if (inputs.length > 1) {
+
+ var cancelled = false;
+
+ var index = inputs.findIndex(input => input.checked);
+
+ // switch every 8 seconds while the page is visible and not cancelled
+ const intervalHandle = setInterval(() => {
+ if (!document.hidden && !cancelled) {
+ const nextIndex = (index + 1) % inputs.length;
+ inputs[nextIndex].checked = true;
+ index = nextIndex;
+ }
+ }, 8000);
+
+ carousel.addEventListener("click", function cancelTicker() {
+ carousel.removeEventListener("click", cancelTicker);
+ cancelled = true;
+ clearInterval(intervalHandle);
+ });
+ }
+ });
+});
+
var image = { width: 1680, height: 1100 };
var target = { x: 1028, y: 290 };