erudit 2.0.0-dev.9 → 3.0.0-dev.2

package/app/styles/_utils.scss

@@ -1,44 +1,44 @@
-@mixin transition($properties...) {
-    transition: all var(--transitionSpeed) var(--transitionFunction);
-    transition-property: $properties;
-}
-
-@mixin dark {
-    :root[data-theme='dark'] & {
-        @content;
-    }
-}
-
-@mixin hoverLink {
-    cursor: pointer;
-    color: inherit;
-    text-decoration: underline;
-    text-decoration-color: transparent;
-    @include transition(text-decoration-color);
-
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-@mixin scroll {
-    -webkit-overflow-scrolling: auto;
-
-    &::-webkit-scrollbar {
-        -webkit-appearance: none;
-        height: 5px;
-        width: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: var(--scrollbar);
-
-        &:hover {
-            background: color-mix(in srgb, var(--scrollbar), var(--invert) 15%);
-        }
-    }
-
-    &::-webkit-scrollbar-corner {
-        background: var(--border);
-    }
-}
+@mixin transition($properties...) {
+    transition: all var(--transitionSpeed) var(--transitionFunction);
+    transition-property: $properties;
+}
+
+@mixin dark {
+    :root[data-theme='dark'] & {
+        @content;
+    }
+}
+
+@mixin hoverLink {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    @include transition(text-decoration-color);
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+@mixin scroll {
+    -webkit-overflow-scrolling: auto;
+
+    &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        height: 5px;
+        width: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--scrollbar);
+
+        &:hover {
+            background: color-mix(in srgb, var(--scrollbar), var(--invert) 15%);
+        }
+    }
+
+    &::-webkit-scrollbar-corner {
+        background: var(--border);
+    }
+}

package/app/styles/app.scss

