Skip to content

Instantly share code, notes, and snippets.

@ronaldpoi
ronaldpoi / input.scss
Created May 4, 2023 07:04
Generated by SassMeister.com.
$type-scale-ratio: 1.125;
$type-scales: (
'sm': (
1: 10px,
2: 12px,
3: 14px
),
'md': (
1: 16px,
2: 18px,
@ronaldpoi
ronaldpoi / input.scss
Created May 2, 2022 23:18
Generated by SassMeister.com.
$colors-primitives: (
brand-navy-800: #0E162F,
brand-navy-700: #1B2A58,
brand-navy-600: #394876,
brand-navy-500: #616A85,
brand-navy-400: #868A97,
brand-navy-300: #A8ACBB,
brand-navy-200: #C1C5D0,
brand-navy-100: #D7DAE4,
brand-navy-50: #E9EDF3,
@ronaldpoi
ronaldpoi / input.scss
Created May 2, 2022 20:58
Generated by SassMeister.com.
$colors-primitives: (
brand-navy-800: #0E162F,
brand-navy-700: #1B2A58,
brand-navy-600: #394876,
brand-navy-500: #616A85,
brand-navy-400: #868A97,
brand-navy-300: #A8ACBB,
brand-navy-200: #C1C5D0,
brand-navy-100: #D7DAE4,
brand-navy-50: #E9EDF3,
@ronaldpoi
ronaldpoi / input.scss
Created April 26, 2022 16:11
Generated by SassMeister.com.
// TYPE MAPS
$type-families: (
'body': (
"'proxima-nova', sans-serif"
),
'heading': (
"'museo-slab', serif"
)
);
@ronaldpoi
ronaldpoi / input.scss
Created April 24, 2022 08:01
Generated by SassMeister.com.
$type-stack: (
// Sans-serif
helvetica: (
light: (
family: (Helvetica Neue, Helvetica, Arial, sans-serif),
weight: 200,
style: normal,
font-face: (
family: 'Helvetica Neue',
path: 'HelveticaNeue/HelveticaNeue-Light',
@ronaldpoi
ronaldpoi / input.scss
Created April 19, 2022 21:22
Generated by SassMeister.com.
//
// Defining global values
// Font sizes are divided in 4 scales:
// - Small: 10px, 12px, 14px
// - Medium: 16px, 18px, 20px
// - Large: 22px, 24px, 32px
// - Extra large: 48px, 60px, 72px
// Sass values are transformed into
// CSS variables through a sass function
//
@ronaldpoi
ronaldpoi / lessretinamixin
Last active August 29, 2015 14:00
LESS Retina mixin
// Mixin
.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),