WIP React > Svelte

Put most of the developed design into Svelte
This commit is contained in:
2020-02-11 15:09:32 +01:00
parent 61e45cb171
commit 9b0c154f61
95 changed files with 3627 additions and 9464 deletions

View File

@@ -1,24 +1,38 @@
// Colors
$color-primary: pink;
$color-secondary: #000;
$color-primary: #3C0576;
$color-secondary: #FF6C89;
$color-text: #333;
$color-tertiary: #FFE0C5;
$color-lightpurple: #8B50B2;
$color-gray: #666;
$color-lightgray: #999;
// CSS Variables
:root {
// Colors
--primary: #{$color-primary};
--secondary: #{$color-secondary};
--text: #{$color-text};
--color-primary: #{$color-primary};
--color-secondary: #{$color-secondary};
--color-text: #{$color-text};
--color-tertiary: #{$color-tertiary};
--color-lightpurple: #{$color-lightpurple};
--color-gray: #{$color-gray};
--color-lightgray: #{$color-lightgray};
}
/* Fonts
========================================================================== */
$base-font-size: 16px;
$base-font-size: 28px;
// Families
$replacement: "Georgia, serif";
$font-text: "font", #{$replacement};
$replacement-sans: "Helvetica, Arial, sans-serif";
$replacement-serif: "Georgia, serif";
$font-sans: "G-Regular", #{$replacement-sans};
$font-sans-sb: "G-Semibold", #{$replacement-sans};
$font-sans-light: "G-Light", #{$replacement-sans};
$font-serif: "M-Light", #{$replacement-serif};
$font-serif-extra: "M-Extralight", #{$replacement-serif};
/* Sizes, margins and spacing
@@ -28,16 +42,15 @@ $font-text: "font", #{$replacement};
/* Directories
========================================================================== */
$dir-img: "../img";
$dir-fonts: "../fonts";
$dir-node: "../node-modules";
$dir-img: "/img";
$dir-fonts: "/fonts";
/* Animation
========================================================================== */
// Easing
$ease-cubic: cubic-bezier(0.785, 0.135, 0.15, 0.86);
$ease-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
$ease-cubic: cubic-bezier(.785, .135, .15, .86);
$ease-quart: cubic-bezier(.165, .84, .44, 1);
$ease-inout: ease-in-out;