~cadence/Frames

0c81e5a6e81f9b2ddef51a481f167c56346d273a — Cadence Ember 1 year, 9 months ago 4da8b8a
Use light/dark theme from prefer-color-scheme
M pug/about.pug => pug/about.pug +1 -0
@@ 15,6 15,7 @@ block main
    li Consider putting your #[code /view/@user@instance] URL in your fediverse bio so that others can easily see that you use Frames, and see what you've published.
    li Use #[code any-subdomain.frames.place] to separate your accounts. Your browser will remember one account for each subdomain.
    li You can upload images to any file host. You might find it useful to upload them to the fediverse as a direct post with no recipients, then take the URL.
    li Frames uses a light or dark theme automatically based on your #[code prefers-color-scheme] setting.

  h2 Terminology
  ul

M sass/includes/base.sass => sass/includes/base.sass +19 -14
@@ 1,4 1,5 @@
@use "colors" as c
@use "themes" as *

body
  padding: 20px


@@ 8,18 9,18 @@ body
  font-size: 18px
  line-height: 1.45
  min-height: 100vh
  background-color: c.$background
  color: c.$text
  @include theme("background-color", "background")
  @include theme("color", "text")

footer
  font-size: 15px
  margin: 40px 0

a, a:visited
  color: c.$text-link
  @include theme("color", "text-link")

code
  background: c.$background-highlight
  @include theme("background", "background-highlight")
  padding: 2px 4px
  border-radius: 4px



@@ 28,12 29,15 @@ input, button
  font-family: inherit
  padding: 6px
  margin: 0px
  background: c.$background-field
  color: c.$text
  border-radius: 8px
  @include theme("background", "background-field")
  @include theme("color", "text-field")

input, textarea
  border-radius: 3px

input
  border: 1px solid #888
  border: 1px solid
  @include theme("border-color", "edge-field")
  width: auto
  min-width: auto
  flex: 1


@@ 45,12 49,14 @@ textarea
  resize: vertical
  padding: 8px
  font-size: 16px
  color: c.$text-field
  background: c.$background-field
  border: 1px solid #888
  @include theme("color", "text-field")
  @include theme("background", "background-field")
  border: 1px solid
  @include theme("border-color", "edge-field")

fieldset
  border: 1px solid #bbb
  border: 1px solid
  @include theme("border-color", "edge-fieldset")
  padding: 0px 24px 24px

summary


@@ 63,5 69,4 @@ label
  margin: 16px 0

ul
  color: c.$text-dim

  @include theme("color", "text-dim")

M sass/includes/bits.sass => sass/includes/bits.sass +5 -4
@@ 1,4 1,4 @@
@use "colors" as c
@use "themes" as *

.page
  max-width: 650px


@@ 32,7 32,7 @@
    background: none
    padding: 0
    margin: 0
    color: c.$text-link
    @include theme("color", "text-link")
    text-decoration: underline
    cursor: pointer



@@ 41,11 41,12 @@

  &[open]
    padding-bottom: 8px
    border-bottom: 3px solid #bbb
    border-bottom: 3px solid
    @include theme("border-bottom-color", "edge-publish")

.auth-explanation
  margin: 24px 0
  color: c.$text-warning
  @include theme("color", "text-warning")
  white-space: pre-line

.server-stats

M sass/includes/inline.sass => sass/includes/inline.sass +3 -3
@@ 1,10 1,10 @@
@use "colors" as c
@use "themes" as *

.highlight
  color: c.$text-highlight
  @include theme("color", "text-highlight")

.hint
  color: c.$text-hint
  @include theme("color", "text-hint")
  line-height: 1.2
  font-size: 14px
  margin: 16px 0

M sass/includes/post.sass => sass/includes/post.sass +7 -5
@@ 1,7 1,8 @@
@use "colors" as c
@use "themes" as *

.post
  border: 1px solid #888
  border: 1px solid
  @include theme("border-color", "edge-post")
  padding: 8px
  margin: 24px 0



@@ 9,7 10,7 @@
    margin-bottom: 16px

  &__link
    color: c.$text-hint !important
    @include theme("color", "text-hint")
    text-decoration: none

    &:hover


@@ 17,7 18,8 @@

  &__content
    margin-bottom: 16px
    border-left: 3px solid #ddd
    border-left: 3px solid
    @include theme("border-left-color", "edge-post-quote")
    padding-left: 8px
    margin-left: 2px
    white-space: pre-line


@@ 27,7 29,7 @@
    max-height: 80vh

  &__cw
    color: #fc6
    @include theme("color", "text-warning")

    @at-root [open] &
      margin-bottom: 12px

A sass/includes/themes.scss => sass/includes/themes.scss +34 -0
@@ 0,0 1,34 @@
@use "sass:list";

$_theme: (
    // Background
    "background": #130e0e #f2f0f0,
    "background-highlight": #333 #d0cdcd,
    "background-field": #222 #e8e6e6,

    // Text
    "text": #eee #000,
    "text-field": #ddd #000,
    "text-dim": #ccc #1b1b1b,
    "text-hint": #aaa #404040,
    "text-link": #ee4a4a #b90a0a,
    "text-highlight": #b2dbb6 #6f1e9d,
    "text-warning": #fc6 #d80,

    // Edges
    "edge-field": #888 #222,
    "edge-fieldset": #bbb #181818,
    "edge-publish": #bbb #222,
    "edge-post": #888 #3a3a3a,
    "edge-post-quote": #ddd #222
);

$_primary-theme: 1;
$_secondary-theme: 2;

@mixin theme($property, $key) {
    #{$property}: list.nth(map-get($_theme, $key), $_primary-theme);
    @media screen and (prefers-color-scheme: light) {
        #{$property}: list.nth(map-get($_theme, $key), $_secondary-theme);
    }
}