danog/sass-site
1
0
Fork 0
mirror of https://github.com/danog/sass-site.git synced 2024-11-30 04:29:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

run sass migrator and manual clean up

Browse Source
This commit is contained in:
Stacy Kvernmo 2023-01-12 12:19:42 -06:00
parent 0c042388f5
commit a9e42420bb
23 changed files with 252 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
source/assets/sass/_breakpoints.scss
View File

@ -1,3 +1,5 @@
@use "functions";
$sl-breakpoint--small: 480px !default;
$sl-breakpoint--medium: 640px !default;
$sl-breakpoint--large: 960px !default;
@ -12,13 +14,13 @@ $sl-breakpoints: (
);
@mixin sl-breakpoint($breakpoint) {
@media only screen and (min-width: #{sl-px-to-em($breakpoint)}) {
@media only screen and (min-width: #{functions.sl-px-to-em($breakpoint)}) {
@content;
}
}
@mixin sl-breakpoint-max($breakpoint) {
@media only screen and (max-width: #{sl-px-to-em($breakpoint)}) {
@media only screen and (max-width: #{functions.sl-px-to-em($breakpoint)}) {
@content;
}
}

8
source/assets/sass/_functions.scss
View File

@ -1,11 +1,13 @@
@use "sass:math";
@function sl-px-to-rem($pixels, $font-size: 16px) {
@return ($pixels / $font-size * 1rem);
@return (math.div($pixels, $font-size) * 1rem);
}
@function sl-px-to-em($pixels, $font-size: 16px) {
@return ($pixels / $font-size * 1em);
@return (math.div($pixels, $font-size) * 1em);
}
@function sl-px-to-unitless($pixels, $font-size: 16px) {
@return ($pixels / $font-size);
@return math.div($pixels, $font-size);
}

27
source/assets/sass/components/_alerts.scss
View File

@ -1,13 +1,18 @@
@use "sass:color";
@use "../functions";
@use "../visual-design/theme";
@use "../visual-design/typography";
.sl-c-alert {
padding: {
top: sl-px-to-rem(12px);
bottom: sl-px-to-rem(12px);
top: functions.sl-px-to-rem(12px);
bottom: functions.sl-px-to-rem(12px);
}
text-align: center;
background: darken($sl-color--hopbush, 10%);
color: $sl-color--white;
font-size: $sl-font-size--small;
background: color.adjust(theme.$sl-color--hopbush, $lightness: -10%);
color: theme.$sl-color--white;
font-size: typography.$sl-font-size--small;
p,
ul,
@ -28,22 +33,22 @@
}
a {
border-bottom-color: rgba($sl-color--white, 0.5);
font-weight: $sl-font-weight--bold;
color: $sl-color--white;
border-bottom-color: rgba(theme.$sl-color--white, 0.5);
font-weight: typography.$sl-font-weight--bold;
color: theme.$sl-color--white;
&:hover,
&:focus {
border-bottom-color: rgba($sl-color--white, 0.75);
border-bottom-color: rgba(theme.$sl-color--white, 0.75);
background: rgba(black, 0.0625);
}
&:active {
border-bottom-color: $sl-color--white;
border-bottom-color: theme.$sl-color--white;
}
}
&--info {
background: $sl-color--midnight-blue;
background: theme.$sl-color--midnight-blue;
}
}

6
source/assets/sass/components/_attribution.scss
View File

@ -1,6 +1,8 @@
@use "../visual-design/typography";
.sl-c-attribution {
font-weight: $sl-font-weight--light;
font-size: $sl-font-size--small;
font-weight: typography.$sl-font-weight--light;
font-size: typography.$sl-font-size--small;
&:first-child {
text-align: center;

26
source/assets/sass/components/_buttons.scss
View File

@ -1,43 +1,47 @@
@use "sass:color";
@use "../functions";
@use "../visual-design/theme";
.sl-c-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
border: 0 {
radius: sl-px-to-rem(4px); /* stylelint-disable-line property-no-unknown */
radius: functions.sl-px-to-rem(4px); /* stylelint-disable-line property-no-unknown */
}
padding: sl-px-to-rem(12px) sl-px-to-rem(16px);
background: $sl-color--iron;
box-shadow: 0 2px 1px rgba($sl-color--midnight-blue, 0.125);
color: darken($sl-color--hopbush, 10%);
padding: functions.sl-px-to-rem(12px) functions.sl-px-to-rem(16px);
background: theme.$sl-color--iron;
box-shadow: 0 2px 1px rgba(theme.$sl-color--midnight-blue, 0.125);
color: color.adjust(theme.$sl-color--hopbush, $lightness: -10%);
cursor: pointer;
&:hover,
&:focus {
color: darken($sl-color--bouquet, 10%);
color: color.adjust(theme.$sl-color--bouquet, $lightness: -10%);
}
&:active {
color: darken($sl-color--venus, 10%);
color: color.adjust(theme.$sl-color--venus, $lightness: -10%);
}
&--primary {
background-color: darken($sl-color--hopbush, 10%);
background-color: color.adjust(theme.$sl-color--hopbush, $lightness: -10%);
&,
&:hover,
&:focus,
&:active {
color: $sl-color--white;
color: theme.$sl-color--white;
}
&:hover,
&:focus {
background-color: darken($sl-color--bouquet, 10%);
background-color: color.adjust(theme.$sl-color--bouquet, $lightness: -10%);
}
&:active {
background-color: darken($sl-color--venus, 10%);
background-color: color.adjust(theme.$sl-color--venus, $lightness: -10%);
}
}
}

20
source/assets/sass/components/_callouts.scss
View File

@ -1,17 +1,21 @@
@use "sass:color";
@use "../breakpoints";
@use "../visual-design/theme";
.sl-c-callout {
margin: 1.5rem 0;
padding: 1.5rem 1rem;
background: lighten($sl-color--pale-sky, 60%);
background: color.adjust(theme.$sl-color--pale-sky, $lightness: 60%);
border-radius: 2px;
&--warning {
background: lighten($sl-color--hopbush, 38%);
border: 1px solid lighten($sl-color--hopbush, 27%);
background: color.adjust(theme.$sl-color--hopbush, $lightness: 38%);
border: 1px solid color.adjust(theme.$sl-color--hopbush, $lightness: 27%);
}
&--fun-fact {
background: lighten($sl-color--patina, 47%);
border: 1px solid lighten($sl-color--patina, 32%);
background: color.adjust(theme.$sl-color--patina, $lightness: 47%);
border: 1px solid color.adjust(theme.$sl-color--patina, $lightness: 32%);
}
&--function {
@ -32,7 +36,7 @@
padding: 0.8rem;
.sl-c-callout & {
background: lighten($sl-color--pale-sky, 53%);
background: color.adjust(theme.$sl-color--pale-sky, $lightness: 53%);
}
}
@ -45,7 +49,7 @@
}
}
@include sl-breakpoint--medium {
@include breakpoints.sl-breakpoint--medium {
.sl-l-container--overview {
font-size: 1.25rem;
@ -55,7 +59,7 @@
}
}
@include sl-breakpoint--large {
@include breakpoints.sl-breakpoint--large {
.sl-c-callout--function {
padding-left: 2.25rem;

7
source/assets/sass/components/_inputs.scss
View File

@ -1,11 +1,14 @@
@use "../breakpoints";
@use "../visual-design/theme";
input {
display: block;
margin: 0 1rem;
border: 1px solid $sl-color--iron;
border: 1px solid theme.$sl-color--iron;
padding: 0.25rem 1rem;
width: 100%;
@include sl-breakpoint--large {
@include breakpoints.sl-breakpoint--large {
top: 0.5rem;
margin: 0;
}

14
source/assets/sass/components/_introduction.scss
View File

@ -1,9 +1,13 @@
.sl-c-introduction {
color: $sl-color--patina;
font-weight: $sl-font-weight--light;
@use "../breakpoints";
@use "../visual-design/theme";
@use "../visual-design/typography";
@include sl-breakpoint--medium {
font-size: $sl-font-size--xx-large;
.sl-c-introduction {
color: theme.$sl-color--patina;
font-weight: typography.$sl-font-weight--light;
@include breakpoints.sl-breakpoint--medium {
font-size: typography.$sl-font-size--xx-large;
}
&--center {

6
source/assets/sass/components/_link-header.scss
View File

@ -1,3 +1,5 @@
@use "../visual-design/theme";
h1,
h2,
h3,
@ -48,7 +50,7 @@ h6 {
@keyframes highlight-header {
from {
background-color: $sl-color--dawn-pink;
background-color: theme.$sl-color--dawn-pink;
}
to {
@ -69,7 +71,7 @@ h6 {
@keyframes highlight-signature {
from {
background-color: $sl-color--dawn-pink;
background-color: theme.$sl-color--dawn-pink;
}
to {

21
source/assets/sass/components/_lists.scss
View File

@ -1,3 +1,8 @@
@use "sass:color";
@use "../breakpoints";
@use "../visual-design/theme";
@use "../visual-design/typography";
.sl-c-list {
&,
&-horizontal-wrapper ul,
@ -8,13 +13,13 @@
}
&-horizontal-wrapper {
@include sl-breakpoint--medium {
@include breakpoints.sl-breakpoint--medium {
// add margin-bottom space
// to the twitter follow button
margin-bottom: 1rem;
}
@include sl-breakpoint--large {
@include breakpoints.sl-breakpoint--large {
ul {
display: flex;
margin: {
@ -64,15 +69,15 @@
width: 100%;
&:hover {
background-color: $sl-color--dawn-pink;
background-color: theme.$sl-color--dawn-pink;
}
}
li.overview a {
font-size: $sl-font-size--small;
font-size: typography.$sl-font-size--small;
&:not(.selected) {
color: transparentize($sl-color--midnight-blue, 0.3);
color: color.adjust(theme.$sl-color--midnight-blue, $alpha: -0.3);
}
}
@ -105,7 +110,7 @@
font-weight: bold;
&:not(.section) {
background-color: $sl-color--dawn-pink;
background-color: theme.$sl-color--dawn-pink;
}
}
}
@ -125,7 +130,7 @@
}
> div {
border-left: 1px solid $sl-color--iron;
border-left: 1px solid theme.$sl-color--iron;
padding: 0 1rem;
&:first-child {
@ -135,7 +140,7 @@
.compatibility {
font-weight: 600;
color: $sl-color--midnight-blue;
color: theme.$sl-color--midnight-blue;
display: block;
+ div {

9
source/assets/sass/components/_navigation.scss
View File

@ -1,3 +1,6 @@
@use "../breakpoints";
@use "../visual-design/theme";
.sl-l-medium-holy-grail__body.sl-js-nav--is-sticky
.sl-c-list-navigation-wrapper {
position: sticky;
@ -5,7 +8,7 @@
bottom: 0;
overflow-y: auto;
@include sl-breakpoint--large {
@include breakpoints.sl-breakpoint--large {
height: 100vh;
}
}
@ -22,7 +25,7 @@
&:focus {
transform: translateY(0);
background: $sl-color--hopbush;
color: $sl-color--white;
background: theme.$sl-color--hopbush;
color: theme.$sl-color--white;
}
}

29
source/assets/sass/components/_pop-stripe.scss
View File

@ -1,30 +1,37 @@
$sl-colors: $sl-color--hopbush $sl-color--bouquet $sl-color--venus
$sl-color--patina $sl-color--nebula $sl-color--white $sl-color--dawn-pink
$sl-color--wafer $sl-color--iron $sl-color--regent-grey $sl-color--pale-sky
$sl-color--midnight-blue;
@use "sass:math";
@use "sass:list";
@use "sass:meta";
@use "../functions";
@use "../visual-design/theme";
$sl-colors: theme.$sl-color--hopbush theme.$sl-color--bouquet theme.$sl-color--venus
theme.$sl-color--patina theme.$sl-color--nebula theme.$sl-color--white theme.$sl-color--dawn-pink
theme.$sl-color--wafer theme.$sl-color--iron theme.$sl-color--regent-grey theme.$sl-color--pale-sky
theme.$sl-color--midnight-blue;
@function stripes($position, $sl-colors) {
/* stylelint-disable annotation-no-unknown */
$sl-colors: if(
type-of($sl-colors) != 'list',
meta.type-of($sl-colors) != 'list',
compact($sl-colors),
$sl-colors
);
/* stylelint-enable annotation-no-unknown */
$gradient: compact();
$width: 100% / length($sl-colors);
$gradient: ();
$width: math.div(100%, list.length($sl-colors));
@for $i from 1 through length($sl-colors) {
$pop: nth($sl-colors, $i);
@for $i from 1 through list.length($sl-colors) {
$pop: list.nth($sl-colors, $i);
$new: $pop ($width * ($i - 1)), $pop ($width * $i);
$gradient: join($gradient, $new, comma);
$gradient: list.join($gradient, $new, comma);
}
@return linear-gradient($position, $gradient);
}
.sl-c-pop-stripe {
height: sl-px-to-rem(4px);
height: functions.sl-px-to-rem(4px);
background-image: stripes((to right), ($sl-colors));
background-size: 100%;
}

20
source/assets/sass/components/_sass-syntax-switcher.scss
View File

@ -1,3 +1,7 @@
@use "../functions";
@use "../visual-design/theme";
@use "../visual-design/typography";
.ui-helper-reset {
line-height: inherit;
}
@ -6,7 +10,7 @@
margin: 0;
a {
color: $sl-color--pale-sky;
color: theme.$sl-color--pale-sky;
cursor: text;
}
@ -50,7 +54,7 @@
}
.ui-tabs-nav {
font-size: $sl-font-size--small;
font-size: typography.$sl-font-size--small;
margin-top: -1rem;
margin-left: -1em;
@ -80,10 +84,10 @@
}
a::before {
color: $sl-color--regent-grey;
color: theme.$sl-color--regent-grey;
content: '\21d2';
font-size: $sl-font-size--large;
font-weight: $sl-font-weight--bold;
font-size: typography.$sl-font-size--large;
font-weight: typography.$sl-font-weight--bold;
left: -1.2em;
position: absolute;
top: 0.75rem;
@ -169,7 +173,7 @@ html .ui-button.ui-state-disabled:active {
top: 0.45rem;
margin: 0;
text-transform: uppercase;
color: $sl-color--hopbush;
color: theme.$sl-color--hopbush;
&,
* {
@ -226,13 +230,13 @@ html .ui-button.ui-state-disabled:active {
}
}
@media screen and (min-width: sl-px-to-rem(1500px)) {
@media screen and (min-width: functions.sl-px-to-rem(1500px)) {
body.documentation {
@include -split-css-tabs;
}
}
@media screen and (min-width: sl-px-to-rem(1000px)) {
@media screen and (min-width: functions.sl-px-to-rem(1000px)) {
body.guide {
@include -split-css-tabs;
}

6
source/assets/sass/components/_tables.scss
View File

@ -1,4 +1,6 @@
$table-cell-padding: 1rem / 2;
@use "../breakpoints";
$table-cell-padding: 1rem * 0.5;
.sl-c-table {
margin: 1.5rem 0;
@ -18,7 +20,7 @@ $table-cell-padding: 1rem / 2;
text-align: left;
}
@include sl-breakpoint--medium-max {
@include breakpoints.sl-breakpoint--medium-max {
&-responsive {
margin-bottom: 1.5rem;
width: 100%;

17
source/assets/sass/layout/_containers.scss
View File

@ -1,24 +1,27 @@
@use "../breakpoints";
@use "../functions";
.sl-l-container {
margin: {
right: auto;
left: auto;
}
padding: {
right: sl-px-to-rem(16px);
left: sl-px-to-rem(16px);
right: functions.sl-px-to-rem(16px);
left: functions.sl-px-to-rem(16px);
}
max-width: sl-px-to-rem(1920px);
max-width: functions.sl-px-to-rem(1920px);
@include sl-breakpoint--small {
@include breakpoints.sl-breakpoint--small {
padding: {
right: sl-px-to-rem(32px);
left: sl-px-to-rem(32px);
right: functions.sl-px-to-rem(32px);
left: functions.sl-px-to-rem(32px);
}
}
&--small {
max-width: sl-px-to-rem(960px);
max-width: functions.sl-px-to-rem(960px);
}
.sl-l-container {

37
source/assets/sass/layout/_grid-system.scss
View File

@ -1,3 +1,8 @@
@use "sass:math";
@use "../breakpoints";
@use "../functions";
.sl-l-grid {
&,
&--flex-columns > .sl-l-grid__column {
@ -14,10 +19,10 @@
}
}
@each $breakpoint, $size in $sl-breakpoints {
@each $breakpoint, $size in breakpoints.$sl-breakpoints {
$prefix: if(($breakpoint == 'none'), '', '#{$breakpoint}-');
@include sl-breakpoint-set($breakpoint, $size) {
@include breakpoints.sl-breakpoint-set($breakpoint, $size) {
.sl-l-#{$prefix}grid {
&--top {
align-items: flex-start;
@ -77,7 +82,7 @@
@for $i from 2 through 12 {
&--divide-by-#{$i} > .sl-l-grid__column {
flex: 0 0 (100 / $i) * 1%;
flex: 0 0 math.div(100, $i) * 1%;
}
}
@ -108,7 +113,7 @@
@for $i from 1 through 11 {
&--#{$i}-of-12 {
width: (100% / 12) * $i !important;
width: math.div(100%, 12) * $i !important;
}
}
@ -119,41 +124,41 @@
&--gutters {
margin: {
right: -(sl-px-to-rem(16px));
left: -(sl-px-to-rem(16px));
right: -(functions.sl-px-to-rem(16px));
left: -(functions.sl-px-to-rem(16px));
}
> .sl-l-grid__column {
padding: {
right: sl-px-to-rem(16px);
left: sl-px-to-rem(16px);
right: functions.sl-px-to-rem(16px);
left: functions.sl-px-to-rem(16px);
}
}
&-large {
margin: {
right: -(sl-px-to-rem(32px));
left: -(sl-px-to-rem(32px));
right: -(functions.sl-px-to-rem(32px));
left: -(functions.sl-px-to-rem(32px));
}
> .sl-l-grid__column {
padding: {
right: sl-px-to-rem(32px);
left: sl-px-to-rem(32px);
right: functions.sl-px-to-rem(32px);
left: functions.sl-px-to-rem(32px);
}
}
}
&-small {
margin: {
right: -(sl-px-to-rem(8px));
left: -(sl-px-to-rem(8px));
right: -(functions.sl-px-to-rem(8px));
left: -(functions.sl-px-to-rem(8px));
}
> .sl-l-grid__column {
padding: {
right: sl-px-to-rem(8px);
left: sl-px-to-rem(8px);
right: functions.sl-px-to-rem(8px);
left: functions.sl-px-to-rem(8px);
}
}
}

17
source/assets/sass/layout/_holy-grail.scss
View File

@ -1,7 +1,10 @@
@each $breakpoint, $size in $sl-breakpoints {
@use "../breakpoints";
@use "../functions";
@each $breakpoint, $size in breakpoints.$sl-breakpoints {
$prefix: if(($breakpoint == 'none'), '', '#{$breakpoint}-');
@include sl-breakpoint-set($breakpoint, $size) {
@include breakpoints.sl-breakpoint-set($breakpoint, $size) {
.sl-l-#{$prefix}holy-grail {
&,
&__body {
@ -29,8 +32,8 @@
&__navigation,
&__complementary {
padding: {
right: sl-px-to-rem(32px);
left: sl-px-to-rem(32px);
right: functions.sl-px-to-rem(32px);
left: functions.sl-px-to-rem(32px);
}
}
@ -39,16 +42,16 @@
}
&__navigation {
flex: 0 0 sl-px-to-rem(240px);
flex: 0 0 functions.sl-px-to-rem(240px);
order: -1;
}
&__complementary {
order: 1;
flex: 0 0 sl-px-to-rem(480px);
flex: 0 0 functions.sl-px-to-rem(480px);
&--contents {
flex: 0 0 sl-px-to-rem(240px);
flex: 0 0 functions.sl-px-to-rem(240px);
order: -1;
}
}

18
source/assets/sass/regions/_banner.scss
View File

@ -1,3 +1,7 @@
@use "../breakpoints";
@use "../functions";
@use "../visual-design/typography";
.sl-r-banner {
position: relative;
@ -16,29 +20,29 @@
img {
display: inline-block;
margin: 0;
height: sl-px-to-rem(48px);
height: functions.sl-px-to-rem(48px);
@include sl-breakpoint--medium {
height: sl-px-to-rem(96px);
@include breakpoints.sl-breakpoint--medium {
height: functions.sl-px-to-rem(96px);
}
}
&__navigation {
font-weight: $sl-font-weight--bold;
font-weight: typography.$sl-font-weight--bold;
ul {
position: relative;
margin: 0 -1rem !important;
@include sl-breakpoint--medium {
right: -(sl-px-to-rem(16px));
@include breakpoints.sl-breakpoint--medium {
right: -(functions.sl-px-to-rem(16px));
margin: 0 !important;
}
}
a {
display: block;
padding: sl-px-to-rem(12px) sl-px-to-rem(16px);
padding: functions.sl-px-to-rem(12px) functions.sl-px-to-rem(16px);
border: 0;
}
}

73
source/assets/sass/sass.scss
View File

@ -3,43 +3,36 @@
@charset 'utf-8';
/* prettier-ignore */
@import
'vendor/normalize',
'vendor/sanitize',
'vendor/html5-boilerplate',
'vendor/syntax-accessible',
'vendor/jquery-ui-custom/jquery-ui',
'vendor/jquery-ui-custom/jquery-ui-structure',
'vendor/jquery-ui-custom/jquery-ui-theme',
'vendor/typedoc/style',
'vendor/typedoc/highlight',
'vendor/typedoc/icons',
'functions',
'breakpoints',
'visual-design/theme',
'visual-design/typography',
'layout/containers',
'layout/grid-system',
'layout/holy-grail',
'layout/sections',
'components/alerts',
'components/attribution',
'components/buttons',
'components/callouts',
'components/docsearch',
'components/navigation',
'components/inputs',
'components/introduction',
'components/link-header',
'components/lists',
'components/mac-stadium-icon',
'components/pop-stripe',
'components/sass-syntax-switcher',
'components/tables',
'regions/banner';
@use 'vendor/normalize';
@use 'vendor/sanitize';
@use 'vendor/html5-boilerplate';
@use 'vendor/syntax-accessible';
@use 'vendor/jquery-ui-custom/jquery-ui';
@use 'vendor/jquery-ui-custom/jquery-ui-structure';
@use 'vendor/jquery-ui-custom/jquery-ui-theme';
@use 'vendor/typedoc/style';
@use 'vendor/typedoc/highlight';
@use 'vendor/typedoc/icons';
@use 'functions';
@use 'breakpoints';
@use 'visual-design/theme';
@use 'visual-design/typography';
@use 'layout/containers';
@use 'layout/grid-system';
@use 'layout/holy-grail';
@use 'layout/sections';
@use 'components/alerts';
@use 'components/attribution';
@use 'components/buttons';
@use 'components/callouts';
@use 'components/docsearch';
@use 'components/navigation';
@use 'components/inputs';
@use 'components/introduction';
@use 'components/link-header';
@use 'components/lists';
@use 'components/mac-stadium-icon';
@use 'components/pop-stripe';
@use 'components/sass-syntax-switcher';
@use 'components/tables';
@use 'regions/banner';

4
source/assets/sass/vendor/_syntax-accessible.scss vendored
View File

@ -1,6 +1,8 @@
@use "../functions";
// Stylesheet pulled from Rogue stylesheet with colours updated for a11y
.highlight table td { padding: sl-px-to-rem(5px); }
.highlight table td { padding: functions.sl-px-to-rem(5px); }
.highlight table pre { margin: 0; }
.highlight .cm {
color: #656556;

4
source/assets/sass/vendor/typedoc/_highlight.scss vendored
View File

@ -1,5 +1,7 @@
@use '../syntax-accessible';
// Colors updated to match the standard Sass styling.
.typedoc pre {@extend .highlight}
.typedoc pre { @extend .highlight; }
.hl-0 { @extend .k; }
.hl-1 { @extend .p !optional; }

18
source/assets/sass/visual-design/_theme.scss
View File

@ -1,3 +1,9 @@
@use "sass:math";
@use "sass:color";
@use "sass:list";
@use "../functions";
$sl-color--hopbush: #c69 !default;
$sl-color--bouquet: #b37399 !default;
$sl-color--venus: #998099 !default;
@ -26,9 +32,9 @@ $sl-colors: (
);
@function luminance($color) {
$red: nth($linear-channel-values, red($color) + 1);
$green: nth($linear-channel-values, green($color) + 1);
$blue: nth($linear-channel-values, blue($color) + 1);
$red: list.nth($linear-channel-values, color.red($color) + 1);
$green: list.nth($linear-channel-values, color.green($color) + 1);
$blue: list.nth($linear-channel-values, color.blue($color) + 1);
@return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}
@ -37,7 +43,7 @@ $sl-colors: (
$backLum: luminance($back) + 0.05;
$foreLum: luminance($front) + 0.05;
@return max($backLum, $foreLum) / min($backLum, $foreLum);
@return math.div(max($backLum, $foreLum), min($backLum, $foreLum));
}
@function choose-contrast-color($color) {
@ -357,8 +363,8 @@ a {
code,
pre {
border-radius: sl-px-to-em(2px);
color: darken($sl-color--pale-sky, 25%);
border-radius: functions.sl-px-to-em(2px);
color: color.adjust($sl-color--pale-sky, $lightness: -25%);
a & {
color: inherit;

39
source/assets/sass/visual-design/_typography.scss
View File

@ -1,3 +1,8 @@
@use "sass:math";
@use "../breakpoints";
@use "../functions";
$sl-font-weight--light: 300 !default;
$sl-font-weight--regular: 400 !default;
$sl-font-weight--bold: 600 !default;
@ -13,14 +18,14 @@ $sl-font-weights: (
}
}
$sl-font-size--x-small: sl-px-to-rem(14px) !default;
$sl-font-size--small: sl-px-to-rem(16px) !default;
$sl-font-size--medium: sl-px-to-rem(18px) !default;
$sl-font-size--large: sl-px-to-rem(20px) !default;
$sl-font-size--x-large: sl-px-to-rem(24px) !default;
$sl-font-size--xx-large: sl-px-to-rem(28px) !default;
$sl-font-size--xxx-large: sl-px-to-rem(32px) !default;
$sl-font-size--xxxx-large: sl-px-to-rem(80px) !default;
$sl-font-size--x-small: functions.sl-px-to-rem(14px) !default;
$sl-font-size--small: functions.sl-px-to-rem(16px) !default;
$sl-font-size--medium: functions.sl-px-to-rem(18px) !default;
$sl-font-size--large: functions.sl-px-to-rem(20px) !default;
$sl-font-size--x-large: functions.sl-px-to-rem(24px) !default;
$sl-font-size--xx-large: functions.sl-px-to-rem(28px) !default;
$sl-font-size--xxx-large: functions.sl-px-to-rem(32px) !default;
$sl-font-size--xxxx-large: functions.sl-px-to-rem(80px) !default;
$sl-font-sizes: (
small: $sl-font-size--small,
medium: $sl-font-size--medium,
@ -137,7 +142,7 @@ h6 {
h1,
h2,
caption {
letter-spacing: -#{sl-px-to-em(0.5px)};
letter-spacing: -#{functions.sl-px-to-em(0.5px)};
}
h1,
@ -151,11 +156,11 @@ h1 {
line-height: 1;
text-align: center;
@include sl-breakpoint--medium {
@include breakpoints.sl-breakpoint--medium {
font-size: $sl-font-size--xxx-large;
}
@include sl-breakpoint--large {
@include breakpoints.sl-breakpoint--large {
font-size: $sl-font-size--xxxx-large;
}
}
@ -172,11 +177,11 @@ h2,
caption {
font-size: $sl-font-size--x-large;
@include sl-breakpoint--medium {
@include breakpoints.sl-breakpoint--medium {
font-size: $sl-font-size--xx-large;
}
@include sl-breakpoint--large {
@include breakpoints.sl-breakpoint--large {
font-size: $sl-font-size--xxx-large;
}
}
@ -192,9 +197,9 @@ footer {
}
.caps {
font-size: sl-px-to-em(14px);
font-size: functions.sl-px-to-em(14px);
text-transform: uppercase;
letter-spacing: sl-px-to-em(1px);
letter-spacing: functions.sl-px-to-em(1px);
line-height: 0;
}
@ -205,7 +210,7 @@ pre {
code {
// Scale the code font size down, because the font itself is much larger.
font-size: ($sl-font-size--small / $sl-font-size--medium) * 1em;
font-size: math.div($sl-font-size--small, $sl-font-size--medium) * 1em;
line-height: 1;
nav & {
@ -213,7 +218,7 @@ code {
}
p & {
@include sl-breakpoint--x-large {
@include breakpoints.sl-breakpoint--x-large {
white-space: nowrap;
}
}