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 • committed by Yannik Rödel
parent 13046a72a7
commit 3d5f92e68e
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';