jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-15 05:25:33 -04:00
Code Issues Activity

clean up SCSS and correct some syntax

Browse Source
This commit is contained in:
Jake Jarvis
2021-08-17 12:50:05 -04:00
parent ed10962814
commit 16bff324a2
10 changed files with 224 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
assets/sass/abstracts/_functions.scss
View File

@@ -20,55 +20,27 @@
@return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
}
// Returns a list of strings from a given string separated by a given
// separator (defaults to comma).
// https://stackoverflow.com/a/65853667/1438024
@function str-split($str, $substr: ",") {
@function str-split($str, $separator: ",") {
// return immediately if this function isn't necessary
@if (string.index("#{$str}", "#{$substr}") == null) {
@if (string.index("#{$str}", "#{$separator}") == null) {
@return $str;
}
$list: ();
$str-list: ();
@while string.index("#{$str}", "#{$substr}") != null {
@if (string.index("#{$str}", "#{$substr}") > 1) {
$list: list.append($list, string.slice("#{$str}", 1, string.index("#{$str}", "#{$substr}") - 1));
@while string.index("#{$str}", "#{$separator}") != null {
@if (string.index("#{$str}", "#{$separator}") > 1) {
$str-list: list.append($str-list, string.slice("#{$str}", 1, string.index("#{$str}", "#{$separator}") - 1));
}
$str: string.slice("#{$str}", string.index("#{$str}", "#{$substr}") + 1, string.length("#{$str}"));
$str: string.slice("#{$str}", string.index("#{$str}", "#{$separator}") + 1, string.length("#{$str}"));
}
@if (string.slice("#{$str}", 1, string.length("#{$str}")) != "") {
$list: list.append($list, string.slice("#{$str}", 1, string.length("#{$str}")));
$str-list: list.append($str-list, string.slice("#{$str}", 1, string.length("#{$str}")));
}
@return $list;
}
// Web fonts (see components/_typography.scss)
@mixin font-face(
$family,
$src,
$weight: normal,
$style: normal,
$display: swap,
$variable: false,
$base-path: "../fonts/"
) {
@font-face {
font-family: string.quote($family);
font-style: $style;
font-weight: $weight;
font-display: $display;
@if $variable {
// all browsers that support variable fonts also support woff2, so a woff file is unncessary
// draft spec for formats: https://www.w3.org/TR/css-fonts-4/#src-desc
src: url($base-path + $src + ".woff2") format("woff2-variations"),
url($base-path + $src + ".woff2") format("woff2");
} @else {
src: url($base-path + $src + ".woff2") format("woff2"), url($base-path + $src + ".woff") format("woff");
}
// Allow additional rules to be passed in:
@content;
}
@return $str-list;
}

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

@@ -1,3 +1,5 @@
@use "sass:list";
// Web fonts
$webfont-sans: "Inter";
$webfont-sans-variable: "Inter var";
@@ -10,10 +12,10 @@ $system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Ar
"Segoe UI Emoji", "Segoe UI Symbol";
$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
$font-stack-sans: $webfont-sans, $system-fonts-sans;
$font-stack-variable: $webfont-sans-variable, $system-fonts-sans;
$font-stack-mono: $webfont-mono, $system-fonts-monospace;
$font-stack-mono-variable: $webfont-mono-variable, $system-fonts-monospace;
$font-stack-sans: list.join($webfont-sans, $system-fonts-sans);
$font-stack-variable: list.join($webfont-sans-variable, $system-fonts-sans);
$font-stack-mono: list.join($webfont-mono, $system-fonts-monospace);
$font-stack-mono-variable: list.join($webfont-mono-variable, $system-fonts-monospace);
// The maximum width of the content area:
$max-width: 865px;

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

@@ -1,7 +1,24 @@
@use "sass:map";
@use "sass:string";
@use "../abstracts/functions";
@use "../abstracts/functions" as *;
// Takes a single CSS property and theme key (see abstracts/_themes) and sets
// both body.light and body.dark selectors.
@mixin themed($property, $key) {
// hack to allow root (body) theming
$selectors: str-split("#{&}");
@each $theme, $map in $themes {
@each $selector in $selectors {
@at-root body.#{$theme} #{$selector} {
#{$property}: map.get($map, $key);
}
}
}
}
// ----------------
// Dark & Light Themes
$themes: (
@@ -33,149 +50,8 @@ $themes: (
),
);
// Colorful Homepage
$colors-home: (
boston: (
light: #fb4d42,
dark: #ff5146,
),
jamstack: (
light: #04a699,
dark: #08bbac,
),
javascript: (
light: #f48024,
dark: #e18431,
),
node: (
light: #6fbc4e,
dark: #84d95f,
),
golang: (
light: #00acd7,
dark: #2ad1fb,
),
react: (
light: #4fb3cd,
dark: #6fcbe3,
),
angular: (
light: #c3002f,
dark: #f95757,
),
php: (
light: #8892bf,
dark: #a4afe3,
),
ruby: (
light: #d34135,
dark: #f95a4d,
),
python: (
light: #fea500,
dark: #ffbb3c,
),
infosec: (
light: #00b81a,
dark: #57f06d,
),
server: (
light: #0098ec,
dark: #43b9fb,
),
devops: (
light: #ff6200,
dark: #f46c16,
),
frontend: (
light: #4169e1,
dark: #8ca9ff,
),
backend: (
light: #9932cc,
dark: #d588fb,
),
birthday: (
light: #e40088,
dark: #fd40b1,
),
github: (
light: #8d4eff,
dark: #a379f0,
),
linkedin: (
light: #0073b1,
dark: #3b9dd2,
),
twitter: (
light: #00acee,
dark: #3bc9ff,
),
email: (
light: #de0c0c,
dark: #ff5050,
),
pgp: (
light: #757575,
dark: #959595,
),
sms: (
light: #6fcc01,
dark: #8edb34,
),
news-1: (
light: #ff1b1b,
dark: #f06060,
),
news-2: (
light: #f78200,
dark: #fd992a,
),
news-3: (
light: #f2b702,
dark: #ffcc2e,
),
news-4: (
light: #5ebd3e,
dark: #78df55,
),
news-5: (
light: #009cdf,
dark: #29bfff,
),
news-6: (
light: #3e49bb,
dark: #7b87ff,
),
news-7: (
light: #973999,
dark: #db60dd,
),
);
$color-serverless: #87cef7;
// For nifty color swapping on svg logo hover in components/_header.scss
$color-logo1: #6fbc4e;
$color-logo2: #ffb900;
$color-logo3: #009cdf;
// 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-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-wand: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="20" height="20"><g fill="none"><path fill="#292F33" d="M2.651 6.073l26.275 26.276c.391.391 2.888-2.107 2.497-2.497L5.148 3.576c-.39-.391-2.888 2.107-2.497 2.497z"/><path fill="#66757F" d="M29.442 31.23L3.146 4.934l.883-.883 26.296 26.296z"/><path fill="#E1E8ED" d="M33.546 33.483l-.412.412-.671.671a.967.967 0 01-.255.169.988.988 0 01-1.159-.169l-2.102-2.102.495-.495.883-.883 1.119-1.119 2.102 2.102a.999.999 0 010 1.414zM4.029 4.79l-.883.883-.495.495L.442 3.96a.988.988 0 01-.169-1.159.967.967 0 01.169-.255l.671-.671.412-.412a.999.999 0 011.414 0l2.208 2.208L4.029 4.79z"/><path fill="#F5F8FA" d="M30.325 30.497l2.809 2.809-.671.671a.967.967 0 01-.255.169l-2.767-2.767.884-.882zM3.146 5.084L.273 2.211a.967.967 0 01.169-.255l.671-.671 2.916 2.916-.883.883z"/><path fill="#FFAC33" d="M27.897 10.219l1.542.571.6 2.2a.667.667 0 001.287 0l.6-2.2 1.542-.571a.665.665 0 000-1.25l-1.534-.568-.605-2.415a.667.667 0 00-1.293 0l-.605 2.415-1.534.568a.665.665 0 000 1.25m-16.936 9.628l2.61.966.966 2.61a1.103 1.103 0 002.07 0l.966-2.61 2.609-.966a1.103 1.103 0 000-2.07l-2.609-.966-.966-2.61a1.105 1.105 0 00-2.07 0l-.966 2.61-2.61.966a1.104 1.104 0 000 2.07M23.13 4.36l1.383.512.512 1.382a.585.585 0 001.096 0l.512-1.382 1.382-.512a.584.584 0 000-1.096l-1.382-.512-.512-1.382a.585.585 0 00-1.096 0l-.512 1.382-1.383.512a.585.585 0 000 1.096"/></g></svg>';
// ----------------------------------------
@mixin themed($property, $key) {
// hack to allow root (body) theming
$selectors: functions.str-split("#{&}");
@each $theme, $map in $themes {
@each $selector in $selectors {
@at-root body.#{$theme} #{$selector} {
#{$property}: map.get($map, $key);
}
}
}
}

1
assets/sass/components/_content.scss
View File

@@ -1,5 +1,6 @@
@use "../abstracts/themes";
// Main content
div#content {
font-size: 0.925em;
letter-spacing: -0.004em;

1
assets/sass/components/_embeds.scss
View File

@@ -1,3 +1,4 @@
// External social embeds
div.embed {
&.tweet {
.twitter-tweet-rendered iframe {

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

@@ -1,8 +1,8 @@
@use "sass:map";
@use "../abstracts/functions";
@use "../abstracts/settings";
@use "../abstracts/themes";
@use "../abstracts/functions" as *;
// Global Styles
body {
@@ -30,6 +30,9 @@ body {
}
}
// need to set light/dark mode backgrounds outside of the body selector
@include themes.themed(background-color, "background-outer");
code,
pre,
.monospace {
@@ -37,9 +40,6 @@ pre,
letter-spacing: normal;
}
// need to set light/dark mode backgrounds outside of the body selector
@include themes.themed(background-color, "background-outer");
// override above font-family if browser supports variable fonts
// https://caniuse.com/#feat=variable-fonts
@supports (font-variation-settings: normal) {
@@ -85,7 +85,7 @@ a {
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
@each $theme, $map in themes.$themes {
@at-root body.#{$theme} #{&} {
background-image: functions.underline-hack(map-get($map, "links"));
background-image: underline-hack(map-get($map, "links"));
}
}

70
assets/sass/components/_typography.scss
View File

@@ -1,5 +1,6 @@
@use "../abstracts/functions";
@use "../abstracts/settings";
@use "sass:string";
@use "../abstracts/functions" as *;
// Note to self: got this list after subsetting Inter with glyphhanger or pyftsubset:
// https://github.com/filamentgroup/glyphhanger
@@ -8,6 +9,38 @@
// ex: pyftsubset --unicodes="" --layout-features=kern,liga,calt,clig,ss01 --flavor=woff --with-zopfli inter.ttf
$unicode-subset: U+0000-00FF, U+2000-206F, U+2200-22FF, U+2122;
// Webfont scaffolding
@mixin font-face(
$family,
$src,
$weight: normal,
$style: normal,
$display: swap,
$variable: false,
$base-path: "../fonts/"
) {
@font-face {
font-family: string.quote($family);
font-style: $style;
font-weight: $weight;
font-display: $display;
@if $variable {
// All browsers that support variable fonts also support woff2, so a woff
// file is unncessary. (see: https://www.w3.org/TR/css-fonts-4/#src-desc)
src: url($base-path + $src + ".woff2") format("woff2-variations"),
url($base-path + $src + ".woff2") format("woff2");
} @else {
src: url($base-path + $src + ".woff2") format("woff2"), url($base-path + $src + ".woff") format("woff");
}
// Allow additional rules to be passed in:
@content;
}
}
// ----------------
/*!
* Inter typeface v3.15 - https://rsms.me/inter/
*
@@ -17,33 +50,35 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+2200-22FF, U+2122;
*/
// Variable
@include functions.font-face("Inter var", "inter-subset.var", 100 900, $variable: true) {
@include font-face("Inter var", "inter-subset.var", 100 900, $variable: true) {
unicode-range: $unicode-subset;
}
@include functions.font-face("Inter var", "inter-italic-subset.var", 100 900, italic, $variable: true) {
@include font-face("Inter var", "inter-italic-subset.var", 100 900, italic, $variable: true) {
unicode-range: $unicode-subset;
}
// Legacy
@include functions.font-face("Inter", "inter-regular-subset", 400) {
@include font-face("Inter", "inter-regular-subset", 400) {
unicode-range: $unicode-subset;
}
@include functions.font-face("Inter", "inter-regular-italic-subset", 400, italic) {
@include font-face("Inter", "inter-regular-italic-subset", 400, italic) {
unicode-range: $unicode-subset;
}
@include functions.font-face("Inter", "inter-medium-subset", 500) {
@include font-face("Inter", "inter-medium-subset", 500) {
unicode-range: $unicode-subset;
}
@include functions.font-face("Inter", "inter-medium-italic-subset", 500, italic) {
@include font-face("Inter", "inter-medium-italic-subset", 500, italic) {
unicode-range: $unicode-subset;
}
@include functions.font-face("Inter", "inter-bold-subset", 700) {
@include font-face("Inter", "inter-bold-subset", 700) {
unicode-range: $unicode-subset;
}
@include functions.font-face("Inter", "inter-bold-italic-subset", 700, italic) {
@include font-face("Inter", "inter-bold-italic-subset", 700, italic) {
unicode-range: $unicode-subset;
}
// ----------------
/*!
* Roboto Mono typeface v3.000 - https://fonts.google.com/specimen/Roboto+Mono
*
@@ -53,12 +88,14 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+2200-22FF, U+2122;
*/
// Variable
@include functions.font-face("Roboto Mono var", "roboto-mono-subset.var", 100 700, $variable: true);
@include functions.font-face("Roboto Mono var", "roboto-mono-italic-subset.var", 100 700, italic, $variable: true);
@include font-face("Roboto Mono var", "roboto-mono-subset.var", 100 700, $variable: true);
@include font-face("Roboto Mono var", "roboto-mono-italic-subset.var", 100 700, italic, $variable: true);
// Legacy
@include functions.font-face("Roboto Mono", "roboto-mono-regular-subset", 400);
@include functions.font-face("Roboto Mono", "roboto-mono-italic-subset", 400, italic);
@include font-face("Roboto Mono", "roboto-mono-regular-subset", 400);
@include font-face("Roboto Mono", "roboto-mono-italic-subset", 400, italic);
// ----------------
/*!
* Comic Neue typeface v2.5 - http://comicneue.com/
@@ -67,9 +104,10 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+2200-22FF, U+2122;
* Licensed under the SIL Open Font License, Version 1.1:
* https://github.com/crozynski/comicneue/blob/v2.5/OFL.txt
*/
@include functions.font-face("Comic Neue", "comic-neue-regular-subset", 400) {
@include font-face("Comic Neue", "comic-neue-regular-subset", 400) {
unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122;
}
@include functions.font-face("Comic Neue", "comic-neue-bold-subset", 700) {
@include font-face("Comic Neue", "comic-neue-bold-subset", 700) {
unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122;
}

2
assets/sass/main.scss
View File

@@ -2,7 +2,7 @@
// Global Styles
@use "components/typography";
@use "components/reset";
@use "vendor/reset";
@use "components/global";
@use "components/header";
@use "components/footer";

131
assets/sass/pages/_home.scss
View File

@@ -1,5 +1,128 @@
@use "../abstracts/functions";
@use "../abstracts/themes";
@use "../abstracts/functions" as *;
// Colorful Homepage
$colors-home: (
boston: (
light: #fb4d42,
dark: #ff5146,
),
jamstack: (
light: #04a699,
dark: #08bbac,
),
javascript: (
light: #f48024,
dark: #e18431,
),
node: (
light: #6fbc4e,
dark: #84d95f,
),
golang: (
light: #00acd7,
dark: #2ad1fb,
),
react: (
light: #4fb3cd,
dark: #6fcbe3,
),
angular: (
light: #c3002f,
dark: #f95757,
),
php: (
light: #8892bf,
dark: #a4afe3,
),
ruby: (
light: #d34135,
dark: #f95a4d,
),
python: (
light: #fea500,
dark: #ffbb3c,
),
infosec: (
light: #00b81a,
dark: #57f06d,
),
server: (
light: #0098ec,
dark: #43b9fb,
),
devops: (
light: #ff6200,
dark: #f46c16,
),
frontend: (
light: #4169e1,
dark: #8ca9ff,
),
backend: (
light: #9932cc,
dark: #d588fb,
),
birthday: (
light: #e40088,
dark: #fd40b1,
),
github: (
light: #8d4eff,
dark: #a379f0,
),
linkedin: (
light: #0073b1,
dark: #3b9dd2,
),
twitter: (
light: #00acee,
dark: #3bc9ff,
),
email: (
light: #de0c0c,
dark: #ff5050,
),
pgp: (
light: #757575,
dark: #959595,
),
sms: (
light: #6fcc01,
dark: #8edb34,
),
news-1: (
light: #ff1b1b,
dark: #f06060,
),
news-2: (
light: #f78200,
dark: #fd992a,
),
news-3: (
light: #f2b702,
dark: #ffcc2e,
),
news-4: (
light: #5ebd3e,
dark: #78df55,
),
news-5: (
light: #009cdf,
dark: #29bfff,
),
news-6: (
light: #3e49bb,
dark: #7b87ff,
),
news-7: (
light: #973999,
dark: #db60dd,
),
);
$color-serverless: #87cef7;
// ----------------
// Home Styles
div.layout-home {
@@ -60,7 +183,7 @@ div.layout-home {
// non-link colors
span {
&#serverless {
color: themes.$color-serverless;
color: $color-serverless;
}
&#shh {
@@ -74,11 +197,11 @@ div.layout-home {
}
// Loop through $colors-home (see abstracts/_variables)
@each $id, $colors in themes.$colors-home {
@each $id, $colors in $colors-home {
@each $theme, $color in $colors {
@at-root body.#{$theme} div.layout-home a##{$id} {
color: $color;
background-image: functions.underline-hack($color);
background-image: underline-hack($color);
}
}
}

0
assets/sass/components/_reset.scss → assets/sass/vendor/_reset.scss vendored
View File