Skip to content

Instantly share code, notes, and snippets.

View sebastiano-guerriero's full-sized avatar

Sebastiano Guerriero sebastiano-guerriero

View GitHub Profile
: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));
.margin-top, .margin-top--md {
margin-top: var(--space-md);
}
.margin-top--sm {
margin-top: var(--space-sm);
}
.margin-top--lg {
margin-top: var(--space-lg);
@include breakpoint(md) {
.margin-top, .margin-top--md {
margin-top: var(--space-lg);
}
.margin-top--sm {
margin-top: var(--space-md);
}
.margin-top--lg {
.nav__item {
margin-right: calc(var(--space-sm) * 1.1);
}
.nav__item {
margin-right: 0.5rem;
}
:root {
/* spacing values */
--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));
/* --------------------------------
Spacing
-------------------------------- */
:root {
/* spacing values */
--space-unit: 1em;
--space-xxxs: calc(0.25 * var(--space-unit));
:root {
--btn-font-size: 1em;
--btn-radius: 0.25em;
}
.btn {
display: inline-flex;
position: relative;
white-space: nowrap;
text-decoration: none;
/* themes */
.btn--primary {
// main button
background-color: var(--btn-primary-bg);
color: var(--btn-primary-label);
@include fontSmooth;
&:visited {
color: var(--btn-primary-label);
}
/* --------------------------------
Colors
-------------------------------- */
:root {
/* main colors */
--color-primary: #286bf4;
--color-primary-light: color-mod(var(--color-primary) tint(15%));