jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 15:28:28 -04:00
Code Issues

adjust letter-spacing of bold Inter text

Browse Source
This commit is contained in:
Jake Jarvis 2020-07-05 12:13:11 -04:00
parent c8c7fe131a
commit aa3973f570
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
7 changed files with 52 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/ci.yml vendored
View File

@ -87,7 +87,7 @@ jobs:
- name: Install dependencies
run: yarn install --no-ignore-optional --frozen-lockfile
- name: Audit dependencies
run: yarn audit
run: yarn audit || true
continue-on-error: true
- name: Lint
run: yarn lint

17
.vscode/settings.json vendored
View File

@ -15,10 +15,17 @@
"prettier.printWidth": 120,
"prettier.requireConfig": true,
"prettier.useEditorConfig": false,
"scss.lint.important": "ignore",
"scss.lint.universalSelector": "ignore",
"[markdown]": {
"editor.wordWrap": "on",
"editor.quickSuggestions": false
}
"editor.quickSuggestions": false,
"editor.trimAutoWhitespace": false,
"editor.wordWrap": "on"
},
"stylelint.packageManager": "yarn",
"stylelint.validate": [
"css",
"html",
"postcss",
"sass",
"scss"
]
}

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

@ -185,7 +185,5 @@ $color-logo2: #ffb900;
$color-logo3: #009cdf;
// Icons (modified twemojis)
// lightbulb on
$icon-bulb-on: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0ZGRDk4MyIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjRkZDQzREIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";
// lightbulb off
$icon-bulb-off: "data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMzUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMjIgMTEuMDZjMCA2LjQ0LTUgNy40NC01IDEzLjQ0IDAgMy4xLTMuMTIgMy4zNi01LjUgMy4zNi0yLjA1IDAtNi41OS0uNzgtNi41OS0zLjM2IDAtNi00LjkxLTctNC45MS0xMy40NEMwIDUuMDMgNS4yOS4xNCAxMS4wOC4xNCAxNi44OC4xNCAyMiA1LjAzIDIyIDExLjA2eiIgZmlsbD0iI0NDQ0JDQiIvPjxwYXRoIGQ9Ik0xNS4xNyAzMi41YzAgLjgzLTIuMjQgMi41LTQuMTcgMi41LTEuOTMgMC00LjE3LTEuNjctNC4xNy0yLjUgMC0uODMgMi4yNC0uNSA0LjE3LS41IDEuOTMgMCA0LjE3LS4zMyA0LjE3LjV6IiBmaWxsPSIjQ0NENkREIi8+PHBhdGggZD0iTTE1LjcgMTAuM2ExIDEgMCAwMC0xLjQgMEwxMSAxMy41OGwtMy4zLTMuM2ExIDEgMCAxMC0xLjQgMS40MmwzLjcgMy43VjI2YTEgMSAwIDEwMiAwVjE1LjQxbDMuNy0zLjdhMSAxIDAgMDAwLTEuNDJ6IiBmaWxsPSIjN0Q3QTcyIi8+PHBhdGggZD0iTTE3IDMxYTIgMiAwIDAxLTIgMkg3YTIgMiAwIDAxLTItMnYtNmgxMnY2eiIgZmlsbD0iIzk5QUFCNSIvPjxwYXRoIGQ9Ik01IDMyYTEgMSAwIDAxLS4xNi0xLjk5bDEyLTJhMSAxIDAgMTEuMzMgMS45N2wtMTIgMkEuOTMuOTMgMCAwMTUgMzJ6bTAtNGExIDEgMCAwMS0uMTYtMS45OWwxMi0yYTEgMSAwIDExLjMzIDEuOTdsLTEyIDJBLjkzLjkzIDAgMDE1IDI4eiIgZmlsbD0iI0NDRDZERCIvPjwvZz48L3N2Zz4K";

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

