mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2026-03-21 22:32:17 +00:00
Migrate gaps to CSS variables
This commit is contained in:
parent
779ca79ba1
commit
31d756672c
14 changed files with 167 additions and 94 deletions
|
|
@ -1,11 +1,13 @@
|
|||
@use 'lib/colors';
|
||||
@use 'lib/layout';
|
||||
@use 'lib/typography';
|
||||
@use 'components/markup';
|
||||
@use 'components/site';
|
||||
@use 'components/page';
|
||||
@use 'components/banner';
|
||||
|
||||
@include typography.root-config;
|
||||
@include layout.setup;
|
||||
@include typography.setup;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
// 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.
|
||||
.page-actions {
|
||||
padding-top: layout.$large-gap;
|
||||
padding-bottom: layout.$large-gap;
|
||||
padding-top: var(--gap-l);
|
||||
padding-bottom: var(--gap-l);
|
||||
background-color: colors.$teal-300;
|
||||
|
||||
@include colors.coderdojo-theme {
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-bottom: layout.$large-gap;
|
||||
margin-bottom: var(--gap-l);
|
||||
}
|
||||
|
||||
> div {
|
||||
|
|
@ -31,8 +31,8 @@
|
|||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
margin: 0 layout.$normal-gap;
|
||||
padding: layout.$normal-gap;
|
||||
margin: 0 var(--gap-m);
|
||||
padding: var(--gap-m);
|
||||
background: colors.$gray-50;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
|
@ -48,12 +48,12 @@
|
|||
}
|
||||
|
||||
> div > .inline-callout {
|
||||
margin-top: layout.$normal-gap;
|
||||
margin-top: var(--gap-m);
|
||||
}
|
||||
|
||||
> svg {
|
||||
align-self: center;
|
||||
margin-bottom: layout.$normal-gap;
|
||||
margin-bottom: var(--gap-m);
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
|
|
@ -63,8 +63,8 @@
|
|||
|
||||
> span,
|
||||
> em {
|
||||
margin-top: layout.$small-gap;
|
||||
margin-bottom: layout.$small-gap;
|
||||
margin-top: var(--gap-s);
|
||||
margin-bottom: var(--gap-s);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -80,10 +80,10 @@
|
|||
@media screen and (min-width: layout.$breakpoint) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: layout.$large-gap;
|
||||
gap: var(--gap-l);
|
||||
align-items: start;
|
||||
justify-items: stretch;
|
||||
padding: layout.$large-gap;
|
||||
padding: var(--gap-l);
|
||||
|
||||
> * {
|
||||
grid-column: span 3;
|
||||
|
|
@ -95,13 +95,13 @@
|
|||
|
||||
> a {
|
||||
margin: 0;
|
||||
padding: layout.$large-gap;
|
||||
padding: var(--gap-l);
|
||||
|
||||
&:first-of-type {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
margin-top: #{-1 * layout.$huge-gap};
|
||||
margin-top: calc(-1 * var(--gap-2xl));
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
> div {
|
||||
display: inline-block;
|
||||
padding: layout.$small-gap layout.$normal-gap;
|
||||
padding: var(--gap-s) var(--gap-m);
|
||||
font-size: typography.$subheading-size;
|
||||
background-color: colors.$yellow-600;
|
||||
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
}
|
||||
|
||||
> .title {
|
||||
padding: 0 layout.$normal-gap;
|
||||
padding: 0 var(--gap-m);
|
||||
line-height: 5rem;
|
||||
font-size: typography.$title-size;
|
||||
font-weight: typography.$emphasized-weight;
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
}
|
||||
|
||||
@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 {
|
||||
@extend %callout;
|
||||
padding: layout.$normal-gap;
|
||||
padding: var(--gap-m);
|
||||
}
|
||||
|
||||
.inline-callout {
|
||||
@extend %callout;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
padding: layout.$small-gap layout.$normal-gap;
|
||||
padding: var(--gap-s) var(--gap-m);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
.form-choices {
|
||||
@extend %narrow-content;
|
||||
margin-top: layout.$huge-gap;
|
||||
margin-bottom: layout.$huge-gap;
|
||||
margin-top: var(--gap-2xl);
|
||||
margin-bottom: var(--gap-2xl);
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
|
||||
|
|
@ -25,13 +25,13 @@
|
|||
|
||||
&:not(:last-child) {
|
||||
&:before {
|
||||
top: calc(50% - #{math.div(layout.$large-gap, 2)});
|
||||
top: calc(50% - var(--gap-l) / 2);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
margin: layout.$large-gap auto;
|
||||
margin: var(--gap-l) auto;
|
||||
width: 15rem;
|
||||
height: 1px;
|
||||
background-color: colors.$gray-300;
|
||||
|
|
@ -44,8 +44,8 @@
|
|||
}
|
||||
|
||||
&.narrow {
|
||||
margin-top: layout.$large-gap;
|
||||
margin-bottom: layout.$large-gap;
|
||||
margin-top: var(--gap-l);
|
||||
margin-bottom: var(--gap-l);
|
||||
|
||||
> li::after {
|
||||
display: none;
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
|
||||
%form-choice-link {
|
||||
padding: layout.$small-gap layout.$normal-gap;
|
||||
padding: var(--gap-s) var(--gap-m);
|
||||
display: inline-block;
|
||||
line-height: 2.5;
|
||||
text-decoration: none;
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
}
|
||||
|
||||
> em {
|
||||
padding-block: layout.$small-gap;
|
||||
padding-block: var(--gap-s);
|
||||
font-style: inherit;
|
||||
background-color: colors.$yellow-600;
|
||||
transition: motion.$subtle background-color;
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
%form-input {
|
||||
@extend %base-form-input;
|
||||
padding: layout.$small-gap;
|
||||
padding: var(--gap-s);
|
||||
font: inherit;
|
||||
transition: motion.$subtle background-color;
|
||||
|
||||
|
|
@ -81,11 +81,11 @@
|
|||
> :last-child {
|
||||
@extend %form-input;
|
||||
flex-basis: 60%;
|
||||
margin-top: layout.$small-gap;
|
||||
margin-top: var(--gap-s);
|
||||
|
||||
@media screen and (min-width: layout.$breakpoint) {
|
||||
margin-top: 0;
|
||||
margin-left: layout.$normal-gap;
|
||||
margin-left: var(--gap-m);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
content: '\2771';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: #{layout.$large-gap * -1};
|
||||
left: calc(-1 * var(--gap-l));
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
opacity: 0.3;
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
|
||||
.form-checkbox {
|
||||
$size: 2rem;
|
||||
$gap: layout.$small-gap;
|
||||
$gap: var(--gap-s);
|
||||
|
||||
@extend %form-item;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
|
||||
.blanked-out-form {
|
||||
position: relative;
|
||||
padding: layout.$large-gap 0;
|
||||
padding: var(--gap-l) 0;
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
|
|
@ -220,8 +220,8 @@
|
|||
);
|
||||
mask-image: linear-gradient(
|
||||
transparent 0%,
|
||||
black #{layout.$large-gap},
|
||||
black calc(100% - #{layout.$large-gap}),
|
||||
black var(--gap-l),
|
||||
black calc(100% - var(--gap-l)),
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ body {
|
|||
|
||||
%title {
|
||||
@extend %content-gutter;
|
||||
margin-top: layout.$huge-gap;
|
||||
margin-bottom: layout.$large-gap;
|
||||
margin-top: var(--gap-2xl);
|
||||
margin-bottom: var(--gap-l);
|
||||
font-size: typography.$title-size;
|
||||
line-height: typography.$heading-line-height;
|
||||
text-align: center;
|
||||
|
|
@ -24,8 +24,8 @@ h1 {
|
|||
|
||||
%heading {
|
||||
@extend %content-gutter;
|
||||
margin-top: layout.$large-gap;
|
||||
margin-bottom: layout.$large-gap;
|
||||
margin-top: var(--gap-l);
|
||||
margin-bottom: var(--gap-l);
|
||||
font-size: typography.$heading-size;
|
||||
line-height: typography.$heading-line-height;
|
||||
overflow-wrap: anywhere;
|
||||
|
|
@ -72,11 +72,11 @@ dl {
|
|||
}
|
||||
|
||||
li {
|
||||
margin: layout.$small-gap 0;
|
||||
margin: var(--gap-s) 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
margin: layout.$normal-gap 0;
|
||||
margin: var(--gap-m) 0;
|
||||
font-weight: typography.$emphasized-weight;
|
||||
color: colors.$blue-800;
|
||||
|
||||
|
|
@ -86,12 +86,12 @@ dt {
|
|||
}
|
||||
|
||||
dd {
|
||||
margin: layout.$normal-gap 0 layout.$normal-gap layout.$large-gap;
|
||||
margin: var(--gap-m) 0 var(--gap-m) var(--gap-l);
|
||||
}
|
||||
|
||||
em {
|
||||
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 {
|
||||
background-color: colors.$orange-300;
|
||||
|
|
@ -120,8 +120,8 @@ blockquote {
|
|||
}
|
||||
|
||||
@extend %narrow-content-gutter;
|
||||
padding-left: layout.$small-gap;
|
||||
padding-right: layout.$small-gap;
|
||||
padding-left: var(--gap-s);
|
||||
padding-right: var(--gap-s);
|
||||
$border: 0.5em solid $color;
|
||||
border-top: $border;
|
||||
border-bottom: $border;
|
||||
|
|
@ -137,7 +137,7 @@ blockquote {
|
|||
.cta-link {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 0 layout.$normal-gap;
|
||||
padding: 0 var(--gap-m);
|
||||
max-width: layout.$narrow-content-width;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
|
@ -162,7 +162,7 @@ blockquote {
|
|||
ul.link-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: layout.$larger-gap layout.$normal-gap;
|
||||
gap: var(--gap-xl) var(--gap-m);
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
|
|
@ -174,7 +174,7 @@ ul.link-grid {
|
|||
}
|
||||
|
||||
&.large {
|
||||
gap: layout.$normal-gap;
|
||||
gap: var(--gap-m);
|
||||
|
||||
> li > a {
|
||||
display: flex;
|
||||
|
|
@ -182,7 +182,7 @@ ul.link-grid {
|
|||
|
||||
> img {
|
||||
max-width: 6rem;
|
||||
margin-right: layout.$normal-gap;
|
||||
margin-right: var(--gap-m);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -195,7 +195,7 @@ ul.link-grid {
|
|||
> li {
|
||||
> a {
|
||||
display: inline-block;
|
||||
padding: layout.$normal-gap;
|
||||
padding: var(--gap-m);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: colors.$gray-600;
|
||||
|
|
@ -205,7 +205,7 @@ ul.link-grid {
|
|||
|
||||
> img {
|
||||
display: block;
|
||||
margin: 0 auto layout.$small-gap auto;
|
||||
margin: 0 auto var(--gap-s) auto;
|
||||
max-width: 100%;
|
||||
max-height: 6rem;
|
||||
}
|
||||
|
|
@ -222,21 +222,21 @@ ul.link-grid {
|
|||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
@extend %content-gutter;
|
||||
margin-top: layout.$huge-gap;
|
||||
margin-bottom: layout.$huge-gap;
|
||||
margin-top: var(--gap-2xl);
|
||||
margin-bottom: var(--gap-2xl);
|
||||
|
||||
@media screen and (min-width: layout.$breakpoint) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: layout.$normal-gap;
|
||||
gap: var(--gap-m);
|
||||
justify-content: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
:any-link.post-card {
|
||||
display: block;
|
||||
padding-top: layout.$normal-gap;
|
||||
padding-bottom: layout.$normal-gap;
|
||||
padding-top: var(--gap-m);
|
||||
padding-bottom: var(--gap-m);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
background-color motion.$subtle,
|
||||
|
|
@ -244,8 +244,8 @@ ul.link-grid {
|
|||
box-shadow motion.$subtle;
|
||||
|
||||
@media screen and (min-width: layout.$breakpoint) {
|
||||
padding-left: layout.$normal-gap;
|
||||
padding-right: layout.$normal-gap;
|
||||
padding-left: var(--gap-m);
|
||||
padding-right: var(--gap-m);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -298,7 +298,7 @@ ul.link-grid {
|
|||
}
|
||||
|
||||
+ 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;
|
||||
|
||||
+ p {
|
||||
margin-top: layout.$small-gap;
|
||||
margin-top: var(--gap-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -322,7 +322,7 @@ ul.link-grid {
|
|||
|
||||
> img {
|
||||
display: block;
|
||||
margin: 0 auto layout.$small-gap auto;
|
||||
margin: 0 auto var(--gap-s) auto;
|
||||
max-height: 6rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
@use '../lib/typography';
|
||||
|
||||
.page-section {
|
||||
padding-top: layout.$large-gap;
|
||||
padding-bottom: layout.$large-gap;
|
||||
padding-top: var(--gap-l);
|
||||
padding-bottom: var(--gap-l);
|
||||
|
||||
@media screen and (min-width: layout.$breakpoint) {
|
||||
padding: layout.$large-gap;
|
||||
padding: var(--gap-l);
|
||||
}
|
||||
|
||||
&.inverse {
|
||||
|
|
@ -52,5 +52,5 @@
|
|||
}
|
||||
|
||||
main:not(.expand) + .page-section.footer {
|
||||
margin-top: layout.$huge-gap;
|
||||
margin-top: var(--gap-2xl);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
@use '../lib/typography';
|
||||
|
||||
@mixin header-item {
|
||||
padding: 0 layout.$large-gap;
|
||||
padding: 0 var(--gap-m);
|
||||
line-height: 4rem;
|
||||
}
|
||||
|
||||
// The site logo text. More specific styles for this element are also present
|
||||
// underneath .site-header.
|
||||
.site-logo {
|
||||
margin: 0 layout.$large-gap;
|
||||
margin: 0 var(--gap-l);
|
||||
text-transform: lowercase;
|
||||
white-space: nowrap;
|
||||
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
|
||||
a {
|
||||
display: block;
|
||||
padding: layout.$small-gap;
|
||||
padding: var(--gap-s);
|
||||
font-weight: typography.$emphasized-weight;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
|
@ -107,6 +107,10 @@
|
|||
.site-mobile-navigation {
|
||||
cursor: pointer;
|
||||
|
||||
li {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
> summary {
|
||||
display: block;
|
||||
@include header-item;
|
||||
|
|
@ -132,7 +136,7 @@
|
|||
content: '';
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: calc(100% - #{2 * layout.$normal-gap});
|
||||
width: calc(100% - 2 * var(--gap-m));
|
||||
height: 1px;
|
||||
background-color: colors.$gray-300;
|
||||
}
|
||||
|
|
@ -174,7 +178,7 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: layout.$normal-gap;
|
||||
gap: var(--gap-m);
|
||||
|
||||
.site-navigation a {
|
||||
text-align: right;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
> a {
|
||||
display: block;
|
||||
margin: 0 layout.$normal-gap;
|
||||
margin: 0 var(--gap-m);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
|
||||
@media screen and (min-width: layout.$breakpoint) {
|
||||
> .tab {
|
||||
padding: layout.$large-gap;
|
||||
padding: var(--gap-l);
|
||||
@include colors.card-shadow;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
.timeline {
|
||||
$stampSize: 4rem;
|
||||
$lineWeight: 0.2rem;
|
||||
$itemSpacing: layout.$normal-gap;
|
||||
$itemSpacing: var(--gap-m);
|
||||
|
||||
@extend %content-gutter;
|
||||
display: flex;
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
> time {
|
||||
display: block;
|
||||
padding-inline: layout.$small-gap;
|
||||
padding-inline: var(--gap-s);
|
||||
font-size: typography.$base-size;
|
||||
font-weight: typography.$normal-weight;
|
||||
}
|
||||
|
|
@ -60,15 +60,15 @@
|
|||
> .content {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
margin-left: layout.$normal-gap;
|
||||
margin-left: var(--gap-m);
|
||||
margin-bottom: $itemSpacing;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(100% + #{layout.$normal-gap + math.div($stampSize, 2)});
|
||||
bottom: #{-1 * $itemSpacing};
|
||||
right: calc(100% + var(--gap-m) + #{math.div($stampSize, 2)});
|
||||
bottom: calc(-1 * #{$itemSpacing});
|
||||
width: $lineWeight;
|
||||
background-color: colors.$gray-300;
|
||||
transform: translateX(50%);
|
||||
|
|
@ -78,14 +78,14 @@
|
|||
> h3:first-child {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
margin-left: layout.$large-gap;
|
||||
margin-left: var(--gap-l);
|
||||
line-height: $stampSize;
|
||||
text-align: left;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: calc(100% + #{layout.$small-gap});
|
||||
right: calc(100% + var(--gap-s));
|
||||
top: 50%;
|
||||
width: 4rem;
|
||||
height: $lineWeight;
|
||||
|
|
@ -136,12 +136,12 @@
|
|||
margin-bottom: 0;
|
||||
|
||||
> .content {
|
||||
padding-bottom: layout.$normal-gap;
|
||||
padding-bottom: var(--gap-m);
|
||||
}
|
||||
}
|
||||
|
||||
+ .timeline {
|
||||
margin-top: #{-1 * layout.$normal-gap};
|
||||
margin-top: calc(-1 * var(--gap-m));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -150,8 +150,8 @@
|
|||
display: grid;
|
||||
grid-template-columns: var(--x1, 50%) minmax(0, 1fr);
|
||||
grid-template-rows: var(--y1, 50%) minmax(0, 1fr);
|
||||
gap: layout.$tiny-gap;
|
||||
padding: layout.$tiny-gap;
|
||||
gap: var(--gap-xs);
|
||||
padding: var(--gap-xs);
|
||||
height: 27rem;
|
||||
background-color: colors.$blue-800;
|
||||
@include colors.card-shadow;
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
display: block;
|
||||
height: 15vmin;
|
||||
margin: layout.$huge-gap auto;
|
||||
margin: var(--gap-2xl) auto;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-miterlimit: 10;
|
||||
|
|
|
|||
56
styles/lib/_fluids.scss
Normal file
56
styles/lib/_fluids.scss
Normal 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)
|
||||
);
|
||||
}
|
||||
|
|
@ -1,9 +1,7 @@
|
|||
$tiny-gap: 0.3rem;
|
||||
$small-gap: 0.5rem;
|
||||
$normal-gap: 1.5rem;
|
||||
$large-gap: 2.5rem;
|
||||
$larger-gap: 4rem;
|
||||
$huge-gap: 6rem;
|
||||
@use "fluids" with (
|
||||
$lower-harmonic-ratio: 1.25,
|
||||
$upper-harmonic-ratio: 1.3
|
||||
);
|
||||
|
||||
$breakpoint: 80rem;
|
||||
|
||||
|
|
@ -18,7 +16,7 @@ $wide-content-width: 80rem;
|
|||
}
|
||||
|
||||
%narrow-content-gutter {
|
||||
margin: $normal-gap $normal-gap;
|
||||
margin: var(--gap-m);
|
||||
|
||||
@media screen and (min-width: $breakpoint) {
|
||||
margin-left: auto;
|
||||
|
|
@ -34,7 +32,7 @@ $wide-content-width: 80rem;
|
|||
}
|
||||
|
||||
%content-gutter {
|
||||
margin: $normal-gap $normal-gap;
|
||||
margin: var(--gap-m);
|
||||
|
||||
@media screen and (min-width: $breakpoint) {
|
||||
margin-left: auto;
|
||||
|
|
@ -50,6 +48,19 @@ $wide-content-width: 80rem;
|
|||
}
|
||||
|
||||
%wide-content-gutter {
|
||||
margin: $normal-gap auto;
|
||||
margin: var(--gap-m) auto;
|
||||
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)};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ $comfortaa-weights: (
|
|||
'Bold': 700,
|
||||
);
|
||||
|
||||
@mixin root-config {
|
||||
@mixin setup {
|
||||
@each $name, $weight in $comfortaa-weights {
|
||||
@font-face {
|
||||
font-family: 'Comfortaa';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue