[Feature] Accessible Media Query Styles

README.md

@@ -43,6 +43,7 @@
 - **Contact form** built in using [Formspree](https://formspree.io/) or [Netlify Forms](https://www.netlify.com/features/#forms)
 - Designed with **[Siteleaf](http://www.siteleaf.com/)** in mind
 - Has 9 of the most popular networks as performant sharing buttons
+- Built in "dark mode" and reduced motion styles for a more accessible experience
 - Has documentation
 
 ## Examples

_sass/_syntax.scss

@@ -59,3 +59,65 @@
 .vg { color: #008080 } /* Name.Variable.Global */
 .vi { color: #008080 } /* Name.Variable.Instance */
 .il { color: #009999 } /* Literal.Number.Integer.Long */
+
+@media (prefers-color-scheme: dark) {
+  .hll { background-color: #272822; }
+  .c { color: #75715e } /* Comment */
+  .err { color: #960050; background-color: #1e0010 } /* Error */
+  .k { color: #66d9ef } /* Keyword */
+  .l { color: #ae81ff } /* Literal */
+  .n { color: #f8f8f2 } /* Name */
+  .o { color: #f92672 } /* Operator */
+  .p { color: #f8f8f2 } /* Punctuation */
+  .cm { color: #75715e } /* Comment.Multiline */
+  .cp { color: #75715e } /* Comment.Preproc */
+  .c1 { color: #75715e } /* Comment.Single */
+  .cs { color: #75715e } /* Comment.Special */
+  .ge { font-style: italic } /* Generic.Emph */
+  .gs { font-weight: bold } /* Generic.Strong */
+  .kc { color: #66d9ef } /* Keyword.Constant */
+  .kd { color: #66d9ef } /* Keyword.Declaration */
+  .kn { color: #f92672 } /* Keyword.Namespace */
+  .kp { color: #66d9ef } /* Keyword.Pseudo */
+  .kr { color: #66d9ef } /* Keyword.Reserved */
+  .kt { color: #66d9ef } /* Keyword.Type */
+  .ld { color: #e6db74 } /* Literal.Date */
+  .m { color: #ae81ff } /* Literal.Number */
+  .s { color: #e6db74 } /* Literal.String */
+  .na { color: #a6e22e } /* Name.Attribute */
+  .nb { color: #f8f8f2 } /* Name.Builtin */
+  .nc { color: #a6e22e } /* Name.Class */
+  .no { color: #66d9ef } /* Name.Constant */
+  .nd { color: #a6e22e } /* Name.Decorator */
+  .ni { color: #f8f8f2 } /* Name.Entity */
+  .ne { color: #a6e22e } /* Name.Exception */
+  .nf { color: #a6e22e } /* Name.Function */
+  .nl { color: #f8f8f2 } /* Name.Label */
+  .nn { color: #f8f8f2 } /* Name.Namespace */
+  .nx { color: #a6e22e } /* Name.Other */
+  .py { color: #f8f8f2 } /* Name.Property */
+  .nt { color: #f92672 } /* Name.Tag */
+  .nv { color: #f8f8f2 } /* Name.Variable */
+  .ow { color: #f92672 } /* Operator.Word */
+  .w { color: #f8f8f2 } /* Text.Whitespace */
+  .mf { color: #ae81ff } /* Literal.Number.Float */
+  .mh { color: #ae81ff } /* Literal.Number.Hex */
+  .mi { color: #ae81ff } /* Literal.Number.Integer */
+  .mo { color: #ae81ff } /* Literal.Number.Oct */
+  .sb { color: #e6db74 } /* Literal.String.Backtick */
+  .sc { color: #e6db74 } /* Literal.String.Char */
+  .sd { color: #e6db74 } /* Literal.String.Doc */
+  .s2 { color: #e6db74 } /* Literal.String.Double */
+  .se { color: #ae81ff } /* Literal.String.Escape */
+  .sh { color: #e6db74 } /* Literal.String.Heredoc */
+  .si { color: #e6db74 } /* Literal.String.Interpol */
+  .sx { color: #e6db74 } /* Literal.String.Other */
+  .sr { color: #e6db74 } /* Literal.String.Regex */
+  .s1 { color: #e6db74 } /* Literal.String.Single */
+  .ss { color: #e6db74 } /* Literal.String.Symbol */
+  .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+  .vc { color: #f8f8f2 } /* Name.Variable.Class */
+  .vg { color: #f8f8f2 } /* Name.Variable.Global */
+  .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+  .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+}

_sass/_theme.scss

@@ -1,3 +1,26 @@
+// Mixins
+@mixin reducedMotion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+    transition: none;
+  }
+}
+
+@mixin darkMode {
+  @media (prefers-color-scheme: dark) {
+    @content;
+  }
+}
+
+// Root
+html {
+  scroll-behavior: smooth;
+  @include reducedMotion {
+    scroll-behavior: auto;
+  }
+}
+
+
 // Structural elements
 body {
   background: $backgroundColour;
@@ -6,6 +29,10 @@ body {
   display: flex;
   @include flex-direction(column);
   overflow-x: hidden;
+  @include darkMode {
+    background: invert($backgroundColour, 100%);
+    color: invert($bodyColour, 100%);
+  }
 }
 
 .container {
@@ -48,9 +75,24 @@ body {
   margin-bottom: 1.6rem;
   text-align: center;
   background: $featureBackgroundColour;
+  @include darkMode {
+    position: relative;
+    &::after {
+      content: "";
+      z-index: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      background: fade-out(invert($featureBackgroundColour, 100%), 0.5);
+    }
+  }
   background-size: cover;
   background-position: center;
   .container {
+    position: relative;
+    z-index: 1;
     min-height: 35vh;
     max-width: 60%;
     @include flex-direction(column);
@@ -82,6 +124,9 @@ body {
 .small {
   padding-top: .8rem;
   color: $captionColour;
+  @include darkMode {
+    color: invert($captionColour, 100%);
+  }
   display: inline-block;
 }
 
@@ -100,15 +145,28 @@ body {
   .small {
     padding-top: 0;
   }
+  @include darkMode {
+    background: invert($headingColour, 100%);
+    color: invert($captionColour, 100%);
+    a {
+      color: invert($captionColour, 100%);
+      &:hover {
+        color: invert($backgroundColour, 100%);
+      }
+    }
+  }
 }
 
 
 // Pagination nav
 .nav--paginator {
   @include flexbox;
   @include justify-content(space-between);
-  color: $captionColour;
   text-align: center;
+  color: $captionColour;
+  @include darkMode {
+    color: invert($captionColour, 100%);
+  }
 }
 
 .pagination {
@@ -152,6 +210,7 @@ body {
     @include flex(1, 0, auto);
     opacity: 0.5;
     transition: opacity .1s;
+    @include reducedMotion {}
     .section {
       position: sticky;
       top: 0;
@@ -177,6 +236,8 @@ body {
   list-style: none;
   &--nav {
     overflow: hidden;
+    transition: .2s;
+    @include reducedMotion {}
     margin-bottom: var(--listHeight, 0);
   }
   .item--post,
@@ -205,8 +266,12 @@ body {
 
 
 // Links, icons and images
+a {
+  @include reducedMotion {}
+}
 a .icon {
   transition: fill .1s;
+  @include reducedMotion {}
   &:hover {
     fill: currentColor;
   }
@@ -279,6 +344,9 @@ video {
   &__legend {
     font-style: italic;
     color: $captionColour;
+    @include darkMode {
+      color: invert($captionColour, 100%);
+    }
     position: absolute;
     overflow: hidden;
     right: 0;
@@ -298,6 +366,7 @@ select {
   padding: .6rem 1.2rem;
   margin-bottom: .6rem;
   transition: color .1s, background-color .1s, border .1s;
+  @include reducedMotion {}
   line-height: inherit;
   border: none;
   box-shadow: none;
@@ -316,6 +385,7 @@ button,
   color: $backgroundColour;
   background: $accentColour;
   transition: box-shadow .1s;
+  @include reducedMotion {}
   will-change: box-shadow;
   box-shadow: inset 0 0 0 2rem transparent;
   &:hover {
@@ -371,14 +441,18 @@ select {
   &:hover {
     border-color: $bodyColour;
   }
+  @include darkMode {
+    background: invert($backgroundColour, 100%);
+    color: invert($bodyColour, 100%);
+  }
 }
 
 select {
   background: $codeBackgroundColour;
 }
 
 textarea {
-    resize: vertical;
+  resize: vertical;
 }
 
 label {
@@ -387,7 +461,6 @@ label {
 
 code {
   padding: .12rem .2rem;
-  color: $headingColour;
 }
 
 pre code {
@@ -414,24 +487,23 @@ pre code {
 ::selection {
   background: $headingColour;
   color: $backgroundColour;
+  @include darkMode {
+    background: invert($headingColour, 100%);
+    color: invert($backgroundColour, 100%);
+  }
   text-shadow: none;
 }
 
 
 // Sassline overrides
 .typeset {
-  a > code {
-    text-shadow: none;
-  }
   .button,
   button {
-    background-image: none;
-    text-shadow: none;
     color: $backgroundColour;
+    text-decoration: none;
     &:hover,
     &:active,
     &:focus {
-      background-image: none;
       color: $backgroundColour;
     }
   }
@@ -454,4 +526,15 @@ pre code {
     white-space: pre;
     overflow-x: scroll;
   }
+  @include darkMode {
+    pre,
+    code,
+    h1, h2, h3, h4, h5, h6 {
+      color: invert($headingColour, 100%);
+    }
+    pre,
+    code {
+      background: invert($backgroundColour, 90%);
+    }
+  }
 }

_sass/sassline-base/_typography.scss

@@ -36,18 +36,10 @@ a {
 
   // Nice underlines for text links.
   p a, li a {
-    background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$linkColour 50%);
-    background-position: 0 93%;
-    background-repeat: repeat-x;
-    background-size: 100% 0.15rem;
-    text-shadow: 0.1rem 0 $backgroundColour,
-                 0.15rem 0 $backgroundColour,
-                -0.1rem 0 $backgroundColour,
-                -0.15rem 0 $backgroundColour;
-
-    &:hover, &:active, &:focus {
-      background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0) 50%,$hoverColour 50%);
-    }
+    text-decoration: underline;
+    text-decoration-skip-ink: auto;
+    -webkit-text-decoration-skip: ink;
+    text-decoration-skip: ink;
   }
 
   // Paragraphs. OpenType ligatures and oldstyle figures enabled if available.

index.md

@@ -28,20 +28,20 @@ Alembic is a starting point for [Jekyll](https://jekyllrb.com/) projects. Rather
 - **Contact form** built in using [Formspree](https://formspree.io/)
 - Designed with **[Siteleaf](https://www.siteleaf.com/)** in mind
 - Has 9 of the most popular networks as performant sharing buttons
+- Built in "dark mode" and reduced motion styles for a more accessible experience
 - Has documentation
 
 ## Examples
 
 Here are a few examples of Alembic out in the wild being used in a variety of ways:
 
-- [bitpodcast.com](https://bitpodcast.com/)
-- [joelcagedesign.com](https://joelcagedesign.com/)
 - [bawejakunal.github.io](https://bawejakunal.github.io/)
+- [trenki2.github.io](https://trenki2.github.io/)
+- [overtonestudio.github.io](https://overtonestudio.github.io/)
+- [isaacsmith.github.io](https://isaacsmith.github.io/)
+- [karateca.org](http://www.karateca.org/)
+- [lillianpetersen.github.io](https://lillianpetersen.github.io/)
 - [case2111.github.io](https://case2111.github.io/)
-- [www.10people.co.uk](https://www.10people.co.uk/)
-- [hrkeni.me](https://hrkeni.me/)
-- [ccs17.bsc.es](https://ccs17.bsc.es/)
-- [karateca.org](https://www.karateca.org/)
 
 ## Installation