1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 17:06:37 -04:00

switch to modern-normalize.css and actually choose a consistent box-sizing preference (#406)

This commit is contained in:
2021-05-22 10:31:05 -04:00
committed by GitHub
parent 8c974c8d5e
commit 2e3be955c8
13 changed files with 90 additions and 69 deletions

View File

@ -1,3 +1,3 @@
@charset "UTF-8";
@import "normalize.css";
@import "modern-normalize/modern-normalize.css";

View File

@ -5,7 +5,6 @@ footer {
width: 100%;
letter-spacing: -0.005em;
padding: 1.25em 1.5em;
box-sizing: border-box;
border-top: 1px solid;
@include colors() {

View File

@ -34,6 +34,7 @@ body {
// stretch background for entire width of content area
main {
width: 100%;
padding: 0 1.5em;
@include colors() {
background-color: c(background-inner);
@ -45,8 +46,6 @@ main {
div.layout {
max-width: $max-width;
margin: 0 auto;
padding-left: 1.5em;
padding-right: 1.5em;
display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
}
@ -110,11 +109,10 @@ hr {
// make SVG twemojis relative to surrounding text
// https://github.com/twitter/twemoji#inline-styles
img.emoji {
height: 1.1em;
width: 1.1em;
margin: 0;
padding: 0 0.09em;
vertical-align: -0.18em;
height: 1.2em;
width: 1.2em;
margin: 0 0.05em;
vertical-align: -0.22em;
border: 0;
display: inline-block;
@ -137,4 +135,9 @@ a img.emoji {
// Allows you to scroll below the viewport; default value is visible
overflow-y: scroll;
}
main {
padding-left: 1.25em;
padding-right: 1.25em;
}
}

View File

@ -4,7 +4,6 @@
header {
width: 100%;
padding: 0 1.5em;
box-sizing: border-box;
border-bottom: 1px solid;
@include colors() {
@ -15,7 +14,6 @@ header {
width: 100%;
max-width: $max-width;
margin: 0 auto;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
@ -71,7 +69,7 @@ header {
li {
text-align: right;
margin-left: 2em;
margin-left: 1.75em;
a {
display: inline-block;
@ -91,15 +89,15 @@ header {
}
span.icon {
font-size: 1.35em;
vertical-align: -0.075em;
font-size: 1.3em;
vertical-align: -0.085em;
}
span.text {
font-size: 0.95em;
font-weight: 500;
letter-spacing: -0.002em;
margin-left: 0.6em;
margin-left: 0.65em;
}
}
@ -122,9 +120,10 @@ header {
background-repeat: no-repeat;
background-size: 100% 100%;
height: 1.5em;
width: 1em;
margin-left: 2em;
height: 1.56em; // 24.33px, don't ask
width: 1.56em;
margin-left: 1.4em;
margin-right: -0.3em; // weirdness w/ svg ratio
cursor: pointer;
// hidden by default in case user's JS is disabled, switches to `block` onload in dark-mode.js
@ -178,10 +177,11 @@ header {
// Dark mode toggle
button.dark-mode-toggle {
// TODO: figure out need for weird magic numbers here
height: 1.025em;
width: 0.75em;
margin-top: 0.15em;
margin-left: 1.15em;
height: 1.08em; // ~27px, don't ask
width: 1.08em;
margin-top: 0.175em;
margin-left: 1em;
margin-right: -0.2em; // weirdness w/ svg ratio
}
}
}

View File

@ -19,8 +19,6 @@ div.layout-etc {
// Responsive
@mixin responsive--etc() {
div.layout-etc {
padding: 1.25em 1.1em;
h1 {
font-size: 1.6em;
padding: 0 0.6em;

View File

@ -3,20 +3,23 @@
// Home Styles
div.layout-home {
font-size: 1em;
padding-top: 1.5em;
padding-top: 1.25em;
padding-bottom: 0.75em;
h1 {
margin: 0 0 0.6em 0;
margin: 0 0 0.3em 0;
font-size: 1.8em;
font-weight: 500;
letter-spacing: -0.014em;
line-height: 1.1;
margin-left: -0.03em; // TODO: why is this indented slightly?
img.emoji {
margin-left: 0.1em; // a little extra social distancing for the hand
}
}
h2 {
margin: 0.6em 0;
margin: 0.5em 0;
font-size: 1.35em;
font-weight: 400;
letter-spacing: -0.022em;
@ -39,7 +42,7 @@ div.layout-home {
margin-right: 0.1em;
img.emoji {
vertical-align: -0.15em; // magic number to align with text :\
vertical-align: -0.2em; // magic number to align with text :\
padding: 0;
}
}
@ -47,11 +50,10 @@ div.layout-home {
img#me {
float: right;
margin-bottom: 0.6em;
margin-left: 1.2em;
margin: 0.2em 0 0.6em 1.2em;
padding: 4px;
width: 160px;
height: 160px;
width: 170px;
height: 170px;
border: 1px solid;
border-radius: 50%;
@ -99,18 +101,19 @@ div.layout-home {
@mixin responsive--home() {
div.layout-home {
font-size: 0.975em;
padding: 1.2em 1.2em 0.4em 1.2em;
padding-top: 1.2em;
padding-bottom: 0.2em;
h1 {
font-size: 1.5em;
letter-spacing: -0.014em;
line-height: 1.4;
line-height: 1.7;
}
h2 {
font-size: 1.185em;
letter-spacing: -0.017em;
line-height: 1.55;
line-height: 1.6;
}
p {
@ -118,8 +121,8 @@ div.layout-home {
}
img#me {
width: 90px;
height: 90px;
width: 100px;
height: 100px;
margin: 0 0 0.3em 0.6em;
padding: 2px;
}

View File

@ -47,7 +47,8 @@ div.layout-list {
// Responsive
@mixin responsive--list() {
div.layout-list {
padding: 1em 1em 0.25em 1em;
padding-top: 1em;
padding-bottom: 0;
section.year {
font-size: 1em;

View File

@ -42,7 +42,8 @@ div.layout-single {
// Responsive
@mixin responsive--single() {
div.layout-single {
padding: 0.8em 1.1em;
padding-top: 0.8em;
padding-bottom: 0.4em;
h1.title {
margin-top: 0.4em;

View File

@ -32,4 +32,4 @@ Over the years, some of my side projects
<a href="https://gigaom.com/2009/10/06/fresh-faces-in-tech-10-kid-entrepreneurs-to-watch/6/" title="&quot;Fresh Faces in Tech: 10 Kid Entrepreneurs to Watch&quot; on Gigaom" id="news-6" target="_blank" rel="noopener">media</a>
<a href="https://adage.com/article/small-agency-diary/client-ceo-s-son/116723/" title="&quot;Your Next Client? The CEO&#39;s Son&quot; on Advertising Age" id="news-7" target="_blank" rel="noopener">outlets</a>.
You can find more of my work on <a href="https://github.com/jakejarvis" title="Jake Jarvis on GitHub" id="github" target="_blank" rel="me noopener">GitHub</a> and <a href="https://www.linkedin.com/in/jakejarvis/" title="Jake Jarvis on LinkedIn" id="linkedin" target="_blank" rel="me noopener">LinkedIn</a>, and I'm always open to connect over <a href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Send Email" id="email">email</a> <sup id="key" class="monospace"><a class="no-underline" href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=3bc6e5776bf379d36f6714802b0c9cf251e69a39" title="My Public Key" id="pgp" target="_blank" rel="pgpkey authn noopener">🔐 2B0C 9CF2 51E6 9A39</a></sup>, <a href="https://twitter.com/jakejarvis" title="Jake Jarvis on Twitter" id="twitter" target="_blank" rel="me noopener">Twitter</a>, or <a href="sms:+1-617-917-3737" title="Send SMS to +1 (617) 917-3737" id="sms">SMS</a> as well!
You can find more of my work on <a href="https://github.com/jakejarvis" title="Jake Jarvis on GitHub" id="github" target="_blank" rel="me noopener">GitHub</a> and <a href="https://www.linkedin.com/in/jakejarvis/" title="Jake Jarvis on LinkedIn" id="linkedin" target="_blank" rel="me noopener">LinkedIn</a>, and I'm always open to connect over <a href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Send Email" id="email">email</a> <sup id="key" class="monospace"><a class="no-underline" href="/pubkey.asc" title="My Public Key" id="pgp" target="_blank" rel="pgpkey authn noopener">🔐 2B0C 9CF2 51E6 9A39</a></sup>, <a href="https://twitter.com/jakejarvis" title="Jake Jarvis on Twitter" id="twitter" target="_blank" rel="me noopener">Twitter</a>, or <a href="sms:+1-617-917-3737" title="Send SMS to +1 (617) 917-3737" id="sms">SMS</a> as well!

View File

@ -99,11 +99,11 @@
X-View-Source = "https://github.com/jakejarvis/jarv.is"
# PGP key: open in browser, download correctly
[[headers]]
for = "/jarvis.asc"
for = "/pubkey.asc"
[headers.values]
Cache-Control = "no-cache"
Content-Type = "text/plain; charset=UTF-8"
Content-Disposition = "inline; filename=\"jarvis.asc\""
Content-Disposition = "inline; filename=\"pubkey.asc\""
# Redirect Netlify and www subdomains to primary domain:
[[redirects]]
@ -172,6 +172,10 @@
from = "/keybase.txt"
to = "/.well-known/keybase.txt"
status = 301
[[redirects]]
from = "/jarvis.asc"
to = "/pubkey.asc"
status = 301
[[redirects]]
from = "/img/me_large.jpg"
to = "/img/me.jpg"

View File

@ -35,15 +35,15 @@
"@fontsource/inter": "4.3.0",
"@fontsource/roboto-mono": "4.3.0",
"fathom-client": "3.0.0",
"normalize.css": "8.0.1",
"modern-normalize": "1.1.0",
"twemoji": "13.0.2",
"twemoji-emojis": "13.0.2"
},
"devDependencies": {
"autoprefixer": "^10.2.5",
"cross-env": "^7.0.3",
"dotenv": "^9.0.2",
"eslint": "~7.26.0",
"dotenv": "^10.0.0",
"eslint": "~7.27.0",
"eslint-config-prettier": "~8.3.0",
"eslint-plugin-compat": "~3.9.0",
"eslint-plugin-prettier": "~3.4.0",

View File

@ -1319,10 +1319,10 @@ domutils@^2.4.3:
domelementtype "^2.2.0"
domhandler "^4.2.0"
dotenv@^9.0.2:
version "9.0.2"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-9.0.2.tgz#dacc20160935a37dea6364aa1bef819fb9b6ab05"
integrity sha512-I9OvvrHp4pIARv4+x9iuewrWycX6CcZtoAu1XrzPxc5UygMJXJZYmBsynku8IkrJwgypE5DGNjDPmPRhDCptUg==
dotenv@^10.0.0:
version "10.0.0"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
download-cli@^1.x:
version "1.1.1"
@ -1466,6 +1466,11 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
escape-string-regexp@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
eslint-config-prettier@~8.3.0:
version "8.3.0"
resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
@ -1517,10 +1522,10 @@ eslint-visitor-keys@^2.0.0:
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
eslint@~7.26.0:
version "7.26.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.26.0.tgz#d416fdcdcb3236cd8f282065312813f8c13982f6"
integrity sha512-4R1ieRf52/izcZE7AlLy56uIHHDLT74Yzz2Iv2l6kDaYvEu9x+wMB5dZArVL8SYGXSYV2YAg70FcW5Y5nGGNIg==
eslint@~7.27.0:
version "7.27.0"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.27.0.tgz#665a1506d8f95655c9274d84bd78f7166b07e9c7"
integrity sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==
dependencies:
"@babel/code-frame" "7.12.11"
"@eslint/eslintrc" "^0.4.1"
@ -1530,12 +1535,14 @@ eslint@~7.26.0:
debug "^4.0.1"
doctrine "^3.0.0"
enquirer "^2.3.5"
escape-string-regexp "^4.0.0"
eslint-scope "^5.1.1"
eslint-utils "^2.1.0"
eslint-visitor-keys "^2.0.0"
espree "^7.3.1"
esquery "^1.4.0"
esutils "^2.0.2"
fast-deep-equal "^3.1.3"
file-entry-cache "^6.0.1"
functional-red-black-tree "^1.0.1"
glob-parent "^5.0.0"
@ -1547,7 +1554,7 @@ eslint@~7.26.0:
js-yaml "^3.13.1"
json-stable-stringify-without-jsonify "^1.0.1"
levn "^0.4.1"
lodash "^4.17.21"
lodash.merge "^4.6.2"
minimatch "^3.0.4"
natural-compare "^1.4.0"
optionator "^0.9.1"
@ -1556,7 +1563,7 @@ eslint@~7.26.0:
semver "^7.2.1"
strip-ansi "^6.0.0"
strip-json-comments "^3.1.0"
table "^6.0.4"
table "^6.0.9"
text-table "^0.2.0"
v8-compile-cache "^2.0.3"
@ -1704,7 +1711,7 @@ extend@3.0.2, extend@^3.0.0:
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
fast-deep-equal@^3.1.1:
fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@ -3009,6 +3016,11 @@ lodash.memoize@4.1.2:
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
lodash.merge@^4.6.2:
version "4.6.2"
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
lodash.pairs@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/lodash.pairs/-/lodash.pairs-3.0.1.tgz#bbe08d5786eeeaa09a15c91ebf0dcb7d2be326a9"
@ -3384,6 +3396,11 @@ mkdirp@~0.5.1:
dependencies:
minimist "^1.2.5"
modern-normalize@1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
mozjpeg@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/mozjpeg/-/mozjpeg-7.0.0.tgz#c20f67a538fcaaa388d325875c53c0e7bc432f7d"
@ -3485,11 +3502,6 @@ 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"
@ -3861,9 +3873,9 @@ pend@~1.2.0:
integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
version "2.3.0"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
pidtree@^0.3.0:
version "0.3.1"
@ -4629,9 +4641,9 @@ spdx-expression-parse@^3.0.0:
spdx-license-ids "^3.0.0"
spdx-license-ids@^3.0.0:
version "3.0.8"
resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.8.tgz#eb1e97ad99b11bf3f82a3b71a0472dd9a00f2ecf"
integrity sha512-NDgA96EnaLSvtbM7trJj+t1LUR3pirkDCcz9nOUlPb5DMBGsH7oES6C3hs3j7R9oHEa1EMvReS/BUAIT5Tcr0g==
version "3.0.9"
resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz#8a595135def9592bda69709474f1cbeea7c2467f"
integrity sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ==
specificity@^0.4.1:
version "0.4.1"
@ -4995,7 +5007,7 @@ svgo@^2.1.0, svgo@^2.3.0:
csso "^4.2.0"
stable "^0.1.8"
table@^6.0.4, table@^6.6.0:
table@^6.0.9, table@^6.6.0:
version "6.7.1"
resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
integrity sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==