mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 15:48:31 -04:00
run initial SCSS refactoring through percy
This commit is contained in:
parent
aa3973f570
commit
d970c031a5
GPG Key ID:
2B0C9CF251E69A39
@ -3,8 +3,8 @@
|
||||
// Dark & Light Themes
|
||||
$themes: (
|
||||
light: (
|
||||
background: #ffffff,
|
||||
background-top: #fcfcfc,
|
||||
background-inner: #ffffff,
|
||||
background-outer: #fcfcfc,
|
||||
text: #202020,
|
||||
medium-dark: #515151,
|
||||
medium: #5e5e5e,
|
||||
@ -16,8 +16,8 @@ $themes: (
|
||||
links: #0e6dc2,
|
||||
),
|
||||
dark: (
|
||||
background: #272727,
|
||||
background-top: #1e1e1e,
|
||||
background-inner: #272727,
|
||||
background-outer: #1e1e1e,
|
||||
text: #f7f7f7,
|
||||
medium-dark: #d7d7d7,
|
||||
medium: #b1b1b1,
|
||||
|
||||
@ -14,7 +14,7 @@ body {
|
||||
// manually setting light/dark mode backgrounds and bulb icon
|
||||
// really just the color of header & footer
|
||||
&.light {
|
||||
background-color: map-get(map-get($themes, "light"), "background-top");
|
||||
background-color: map-get(map-get($themes, "light"), "background-outer");
|
||||
|
||||
button.dark-mode-toggle {
|
||||
background-image: url($icon-bulb-on);
|
||||
@ -22,7 +22,7 @@ body {
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: map-get(map-get($themes, "dark"), "background-top");
|
||||
background-color: map-get(map-get($themes, "dark"), "background-outer");
|
||||
|
||||
button.dark-mode-toggle {
|
||||
background-image: url($icon-bulb-off);
|
||||
@ -30,7 +30,16 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
// stretch background for entire width of content area
|
||||
main {
|
||||
width: 100%;
|
||||
|
||||
@include colors() {
|
||||
background-color: c(background-inner);
|
||||
}
|
||||
}
|
||||
|
||||
section.page {
|
||||
max-width: $max-width;
|
||||
margin: 0 auto;
|
||||
padding-left: 1.5em;
|
||||
@ -118,6 +127,7 @@ img.emoji {
|
||||
padding: 0 0.09em;
|
||||
vertical-align: -0.18em;
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
|
||||
// have cursor act like it's hovering a regular unicode emoji, especially since twemojis can still be copied/pasted
|
||||
cursor: text;
|
||||
@ -127,15 +137,6 @@ a img.emoji {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
// white background for entire width content area
|
||||
div#wrap {
|
||||
width: 100%;
|
||||
|
||||
@include colors() {
|
||||
background-color: c(background);
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--global() {
|
||||
body {
|
||||
|
||||
3
assets/sass/components/_reset.scss
Normal file
3
assets/sass/components/_reset.scss
Normal file
@ -0,0 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import "node_modules/normalize.css/normalize.css";
|
||||
@ -16,7 +16,8 @@ $max-width: unquote($max-width);
|
||||
@import "abstracts/themes";
|
||||
|
||||
// Global Styles
|
||||
@import "components/fonts";
|
||||
@import "components/reset";
|
||||
@import "components/typography";
|
||||
@import "components/global";
|
||||
@import "components/header";
|
||||
@import "components/footer";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Video Styles
|
||||
main#etc {
|
||||
section#etc {
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 1.5em;
|
||||
|
||||
@ -18,7 +18,7 @@ main#etc {
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--etc() {
|
||||
main#etc {
|
||||
section#etc {
|
||||
padding: 1.25em 1.1em;
|
||||
|
||||
h1 {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Home Styles
|
||||
main#home {
|
||||
section#home {
|
||||
font-size: 1.025em;
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 0.75em;
|
||||
@ -93,7 +93,7 @@ main#home {
|
||||
// Loop through $colors-home (see abstracts/_variables)
|
||||
@each $id, $colors in $colors-home {
|
||||
@each $theme, $color in $colors {
|
||||
body.#{$theme} main#home a##{$id} {
|
||||
body.#{$theme} section#home a##{$id} {
|
||||
color: $color;
|
||||
background-image: underline-hack($color);
|
||||
}
|
||||
@ -102,7 +102,7 @@ main#home {
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--home() {
|
||||
main#home {
|
||||
section#home {
|
||||
font-size: 0.975em;
|
||||
padding: 1.2em 1.2em 0.4em 1.2em;
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Archive/List Styles
|
||||
main#list {
|
||||
section#list {
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: 0.25em;
|
||||
|
||||
@ -46,7 +46,7 @@ main#list {
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--list() {
|
||||
main#list {
|
||||
section#list {
|
||||
padding: 1em 1em 0.25em 1em;
|
||||
|
||||
section.year {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Post Styles
|
||||
main#single {
|
||||
section#single {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
|
||||
@ -41,7 +41,7 @@ main#single {
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--single() {
|
||||
main#single {
|
||||
section#single {
|
||||
padding: 0.8em 1.1em;
|
||||
|
||||
h1#title {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Video Styles
|
||||
main#video {
|
||||
section#video {
|
||||
padding: 1.5em 0;
|
||||
text-align: center;
|
||||
|
||||
@ -39,7 +39,7 @@ main#video {
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--videos() {
|
||||
main#video {
|
||||
section#video {
|
||||
padding: 1em 0;
|
||||
|
||||
h1 {
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
<head>
|
||||
{{ partial "head/_head" . }}
|
||||
</head>
|
||||
<body class="light">
|
||||
<body class="{{ .Page.Kind }} light">
|
||||
{{ partialCached "page/header" . }}
|
||||
<div id="wrap">
|
||||
<main>
|
||||
{{ block "main" . }}{{ end }}
|
||||
</div>
|
||||
</main>
|
||||
{{ partial "page/footer" . }}
|
||||
{{ partial "scripts/_bundle" . -}}
|
||||
{{ partial "scripts/shortcodes" . -}}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{{ define "main" }}
|
||||
<main id="etc">
|
||||
<section class="page" id="etc">
|
||||
<h1><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
|
||||
<div id="content">
|
||||
{{ .Content }}
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<main id="list">
|
||||
<section class="page" id="list">
|
||||
{{- with .Pages }}
|
||||
{{- range .GroupByDate "2006" }}
|
||||
<section class="year">
|
||||
@ -17,5 +17,5 @@
|
||||
</section>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</main>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<main id="single">
|
||||
<section class="page" id="single">
|
||||
<article>
|
||||
<div id="meta">
|
||||
<a class="no-underline" href="{{ .Permalink }}" title="{{ .Date.Format "Mon, Jan 2 2006 3:04:05 PM MST" }}">{{ .Date.Format "January 2, 2006" }}</a>{{ with .Scratch.Get "sourceURL" }}<span class="dash">—</span><a class="no-underline" href="{{ . | safeURL }}" title="Edit this post on GitHub" target="_blank" rel="noopener">Improve This Post</a>{{ end }}
|
||||
@ -11,5 +11,5 @@
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<main id="video">
|
||||
<section class="page" id="video">
|
||||
<h1><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
|
||||
|
||||
<video
|
||||
@ -15,5 +15,5 @@
|
||||
</video>
|
||||
|
||||
{{ .Content }}
|
||||
</main>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{{ define "main" }}
|
||||
<main id="home">
|
||||
<section class="page" id="home">
|
||||
{{ .Content }}
|
||||
</main>
|
||||
</section>
|
||||
{{ end }}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "css/main.css") | resources.PostCSS (dict "config" "postcss.config.js") }}
|
||||
{{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "css/main.css" "includePaths" (slice "node_modules/")) | resources.PostCSS (dict "config" "postcss.config.js") }}
|
||||
<link rel="stylesheet" href="{{ $style.Permalink }}">
|
||||
|
||||
{{/* Page-specific styles set via front matter, scoped via SCSS and inlined */}}
|
||||
|
||||
@ -35,7 +35,11 @@
|
||||
"index": "run-s clean hugo index:**",
|
||||
"index:algolia": "npx atomic-algolia"
|
||||
},
|
||||
"dependencies": {},
|
||||
"dependencies": {
|
||||
"normalize.css": "8.0.1",
|
||||
"twemoji": "13.0.0",
|
||||
"twemoji-parser": "13.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.8.4",
|
||||
"cross-env": "^7.0.2",
|
||||
|
||||
@ -12,7 +12,7 @@ module.exports = {
|
||||
}),
|
||||
require("postcss-clean")({
|
||||
compatibility: "*",
|
||||
level: 0,
|
||||
level: 1,
|
||||
format: {
|
||||
breaks: {
|
||||
afterAtRule: true,
|
||||
|
||||
68
yarn.lock
68
yarn.lock
@ -232,9 +232,9 @@
|
||||
integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
|
||||
|
||||
"@types/glob@^7.1.1":
|
||||
version "7.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.2.tgz#06ca26521353a545d94a0adc74f38a59d232c987"
|
||||
integrity sha512-VgNIkxK+j7Nz5P7jvUZlRvhuPSmsEfS03b0alKcq5V/STUKAa3Plemsn5mrQUO7am6OErJ4rhGEGJbACclrtRA==
|
||||
version "7.1.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
|
||||
integrity sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==
|
||||
dependencies:
|
||||
"@types/minimatch" "*"
|
||||
"@types/node" "*"
|
||||
@ -250,9 +250,9 @@
|
||||
integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
|
||||
|
||||
"@types/node@*":
|
||||
version "14.0.14"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.14.tgz#24a0b5959f16ac141aeb0c5b3cd7a15b7c64cbce"
|
||||
integrity sha512-syUgf67ZQpaJj01/tRTknkMNoBBLWJOBODF0Zm4NrXmiSuxjymFrxnTu1QVYRubhVkRcZLYZG8STTwJRdVm/WQ==
|
||||
version "14.0.18"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.18.tgz#5111b2285659442f9f95697386a2b42b875bd7e9"
|
||||
integrity sha512-0Z3nS5acM0cIV4JPzrj9g/GH0Et5vmADWtip3YOXOp1NpOLU8V3KoZDc8ny9c1pe/YSYYzQkAWob6dyV/EWg4g==
|
||||
|
||||
"@types/normalize-package-data@^2.4.0":
|
||||
version "2.4.0"
|
||||
@ -1350,9 +1350,9 @@ duplexer@~0.1.1:
|
||||
integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
|
||||
|
||||
electron-to-chromium@^1.3.488:
|
||||
version "1.3.488"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.488.tgz#9226229f5fbc825959210e81e0bb3e63035d1c06"
|
||||
integrity sha512-NReBdOugu1yl8ly+0VDtiQ6Yw/1sLjnvflWq0gvY1nfUXU2PbA+1XAVuEb7ModnwL/MfUPjby7e4pAFnSHiy6Q==
|
||||
version "1.3.490"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.490.tgz#12aa776c493e66ba21536512fc317bdda6d04cd4"
|
||||
integrity sha512-jKJF1mKXrQkT0ZiuJ/oV63Q02hAeWz0GGt/z6ryc518uCHtMyS9+wYAysZtBQ8rsjqFPAYXV4TIz5GQ8xyubPA==
|
||||
|
||||
emoji-regex@^7.0.1:
|
||||
version "7.0.3"
|
||||
@ -1831,6 +1831,15 @@ fs-constants@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
|
||||
integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
|
||||
|
||||
fs-extra@^8.0.1:
|
||||
version "8.1.0"
|
||||
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
|
||||
integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
|
||||
dependencies:
|
||||
graceful-fs "^4.2.0"
|
||||
jsonfile "^4.0.0"
|
||||
universalify "^0.1.0"
|
||||
|
||||
fs-extra@^9.0.0:
|
||||
version "9.0.1"
|
||||
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
|
||||
@ -2730,6 +2739,22 @@ jsonc-parser@~2.2.0:
|
||||
resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-2.2.1.tgz#db73cd59d78cce28723199466b2a03d1be1df2bc"
|
||||
integrity sha512-o6/yDBYccGvTz1+QFevz6l6OBZ2+fMVu2JZ9CIhzsYRX4mjaK5IyX9eldUdCmga16zlgQxyrj5pt9kzuj2C02w==
|
||||
|
||||
jsonfile@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
|
||||
integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
|
||||
optionalDependencies:
|
||||
graceful-fs "^4.1.6"
|
||||
|
||||
jsonfile@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-5.0.0.tgz#e6b718f73da420d612823996fdf14a03f6ff6922"
|
||||
integrity sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==
|
||||
dependencies:
|
||||
universalify "^0.1.2"
|
||||
optionalDependencies:
|
||||
graceful-fs "^4.1.6"
|
||||
|
||||
jsonfile@^6.0.1:
|
||||
version "6.0.1"
|
||||
resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.0.1.tgz#98966cba214378c8c84b82e085907b40bf614179"
|
||||
@ -3351,6 +3376,11 @@ normalize-url@2.0.1:
|
||||
query-string "^5.0.1"
|
||||
sort-keys "^2.0.0"
|
||||
|
||||
normalize.css@8.0.1:
|
||||
version "8.0.1"
|
||||
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
|
||||
integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
|
||||
|
||||
npm-conf@^1.1.0:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9"
|
||||
@ -5088,6 +5118,21 @@ tunnel-agent@^0.6.0:
|
||||
dependencies:
|
||||
safe-buffer "^5.0.1"
|
||||
|
||||
twemoji-parser@13.0.0:
|
||||
version "13.0.0"
|
||||
resolved "https://registry.yarnpkg.com/twemoji-parser/-/twemoji-parser-13.0.0.tgz#bd9d1b98474f1651dc174696b45cabefdfa405af"
|
||||
integrity sha512-zMaGdskpH8yKjT2RSE/HwE340R4Fm+fbie4AaqjDa4H/l07YUmAvxkSfNl6awVWNRRQ0zdzLQ8SAJZuY5MgstQ==
|
||||
|
||||
twemoji@13.0.0:
|
||||
version "13.0.0"
|
||||
resolved "https://registry.yarnpkg.com/twemoji/-/twemoji-13.0.0.tgz#bdda95c0a76553bb57a355459955feb79eeebcfb"
|
||||
integrity sha512-JIkoLy0lL7ZlsiUKAOdXTp0o8C15O3CzDzAmnWdeDHpjeifmKDDKX4CyViUj+9g33pIqMr8Uhcy1WLwETr8oNg==
|
||||
dependencies:
|
||||
fs-extra "^8.0.1"
|
||||
jsonfile "^5.0.0"
|
||||
twemoji-parser "13.0.0"
|
||||
universalify "^0.1.2"
|
||||
|
||||
type-check@^0.4.0, type-check@~0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
|
||||
@ -5208,6 +5253,11 @@ unist-util-visit@^2.0.0:
|
||||
unist-util-is "^4.0.0"
|
||||
unist-util-visit-parents "^3.0.0"
|
||||
|
||||
universalify@^0.1.0, universalify@^0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
|
||||
integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
|
||||
|
||||
universalify@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user