Merge branch 'master' into feature/scss-font-fallbacks

2026-01-15 00:55:08 +08:00 · 2022-06-01 16:21:09 +02:00
parent 2783fb5138 27d8fdee22
commit 7a23abff92
16 changed files with 374 additions and 96 deletions
--- a/assets/images/sprite/.gitkeep
+++ b/assets/images/sprite/.gitkeep
--- a/assets/styles/components/_form.scss
+++ b/assets/styles/components/_form.scss
@@ -27,7 +27,7 @@ $input-icon-color: 424242; // No #
 .c-form_input {
    padding: rem(10px);
    border: 1px solid lightgray;
-    background-color: white;
+    background-color: $color-lightest;

    &:hover {
        border-color: darkgray;
@@ -71,7 +71,7 @@ $checkbox-icon-color: $input-icon-color;
    }

    &::before {
-        background-color: $white;
+        background-color: $color-lightest;
        border: 1px solid lightgray;
    }

--- a/assets/styles/components/_scrollbar.scss
+++ b/assets/styles/components/_scrollbar.scss
@@ -25,7 +25,7 @@
    position: absolute;
    top: 0;
    right: 0;
-    background-color: black;
+    background-color: $color-darkest;
    opacity: 0.5;
    width: 7px;
    border-radius: 10px;
--- a/assets/styles/elements/_document.scss
+++ b/assets/styles/elements/_document.scss
@@ -15,7 +15,7 @@ html {
    min-height: 100%; // [2]
    line-height: $line-height;
    font-family: ff("sans");
-    color: $color;
+    color: $font-color;
    line-height: $line-height; // [3]
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
@@ -74,9 +74,9 @@ body {
 }

 a {
-    color: $link-color;
+    color: $color-link;

    @include u-hocus {
-        color: $link-hover-color;
+        color: $color-link-hover;
    }
 }
--- a/assets/styles/generic/_generic.scss
+++ b/assets/styles/generic/_generic.scss
@@ -33,7 +33,7 @@ i {

 b,
 strong {
-    font-weight: $bold;
+    font-weight: $font-weight-bold;
 }

 a {
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -13,6 +13,7 @@
 // Tools
 // ==========================================================================

+@import "tools/maths";
@import "tools/functions";
@import "tools/mixins";
@import "tools/fonts";
@@ -40,6 +41,7 @@
@import "objects/scroll";
@import "objects/container";
@import "objects/ratio";
+@import "objects/icons";
@import "objects/layout";
 // @import "objects/crop";
 // @import "objects/table";
@@ -56,10 +58,6 @@
@import "components/button";
@import "components/form";

-// Templates
-// ==========================================================================
-// @import "templates/template";
-
 // Utilities
 // ==========================================================================

--- a/assets/styles/objects/_icons.scss
+++ b/assets/styles/objects/_icons.scss
@@ -0,0 +1,58 @@
+// ==========================================================================
+// Objects / SVG Icons
+// ==========================================================================
+
+
+// Markup
+//
+// 1. If icon is accessible and has a title
+// 2. If icon is decorative
+//
+// <i class="o-icon ${modifier}">
+//     <svg
+//         class="svg-${icon-name}"
+//         xmlns="http://www.w3.org/2000/svg"
+//         role="img" [1]
+//         aria-hidden="true" [2]
+//         focusable="false" [2]
+//         aria-labelledby="${id}" [1]
+//     >
+//         <title id="${id}"> [1]
+//             Locomotive
+//         </title>
+//         <use xlink:href="assets/images/sprite.svg#${icon-name}" xmlns:xlink="http://www.w3.org/1999/xlink"/>
+//     </svg>
+// </i>
+
+// Global styles for icones
+// ==========================================================================
+
+.o-icon {
+    display: inline-block;
+    vertical-align: middle;
+
+    svg {
+        --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
+
+        display: block;
+        width: var(--icon-width);
+        height: var(--icon-height);
+        fill: currentColor;
+    }
+}
+
+
+// SVG sizes
+// ==========================================================================
+
+// // Logo
+// .svg-logo {
+//     --icon-width: #{rem(100px)};
+//     --icon-ratio: 20/30; // width/height based on svg viewBox
+
+//     // Sizes
+//     .o-icon.-big & {
+//         --icon-width: #{rem(200px)};
+//     }
+// }
+
--- a/assets/styles/settings/_config.colors.scss
+++ b/assets/styles/settings/_config.colors.scss
@@ -5,16 +5,16 @@
 // Palette
 // =============================================================================

-$white: #FFFFFF;
-$black: #000000;
+$color-lightest:    #FFFFFF;
+$color-darkest:     #000000;

 // Specific
 // =============================================================================

 // Link
-$link-color:       #1A0DAB;
-$link-focus-color: #1A0DAB;
-$link-hover-color: darken(#1A0DAB, 10%);
+$color-link:        #1A0DAB;
+$color-link-focus:  #1A0DAB;
+$color-link-hover:  darken(#1A0DAB, 10%);

 // Selection
 $selection-text-color:          #3297FD;
@@ -23,7 +23,7 @@ $selection-background-color: #FFFFFF;
 // Social Colors
 // =============================================================================

-$facebook-color:  #3B5998;
-$instagram-color: #E1306C;
-$youtube-color:   #CD201F;
-$twitter-color:   #1DA1F2;
+$color-facebook:    #3B5998;
+$color-instagram:   #E1306C;
+$color-youtube:     #CD201F;
+$color-twitter:     #1DA1F2;
--- a/assets/styles/settings/_config.eases.scss
+++ b/assets/styles/settings/_config.eases.scss
@@ -2,22 +2,47 @@
 // Settings / Config / Eases
 // ==========================================================================

-$Power1EaseOut: cubic-bezier(0.250, 0.460, 0.450, 0.940);
-$Power2EaseOut: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-$Power3EaseOut: cubic-bezier(0.165, 0.840, 0.440, 1.000);
-$Power4EaseOut: cubic-bezier(0.230, 1.000, 0.320, 1.000);
-$Power1EaseIn: cubic-bezier(0.550, 0.085, 0.680, 0.530) ;
-$Power2EaseIn: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-$Power3EaseIn: cubic-bezier(0.895, 0.030, 0.685, 0.220);
-$Power4EaseIn: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-$ExpoEaseOut: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-$ExpoEaseIn: cubic-bezier(0.950, 0.050, 0.795, 0.035);
-$ExpoEaseInOut: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-$SineEaseOut: cubic-bezier(0.390, 0.575, 0.565, 1.000);
-$SineEaseIn: cubic-bezier(0.470, 0.000, 0.745, 0.715);
-$Power1EaseInOut: cubic-bezier(0.455, 0.030, 0.515, 0.955);
-$Power2EaseInOut: cubic-bezier(0.645, 0.045, 0.355, 1.000);
-$Power3EaseInOut: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-$Power4EaseInOut: cubic-bezier(0.860, 0.000, 0.070, 1.000);
-$SlowEaseOut: cubic-bezier(.04,1.15,0.4,.99);
-$bounce: cubic-bezier(0.17, 0.67, 0.3, 1.33);
+// Power 1
+$ease-power1-in:        cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$ease-power1-out:       cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$ease-power1-in-out:    cubic-bezier(0.455, 0.030, 0.515, 0.955);
+
+// Power 2
+$ease-power2-in:        cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$ease-power2-out:       cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$ease-power2-in-out:    cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
+// Power 3
+$ease-power3-in:        cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$ease-power3-out:       cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$ease-power3-in-out:    cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
+// Power 3
+$ease-power4-in:        cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$ease-power4-out:       cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$ease-power4-in-out:    cubic-bezier(0.860, 0.000, 0.070, 1.000);
+
+// Expo
+$ease-expo-in:          cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$ease-expo-out:         cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$ease-expo-in-out:      cubic-bezier(1.000, 0.000, 0.000, 1.000);
+
+// Back
+$ease-back-in:          cubic-bezier(0.600, -0.280, 0.735, 0.045);
+$ease-back-out:         cubic-bezier(0.175, 00.885, 0.320, 1.275);
+$ease-back-in-out:      cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
+// Sine
+$ease-sine-in:          cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$ease-sine-out:         cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$ease-sine-in-out:      cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
+// Circ
+$ease-circ-in:          cubic-bezier(0.600, 0.040, 0.980, 0.335);
+$ease-circ-out:         cubic-bezier(0.075, 0.820, 0.165, 1.000);
+$ease-circ-in-out:      cubic-bezier(0.785, 0.135, 0.150, 0.860);
+
+// Misc
+$ease-bounce:           cubic-bezier(0.17, 0.67, 0.3, 1.33);
+$ease-slow-out:         cubic-bezier(.04,1.15,0.4,.99);
+$ease-smooth:           cubic-bezier(0.380, 0.005, 0.215, 1);
--- a/assets/styles/settings/_config.scss
+++ b/assets/styles/settings/_config.scss
@@ -50,7 +50,7 @@ $font-faces: (
 // Base
 $font-size: 16px;
 $line-height:   24px / $font-size;
-$color:       #222222;
+$font-color:    $color-darkest;

 // Headings
 $font-size-h1:  36px  !default;
@@ -62,16 +62,16 @@ $font-size-h6:  16px  !default;
 $line-height-h: $line-height;

 // Weights
-$light:  300;
-$normal: 400;
-$medium: 500;
-$bold:   700;
+$font-weight-light:     300;
+$font-weight-normal:    400;
+$font-weight-medium:    500;
+$font-weight-bold:      700;

 // Transitions
 // =============================================================================

 $speed:     0.3s;
-$easing: $Power2EaseOut;
+$easing:    $ease-power2-out;

 // Spacing Units
 // =============================================================================
@@ -106,3 +106,20 @@ $from-gigantic: 2000px             !default;
 $to-gigantic:   $from-gigantic - 1 !default;
 $from-colossal: 2400px             !default;
 $to-colossal:   $from-colossal - 1 !default;
+
+// Master z-indexe
+// =============================================================================
+
+$z-indexes: (
+    "goku":       9000,
+    "transition": 500,
+    "toast":      400,
+    "popover":    300,
+    "modal":      250,
+    "sheet":      200,
+    "fixed":      150,
+    "sticky":     100,
+    "dropdown":   50,
+    "default":    1,
+    "limbo":      -999
+);
--- a/assets/styles/tools/_fonts.scss
+++ b/assets/styles/tools/_fonts.scss
@@ -2,11 +2,14 @@
 // Tools / Font Faces
 // ==========================================================================

-// Import the webfont with font-face as woff and woff2
+// Imports the custom font.
 //
-// @param  {List} $webfont (font name, filename, font-weight, font-style) - Each webfont to import.
-// @param  {String} $dir                                                  - The webfont directory path
-// @output void
+// The mixin expects font files to be woff and woff2.
+//
+// @param  {List}   $webfont - A custom font to import, as a tuple:
+//     `<font-name> <font-file-basename> <font-weight> <font-style>`.
+// @param  {String} $dir     - The webfont directory path.
+// @output The `@font-face` at-rule specifying the custom font.

@mixin font-face($webfont, $dir) {
    @font-face {
@@ -19,11 +22,14 @@
    }
 }

-// Loops through a list of local fonts and import each font-face as woff and woff2
+// Imports the list of custom fonts.
 //
-// @param  {List} $webfonts [(font name, filename, font-weight, font-style)] - Each webfont to import.
-// @param  {String} $dir                                                     - The webfont directory path
-// @output void
+// @require {mixin} font-face
+//
+// @param  {List<List>} $webfonts - List of custom fonts to import.
+//     See `font-face` mixin for details.
+// @param  {String}     $dir      - The webfont directory path.
+// @output The `@font-face` at-rules specifying the custom fonts.

@mixin font-faces($webfonts, $dir) {
    @each $webfont in $webfonts {
@@ -31,14 +37,17 @@
    }
 }

-// Map the font-family requires with the existing imported font-families
+// Retrieves the font family stack for the given font ID.
 //
-// @param  {String} $font-family - The name of the webfont.
-// @return {String} The webfont and it's fallbacks.
+// @require {variable} $font-families - See settings directory.
+//
+// @param  {String} $font-family - The custom font ID.
+// @throws Error if the $font-family does not exist.
+// @return {List} The font stack.

@function ff($font-family) {
    @if not map-has-key($font-families, $font-family) {
-       @error "No font-family found in $font-families map for `#{$font-family}`. Property omitted.";
+       @error "No font-family found in $font-families map for `#{$font-family}`.";
   }

    $value: map-get($font-families, $font-family);
--- a/assets/styles/tools/_functions.scss
+++ b/assets/styles/tools/_functions.scss
@@ -2,6 +2,15 @@
 // Tools / Functions
 // ==========================================================================

+// Check if the given value is a number in pixel
+//
+// @param  {Number} $number - The value to check
+// @return {Boolean}
+
+@function is-pixel-number($number) {
+    @return type-of($number) == number and unit($number) == "px";
+}
+
 // Converts the given pixel value to its EM quivalent.
 //
 // @param  {Number} $size                     - The pixel value to convert.
@@ -9,20 +18,12 @@
 // @return {Number} Scalable pixel value in EMs.

@function em($size, $base: $font-size) {
-    @if (type-of($size) == number) {
-        @if (unit($size) != "px") {
-            @error "`#{$size}` needs to be a pixel value.";
-        }
-    } @else {
-        @error "`#{$size}` needs to be a number.";
+    @if not is-pixel-number($size) {
+        @error "`#{$size}` needs to be a number in pixel.";
    }

-    @if (type-of($base) == number) {
-        @if (unit($base) != "px") {
-            @error "`#{$base}` needs to be a pixel value.";
-        }
-    } @else {
-        @error "`#{$base}` needs to be a number.";
+    @if not is-pixel-number($base) {
+        @error "`#{$base}` needs to be a number in pixel.";
    }

    @return ($size / $base) * 1em;
@@ -35,25 +36,43 @@
 // @return {Number} Scalable pixel value in REMs.

@function rem($size, $base: $font-size) {
-    @if (type-of($size) == number) {
-        @if (unit($size) != "px") {
-            @error "`#{$size}` needs to be a pixel value.";
-        }
-    } @else {
-        @error "`#{$size}` needs to be a number.";
+
+    @if not is-pixel-number($size) {
+        @error "`#{$size}` needs to be a number in pixel.";
    }

-    @if (type-of($base) == number) {
-        @if (unit($base) != "px") {
-            @error "`#{$base}` needs to be a pixel value.";
-        }
-    } @else {
-        @error "`#{$base}` needs to be a number.";
+    @if not is-pixel-number($base) {
+        @error "`#{$base}` needs to be a number in pixel.";
    }

    @return ($size / $base) * 1rem;
 }

+// Retrieves the z-index from the {@see $layers master list}.
+//
+// @link on http://css-tricks.com/handling-z-index/
+//
+// @param  {string} $layer    The name of the z-index.
+// @param  {number} $modifier A positive or negative modifier to apply
+//     to the returned z-index value.
+// @throw  Error if the $layer does not exist.
+// @throw  Warning if the $modifier might overlap another master z-index.
+// @return {number}           The computed z-index of $layer and $modifier.
+
+@function z($layer, $modifier: 0) {
+    @if not map-has-key($layers, $layer) {
+        @error "Unknown master z-index layer: #{$layer}";
+    }
+
+    @if ($modifier >= 50 or $modifier <= -50) {
+        @warn "Modifier may overlap the another master z-index layer: #{$modifier}";
+    }
+
+    $index: map-get($z-indexes, $layer);
+
+    @return $index + $modifier;
+}
+
 // Converts a number to a percentage.
 //
 // @alias  percentage()
@@ -94,7 +113,7 @@
@function important($flag: false) {
    @if ($flag == true) {
        @return !important;
-    } @elseif ($important == false) {
+    } @else if ($important == false) {
        @return null;
    } @else {
        @error "`#{$flag}` needs to be `true` or `false`.";
--- a/assets/styles/tools/_maths.scss
+++ b/assets/styles/tools/_maths.scss
@@ -0,0 +1,136 @@
+// ==========================================================================
+// Tools / Maths
+// ==========================================================================
+
+// Removes the unit from the given number.
+//
+// @param  {number} $number The number to strip.
+// @return {number}
+
+@function strip-units($number) {
+    @return $number / ($number * 0 + 1);
+}
+
+// Returns the square root of the given number.
+//
+// @param  {number} $number The number to calculate.
+// @return {number}
+
+@function sqrt($number) {
+    $x: 1;
+    $value: $x;
+
+    @for $i from 1 through 10 {
+        $value: $x - ($x * $x - abs($number)) / (2 * $x);
+        $x: $value;
+    }
+
+    @return $value;
+}
+
+// Returns a number raised to the power of an exponent.
+//
+// @param  {number} $number The base number.
+// @param  {number} $exp    The exponent.
+// @return {number}
+
+@function pow($number, $exp) {
+    $value: 1;
+
+    @if $exp > 0 {
+        @for $i from 1 through $exp {
+            $value: $value * $number;
+        }
+    } @else if $exp < 0 {
+        @for $i from 1 through -$exp {
+            $value: $value / $number;
+        }
+    }
+
+    @return $value;
+}
+
+// Returns the factorial of the given number.
+//
+// @param  {number} $number The number to calculate.
+// @return {number}
+
+@function fact($number) {
+    $value: 1;
+
+    @if $number > 0 {
+        @for $i from 1 through $number {
+            $value: $value * $i;
+        }
+    }
+
+    @return $value;
+}
+
+// Returns an approximation of pi, with 11 decimals.
+//
+// @return {number}
+
+@function pi() {
+    @return 3.14159265359;
+}
+
+// Converts the number in degrees to the radian equivalent .
+//
+// @param  {number} $angle  The angular value to calculate.
+// @return {number}         If $angle has the `deg` unit,
+//                          the radian equivalent is returned.
+//                          Otherwise, the unitless value of $angle is returned.
+
+@function rad($angle) {
+    $unit: unit($angle);
+    $angle: strip-units($angle);
+
+    // If the angle has `deg` as unit, convert to radians.
+    @if ($unit == deg) {
+        @return $angle / 180 * pi();
+    }
+
+    @return $angle;
+}
+
+// Returns the sine of the given number.
+//
+// @param  {number} $angle The angle to calculate.
+// @return {number}
+
+@function sin($angle) {
+    $sin: 0;
+    $angle: rad($angle);
+
+    @for $i from 0 through 10 {
+        $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
+    }
+
+    @return $sin;
+}
+
+// Returns the cosine of the given number.
+//
+// @param  {string} $angle The angle to calculate.
+// @return {number}
+
+@function cos($angle) {
+    $cos: 0;
+    $angle: rad($angle);
+
+    @for $i from 0 through 10 {
+        $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
+    }
+
+    @return $cos;
+}
+
+// Returns the tangent of the given number.
+//
+// @param  {string} $angle The angle to calculate.
+// @return {number}
+
+@function tan($angle) {
+    @return sin($angle) / cos($angle);
+}
--- a/www/assets/images/sprite.svg
+++ b/www/assets/images/sprite.svg
@@ -1 +1,4 @@
-<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs></svg>
+<svg width="41" height="94" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol viewBox="0 0 41 84" id="logo">
+    <rect fill="var(--svg-logo-bg, transparent)" width="41" height="84" />
+    <path fill="var(--svg-logo-icon, currentColor)" d="M39,44V43l-3.08-.33V40.79h2.94v0h0V39.18h-3V35.4h.93a2.11,2.11,0,0,0,.85-.23,1.85,1.85,0,0,0,.68-.56A2.56,2.56,0,0,0,39,32.87a2.86,2.86,0,0,0-.66-1.81,1.88,1.88,0,0,0-.65-.54,1.85,1.85,0,0,0-.83-.2H35.9V25.86h3v-1.6h-3V19.91h3V18.28h-3V13.13l3-.15v-1.8l-3-.15V6.23h3V2H37.51V4.61H35.9V2.89H34.55V4.61H21.16V2.87H19.81V4.61H6.29V2.89H4.94V4.61H3.46V2H2.11V6.23H4.94V9.46H4.87L2.11,9.32V11l2.83.11v1.94l-2.83.11v1.71l2.83-.15v3.54H2.11V19.9H4.94v4.36H3.46V22.51H2.11V27.6H3.46V25.86H4.94V30.3H4.15a2.15,2.15,0,0,0-.86.22,2.29,2.29,0,0,0-.68.56A2.7,2.7,0,0,0,2,32.87a2.87,2.87,0,0,0,.67,1.81,1.9,1.9,0,0,0,1.48.72h.79v3.77H2.11v1.62h0l2.83.26v4.82l-2.83.26h0v1.62H4.94v3.86H4.15a2.15,2.15,0,0,0-.86.22,2.29,2.29,0,0,0-.68.56A2.67,2.67,0,0,0,2,54.18,2.87,2.87,0,0,0,2.67,56a1.91,1.91,0,0,0,1.48.73h.79v3.47H4.15a2.15,2.15,0,0,0-.86.22,2.29,2.29,0,0,0-.68.56A2.65,2.65,0,0,0,2,62.72a2.87,2.87,0,0,0,.67,1.81,1.71,1.71,0,0,0,.66.53,1.77,1.77,0,0,0,.82.19h.79v4H4.15a2.07,2.07,0,0,0-.85.23,2.05,2.05,0,0,0-.69.55A2.69,2.69,0,0,0,2,71.83a2.87,2.87,0,0,0,.67,1.81,1.9,1.9,0,0,0,1.48.72h.79v4.79H2.11v1.61H4.94V82H6.29V80.76H34.55V82H35.9V80.76h3V76.54H37.51v2.61H35.9V74.36h.92a2.15,2.15,0,0,0,.86-.22,2.17,2.17,0,0,0,.68-.56,2.63,2.63,0,0,0,.6-1.75A2.86,2.86,0,0,0,38.3,70a2.11,2.11,0,0,0-.65-.54,2.15,2.15,0,0,0-.83-.2H35.9v-4h.92a2.15,2.15,0,0,0,.86-.22,2.17,2.17,0,0,0,.68-.56,2.61,2.61,0,0,0,.6-1.75,2.86,2.86,0,0,0-.66-1.81,2,2,0,0,0-.66-.53,1.9,1.9,0,0,0-.82-.19H36v1.62h.78a.71.71,0,0,1,.32.07.69.69,0,0,1,.24.21,1,1,0,0,1,.24.65,1,1,0,0,1-.24.65.58.58,0,0,1-.24.2.72.72,0,0,1-.32.08H35.9v-7h.92a2,2,0,0,0,.86-.22,2,2,0,0,0,.68-.55A2.69,2.69,0,0,0,39,54.18a2.81,2.81,0,0,0-.67-1.81,1.8,1.8,0,0,0-.65-.54,1.84,1.84,0,0,0-.82-.2h-.93V47.77h3V46.14h-3V44.36ZM4.94,72.75H4.15a.79.79,0,0,1-.31-.08.64.64,0,0,1-.25-.21.94.94,0,0,1-.24-.63,1,1,0,0,1,.24-.65.62.62,0,0,1,.25-.2.65.65,0,0,1,.31-.08l.79,0Zm0-9.09H4.15a.65.65,0,0,1-.31-.08.64.64,0,0,1-.25-.21.94.94,0,0,1-.24-.64,1,1,0,0,1,.24-.65.78.78,0,0,1,.24-.2.72.72,0,0,1,.32-.08h.79Zm0-8.53H4.15a.65.65,0,0,1-.31-.08.62.62,0,0,1-.25-.2,1,1,0,0,1,0-1.3.64.64,0,0,1,.25-.21.79.79,0,0,1,.31-.08l.79,0ZM6.35,14.65l28.21-1.46v5.07H6.29V14.65ZM6.29,13V11.18h.06L27.19,12v.11Zm28.27,6.87v4.38H6.29V19.91Zm0,6v4.44H6.29V25.86Zm0,6.08v1.86H6.29V31.92Zm1.34,0h.93a.88.88,0,0,1,.32.07.69.69,0,0,1,.24.21,1,1,0,0,1,.23.67,1,1,0,0,1-.23.63.6.6,0,0,1-.25.2.68.68,0,0,1-.31.08H35.9ZM6.28,6.23H34.54l0,4.73h-.07L6.28,9.53ZM4.15,33.78a.65.65,0,0,1-.31-.08.55.55,0,0,1-.25-.2,1,1,0,0,1,0-1.3.68.68,0,0,1,.56-.28H5v1.86ZM6.3,35.4H34.56v3.77H6.3Zm28.26,5.39v1.69h-.07l-15-1.69ZM30.9,43.41v.12L6.28,45.76V41.21h.07Zm3.65,35.74H6.29V74.36H34.55Zm0-6.4H6.29V70.88H34.55Zm0-3.5H6.29v-4H34.55Zm0-5.6H6.29V56.72H34.55Zm0-8.52H6.29V53.26l28.26,0Zm2.27,15.75a.72.72,0,0,1,.32.08.58.58,0,0,1,.24.2,1,1,0,0,1,.24.65.92.92,0,0,1-.24.65.64.64,0,0,1-.25.21.79.79,0,0,1-.31.08H35.9V70.88Zm0-17.64a.79.79,0,0,1,.31.08.64.64,0,0,1,.25.21,1,1,0,0,1,.24.65,1,1,0,0,1-.23.65.82.82,0,0,1-.25.2.68.68,0,0,1-.31.08H35.9V53.24Zm-2.26-1.61H6.29V47.77H34.56Zm-15-5.48,15-1.65v1.65Z" />
+</symbol></defs></svg>
--- a/www/assets/styles/main.css
+++ b/www/assets/styles/main.css
@@ -520,7 +520,7 @@ html {
  min-height: 100%;
  line-height: 1.5;
  font-family: "Webfont Sans", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
-  color: #222222;
+  color: #000000;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
@@ -644,6 +644,19 @@ a:focus, a:hover {
  width: 100%;
 }

+.o-icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.o-icon svg {
+  --icon-height: calc(var(--icon-width) * (1 / (var(--icon-ratio))));
+  display: block;
+  width: var(--icon-width);
+  height: var(--icon-height);
+  fill: currentColor;
+}
+
 .o-layout {
  margin: 0;
  padding: 0;
@@ -753,7 +766,7 @@ a:focus, a:hover {
  position: absolute;
  top: 0;
  right: 0;
-  background-color: black;
+  background-color: #000000;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
@@ -818,7 +831,7 @@ a:focus, a:hover {
 .c-form_input, .c-form_select_input, .c-form_textarea {
  padding: 0.625rem;
  border: 1px solid lightgray;
-  background-color: white;
+  background-color: #FFFFFF;
 }

 .c-form_input:hover, .c-form_select_input:hover, .c-form_textarea:hover {
--- a/www/assets/styles/main.css.map
+++ b/www/assets/styles/main.css.map