feat(Homepage): darkmode support and global changes

_includes/new-includes/header/navigation.html

@@ -1,13 +1,13 @@
 <ul class="navigation-items">
   {% for item in site.data.new-data.header.navigation %}
   <li class="nav-item {% if page.url == item.url %}active{% endif %}">
-    <a href="{{ item.url }}" data-text="{{ item.header }}">{{ item.header }}</a>
+    <a href="{{ item.url }}" data-text="{{ item.header }}"><span>{{ item.header }}</span></a>
   </li>
   {% endfor %}
   <li class="border">
     <span />
   </li>
   <li class="nav-item {% if page.url contains '/install' %}active{% endif %}">
-    <a href="/install" data-text="Install">Install <span>({{ site.data.builds.swift_releases.last.name }})</span></a>
+    <a href="/install" data-text="Install"><span>Install <span>({{ site.data.builds.swift_releases.last.name }})</span></span></a>
   </li>
 </ul>

assets/stylesheets/_screen.scss

@@ -1,13 +1,5 @@
 @use './core/_helpers' as mixhelpers;
 
-*,
-*:before,
-*:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
 html,
 body {
   display: flex;
@@ -208,6 +200,7 @@ h2.header-with-anchor {
 
 main {
   padding-top: 66px; // height of nav
+  background-color: var(--color-fill);
 
   .callout {
     display: grid;

assets/stylesheets/application.scss

@@ -27,4 +27,11 @@ body {
 
     @include dark-theme;
   }
+
+  // Use linear-gradient so over scroll color matches footer background color, when user rubberbands.
+  background-image: linear-gradient(
+    180deg,
+    var(--nav-scroller-gradient-start) 50%,
+    var(--nav-scroller-gradient-end) 50%
+  );
 }

assets/stylesheets/new-stylesheets/_core.scss

@@ -16,22 +16,28 @@ body {
    transition:
      background-color 0.3s ease,
      color 0.3s ease;
-  @include light-theme;
+    @include light-theme;
 
   &[data-color-scheme='light'] {
     color-scheme: light;
   }
 
   &[data-color-scheme='dark'] {
     color-scheme: dark;
-
     @include dark-theme;
   }
 
   // TODO: Remove this and move the rule in body
   #install {
     color: var(--site-text-color);
   }
+
+  // Use linear-gradient so over scroll color matches footer background color, when user rubberbands.
+  background-image: linear-gradient(
+    180deg,
+    var(--nav-scroller-gradient-start) 50%,
+    var(--nav-scroller-gradient-end) 50%
+  );
 }
 
 h2 {
@@ -42,6 +48,7 @@ main {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  background-color: var(--page-bg);
 }
 
 code {

assets/stylesheets/new-stylesheets/_syntax.scss

@@ -28,71 +28,167 @@
   }
 }
 
-.code-box pre {
-  button {
-    border-radius: 0;
-  }
-}
-
 pre.highlight {
-  background: #fff;
-  padding: 1em;
-  overflow-x: auto;
-  border-radius: 10px;
-  font-size: 15px;
+  background: var(--color-code-background);
+  font-size: 14px;
   line-height: 1.53;
+  overflow-x: auto;
 
-  .c,
-  .cm,
-  .cp,
-  .c1,
+  .c,   /* Comment */
+  .cm,  /* Comment.Multiline */
+  .cp,  /* Comment.Preproc */
+  .c1,  /* Comment.Single */
   .cs {
-    color: #6e6e6e;
-    font-style: italic;
+    /* Comment.Special */
+    color: var(--color-syntax-comments);
   }
 
-  .k,
-  .kt,
+  .k,   /* Keyword */
+  .kc,  /* Keyword.Constant */
+  .kd,  /* Keyword.Declaration */
+  .kp,  /* Keyword.Pseudo */
   .kr,
-  .kd {
-    color: #ad3da4;
+  .kt, /* Keyword.Reserved */
+  .nb {
+    /* Name.Builtin */
+    color: var(--color-syntax-keywords);
   }
 
-  .s,
-  .s1,
-  .s2,
-  .sd {
-    color: #d12f1b;
+  .nv,  /* Name.Variable */
+  .nf {
+    /* Name.Function */
+    color: var(--color-syntax-project-constants);
   }
 
-  .nf {
-    color: #703daa;
+  .n {
+    color: #B181EC;
   }
 
-  .nc,
-  .no,
-  .nt {
-    color: #3b5bdb;
+  .o, .p {
+    color: var(--color-syntax-brackets-dots);
+  }
+
+  .s,   /* Literal.String */
+  .sb,  /* Literal.String.Backtick */
+  .sc,  /* Literal.String.Char >> --color-syntax-characters */
+  .sd,  /* Literal.String.Doc */
+  .s2,  /* Literal.String.Double */
+  .se,  /* Literal.String.Escape */
+  .sh,  /* Literal.String.Heredoc */
+  .si,  /* Literal.String.Interpol */
+  .s1,  /* Literal.String.Single */
+  .sx {
+    /* Literal.String.Other */
+    color: var(--color-syntax-strings);
+  }
+
+  .na {
+    /* Name.Attribute */
+    color: var(--color-syntax-attributes);
   }
 
-  .nv,
-  .vg,
+  .nc,  /* Name.Class */
+  .ni,  /* Name.Entity */
+  .no,  /* Name.Constant */
+  .vc,  /* Name.Variable.Class */
+  .vg,  /* Name.Variable.Global */
   .vi {
-    color: #333;
+    /* Name.Variable.Instance */
+    color: var(--color-syntax-other-type-names);
+  }
+
+  .err, /* Error */
+  .gr,  /* Generic.Error */
+  .gt,  /* Generic.Traceback */
+  .ne {
+    /* Name.Exception */
+    color: var(--color-syntax-strings);
+  }
+
+  .m,   /* Literal.Number */
+  .mf,  /* Literal.Number.Float */
+  .mh,  /* Literal.Number.Hex */
+  .mi,  /* Literal.Number.Integer */
+  .il,  /* Literal.Number.Integer.Long */
+  .mo {
+    /* Literal.Number.Oct */
+    color: var(--color-syntax-numbers);
+  }
+
+  .ge {
+    /* Generic.Emph */
+    font-style: italic;
+  }
+
+  .nt {
+    /* Name.Tag */
+    color: var(--color-syntax-characters);
+  }
+
+  .gd,     /* Generic.Deleted */
+  .gd .x {
+    /* Generic.Deleted.Specific */
+    color: var(--color-syntax-plain-text);
+    background-color: var(--color-fill-red-secondary);
+  }
+
+  .gi,     /* Generic.Inserted */
+  .gi .x {
+    /* Generic.Inserted.Specific */
+    color: var(--color-syntax-plain-text);
+    background-color: var(--color-fill-green-secondary);
+  }
+
+  .gh, /* Generic.Heading */
+  .bp, /* Name.Builtin.Pseudo */
+  .go, /* Generic.Output */
+  .gp, /* Generic.Prompt */
+  .gu, /* Generic.Subheading */
+  .w {
+    /* Text.Whitespace */
+    color: var(--color-syntax-comments);
+  }
+
+  .nn {
+    /* Name.Namespace */
+    color: var(--color-syntax-other-declarations);
   }
 
-  .m,
-  .mi,
-  .mf {
-    color: #098658;
+  .sr {
+    /* Literal.String.Regex */
+    color: var(--color-figure-green);
   }
 
-  .o {
-    color: #000;
+  .ss {
+    /* Literal.String.Symbol */
+    color: var(--color-syntax-heading);
   }
 
-  .err {
-    background-color: #ffeef0;
-    color: #d73a49;
+  /* Make prompts non-selectable, to make it easy to copy and paste */
+  .gp {
+    -webkit-user-select: none;
+    user-select: none;
+
+    & + .w {
+      -webkit-user-select: none;
+      user-select: none;
+    }
   }
 }
+
+.language-console {
+  color: var(--color-syntax-plain-text);
+}
+
+// Explicit syntax highlighting for C++ code blocks:
+
+.language-cpp .cp,
+.language-cpp .kt,
+.language-cpp .nl,
+.language-cpp .o,
+.language-c\+\+ .cp,
+.language-c\+\+ .kt,
+.language-c\+\+ .nl,
+.language-c\+\+ .o {
+  color: var(--color-syntax-keywords);
+}