diff --git a/tildes/package.json b/tildes/package.json index c68e1da..b38d4f3 100644 --- a/tildes/package.json +++ b/tildes/package.json @@ -50,13 +50,111 @@ "stylelint-scss" ], "rules": { + "at-rule-empty-line-before": [ + "always", { + "except": ["blockless-after-same-name-blockless", "first-nested"], + "ignore": ["after-comment"], + "ignoreAtRules": ["else"] + } + ], + "at-rule-name-case": "lower", + "at-rule-name-space-after": "always", + "at-rule-semicolon-newline-after": "always", + "at-rule-semicolon-space-before": "never", + "block-closing-brace-empty-line-before": "never", "block-closing-brace-newline-after": [ "always", {"ignoreAtRules": ["else", "if"]} ], + "block-closing-brace-newline-before": "always", + "block-no-empty": true, + "block-opening-brace-newline-after": "always", + "block-opening-brace-space-before": "always", + "color-hex-case": "lower", + "color-named": "never", + "color-no-invalid-hex": true, + "comment-empty-line-before": "always", + "comment-no-empty": true, + "comment-whitespace-inside": "always", + "declaration-bang-space-after": "never", + "declaration-bang-space-before": "always", + "declaration-block-no-duplicate-properties": true, + "declaration-block-no-shorthand-property-overrides": true, + "declaration-block-semicolon-newline-after": "always", + "declaration-block-semicolon-newline-before": "never-multi-line", + "declaration-block-semicolon-space-before": "never", + "declaration-block-trailing-semicolon": "always", + "declaration-colon-newline-after": "always-multi-line", + "declaration-colon-space-before": "never", + "font-family-no-duplicate-names": true, + "font-family-no-missing-generic-family-keyword": true, + "font-weight-notation": "named-where-possible", + "function-calc-no-unspaced-operator": true, + "function-comma-newline-after": "always-multi-line", + "function-comma-space-after": "always-single-line", + "function-comma-space-before": "never", + "function-max-empty-lines": 0, + "function-name-case": "lower", + "function-parentheses-newline-inside": "always-multi-line", + "function-parentheses-space-inside": "never-single-line", + "function-url-quotes": "always", + "function-url-scheme-whitelist": "https", + "function-whitespace-after": "always", "indentation": 2, - "no-descending-specificity": null, + "length-zero-no-unit": true, + "linebreaks": "unix", + "max-empty-lines": 1, + "max-line-length": 88, + "media-feature-colon-space-after": "always", + "media-feature-colon-space-before": "never", + "media-feature-name-case": "lower", + "media-feature-name-no-unknown": true, + "media-feature-parentheses-space-inside": "never", + "media-feature-range-operator-space-after": "always", + "media-feature-range-operator-space-before": "always", + "no-duplicate-at-import-rules": true, + "no-duplicate-selectors": true, + "no-empty-first-line": true, + "no-empty-source": true, + "no-eol-whitespace": true, + "no-extra-semicolons": true, + "no-invalid-double-slash-comments": true, + "no-missing-end-of-source-newline": true, + "number-leading-zero": "always", + "number-no-trailing-zeros": true, + "number-max-precision": 1, + "property-case": "lower", + "property-no-unknown": true, + "rule-empty-line-before": [ + "always", + {"except": ["first-nested"], "ignore": ["after-comment"]} + ], + "selector-attribute-brackets-space-inside": "never", + "selector-attribute-operator-space-after": "never", + "selector-attribute-operator-space-before": "never", + "selector-attribute-quotes": "always", + "selector-combinator-space-after": "always", + "selector-combinator-space-before": "always", + "selector-descendant-combinator-no-non-space": true, + "selector-list-comma-newline-before": "never-multi-line", + "selector-max-empty-lines": 0, + "selector-pseudo-class-case": "lower", + "selector-pseudo-class-no-unknown": true, + "selector-pseudo-class-parentheses-space-inside": "never", + "selector-pseudo-element-case": "lower", + "selector-pseudo-element-colon-notation": "double", + "selector-pseudo-element-no-unknown": true, + "selector-type-case": "lower", + "selector-type-no-unknown": true, + "shorthand-property-no-redundant-values": true, + "string-no-newline": true, "string-quotes": "double", + "unit-case": "lower", + "unit-no-unknown": true, + "unit-whitelist": ["%", "fr", "px", "rem", "vh", "vw"], + "value-keyword-case": "lower", + "value-list-max-empty-lines": 0, + "value-no-vendor-prefix": true, "scss/at-else-closing-brace-newline-after": "always-last-in-chain", "scss/at-else-closing-brace-space-after": "always-intermediate", "scss/at-else-empty-line-before": "never", diff --git a/tildes/scss/_base.scss b/tildes/scss/_base.scss index bd0e606..9b36fd1 100644 --- a/tildes/scss/_base.scss +++ b/tildes/scss/_base.scss @@ -116,7 +116,7 @@ h6 { hr { border-style: solid; - border-width: 0 0 1px 0; + border-width: 0 0 1px; } legend { diff --git a/tildes/scss/_layout.scss b/tildes/scss/_layout.scss index 1841b17..a92cb06 100644 --- a/tildes/scss/_layout.scss +++ b/tildes/scss/_layout.scss @@ -25,7 +25,10 @@ body { } .l-no-sidebar { - grid-template-columns: 1fr minmax(auto, calc(#{$main-max-width} + #{$sidebar-width} + 0.4rem)) 1fr; + grid-template-columns: + 1fr + minmax(auto, calc(#{$main-max-width} + #{$sidebar-width} + 0.4rem)) + 1fr; grid-template-areas: ". header ." ". main ." @@ -73,8 +76,9 @@ body { } #sidebar { - /* hidden by default, show on wider screens */ + // hidden by default, show on wider screens display: none; + @media (min-width: $show-sidebar-width) { display: block; grid-area: sidebar; diff --git a/tildes/scss/_mixins.scss b/tildes/scss/_mixins.scss index ea10a14..74cbb82 100644 --- a/tildes/scss/_mixins.scss +++ b/tildes/scss/_mixins.scss @@ -4,16 +4,17 @@ // shrinks a font size by 0.1rem on mobile screen sizes @mixin font-shrink-on-mobile($base-size) { font-size: $base-size - 0.1rem; + @media (min-width: $size-md) { font-size: $base-size; } } - // makes sure the element is the "minimum touch size" on mobile @mixin min-touch-size() { min-width: $min-touch-size; min-height: $min-touch-size; + @media (min-width: $size-md) { min-width: 0; min-height: 0; diff --git a/tildes/scss/modules/_btn.scss b/tildes/scss/modules/_btn.scss index cbae636..e0a59b9 100644 --- a/tildes/scss/modules/_btn.scss +++ b/tildes/scss/modules/_btn.scss @@ -39,6 +39,7 @@ } margin-right: 0.4rem; + @media (min-width: $size-md) { margin-right: 0.2rem; min-width: 0.8rem; diff --git a/tildes/scss/modules/_comment.scss b/tildes/scss/modules/_comment.scss index 206c74c..394f589 100644 --- a/tildes/scss/modules/_comment.scss +++ b/tildes/scss/modules/_comment.scss @@ -22,6 +22,7 @@ // no padding on mobile - the collapse button will do the job padding: 0 0.2rem 0 0; + @media (min-width: $size-md) { padding: 0.2rem; } @@ -82,6 +83,7 @@ font-size: 0.6rem; margin-left: 0.4rem; + @media (min-width: $size-md) { margin-left: 1rem; } @@ -279,26 +281,33 @@ @media (max-width: $size-xs) { @include flatten-single-replies-above-depth(4); } + @media (min-width: $size-xs) and (max-width: $size-sm) { @include flatten-single-replies-above-depth(7); } + @media (min-width: $size-sm) and (max-width: $size-md) { @include flatten-single-replies-above-depth(10); } + @media (min-width: $size-md) and (max-width: $size-lg) { // drop back down because sidebar shows up, which actually gives less space @include flatten-single-replies-above-depth(7); } + @media (min-width: $size-lg) and (max-width: $size-xl) { @include flatten-single-replies-above-depth(9); } + @media (min-width: $size-xl) and (max-width: $size-2x) { // don't increase much yet since left indent increases, so space is reduced again @include flatten-single-replies-above-depth(12); } + @media (min-width: $size-2x) and (max-width: $size-max) { @include flatten-single-replies-above-depth(20); } + @media (min-width: $size-max) { @include flatten-single-replies-above-depth(30); } diff --git a/tildes/scss/modules/_listing.scss b/tildes/scss/modules/_listing.scss index e5677b0..836b46c 100644 --- a/tildes/scss/modules/_listing.scss +++ b/tildes/scss/modules/_listing.scss @@ -9,6 +9,7 @@ // right-align the period dropdown at small sizes, left-align at larger justify-content: flex-end; + @media (min-width: $size-md) { justify-content: flex-start; } diff --git a/tildes/scss/modules/_sidebar.scss b/tildes/scss/modules/_sidebar.scss index 3c8d18e..0bddd15 100644 --- a/tildes/scss/modules/_sidebar.scss +++ b/tildes/scss/modules/_sidebar.scss @@ -35,6 +35,7 @@ .sidebar-controls { display: flex; + @media (min-width: $show-sidebar-width) { display: none; } @@ -48,7 +49,6 @@ .is-sidebar-displayed { @media (max-width: $show-sidebar-width) { - display: block !important; position: absolute; right: 0; diff --git a/tildes/scss/modules/_site-header.scss b/tildes/scss/modules/_site-header.scss index f0f65b1..d60149f 100644 --- a/tildes/scss/modules/_site-header.scss +++ b/tildes/scss/modules/_site-header.scss @@ -9,6 +9,7 @@ .logged-in-user-info { // hidden on small screens display: none; + @media (min-width: $show-sidebar-width) { display: flex; } @@ -30,6 +31,7 @@ // keep the logo pixelated - "pixelated" is best but Firefox only supports // "crisp-edges" as of Firefox 68 image-rendering: pixelated; + @supports not (image-rendering: pixelated) { image-rendering: crisp-edges; } diff --git a/tildes/scss/modules/_tab.scss b/tildes/scss/modules/_tab.scss index 3e4c59c..2857afe 100644 --- a/tildes/scss/modules/_tab.scss +++ b/tildes/scss/modules/_tab.scss @@ -24,6 +24,7 @@ // have the tabs span the full width at small sizes width: 100%; + @media (min-width: $size-md) { width: auto; } @@ -33,6 +34,7 @@ a { margin-right: 0; + @media (min-width: $size-md) { margin-right: 1rem; } diff --git a/tildes/scss/modules/_topic.scss b/tildes/scss/modules/_topic.scss index b485204..5201f47 100644 --- a/tildes/scss/modules/_topic.scss +++ b/tildes/scss/modules/_topic.scss @@ -33,6 +33,7 @@ position: relative; padding: 0.2rem; + @media (min-width: $size-sm) { padding: 0.4rem; } @@ -163,6 +164,7 @@ @extend %text-container; display: none; + @media (min-width: $size-md) { display: block; } @@ -173,7 +175,7 @@ font-style: italic; h1 { - margin: 0 0 0.4rem 0; + margin: 0 0 0.4rem; } summary { @@ -207,6 +209,7 @@ .topic-info { display: grid; grid-template-columns: 1fr 1.5fr 0.7fr; + @media (min-width: $size-sm) { grid-template-columns: 1fr 1.2fr 1fr; } diff --git a/tildes/scss/styles.scss b/tildes/scss/styles.scss index 7537321..d8fdeca 100644 --- a/tildes/scss/styles.scss +++ b/tildes/scss/styles.scss @@ -1,3 +1,4 @@ +// stylelint-disable at-rule-empty-line-before @import "variables"; @import "spectre-0.5.1/variables"; diff --git a/tildes/scss/themes/_atom_one_dark.scss b/tildes/scss/themes/_atom_one_dark.scss index fd1f8ec..bc29d51 100644 --- a/tildes/scss/themes/_atom_one_dark.scss +++ b/tildes/scss/themes/_atom_one_dark.scss @@ -1,4 +1,5 @@ -// Colours from Atom One Dark Syntax: https://github.com/atom/atom/blob/master/packages/one-dark-syntax/styles/colors.less +// Colours from Atom One Dark Syntax +// https://github.com/atom/atom/blob/master/packages/one-dark-syntax/styles/colors.less // Base colors $background: hsl(220, 13%, 18%); diff --git a/tildes/scss/themes/_solarized.scss b/tildes/scss/themes/_solarized.scss index 4a335c0..124a6c3 100644 --- a/tildes/scss/themes/_solarized.scss +++ b/tildes/scss/themes/_solarized.scss @@ -54,33 +54,31 @@ $solarized-base: ( ); // Dark theme definition -$theme-dark: - map-merge($solarized-base, ( - "background-input": #001f27, - "background-primary": $bg-darkest, - "background-secondary": $bg-dark, - "border": #33555e, - "foreground-highlight": $fg-lightest, - "foreground-primary": $fg-light, - "foreground-secondary": $fg-darkest, - )); +$solarized-dark: ( + "background-input": #001f27, + "background-primary": $bg-darkest, + "background-secondary": $bg-dark, + "border": #33555e, + "foreground-highlight": $fg-lightest, + "foreground-primary": $fg-light, + "foreground-secondary": $fg-darkest, +); body.theme-dark { - @include use-theme($theme-dark); + @include use-theme(map-merge($solarized-base, $solarized-dark)); } // Light theme definition -$theme-light: - map-merge($solarized-base, ( - "background-input": #fefbf1, - "background-primary": $bg-lightest, - "background-secondary": $bg-light, - "border": #cbc5b6, - "foreground-highlight": $fg-darkest, - "foreground-primary": $fg-dark, - "foreground-secondary": $fg-lightest, - )); +$solarized-light: ( + "background-input": #fefbf1, + "background-primary": $bg-lightest, + "background-secondary": $bg-light, + "border": #cbc5b6, + "foreground-highlight": $fg-darkest, + "foreground-primary": $fg-dark, + "foreground-secondary": $fg-lightest, +); body.theme-light { - @include use-theme($theme-light); + @include use-theme(map-merge($solarized-base, $solarized-light)); } diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss index db9a02d..3d3e5de 100644 --- a/tildes/scss/themes/_theme_base.scss +++ b/tildes/scss/themes/_theme_base.scss @@ -215,6 +215,7 @@ $active-color: #fff; $is-active-bg-light: lightness(map-get($theme, "button")) > 50; + @if ($is-active-bg-light) { $active-color: #000; } @@ -479,8 +480,16 @@ .topic-listing { > li:nth-of-type(2n) { - color: mix(map-get($theme, "foreground-primary"), map-get($theme, "foreground-highlight")); - background-color: mix(map-get($theme, "background-primary"), map-get($theme, "background-secondary")); + color: + mix( + map-get($theme, "foreground-primary"), + map-get($theme, "foreground-highlight") + ); + background-color: + mix( + map-get($theme, "background-primary"), + map-get($theme, "background-secondary") + ); } } @@ -657,7 +666,7 @@ font-style: italic; } // Generic.Emph .syntax-gr { - color: map-get($theme, "syntax-constant"); + color: map-get($theme, "syntax-constant"); } // Generic.Error .syntax-gh { color: map-get($theme, "syntax-constant"); @@ -685,7 +694,7 @@ color: map-get($theme, "syntax-constant"); } // Keyword.Constant .syntax-kd { - color: map-get($theme, "syntax-keyword"); + color: map-get($theme, "syntax-keyword"); } // Keyword.Declaration .syntax-kn { color: map-get($theme, "syntax-comment"); @@ -694,7 +703,7 @@ color: map-get($theme, "syntax-comment"); } // Keyword.Pseudo .syntax-kr { - color: map-get($theme, "syntax-keyword"); + color: map-get($theme, "syntax-keyword"); } // Keyword.Reserved .syntax-kt { color: map-get($theme, "syntax-keyword"); @@ -712,16 +721,16 @@ color: map-get($theme, "foreground"); } // Name.Attribute .syntax-nb { - color: map-get($theme, "syntax-builtin"); + color: map-get($theme, "syntax-builtin"); } // Name.Builtin .syntax-nc { - color: map-get($theme, "syntax-keyword"); + color: map-get($theme, "syntax-keyword"); } // Name.Class .syntax-no { color: map-get($theme, "syntax-constant"); } // Name.Constant .syntax-nd { - color: map-get($theme, "syntax-keyword"); + color: map-get($theme, "syntax-keyword"); } // Name.Decorator .syntax-ni { color: map-get($theme, "syntax-builtin"); @@ -730,7 +739,7 @@ color: map-get($theme, "syntax-builtin"); } // Name.Exception .syntax-nf { - color: map-get($theme, "syntax-builtin"); + color: map-get($theme, "syntax-builtin"); } // Name.Function .syntax-nl { color: map-get($theme, "foreground"); @@ -745,10 +754,10 @@ color: map-get($theme, "foreground"); } // Name.Property .syntax-nt { - color: map-get($theme, "syntax-keyword"); + color: map-get($theme, "syntax-keyword"); } // Name.Tag .syntax-nv { - color: map-get($theme, "syntax-keyword"); + color: map-get($theme, "syntax-keyword"); } // Name.Variable .syntax-ow { color: map-get($theme, "syntax-comment"); @@ -793,7 +802,7 @@ color: map-get($theme, "syntax-string"); } // Literal.String.Other .syntax-sr { - color: map-get($theme, "syntax-constant"); + color: map-get($theme, "syntax-constant"); } // Literal.String.Regex .syntax-s1 { color: map-get($theme, "syntax-string"); @@ -802,16 +811,16 @@ color: map-get($theme, "syntax-string"); } // Literal.String.Symbol .syntax-bp { - color: map-get($theme, "syntax-keyword"); + color: map-get($theme, "syntax-keyword"); } // Name.Builtin.Pseudo .syntax-vc { - color: map-get($theme, "syntax-keyword"); + color: map-get($theme, "syntax-keyword"); } // Name.Variable.Class .syntax-vg { - color: map-get($theme, "syntax-keyword"); + color: map-get($theme, "syntax-keyword"); } // Name.Variable.Global .syntax-vi { - color: map-get($theme, "syntax-keyword"); + color: map-get($theme, "syntax-keyword"); } // Name.Variable.Instance .syntax-il { color: map-get($theme, "syntax-comment"); @@ -844,8 +853,8 @@ "foreground-secondary" "link" "link-visited" - "warning" - ; + "warning"; + @each $key in $essential-keys { @if (not map-has-key($theme, $key)) { @error "Missing essential key in theme: #{$key}"; @@ -860,7 +869,9 @@ $border: map-get-fallback($theme, "border", "foreground-secondary"); $button: map-get-fallback($theme, "button", "link"); $button-used: map-get-fallback($theme, "button-used", "link-visited"); - $foreground-highlight: map-get-fallback($theme, "foreground-highlight", "foreground-primary"); + // stylelint-disable-next-line + $foreground-highlight: + map-get-fallback($theme, "foreground-highlight", "foreground-primary"); $stripe-mine: map-get-fallback($theme, "stripe-mine", "link-visited"); $stripe-target: map-get-fallback($theme, "stripe-target", "warning"); $syntax-builtin: map-get-fallback($theme, "syntax-builtin", "foreground-primary"); @@ -872,13 +883,17 @@ $topic-tag-nsfw: map-get-fallback($theme, "topic-tag-nsfw", "error"); $topic-tag-spoiler: map-get-fallback($theme, "topic-tag-spoiler", "warning"); - // foreground-extreme: if not defined, use white on a dark background and black on a light one + // foreground-extreme: if not defined, use white on a dark bg and black on a light one $foreground-extreme: map-get($theme, "foreground-extreme"); $foreground-extreme: if($is-light, #000, #fff) !default; // foreground-middle: if not defined, mix foreground-primary and foreground-secondary $foreground-middle: map-get($theme, "foreground-middle"); - $foreground-middle: mix(map-get($theme, "foreground-primary"), map-get($theme, "foreground-secondary")) !default; + $foreground-middle: + mix( + map-get($theme, "foreground-primary"), + map-get($theme, "foreground-secondary") + ) !default; // link-hover: if not defined, darken the link color slightly $link-hover: map-get($theme, "link-hover");