jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 06:18:27 -04:00
Code Issues

clean up typography styles

Browse Source
This commit is contained in:
Jake Jarvis 2021-12-02 10:52:42 -05:00
parent ce1a24170a
commit cf9a8f742a
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
4 changed files with 23 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/sass/abstracts/_settings.scss
View File

@ -1,5 +1,4 @@
@use "sass:list"; @use "sass:list";
@use "sass:string";
// The maximum width of the content area: // The maximum width of the content area:
$max-width: 865px; $max-width: 865px;
@ -12,15 +11,9 @@ $webfont-sans: "Inter";
$webfont-sans-variable: "Inter var"; $webfont-sans-variable: "Inter var";
$webfont-mono: "Roboto Mono"; $webfont-mono: "Roboto Mono";
$webfont-mono-variable: "Roboto Mono var"; $webfont-mono-variable: "Roboto Mono var";
$webfont-unicode-latin-only: (
latin:
string.unquote(
"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
),
);
// System fonts: // System fonts:
// https://markdotto.com/2018/02/07/github-system-fonts/ // https://primer.style/design/foundations/typography#font-stack
// stylelint-disable-next-line value-keyword-case // stylelint-disable-next-line value-keyword-case
$system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif; $system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
$system-fonts-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; $system-fonts-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;

7
assets/sass/abstracts/_themes.scss
View File