@@ -1,91 +1,91 @@
-@use '$/def/size';
-
-//
-// Vars
-//
-
-:root {
-    --transitionSpeed: 200ms;
-    --transitionFunction: cubic-bezier(0, 0, 0.5, 1);
-    interpolate-size: allow-keywords;
-}
-
-// Sizes
-
-:root {
-    --wAside: #{size.$wAside};
-    --wMainMin: #{size.$wMainMin};
-    --wMainMax: #{size.$wMainMax};
-
-    --gap: #{size.$gap};
-    --gapSmall: #{size.$gapSmall};
-    --gapBig: #{size.$gapBig};
-}
-
-// Colors
-
-:root {
-    --bg: light-dark(#ebebeb, #141414);
-    --bgAside: light-dark(#f7f7f7, #1b1b1b);
-    --bgMain: light-dark(#ffffff, #212121);
-    --bgAccent: light-dark(#e6e6e6, #262626);
-
-    --border: light-dark(#d7d7d7, #373737);
-
-    --text: light-dark(#373737, #b9b9b9);
-    --textDeep: light-dark(#232323, #e1e1e1);
-    --textMuted: light-dark(#696969, #7f7f7f);
-    --textDimmed: light-dark(#969696, #616161);
-    --textDisabled: light-dark(#b9b9b9, #4f4f4f);
-
-    --brand: light-dark(#1879d9, #4e94d9);
-    --error: light-dark(#d91818, #d94e4e);
-    --warn: light-dark(#d98718, #d9b44e);
-    --success: light-dark(#12a512, #51a551);
-
-    --scrollbar: light-dark(#bfbfbf, #494949);
-
-    --invert: light-dark(black, white);
-}
-
-//
-// General rules
-//
-
-// Noto Sans + Noto Serif
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
-
-body {
-    background: var(--bg);
-    font-family: 'Noto Sans', system-ui, sans-serif;
-    color: var(--text);
-}
-
-button {
-    all: unset;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-strong {
-    color: var(--textDeep);
-}
-
-:focus-visible {
-    outline: 2px solid var(--brand);
-    border-radius: 3px;
-}
-
-::selection {
-    background: color-mix(in srgb, var(--brand), transparent 65%);
-}
-
-.icon-flip-h {
-    [my-icon] svg {
-        transform: scaleX(-1);
-    }
-}
+@use '$/def/size';
+
+//
+// Vars
+//
+
+:root {
+    --transitionSpeed: 200ms;
+    --transitionFunction: cubic-bezier(0, 0, 0.5, 1);
+    interpolate-size: allow-keywords;
+}
+
+// Sizes
+
+:root {
+    --wAside: #{size.$wAside};
+    --wMainMin: #{size.$wMainMin};
+    --wMainMax: #{size.$wMainMax};
+
+    --gap: #{size.$gap};
+    --gapSmall: #{size.$gapSmall};
+    --gapBig: #{size.$gapBig};
+}
+
+// Colors
+
+:root {
+    --bg: light-dark(#ebebeb, #141414);
+    --bgAside: light-dark(#f7f7f7, #1b1b1b);
+    --bgMain: light-dark(#ffffff, #212121);
+    --bgAccent: light-dark(#e6e6e6, #262626);
+
+    --border: light-dark(#d7d7d7, #373737);
+
+    --text: light-dark(#373737, #b9b9b9);
+    --textDeep: light-dark(#232323, #e1e1e1);
+    --textMuted: light-dark(#696969, #7f7f7f);
+    --textDimmed: light-dark(#969696, #616161);
+    --textDisabled: light-dark(#b9b9b9, #4f4f4f);
+
+    --brand: light-dark(#1879d9, #4e94d9);
+    --error: light-dark(#d91818, #d94e4e);
+    --warn: light-dark(#d98718, #d9b44e);
+    --success: light-dark(#12a512, #51a551);
+
+    --scrollbar: light-dark(#bfbfbf, #494949);
+
+    --invert: light-dark(black, white);
+}
+
+//
+// General rules
+//
+
+// Noto Sans + Noto Serif
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
+
+body {
+    background: var(--bg);
+    font-family: 'Noto Sans', system-ui, sans-serif;
+    color: var(--text);
+}
+
+button {
+    all: unset;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+    color: var(--textDeep);
+}
+
+:focus-visible {
+    outline: 2px solid var(--brand);
+    border-radius: 3px;
+}
+
+::selection {
+    background: color-mix(in srgb, var(--brand), transparent 65%);
+}
+
+.icon-flip-h {
+    [my-icon] svg {
+        transform: scaleX(-1);
+    }
+}

package/app/styles/def/_bp.scss

@@ -1,24 +1,27 @@
-@use 'sass:map';
-
-@use '$/def/size';
-
-$bps: (
-    'mobile': 500px,
-    'aside1': size.$wMainMin + size.$wAside,
-    'aside2': size.$wMainMin + size.$wAside * 2,
-);
-
-@mixin above($bp)
-{
-    @media (min-width: map.get($bps, $bp)) { @content; }
-}
-
-@mixin below($bp)
-{
-    @media (max-width: (map.get($bps, $bp) - 1)) { @content; }
-}
-
-@mixin between($bp1, $bp2)
-{
-    @media (min-width: map.get($bps, $bp1)) and (max-width: (map.get($bps, $bp2) - 1)) { @content; }
-}
+@use 'sass:map';
+
+@use '$/def/size';
+
+$bps: (
+    'mobile': 500px,
+    'aside1': size.$wMainMin + size.$wAside,
+    'aside2': size.$wMainMin + size.$wAside * 2,
+);
+
+@mixin above($bp) {
+    @media (min-width: map.get($bps, $bp)) {
+        @content;
+    }
+}
+
+@mixin below($bp) {
+    @media (max-width: (map.get($bps, $bp) - 1)) {
+        @content;
+    }
+}
+
+@mixin between($bp1, $bp2) {
+    @media (min-width: map.get($bps, $bp1)) and (max-width: (map.get($bps, $bp2) - 1)) {
+        @content;
+    }
+}

package/app/styles/def/_size.scss

@@ -1,7 +1,7 @@
-$wMainMin: 800px;
-$wMainMax: 1024px;
-$wAside: 300px;
-
-$gap: 15px;
-$gapSmall: calc($gap / 2);
-$gapBig: calc($gap * 2);
+$wMainMin: 800px;
+$wMainMax: 1024px;
+$wAside: 300px;
+
+$gap: 15px;
+$gapSmall: calc($gap / 2);
+$gapBig: calc($gap * 2);

package/app/styles/def/_z.scss

@@ -1,5 +1,5 @@
-$bg: 10;
-$main: 20;
-$asideSwitch: 30;
-$preview: 40;
-$aside: 50;
+$bg: 10;
+$main: 20;
+$asideSwitch: 30;
+$preview: 40;
+$aside: 50;

package/app/styles/default.scss

@@ -1,85 +1,83 @@
-@use '$/def/size';
-
-//
-// Vars
-//
-
-:root
-{
-    --transitionSpeed: 200ms;
-    --transitionFunction: cubic-bezier(0, 0, .5, 1);
-    interpolate-size: allow-keywords;
-}
-
-// Sizes
-
-:root
-{
-    --wAside: #{size.$wAside};
-    --wMainMin: #{size.$wMainMin};
-    --wMainMax: #{size.$wMainMax};
-
-    --gap: #{size.$gap};
-    --gapSmall : #{size.$gapSmall};
-    --gapBig : #{size.$gapBig};
-}
-
-// Colors
-
-:root
-{
-    --bg:           light-dark(#ebebeb, #141414);
-    --bgAside:      light-dark(#f7f7f7, #1b1b1b);
-    --bgMain:       light-dark(#ffffff, #212121);
-    --bgAccent:     light-dark(#e6e6e6, #262626);
-
-    --border:       light-dark(#D7D7D7, #373737);
-
-    --text:         light-dark(#373737, #b9b9b9);
-    --textDeep:     light-dark(#232323, #e1e1e1);
-    --textMuted:    light-dark(#696969, #7f7f7f);
-    --textDimmed:   light-dark(#969696, #616161);
-    --textDisabled: light-dark(#b9b9b9, #4f4f4f);
-
-    --brand:        light-dark(#1879d9, #4e94d9);
-    --error:        light-dark(#d91818, #d94e4e);
-    --warn:         light-dark(#d98718, #d9b44e);
-    --success:      light-dark(#12a512, #51a551);
-
-    --scrollbar:    light-dark(#bfbfbf, #494949);
-
-    --invert:       light-dark(black, white);
-}
-
-//
-// General rules
-//
-
-// Noto Sans + Noto Serif
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
-
-body
-{
-    background: var(--bg);
-    font-family: 'Noto Sans', system-ui, sans-serif;
-    color: var(--text);
-}
-
-h1, h2, h3, h4, h5, h6, strong
-{
-    color: var(--textDeep);
-}
-
-::selection
-{
-    //color: var(--text);
-    background: color-mix(in srgb, var(--brand), transparent 65%);
-}
-
-.icon-flip-h
-{
-    [my-icon] svg
-    {
-        transform: scaleX(-1);
-    }
-}
+@use '$/def/size';
+
+//
+// Vars
+//
+
+:root {
+    --transitionSpeed: 200ms;
+    --transitionFunction: cubic-bezier(0, 0, 0.5, 1);
+    interpolate-size: allow-keywords;
+}
+
+// Sizes
+
+:root {
+    --wAside: #{size.$wAside};
+    --wMainMin: #{size.$wMainMin};
+    --wMainMax: #{size.$wMainMax};
+
+    --gap: #{size.$gap};
+    --gapSmall: #{size.$gapSmall};
+    --gapBig: #{size.$gapBig};
+}
+
+// Colors
+
+:root {
+    --bg: light-dark(#ebebeb, #141414);
+    --bgAside: light-dark(#f7f7f7, #1b1b1b);
+    --bgMain: light-dark(#ffffff, #212121);
+    --bgAccent: light-dark(#e6e6e6, #262626);
+
+    --border: light-dark(#d7d7d7, #373737);
+
+    --text: light-dark(#373737, #b9b9b9);
+    --textDeep: light-dark(#232323, #e1e1e1);
+    --textMuted: light-dark(#696969, #7f7f7f);
+    --textDimmed: light-dark(#969696, #616161);
+    --textDisabled: light-dark(#b9b9b9, #4f4f4f);
+
+    --brand: light-dark(#1879d9, #4e94d9);
+    --error: light-dark(#d91818, #d94e4e);
+    --warn: light-dark(#d98718, #d9b44e);
+    --success: light-dark(#12a512, #51a551);
+
+    --scrollbar: light-dark(#bfbfbf, #494949);
+
+    --invert: light-dark(black, white);
+}
+
+//
+// General rules
+//
+
+// Noto Sans + Noto Serif
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
+
+body {
+    background: var(--bg);
+    font-family: 'Noto Sans', system-ui, sans-serif;
+    color: var(--text);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+    color: var(--textDeep);
+}
+
+::selection {
+    //color: var(--text);
+    background: color-mix(in srgb, var(--brand), transparent 65%);
+}
+
+.icon-flip-h {
+    [my-icon] svg {
+        transform: scaleX(-1);
+    }
+}

package/app/styles/normalize.scss

@@ -1,63 +1,63 @@
-// https://www.joshwcomeau.com/css/custom-css-reset/
-
-/* 1. Use a more-intuitive box-sizing model */
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-/* 2. Remove default margin */
-* {
-    margin: 0;
-}
-
-body {
-    /* 3. Add accessible line-height */
-    line-height: 1.5;
-    /* 4. Improve text rendering */
-    -webkit-font-smoothing: antialiased;
-}
-
-/* 5. Improve media defaults */
-img,
-picture,
-video,
-canvas,
-svg {
-    display: block;
-    max-width: 100%;
-}
-
-/* 6. Inherit fonts for form controls */
-input,
-button,
-textarea,
-select {
-    font: inherit;
-}
-
-/* 7. Avoid text overflows */
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    overflow-wrap: break-word;
-}
-
-/* 8. Improve line wrapping */
-p {
-    text-wrap: pretty;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    text-wrap: balance;
-}
+// https://www.joshwcomeau.com/css/custom-css-reset/
+
+/* 1. Use a more-intuitive box-sizing model */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+    margin: 0;
+}
+
+body {
+    /* 3. Add accessible line-height */
+    line-height: 1.5;
+    /* 4. Improve text rendering */
+    -webkit-font-smoothing: antialiased;
+}
+
+/* 5. Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+/* 6. Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+/* 7. Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+}
+
+/* 8. Improve line wrapping */
+p {
+    text-wrap: pretty;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-wrap: balance;
+}

package/app/styles/partials/_darkMagic.scss

@@ -1,7 +1,5 @@
-@mixin replacer
-{
-    > div > div
-    {
-        @content;
-    }
-}
+@mixin replacer {
+    > div > div {
+        @content;
+    }
+}