Sebastiano Guerriero sebastiano-guerriero
sebastiano-guerriero
/ colors_03.scss
Last active
August 17, 2018 13:49
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| /* main colors */ | |
| --color-primary: #4D84F4; | |
| --color-primary-light: color-mod(var(--color-primary) tint(15%)); | |
| --color-primary-dark: color-mod(var(--color-primary) shade(15%)); | |
| --color-primary-bg: color-mod(var(--color-primary) alpha(20%)); | |
| --color-accent: #f5414f; | |
| --color-accent-light: color-mod(var(--color-accent) tint(15%)); | |
| --color-accent-dark: color-mod(var(--color-accent) shade(10%)); |
sebastiano-guerriero
/ colors_04.scss
Last active
February 19, 2021 17:43
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| /* main colors */ | |
| --color-primary: #4D84F4; | |
| --color-primary-light: color-mod(var(--color-primary) tint(15%)); | |
| --color-primary-dark: color-mod(var(--color-primary) shade(15%)); | |
| --color-primary-bg: color-mod(var(--color-primary) alpha(20%)); | |
| --color-accent: #f5414f; | |
| --color-accent-light: color-mod(var(--color-accent) tint(15%)); | |
| --color-accent-dark: color-mod(var(--color-accent) shade(10%)); |
sebastiano-guerriero
/ colors_05.scss
Last active
August 2, 2018 11:09
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @supports(--css: variables) { | |
| .theme--dark { | |
| --component-background: var(--black); | |
| --color-border: var(--gray-6); | |
| --color-text: var(--gray-4); | |
| --color-text-heading: var(--white); | |
| } | |
| } |
sebastiano-guerriero
/ colors_06.scss
Created
August 2, 2018 11:08
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .theme--dark { | |
| color: var(--gray-1); | |
| h1, h2, h3, h4 { | |
| color: var(--white); | |
| } | |
| .text--subtle { | |
| color: var(--gray-4); | |
| } |
sebastiano-guerriero
/ spacing_01.scss
Created
August 22, 2018 08:23
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --space-xxs: 4px; | |
| --space-xs: 8px; | |
| --space-sm: 12px; | |
| --space-md: 20px; | |
| --space-lg: 32px; | |
| --space-xl: 52px; | |
| --space-xxl: 84px; | |
| } |
sebastiano-guerriero
/ spacing_02.scss
Last active
August 22, 2018 10:50
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --space-unit: 16px; | |
| --space-xxs: calc(0.25 * var(--space-unit)); // 4px | |
| --space-xs: calc(0.5 * var(--space-unit)); // 8px | |
| --space-sm: calc(0.75 * var(--space-unit)); // 12px | |
| --space-md: calc(1.25 * var(--space-unit)); // 20px | |
| --space-lg: calc(2 * var(--space-unit)); // 32px | |
| --space-xl: calc(3.25 * var(--space-unit)); // 52px | |
| --space-xxl: calc(5.25 * var(--space-unit)); // 84px | |
| } |
sebastiano-guerriero
/ spacing_03.scss
Last active
August 22, 2018 10:50
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --space-unit: 1em; | |
| --space-xxs: calc(0.25 * var(--space-unit)); | |
| --space-xs: calc(0.5 * var(--space-unit)); | |
| --space-sm: calc(0.75 * var(--space-unit)); | |
| --space-md: calc(1.25 * var(--space-unit)); | |
| --space-lg: calc(2 * var(--space-unit)); | |
| --space-xl: calc(3.25 * var(--space-unit)); | |
| --space-xxl: calc(5.25 * var(--space-unit)); | |
| } |
sebastiano-guerriero
/ spacing_04.scss
Created
August 22, 2018 09:18
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @include breakpoint(md) { | |
| :root { | |
| --text-base-size: 1.25em; | |
| } | |
| } |
sebastiano-guerriero
/ spacing_05.scss
Created
August 22, 2018 09:40
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .header__top { | |
| background: var(--black); | |
| padding: var(--space-sm); | |
| text-align: center; | |
| a { | |
| color: var(--white); | |
| @include fontSmooth; | |
| } | |
| } |
sebastiano-guerriero
/ spacing_06.scss
Last active
August 22, 2018 10:50
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --space-unit: 1em; | |
| --space-xxs: calc(0.25 * var(--space-unit)); | |
| --space-xs: calc(0.5 * var(--space-unit)); | |
| --space-sm: calc(0.75 * var(--space-unit)); | |
| --space-md: calc(1.25 * var(--space-unit)); | |
| --space-lg: calc(2 * var(--space-unit)); | |
| --space-xl: calc(3.25 * var(--space-unit)); | |
| --space-xxl: calc(5.25 * var(--space-unit)); | |
| } |