angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2026-03-21 22:32:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Migrate gaps to CSS variables

Browse source
This commit is contained in:
Yannik Rödel 2025-11-18 19:07:47 +01:00
parent 779ca79ba1
commit 31d756672c
14 changed files with 167 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
styles/base.scss
View file

@ -1,11 +1,13 @@
@use 'lib/colors'; @use 'lib/colors';
@use 'lib/layout';
@use 'lib/typography'; @use 'lib/typography';
@use 'components/markup'; @use 'components/markup';
@use 'components/site'; @use 'components/site';
@use 'components/page'; @use 'components/page';
@use 'components/banner'; @use 'components/banner';
@include typography.root-config; @include layout.setup;
@include typography.setup;
* { * {
box-sizing: border-box; box-sizing: border-box;

26
styles/components/_actions.scss
View file

@ -5,8 +5,8 @@
// Actions are another module that is present on the home page. It shows a small // Actions are another module that is present on the home page. It shows a small
// number of CTA-style buttons which lead to different parts of the site. // number of CTA-style buttons which lead to different parts of the site.
.page-actions { .page-actions {
padding-top: layout.$large-gap; padding-top: var(--gap-l);
padding-bottom: layout.$large-gap; padding-bottom: var(--gap-l);
background-color: colors.$teal-300; background-color: colors.$teal-300;
@include colors.coderdojo-theme { @include colors.coderdojo-theme {
@ -14,7 +14,7 @@
} }
> *:not(:last-child) { > *:not(:last-child) {
margin-bottom: layout.$large-gap; margin-bottom: var(--gap-l);
} }
> div { > div {
@ -31,8 +31,8 @@
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center; align-items: center;
margin: 0 layout.$normal-gap; margin: 0 var(--gap-m);
padding: layout.$normal-gap; padding: var(--gap-m);
background: colors.$gray-50; background: colors.$gray-50;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@ -48,12 +48,12 @@
} }
> div > .inline-callout { > div > .inline-callout {
margin-top: layout.$normal-gap; margin-top: var(--gap-m);
} }
> svg { > svg {
align-self: center; align-self: center;
margin-bottom: layout.$normal-gap; margin-bottom: var(--gap-m);
height: 10rem; height: 10rem;
} }
@ -63,8 +63,8 @@
> span, > span,
> em { > em {
margin-top: layout.$small-gap; margin-top: var(--gap-s);
margin-bottom: layout.$small-gap; margin-bottom: var(--gap-s);
} }
&:hover { &:hover {
@ -80,10 +80,10 @@
@media screen and (min-width: layout.$breakpoint) { @media screen and (min-width: layout.$breakpoint) {
display: grid; display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
gap: layout.$large-gap; gap: var(--gap-l);
align-items: start; align-items: start;
justify-items: stretch; justify-items: stretch;
padding: layout.$large-gap; padding: var(--gap-l);
> * { > * {
grid-column: span 3; grid-column: span 3;
@ -95,13 +95,13 @@
> a { > a {
margin: 0; margin: 0;
padding: layout.$large-gap; padding: var(--gap-l);
&:first-of-type { &:first-of-type {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
margin-top: #{-1 * layout.$huge-gap}; margin-top: calc(-1 * var(--gap-2xl));
} }
&:not(:first-of-type) { &:not(:first-of-type) {

10
styles/components/_banner.scss
View file

@ -41,7 +41,7 @@
> div { > div {
display: inline-block; display: inline-block;
padding: layout.$small-gap layout.$normal-gap; padding: var(--gap-s) var(--gap-m);
font-size: typography.$subheading-size; font-size: typography.$subheading-size;
background-color: colors.$yellow-600; background-color: colors.$yellow-600;
@ -65,7 +65,7 @@
} }
> .title { > .title {
padding: 0 layout.$normal-gap; padding: 0 var(--gap-m);
line-height: 5rem; line-height: 5rem;
font-size: typography.$title-size; font-size: typography.$title-size;
font-weight: typography.$emphasized-weight; font-weight: typography.$emphasized-weight;
@ -77,7 +77,7 @@
} }
@media screen and (min-width: layout.$breakpoint) { @media screen and (min-width: layout.$breakpoint) {
padding: layout.$normal-gap max(#{layout.$large-gap}, 15vw); padding: var(--gap-m) max(var(--gap-l), 15vw);
} }
} }
} }
@ -89,12 +89,12 @@
.page-callout { .page-callout {
@extend %callout; @extend %callout;
padding: layout.$normal-gap; padding: var(--gap-m);
} }
.inline-callout { .inline-callout {
@extend %callout; @extend %callout;
display: inline-block; display: inline-block;
font-style: normal; font-style: normal;
padding: layout.$small-gap layout.$normal-gap; padding: var(--gap-s) var(--gap-m);
} }

16
styles/components/_form-choices.scss
View file

@ -6,8 +6,8 @@
.form-choices { .form-choices {
@extend %narrow-content; @extend %narrow-content;
margin-top: layout.$huge-gap; margin-top: var(--gap-2xl);
margin-bottom: layout.$huge-gap; margin-bottom: var(--gap-2xl);
list-style: none; list-style: none;
text-align: center; text-align: center;
@ -25,13 +25,13 @@
&:not(:last-child) { &:not(:last-child) {
&:before { &:before {
top: calc(50% - #{math.div(layout.$large-gap, 2)}); top: calc(50% - var(--gap-l) / 2);
} }
&::after { &::after {
content: ''; content: '';
display: block; display: block;
margin: layout.$large-gap auto; margin: var(--gap-l) auto;
width: 15rem; width: 15rem;
height: 1px; height: 1px;
background-color: colors.$gray-300; background-color: colors.$gray-300;
@ -44,8 +44,8 @@
} }
&.narrow { &.narrow {
margin-top: layout.$large-gap; margin-top: var(--gap-l);
margin-bottom: layout.$large-gap; margin-bottom: var(--gap-l);
> li::after { > li::after {
display: none; display: none;
@ -54,7 +54,7 @@
} }
%form-choice-link { %form-choice-link {
padding: layout.$small-gap layout.$normal-gap; padding: var(--gap-s) var(--gap-m);
display: inline-block; display: inline-block;
line-height: 2.5; line-height: 2.5;
text-decoration: none; text-decoration: none;
@ -92,7 +92,7 @@
} }
> em { > em {
padding-block: layout.$small-gap; padding-block: var(--gap-s);
font-style: inherit; font-style: inherit;
background-color: colors.$yellow-600; background-color: colors.$yellow-600;
transition: motion.$subtle background-color; transition: motion.$subtle background-color;

16
styles/components/_form-elements.scss
View file

@ -44,7 +44,7 @@
%form-input { %form-input {
@extend %base-form-input; @extend %base-form-input;
padding: layout.$small-gap; padding: var(--gap-s);
font: inherit; font: inherit;
transition: motion.$subtle background-color; transition: motion.$subtle background-color;
@ -81,11 +81,11 @@
> :last-child { > :last-child {
@extend %form-input; @extend %form-input;
flex-basis: 60%; flex-basis: 60%;
margin-top: layout.$small-gap; margin-top: var(--gap-s);
@media screen and (min-width: layout.$breakpoint) { @media screen and (min-width: layout.$breakpoint) {
margin-top: 0; margin-top: 0;
margin-left: layout.$normal-gap; margin-left: var(--gap-m);
} }
} }
} }
@ -102,7 +102,7 @@
content: '\2771'; content: '\2771';
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: #{layout.$large-gap * -1}; left: calc(-1 * var(--gap-l));
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
opacity: 0.3; opacity: 0.3;
@ -140,7 +140,7 @@
.form-checkbox { .form-checkbox {
$size: 2rem; $size: 2rem;
$gap: layout.$small-gap; $gap: var(--gap-s);
@extend %form-item; @extend %form-item;
justify-content: flex-end; justify-content: flex-end;
@ -193,7 +193,7 @@
.blanked-out-form { .blanked-out-form {
position: relative; position: relative;
padding: layout.$large-gap 0; padding: var(--gap-l) 0;
pointer-events: none; pointer-events: none;
&::after { &::after {
@ -220,8 +220,8 @@
); );
mask-image: linear-gradient( mask-image: linear-gradient(
transparent 0%, transparent 0%,
black #{layout.$large-gap}, black var(--gap-l),
black calc(100% - #{layout.$large-gap}), black calc(100% - var(--gap-l)),
transparent 100% transparent 100%
); );
} }

52
styles/components/_markup.scss
View file

@ -10,8 +10,8 @@ body {
%title { %title {
@extend %content-gutter; @extend %content-gutter;
margin-top: layout.$huge-gap; margin-top: var(--gap-2xl);
margin-bottom: layout.$large-gap; margin-bottom: var(--gap-l);
font-size: typography.$title-size; font-size: typography.$title-size;
line-height: typography.$heading-line-height; line-height: typography.$heading-line-height;
text-align: center; text-align: center;
@ -24,8 +24,8 @@ h1 {
%heading { %heading {
@extend %content-gutter; @extend %content-gutter;
margin-top: layout.$large-gap; margin-top: var(--gap-l);
margin-bottom: layout.$large-gap; margin-bottom: var(--gap-l);
font-size: typography.$heading-size; font-size: typography.$heading-size;
line-height: typography.$heading-line-height; line-height: typography.$heading-line-height;
overflow-wrap: anywhere; overflow-wrap: anywhere;
@ -72,11 +72,11 @@ dl {
} }
li { li {
margin: layout.$small-gap 0; margin: var(--gap-s) 0;
} }
dt { dt {
margin: layout.$normal-gap 0; margin: var(--gap-m) 0;
font-weight: typography.$emphasized-weight; font-weight: typography.$emphasized-weight;
color: colors.$blue-800; color: colors.$blue-800;
@ -86,12 +86,12 @@ dt {
} }
dd { dd {
margin: layout.$normal-gap 0 layout.$normal-gap layout.$large-gap; margin: var(--gap-m) 0 var(--gap-m) var(--gap-l);
} }
em { em {
background-color: colors.$teal-300; background-color: colors.$teal-300;
padding: 0 layout.$small-gap 0 layout.$small-gap; padding: 0 var(--gap-s) 0 var(--gap-s);
@include colors.coderdojo-theme { @include colors.coderdojo-theme {
background-color: colors.$orange-300; background-color: colors.$orange-300;
@ -120,8 +120,8 @@ blockquote {
} }
@extend %narrow-content-gutter; @extend %narrow-content-gutter;
padding-left: layout.$small-gap; padding-left: var(--gap-s);
padding-right: layout.$small-gap; padding-right: var(--gap-s);
$border: 0.5em solid $color; $border: 0.5em solid $color;
border-top: $border; border-top: $border;
border-bottom: $border; border-bottom: $border;
@ -137,7 +137,7 @@ blockquote {
.cta-link { .cta-link {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
padding: 0 layout.$normal-gap; padding: 0 var(--gap-m);
max-width: layout.$narrow-content-width; max-width: layout.$narrow-content-width;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -162,7 +162,7 @@ blockquote {
ul.link-grid { ul.link-grid {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: layout.$larger-gap layout.$normal-gap; gap: var(--gap-xl) var(--gap-m);
justify-items: center; justify-items: center;
align-items: center; align-items: center;
padding: 0; padding: 0;
@ -174,7 +174,7 @@ ul.link-grid {
} }
&.large { &.large {
gap: layout.$normal-gap; gap: var(--gap-m);
> li > a { > li > a {
display: flex; display: flex;
@ -182,7 +182,7 @@ ul.link-grid {
> img { > img {
max-width: 6rem; max-width: 6rem;
margin-right: layout.$normal-gap; margin-right: var(--gap-m);
} }
} }
} }
@ -195,7 +195,7 @@ ul.link-grid {
> li { > li {
> a { > a {
display: inline-block; display: inline-block;
padding: layout.$normal-gap; padding: var(--gap-m);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
color: colors.$gray-600; color: colors.$gray-600;
@ -205,7 +205,7 @@ ul.link-grid {
> img { > img {
display: block; display: block;
margin: 0 auto layout.$small-gap auto; margin: 0 auto var(--gap-s) auto;
max-width: 100%; max-width: 100%;
max-height: 6rem; max-height: 6rem;
} }
@ -222,21 +222,21 @@ ul.link-grid {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
@extend %content-gutter; @extend %content-gutter;
margin-top: layout.$huge-gap; margin-top: var(--gap-2xl);
margin-bottom: layout.$huge-gap; margin-bottom: var(--gap-2xl);
@media screen and (min-width: layout.$breakpoint) { @media screen and (min-width: layout.$breakpoint) {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: layout.$normal-gap; gap: var(--gap-m);
justify-content: stretch; justify-content: stretch;
} }
} }
:any-link.post-card { :any-link.post-card {
display: block; display: block;
padding-top: layout.$normal-gap; padding-top: var(--gap-m);
padding-bottom: layout.$normal-gap; padding-bottom: var(--gap-m);
text-decoration: none; text-decoration: none;
transition: transition:
background-color motion.$subtle, background-color motion.$subtle,
@ -244,8 +244,8 @@ ul.link-grid {
box-shadow motion.$subtle; box-shadow motion.$subtle;
@media screen and (min-width: layout.$breakpoint) { @media screen and (min-width: layout.$breakpoint) {
padding-left: layout.$normal-gap; padding-left: var(--gap-m);
padding-right: layout.$normal-gap; padding-right: var(--gap-m);
} }
&:hover { &:hover {
@ -298,7 +298,7 @@ ul.link-grid {
} }
+ time { + time {
margin-top: -1 * layout.$normal-gap; margin-top: calc(-1 * var(--gap-m));
} }
} }
@ -307,7 +307,7 @@ ul.link-grid {
color: colors.$gray-600; color: colors.$gray-600;
+ p { + p {
margin-top: layout.$small-gap; margin-top: var(--gap-s);
} }
} }
} }
@ -322,7 +322,7 @@ ul.link-grid {
> img { > img {
display: block; display: block;
margin: 0 auto layout.$small-gap auto; margin: 0 auto var(--gap-s) auto;
max-height: 6rem; max-height: 6rem;
} }
} }

8
styles/components/_page.scss
View file

@ -3,11 +3,11 @@
@use '../lib/typography'; @use '../lib/typography';
.page-section { .page-section {
padding-top: layout.$large-gap; padding-top: var(--gap-l);
padding-bottom: layout.$large-gap; padding-bottom: var(--gap-l);
@media screen and (min-width: layout.$breakpoint) { @media screen and (min-width: layout.$breakpoint) {
padding: layout.$large-gap; padding: var(--gap-l);
} }
&.inverse { &.inverse {
@ -52,5 +52,5 @@
} }
main:not(.expand) + .page-section.footer { main:not(.expand) + .page-section.footer {
margin-top: layout.$huge-gap; margin-top: var(--gap-2xl);
} }

14
styles/components/_site.scss
View file

@ -4,14 +4,14 @@
@use '../lib/typography'; @use '../lib/typography';
@mixin header-item { @mixin header-item {
padding: 0 layout.$large-gap; padding: 0 var(--gap-m);
line-height: 4rem; line-height: 4rem;
} }
// The site logo text. More specific styles for this element are also present // The site logo text. More specific styles for this element are also present
// underneath .site-header. // underneath .site-header.
.site-logo { .site-logo {
margin: 0 layout.$large-gap; margin: 0 var(--gap-l);
text-transform: lowercase; text-transform: lowercase;
white-space: nowrap; white-space: nowrap;
@ -96,7 +96,7 @@
a { a {
display: block; display: block;
padding: layout.$small-gap; padding: var(--gap-s);
font-weight: typography.$emphasized-weight; font-weight: typography.$emphasized-weight;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -107,6 +107,10 @@
.site-mobile-navigation { .site-mobile-navigation {
cursor: pointer; cursor: pointer;
li {
margin-block: 0;
}
> summary { > summary {
display: block; display: block;
@include header-item; @include header-item;
@ -132,7 +136,7 @@
content: ''; content: '';
display: block; display: block;
margin: 0 auto; margin: 0 auto;
width: calc(100% - #{2 * layout.$normal-gap}); width: calc(100% - 2 * var(--gap-m));
height: 1px; height: 1px;
background-color: colors.$gray-300; background-color: colors.$gray-300;
} }
@ -174,7 +178,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
gap: layout.$normal-gap; gap: var(--gap-m);
.site-navigation a { .site-navigation a {
text-align: right; text-align: right;

4
styles/components/_tabs.scss
View file

@ -29,7 +29,7 @@
> a { > a {
display: block; display: block;
margin: 0 layout.$normal-gap; margin: 0 var(--gap-m);
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
@ -64,7 +64,7 @@
@media screen and (min-width: layout.$breakpoint) { @media screen and (min-width: layout.$breakpoint) {
> .tab { > .tab {
padding: layout.$large-gap; padding: var(--gap-l);
@include colors.card-shadow; @include colors.card-shadow;
} }
} }

22
styles/components/_timeline.scss
View file

@ -7,7 +7,7 @@
.timeline { .timeline {
$stampSize: 4rem; $stampSize: 4rem;
$lineWeight: 0.2rem; $lineWeight: 0.2rem;
$itemSpacing: layout.$normal-gap; $itemSpacing: var(--gap-m);
@extend %content-gutter; @extend %content-gutter;
display: flex; display: flex;
@ -46,7 +46,7 @@
> time { > time {
display: block; display: block;
padding-inline: layout.$small-gap; padding-inline: var(--gap-s);
font-size: typography.$base-size; font-size: typography.$base-size;
font-weight: typography.$normal-weight; font-weight: typography.$normal-weight;
} }
@ -60,15 +60,15 @@
> .content { > .content {
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
margin-left: layout.$normal-gap; margin-left: var(--gap-m);
margin-bottom: $itemSpacing; margin-bottom: $itemSpacing;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
right: calc(100% + #{layout.$normal-gap + math.div($stampSize, 2)}); right: calc(100% + var(--gap-m) + #{math.div($stampSize, 2)});
bottom: #{-1 * $itemSpacing}; bottom: calc(-1 * #{$itemSpacing});
width: $lineWeight; width: $lineWeight;
background-color: colors.$gray-300; background-color: colors.$gray-300;
transform: translateX(50%); transform: translateX(50%);
@ -78,14 +78,14 @@
> h3:first-child { > h3:first-child {
position: relative; position: relative;
margin-top: 0; margin-top: 0;
margin-left: layout.$large-gap; margin-left: var(--gap-l);
line-height: $stampSize; line-height: $stampSize;
text-align: left; text-align: left;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
right: calc(100% + #{layout.$small-gap}); right: calc(100% + var(--gap-s));
top: 50%; top: 50%;
width: 4rem; width: 4rem;
height: $lineWeight; height: $lineWeight;
@ -136,12 +136,12 @@
margin-bottom: 0; margin-bottom: 0;
> .content { > .content {
padding-bottom: layout.$normal-gap; padding-bottom: var(--gap-m);
} }
} }
+ .timeline { + .timeline {
margin-top: #{-1 * layout.$normal-gap}; margin-top: calc(-1 * var(--gap-m));
} }
} }
@ -150,8 +150,8 @@
display: grid; display: grid;
grid-template-columns: var(--x1, 50%) minmax(0, 1fr); grid-template-columns: var(--x1, 50%) minmax(0, 1fr);
grid-template-rows: var(--y1, 50%) minmax(0, 1fr); grid-template-rows: var(--y1, 50%) minmax(0, 1fr);
gap: layout.$tiny-gap; gap: var(--gap-xs);
padding: layout.$tiny-gap; padding: var(--gap-xs);
height: 27rem; height: 27rem;
background-color: colors.$blue-800; background-color: colors.$blue-800;
@include colors.card-shadow; @include colors.card-shadow;

2
styles/finish.scss
View file

@ -47,7 +47,7 @@
display: block; display: block;
height: 15vmin; height: 15vmin;
margin: layout.$huge-gap auto; margin: var(--gap-2xl) auto;
overflow: visible; overflow: visible;
stroke-linecap: round; stroke-linecap: round;
stroke-miterlimit: 10; stroke-miterlimit: 10;

56
styles/lib/_fluids.scss Normal file
View file

@ -0,0 +1,56 @@
@use "sass:math";
$min-fluid-size: 25rem !default; // 400px at 16px rem size
$max-fluid-size: 60rem !default; // 960px at 16px rem size
$fluid-base: 1vw !default;
/// Return a CSS clamp() call that interpolates between the two given values
/// when the viewport width changes. This can be used for fluid type and spacing
/// scales.
///
/// When the current viewport has a width less than or equal to the
/// (configurable) $min-fluid-size variable, the expression returned by this
/// function will evaluate to $from. Similarly, sizes equal to or greater than
/// $max-fluid-size will yield $to. Eveything in between will be calculated
/// using linear interpolation.
///
/// Set the $fluid-base variable to `1vh` to use the viewport height instead of
/// its width.
///
/// $from and $to must have the same unit or both be unitless.
@function fluid-value($from, $to) {
// Solve the following system of equations:
// a * 0.01 * $min-fluid-size + b = $from
// a * 0.01 * $max-fluid-size + b = $to
// The constant 0.01 is for converting the vw unit to an actual percentage
// factor.
$fluid-factor: math.div(
$from - $to,
0.01 * ($min-fluid-size - $max-fluid-size)
); // a
$static-value: $from - $fluid-factor * 0.01 * $min-fluid-size; // b
@return clamp(#{$from}, #{$fluid-factor}vw + #{$static-value}, #{$to});
}
$lower-harmonic-ratio: 1.125 !default;
$upper-harmonic-ratio: 1.25 !default;
/// Calculate the value on a modular harmonic scale at a specific index
/// (exponent). The result will be a fluid CSS calc() expression.
///
/// Use this to quickly create an entire scale of harmonic values. Using an
/// $exponent of 0 will return a fluid value that evalutes to $lower-base on
/// small viewports and $upper-base on large viewports. Positive exponents make
/// the fluid value larger, negative values decrease it. The module-level
/// configuration variables $lower-harmonic-ratio and $upper-harmonic-ratio
/// define curvature of that function (over the $exponent).
///
/// Other notes from fluid-value() apply here as well. In particular,
/// $lower-base and $upper-base must have the same unit. $exponent must be
/// unitless.
@function harmonic-value($exponent, $lower-base, $upper-base) {
@return fluid-value(
$lower-base * math.pow($lower-harmonic-ratio, $exponent),
$upper-base * math.pow($upper-harmonic-ratio, $exponent)
);
}

29
styles/lib/_layout.scss
View file

@ -1,9 +1,7 @@
$tiny-gap: 0.3rem; @use "fluids" with (
$small-gap: 0.5rem; $lower-harmonic-ratio: 1.25,
$normal-gap: 1.5rem; $upper-harmonic-ratio: 1.3
$large-gap: 2.5rem; );
$larger-gap: 4rem;
$huge-gap: 6rem;
$breakpoint: 80rem; $breakpoint: 80rem;
@ -18,7 +16,7 @@ $wide-content-width: 80rem;
} }
%narrow-content-gutter { %narrow-content-gutter {
margin: $normal-gap $normal-gap; margin: var(--gap-m);
@media screen and (min-width: $breakpoint) { @media screen and (min-width: $breakpoint) {
margin-left: auto; margin-left: auto;
@ -34,7 +32,7 @@ $wide-content-width: 80rem;
} }
%content-gutter { %content-gutter {
margin: $normal-gap $normal-gap; margin: var(--gap-m);
@media screen and (min-width: $breakpoint) { @media screen and (min-width: $breakpoint) {
margin-left: auto; margin-left: auto;
@ -50,6 +48,19 @@ $wide-content-width: 80rem;
} }
%wide-content-gutter { %wide-content-gutter {
margin: $normal-gap auto; margin: var(--gap-m) auto;
max-width: $wide-content-width; max-width: $wide-content-width;
} }
@mixin setup {
$-gap-lower-base: 1.5rem;
$-gap-upper-base: 2rem;
:root {
--gap-xs: #{fluids.harmonic-value(-3, $-gap-lower-base, $-gap-upper-base)};
--gap-s: #{fluids.harmonic-value(-2, $-gap-lower-base, $-gap-upper-base)};
--gap-m: #{fluids.harmonic-value(0, $-gap-lower-base, $-gap-upper-base)};
--gap-l: #{fluids.harmonic-value(2, $-gap-lower-base, $-gap-upper-base)};
--gap-xl: #{fluids.harmonic-value(3, $-gap-lower-base, $-gap-upper-base)};
--gap-2xl: #{fluids.harmonic-value(5, $-gap-lower-base, $-gap-upper-base)};
}
}

2
styles/lib/_typography.scss
View file

@ -18,7 +18,7 @@ $comfortaa-weights: (
'Bold': 700, 'Bold': 700,
); );
@mixin root-config { @mixin setup {
@each $name, $weight in $comfortaa-weights { @each $name, $weight in $comfortaa-weights {
@font-face { @font-face {
font-family: 'Comfortaa'; font-family: 'Comfortaa';