@ -1,8 +1,5 @@
@use "sass:list";
@use "sass:map"; @use "sass:map";
@use "settings";
// Takes a map of CSS properties and theme keys (see below) and set both body.light and body.dark selectors. // Takes a map of CSS properties and theme keys (see below) and set both body.light and body.dark selectors.
// ex. @include themes.themed((color: "text", background-color: "background-inner")); // ex. @include themes.themed((color: "text", background-color: "background-inner"));
@mixin themed($properties) { @mixin themed($properties) {
@ -65,5 +62,5 @@ $themes: (
); );
// Icons (modified twemojis) // Icons (modified twemojis)
$icon-bulb-on: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#FFD983"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#CCD6DD"/><path d="M15.7 10.3a1 1 0 00-1.4 0L11 13.58l-3.3-3.3a1 1 0 10-1.4 1.42l3.7 3.7V26a1 1 0 102 0V15.41l3.7-3.7a1 1 0 000-1.42z" fill="#FFCC4D"/><path d="M17 31a2 2 0 01-2 2H7a2 2 0 01-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 32zm0-4a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 28z" fill="#CCD6DD"/></g></svg>'; $icon-bulb-on: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#FFD983"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#B9C9D9"/><path d="M15.7 10.3a1 1 0 00-1.4 0L11 13.58l-3.3-3.3a1 1 0 10-1.4 1.42l3.7 3.7V26a1 1 0 102 0V15.41l3.7-3.7a1 1 0 000-1.42z" fill="#FFCC4D"/><path d="M17 31a2 2 0 01-2 2H7a2 2 0 01-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 32zm0-4a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 28z" fill="#CCD6DD"/></g></svg>';
$icon-bulb-off: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill-rule="nonzero" fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#CCCBCB"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#CCD6DD"/><path d="M15.7 10.3a1 1 0 00-1.4 0L11 13.58l-3.3-3.3a1 1 0 10-1.4 1.42l3.7 3.7V26a1 1 0 102 0V15.41l3.7-3.7a1 1 0 000-1.42z" fill="#7D7A72"/><path d="M17 31a2 2 0 01-2 2H7a2 2 0 01-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 32zm0-4a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 28z" fill="#CCD6DD"/></g></svg>'; $icon-bulb-off: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill-rule="nonzero" fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#CCCBCB"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#CCD6DD"/><path d="M15.7 10.3a1 1 0 00-1.4 0L11 13.58l-3.3-3.3a1 1 0 10-1.4 1.42l3.7 3.7V26a1 1 0 102 0V15.41l3.7-3.7a1 1 0 000-1.42z" fill="#7D7A72"/><path d="M17 31a2 2 0 01-2 2H7a2 2 0 01-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 32zm0-4a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 28z" fill="#CCD6DD"/></g></svg>';

39
assets/sass/abstracts/_typography.scss
View File

@ -1,9 +1,14 @@
@use "settings";
@use "~@fontsource/inter/scss/mixins" as Inter; @use "~@fontsource/inter/scss/mixins" as Inter;
@use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono; @use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono;
@use "~@fontsource/comic-neue/scss/mixins" as ComicNeue; @use "~@fontsource/comic-neue/scss/mixins" as ComicNeue;
// stylelint-disable scss/operator-no-unspaced
// prettier-ignore
$unicode-latin-only: (
latin: (U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD),
);
// stylelint-enable scss/operator-no-unspaced
/*! /*!
* Inter typeface - https://rsms.me/inter/ * Inter typeface - https://rsms.me/inter/
* *
@ -12,16 +17,12 @@
*/ */
// Variable // Variable
@include Inter.fontFaceVariable( @include Inter.fontFaceVariable($fontName: "Inter var", $type: "full", $unicodeMap: $unicode-latin-only);
$fontName: "Inter var",
$type: "full",
$unicodeMap: settings.$webfont-unicode-latin-only
);
// Legacy // Legacy
@include Inter.fontFace($fontName: "Inter", $weight: 400, $unicodeMap: settings.$webfont-unicode-latin-only); @include Inter.fontFace($fontName: "Inter", $weight: 400, $unicodeMap: $unicode-latin-only);
@include Inter.fontFace($fontName: "Inter", $weight: 500, $unicodeMap: settings.$webfont-unicode-latin-only); @include Inter.fontFace($fontName: "Inter", $weight: 500, $unicodeMap: $unicode-latin-only);
@include Inter.fontFace($fontName: "Inter", $weight: 700, $unicodeMap: settings.$webfont-unicode-latin-only); @include Inter.fontFace($fontName: "Inter", $weight: 700, $unicodeMap: $unicode-latin-only);
/*! /*!
* Roboto Mono typeface - https://github.com/googlefonts/robotomono * Roboto Mono typeface - https://github.com/googlefonts/robotomono
@ -31,17 +32,13 @@
*/ */
// Variable // Variable
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $unicodeMap: settings.$webfont-unicode-latin-only); @include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $unicodeMap: $unicode-latin-only);
@include RobotoMono.fontFaceVariable( @include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $style: italic, $unicodeMap: $unicode-latin-only);
$fontName: "Roboto Mono var",
$style: italic,
$unicodeMap: settings.$webfont-unicode-latin-only
);
// Legacy // Legacy
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 400, $unicodeMap: settings.$webfont-unicode-latin-only); @include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 400, $unicodeMap: $unicode-latin-only);
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 500, $unicodeMap: settings.$webfont-unicode-latin-only); @include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 500, $unicodeMap: $unicode-latin-only);
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 700, $unicodeMap: settings.$webfont-unicode-latin-only); @include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 700, $unicodeMap: $unicode-latin-only);
/*! /*!
* Comic Neue typeface - http://comicneue.com/ * Comic Neue typeface - http://comicneue.com/
@ -50,5 +47,5 @@
* Licensed under the SIL Open Font License, Version 1.1. * Licensed under the SIL Open Font License, Version 1.1.
*/ */
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400, $unicodeMap: settings.$webfont-unicode-latin-only); @include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400, $unicodeMap: $unicode-latin-only);
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700, $unicodeMap: settings.$webfont-unicode-latin-only); @include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700, $unicodeMap: $unicode-latin-only);

4
assets/sass/components/_global.scss
View File

@ -27,11 +27,11 @@ body {
// set themed lightbulb icons manually // set themed lightbulb icons manually
&.light button.dark-mode-toggle { &.light button.dark-mode-toggle {
background-image: url(themes.$icon-bulb-on); background-image: url("data:image/svg+xml;charset=utf-8,#{themes.$icon-bulb-on}");
} }
&.dark button.dark-mode-toggle { &.dark button.dark-mode-toggle {
background-image: url(themes.$icon-bulb-off); background-image: url("data:image/svg+xml;charset=utf-8,#{themes.$icon-bulb-off}");
} }
} }