WIP React > Svelte
Put most of the developed design into Svelte
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user