From 00c6aaaa2b0af90275c0ac14648433c93efc8500 Mon Sep 17 00:00:00 2001 From: David Darnes Date: Sat, 19 Jan 2019 18:36:08 +0000 Subject: [PATCH 1/6] Add reduced motion and dark mode media queries --- _sass/_theme.scss | 94 +++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 87 insertions(+), 7 deletions(-) diff --git a/_sass/_theme.scss b/_sass/_theme.scss index 9bb68d1bb..bf62ddf8d 100644 --- a/_sass/_theme.scss +++ b/_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: darken($backgroundColour, 90%); + color: lighten($bodyColour, 90%); + } } .container { @@ -46,9 +73,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(darken($featureBackgroundColour, 90%), 0.5); + } + } background-size: cover; background-position: center; .container { + position: relative; + z-index: 1; min-height: 35vh; max-width: 60%; @include flex-direction(column); @@ -80,6 +122,9 @@ body { .small { padding-top: .8rem; color: $captionColour; + @include darkMode { + color: lighten($captionColour, 20%); + } display: inline-block; } @@ -98,6 +143,12 @@ body { .small { padding-top: 0; } + @include darkMode { + color: lighten($captionColour, 20%); + a { + color: lighten($captionColour, 20%); + } + } } @@ -105,8 +156,11 @@ body { .nav--paginator { @include flexbox; @include justify-content(space-between); - color: $captionColour; text-align: center; + color: $captionColour; + @include darkMode { + color: lighten($captionColour, 20%); + } } .pagination { @@ -150,6 +204,7 @@ body { @include flex(1, 0, auto); opacity: 0.5; transition: opacity .1s; + @include reducedMotion {} .section { position: sticky; top: 0; @@ -176,6 +231,7 @@ body { &--nav { overflow: hidden; transition: .2s; + @include reducedMotion {} } .item--post, .item--result, @@ -203,8 +259,12 @@ body { // Links, icons and images +a { + @include reducedMotion {} +} a .icon { transition: fill .1s; + @include reducedMotion {} &:hover { fill: currentColor; } @@ -277,6 +337,9 @@ video { &__legend { font-style: italic; color: $captionColour; + @include darkMode { + color: lighten($captionColour, 20%); + } position: absolute; overflow: hidden; right: 0; @@ -296,6 +359,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; @@ -314,6 +378,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 { @@ -369,6 +434,10 @@ select { &:hover { border-color: $bodyColour; } + @include darkMode { + background: darken($backgroundColour, 90%); + color: lighten($bodyColour, 90%); + } } select { @@ -412,24 +481,23 @@ pre code { ::selection { background: $headingColour; color: $backgroundColour; + @include darkMode { + background: lighten($headingColour, 90%); + color: darken($backgroundColour, 90%); + } 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; } } @@ -452,4 +520,16 @@ pre code { white-space: pre; overflow-x: scroll; } + @include darkMode { + pre, + code { + color: lighten($headingColour, 90%); + background: darken($backgroundColour, 85%); + } + } + @include darkMode { + h1, h2, h3, h4, h5, h6 { + color: lighten($headingColour, 90%); + } + } } From fe62f9f1010f78261e7c6c02c0cc4e59d26f663c Mon Sep 17 00:00:00 2001 From: David Darnes Date: Sat, 19 Jan 2019 18:37:03 +0000 Subject: [PATCH 2/6] Remove old gradient technique to underlines, was causing too many problems --- _sass/sassline-base/_typography.scss | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/_sass/sassline-base/_typography.scss b/_sass/sassline-base/_typography.scss index 4146bd058..72e6c75eb 100755 --- a/_sass/sassline-base/_typography.scss +++ b/_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. From 6ce71a0e627929e7b125c761a946dacd522529a3 Mon Sep 17 00:00:00 2001 From: David Darnes Date: Sat, 19 Jan 2019 18:37:20 +0000 Subject: [PATCH 3/6] Add code highlighting in dark mode --- _sass/_syntax.scss | 62 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss index dc60655fa..dd46e0661 100644 --- a/_sass/_syntax.scss +++ b/_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 */ +} From acfa5942751b5e7fc29cffc7d7420b31cbdbe48a Mon Sep 17 00:00:00 2001 From: David Darnes Date: Sun, 20 Jan 2019 17:35:53 +0000 Subject: [PATCH 4/6] Update docs and examples --- README.md | 1 + index.md | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a84254837..1f1e0a004 100644 --- a/README.md +++ b/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 diff --git a/index.md b/index.md index 21149678a..2e1469855 100644 --- a/index.md +++ b/index.md @@ -27,6 +27,7 @@ Alembic is a starting point for [Jekyll](https://jekyllrb.com/) projects. Rather - **Contact form** built in using [Formspree](https://formspree.io/) - 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 @@ -34,13 +35,16 @@ Alembic is a starting point for [Jekyll](https://jekyllrb.com/) projects. Rather 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/) +- [ccs17.bsc.es](https://ccs17.bsc.es/) - [bawejakunal.github.io](https://bawejakunal.github.io/) +- [trenki2.github.io](https://trenki2.github.io/) +- [overtonestudio.github.io](https://overtonestudio.github.io/) +- [hrkeni.me](http://hrkeni.me/) +- [isaacsmith.github.io](https://isaacsmith.github.io/) - [case2111.github.io](http://case2111.github.io/) - [www.10people.co.uk](http://www.10people.co.uk/) -- [hrkeni.me](http://hrkeni.me/) -- [ccs17.bsc.es](https://ccs17.bsc.es/) - [karateca.org](http://www.karateca.org/) +- [lillianpetersen.github.io](https://lillianpetersen.github.io/) ## Installation From fddb3d5c25ab12b2b8dbf5dea3c3f6293eab5b56 Mon Sep 17 00:00:00 2001 From: David Darnes Date: Tue, 12 Feb 2019 21:20:28 +0000 Subject: [PATCH 5/6] Use invert function over lighten and darken --- _sass/_theme.scss | 43 +++++++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/_sass/_theme.scss b/_sass/_theme.scss index bf62ddf8d..2b571c54d 100644 --- a/_sass/_theme.scss +++ b/_sass/_theme.scss @@ -30,8 +30,8 @@ body { @include flex-direction(column); overflow-x: hidden; @include darkMode { - background: darken($backgroundColour, 90%); - color: lighten($bodyColour, 90%); + background: invert($backgroundColour, 100%); + color: invert($bodyColour, 100%); } } @@ -83,7 +83,7 @@ body { left: 0; bottom: 0; right: 0; - background: fade-out(darken($featureBackgroundColour, 90%), 0.5); + background: fade-out(invert($featureBackgroundColour, 100%), 0.5); } } background-size: cover; @@ -123,7 +123,7 @@ body { padding-top: .8rem; color: $captionColour; @include darkMode { - color: lighten($captionColour, 20%); + color: invert($captionColour, 100%); } display: inline-block; } @@ -144,9 +144,13 @@ body { padding-top: 0; } @include darkMode { - color: lighten($captionColour, 20%); + background: invert($headingColour, 100%); + color: invert($captionColour, 100%); a { - color: lighten($captionColour, 20%); + color: invert($captionColour, 100%); + &:hover { + color: invert($backgroundColour, 100%); + } } } } @@ -159,7 +163,7 @@ body { text-align: center; color: $captionColour; @include darkMode { - color: lighten($captionColour, 20%); + color: invert($captionColour, 100%); } } @@ -260,7 +264,7 @@ body { // Links, icons and images a { - @include reducedMotion {} + @include reducedMotion {} } a .icon { transition: fill .1s; @@ -338,7 +342,7 @@ video { font-style: italic; color: $captionColour; @include darkMode { - color: lighten($captionColour, 20%); + color: invert($captionColour, 100%); } position: absolute; overflow: hidden; @@ -435,8 +439,8 @@ select { border-color: $bodyColour; } @include darkMode { - background: darken($backgroundColour, 90%); - color: lighten($bodyColour, 90%); + background: invert($backgroundColour, 100%); + color: invert($bodyColour, 100%); } } @@ -482,8 +486,8 @@ pre code { background: $headingColour; color: $backgroundColour; @include darkMode { - background: lighten($headingColour, 90%); - color: darken($backgroundColour, 90%); + background: invert($headingColour, 100%); + color: invert($backgroundColour, 100%); } text-shadow: none; } @@ -522,14 +526,13 @@ pre code { } @include darkMode { pre, - code { - color: lighten($headingColour, 90%); - background: darken($backgroundColour, 85%); - } - } - @include darkMode { + code, h1, h2, h3, h4, h5, h6 { - color: lighten($headingColour, 90%); + color: invert($headingColour, 100%); + } + pre, + code { + background: invert($backgroundColour, 90%); } } } From b8870c3591b3a269cbababce9ff740256800af49 Mon Sep 17 00:00:00 2001 From: David Darnes Date: Tue, 12 Feb 2019 21:47:24 +0000 Subject: [PATCH 6/6] Adjust code colour --- _sass/_theme.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_sass/_theme.scss b/_sass/_theme.scss index 2b571c54d..46cfc3529 100644 --- a/_sass/_theme.scss +++ b/_sass/_theme.scss @@ -449,7 +449,7 @@ select { } textarea { - resize: vertical; + resize: vertical; } label { @@ -458,7 +458,6 @@ label { code { padding: .12rem .2rem; - color: $headingColour; } pre code {