@ -67,7 +67,7 @@ a {
}
strong {
letter-spacing: 0.001em;
letter-spacing: 0.008em; // not sure why the discrepancy between weights
}
blockquote {

37
content/notes/css-waving-hand-emoji/index.md
View File

@ -18,38 +18,43 @@ If you examine [my homepage](/) long enough, you might notice the 👋 hand emoj
Below are the code snippets you can grab and customize to make your own ["waving hand" 👋](https://emojipedia.org/waving-hand-sign/) emojis **_actually wave_**, and a [CodePen playground](https://codepen.io/jakejarvis/pen/pBZWZw) for live testing.
## Demo
{{< codepen username="jakejarvis" id="pBZWZw" left-tab="css" right-tab="result" >}}
## CSS:
## CSS
<!-- prettier-ignore -->
```css
span.wave {
animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
animation-duration: 2.5s; /* Change to speed up or slow down */
animation-iteration-count: infinite; /* Never stop waving :) */
transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
.wave {
animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
animation-duration: 2.5s; /* Change to speed up or slow down */
animation-iteration-count: infinite; /* Never stop waving :) */
transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
display: inline-block;
}
@keyframes wave-animation {
0% { transform: rotate( 0.0deg) }
10% { transform: rotate(-10.0deg) } /* The following four values can be played with to make the waving more or less extreme */
20% { transform: rotate( 12.0deg) }
30% { transform: rotate(-10.0deg) }
40% { transform: rotate( 9.0deg) }
50% { transform: rotate( 0.0deg) } /* Reset for the last half to pause */
100% { transform: rotate( 0.0deg) }
0% { transform: rotate( 0.0deg) }
10% { transform: rotate(14.0deg) } /* The following five values can be played with to make the waving more or less extreme */
20% { transform: rotate(-8.0deg) }
30% { transform: rotate(14.0deg) }
40% { transform: rotate(-4.0deg) }
50% { transform: rotate(10.0deg) }
60% { transform: rotate( 0.0deg) } /* Reset for the last half to pause */
100% { transform: rotate( 0.0deg) }
}
```
## HTML:
## HTML
<!-- prettier-ignore -->
```html {linenos=false}
<span class="wave">👋</span>
<h1>Hi there! <span class="wave">👋</span></h1>
```
That's it! More skin tones can be [found on 📕Emojipedia](https://emojipedia.org/search/?q=waving+hand).
---
That's it! More hands and skin tones can be [found on 📕 Emojipedia](https://emojipedia.org/search/?q=waving+hand).
### <span class="wave">👋🏼</span> Toodles!

2
layouts/_default/single.amp.html
View File

@ -82,7 +82,7 @@
background-color: #d2d2d2;
}
strong {
letter-spacing: 0.001em;
letter-spacing: 0.008em;
}
blockquote {
border-left: 5px solid #0e6dc2;

32
yarn.lock
View File

@ -556,12 +556,12 @@ braces@^3.0.1, braces@~3.0.2:
fill-range "^7.0.1"
browserslist@^4.1.1, browserslist@^4.12.0, browserslist@^4.12.2:
version "4.12.2"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.2.tgz#76653d7e4c57caa8a1a28513e2f4e197dc11a711"
integrity sha512-MfZaeYqR8StRZdstAK9hCKDd2StvePCYp5rHzQCPicUjfFliDgmuaBNPHYUTpAywBN8+Wc/d7NYVFkO0aqaBUw==
version "4.13.0"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.13.0.tgz#42556cba011e1b0a2775b611cba6a8eca18e940d"
integrity sha512-MINatJ5ZNrLnQ6blGvePd/QOz9Xtu+Ne+x29iQSCHfkU5BugKVJwZKn/iiL8UbpIpa3JhviKjz+XxMo0m2caFQ==
dependencies:
caniuse-lite "^1.0.30001088"
electron-to-chromium "^1.3.483"
caniuse-lite "^1.0.30001093"
electron-to-chromium "^1.3.488"
escalade "^3.0.1"
node-releases "^1.1.58"
@ -679,14 +679,14 @@ camelcase@^6.0.0:
integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
caniuse-db@^1.0.30001090:
version "1.0.30001093"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001093.tgz#5a1cae72d94df1156f40f15d9079456e1b29d050"
integrity sha512-XqXxHR6Z9IN0BXLKMaTJ1NZ+US74cbKritholD6uaDLUWHiDj0QilpSb708wOcoGz0PmPRsXT/6zE+bjx+QSMw==
version "1.0.30001094"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001094.tgz#52b199ae897c2551ac213da4e7e72d32c06c1f31"
integrity sha512-2eh4k7/QnSDJE+/UJI+enGQq9383WGQ+2nvOBrW0KMd17RyODdMXxb64jHTXBTLW7f7eBdB8PbyCJk6ZoiC8fA==
caniuse-lite@^1.0.30000887, caniuse-lite@^1.0.30001087, caniuse-lite@^1.0.30001088:
version "1.0.30001093"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001093.tgz#833e80f64b1a0455cbceed2a4a3baf19e4abd312"
integrity sha512-0+ODNoOjtWD5eS9aaIpf4K0gQqZfILNY4WSNuYzeT1sXni+lMrrVjc0odEobJt6wrODofDZUX8XYi/5y7+xl8g==
caniuse-lite@^1.0.30000887, caniuse-lite@^1.0.30001087, caniuse-lite@^1.0.30001093:
version "1.0.30001094"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001094.tgz#0b11d02e1cdc201348dbd8e3e57bd9b6ce82b175"
integrity sha512-ufHZNtMaDEuRBpTbqD93tIQnngmJ+oBknjvr0IbFympSdtFpAUFmNv4mVKbb53qltxFx0nK3iy32S9AqkLzUNA==
caw@^2.0.0, caw@^2.0.1:
version "2.0.1"
@ -892,9 +892,9 @@ color-name@~1.1.4:
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
colorette@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.0.tgz#45306add826d196e8c87236ac05d797f25982e63"
integrity sha512-soRSroY+OF/8OdA3PTQXwaDJeMc7TfknKKrxeSCencL2a4+Tx5zhxmmv7hdpCjhKBjehzp8+bwe/T68K0hpIjw==
version "1.2.1"
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
commander@^2.19.0, commander@^2.20.0:
version "2.20.3"
@ -1349,7 +1349,7 @@ duplexer@~0.1.1:
resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
electron-to-chromium@^1.3.483:
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==