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

tidy up homepage font size/spacing

Browse Source
This commit is contained in:
Jake Jarvis 2020-05-07 09:41:14 -04:00
parent 323b3dd9f6
commit 705e800881
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
6 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,9 +16,10 @@ div#content {
h2 { h2 {
padding-bottom: 0.25em; padding-bottom: 0.25em;
border-bottom: 1px solid;
@include themed() { @include themed() {
border-bottom: 1px solid t(color-kinda-light); border-color: t(color-kinda-light);
} }
} }

8
assets/sass/components/_footer.scss
View File

@ -5,12 +5,13 @@ footer {
width: 100%; width: 100%;
letter-spacing: -0.005em; letter-spacing: -0.005em;
line-height: 1.7; line-height: 1.7;
padding: 1.25em 1.75em; padding: 1.25em 1.5em;
box-sizing: border-box; box-sizing: border-box;
border-top: 1px solid;
@include themed() { @include themed() {
color: t(color-medium); color: t(color-medium);
border-top: 1px solid t(color-kinda-light); border-color: t(color-kinda-light);
background-color: t(color-super-duper-light); background-color: t(color-super-duper-light);
} }
@ -45,9 +46,10 @@ footer {
a#source { a#source {
padding-bottom: 2px; padding-bottom: 2px;
border-bottom: 1px solid;
@include themed() { @include themed() {
border-bottom: 1px solid t(color-light); border-color: t(color-light);
} }
} }
} }

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

@ -54,9 +54,10 @@ strong {
blockquote { blockquote {
margin-left: 0.5em; margin-left: 0.5em;
padding-left: 1em; padding-left: 1em;
border-left: 5px solid;
@include themed() { @include themed() {
border-left: 5px solid t(color-links); border-color: t(color-links);
} }
} }
@ -98,13 +99,14 @@ code {
font-size: 0.95em; font-size: 0.95em;
letter-spacing: 0; letter-spacing: 0;
page-break-inside: avoid; page-break-inside: avoid;
border: 1px solid;
// inline code in paragraphs (single tildes) // inline code in paragraphs (single tildes)
padding: 0.2em; padding: 0.2em;
@include themed() { @include themed() {
background-color: t(color-super-duper-light); background-color: t(color-super-duper-light);
border: 1px solid t(color-light); border-color: t(color-light);
} }
} }
@ -115,10 +117,12 @@ div.highlight {
overflow-x: scroll; overflow-x: scroll;
object-fit: scale-down; object-fit: scale-down;
margin: 1em 0; margin: 1em 0;
border: 1px solid;
border-left: 3px solid;
@include themed() { @include themed() {
border: 1px solid t(color-light); border-color: t(color-light);
border-left: 3px solid t(color-links); border-left-color: t(color-links);
background-color: t(color-super-duper-light); background-color: t(color-super-duper-light);
} }

5
assets/sass/components/_header.scss
View File

@ -3,11 +3,12 @@
// Global Header Styles // Global Header Styles
header { header {
width: 100%; width: 100%;
padding: 0 1.7em; padding: 0 1.5em;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid;
@include themed() { @include themed() {
border-bottom: 1px solid t(color-kinda-light); border-color: t(color-kinda-light);
background-color: t(color-super-duper-light); background-color: t(color-super-duper-light);
} }

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

@ -2,9 +2,9 @@
// Home Styles // Home Styles
main#home { main#home {
font-size: 1.1em; font-size: 1.025em;
padding-top: 1.5em; padding-top: 1.5em;
padding-bottom: 0.5em; padding-bottom: 0.75em;
h2 { h2 {
margin: 0 0 0.6em 0; margin: 0 0 0.6em 0;
@ -12,6 +12,7 @@ main#home {
font-weight: 500; font-weight: 500;
letter-spacing: -0.014em; letter-spacing: -0.014em;
line-height: 1.1; line-height: 1.1;
margin-left: -0.03em; // TODO: why is this indented slightly?
} }
h3 { h3 {
@ -23,50 +24,40 @@ main#home {
} }
p { p {
margin: 0.8em 0; margin: 0.85em 0;
letter-spacing: -0.015em; letter-spacing: -0.009em;
line-height: 1.6; line-height: 1.6;
} }
sup { sup {
top: -0.5em; font-size: 0.6em;
font-size: 0.54em;
letter-spacing: -0.005em; letter-spacing: -0.005em;
line-height: 0; line-height: 0;
position: relative; position: relative;
top: -0.5em;
vertical-align: middle; vertical-align: middle;
} }
img#me { img#me {
float: right; float: right;
margin-bottom: 0.5em; margin-bottom: 0.6em;
margin-left: 1em; margin-left: 1.6em;
padding: 4px; padding: 4px;
border-radius: 50%;
width: 160px; width: 160px;
height: 160px; height: 160px;
border: 1px solid;
border-radius: 50%;
@include themed() { @include themed() {
border: 1px solid t(color-light); border-color: t(color-light);
} }
} }
a { // easter egg emoji cursor
&#blog { a#birthday {
font-size: 0.9em; // prettier-ignore
margin-bottom: 0; &:hover {
cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
span {
margin-right: 0.1em;
}
}
// easter egg emoji cursor
&#birthday {
// prettier-ignore
&:hover {
cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
}
} }
} }
@ -81,6 +72,10 @@ main#home {
color: t(color-medium-light); color: t(color-medium-light);
} }
} }
&.wave {
margin-left: 2px;
}
} }
} }
@ -97,28 +92,31 @@ main#home {
// Responsive // Responsive
@mixin responsive--home() { @mixin responsive--home() {
main#home { main#home {
font-size: 1em; font-size: 0.975em;
padding: 1.2em 1.2em 0.2em 1.2em; padding: 1.2em 1.2em 0.4em 1.2em;
h2 { h2 {
font-size: 1.45em; font-size: 1.5em;
letter-spacing: -0.014em;
line-height: 1.4; line-height: 1.4;
} }
h3 { h3 {
font-size: 1.25em; font-size: 1.185em;
line-height: 1.4; letter-spacing: -0.017em;
line-height: 1.55;
}
p {
line-height: 1.65;
letter-spacing: -0.012em;
} }
img#me { img#me {
width: 85px; width: 90px;
height: 85px; height: 90px;
margin: 0 0 0.3em 0.6em; margin: 0 0 0.3em 0.6em;
padding: 2px; padding: 2px;
} }
a#blog {
font-size: 1em;
}
} }
} }

4
content/_index.md
View File

@ -1,6 +1,6 @@
--- ---
title: "Jake Jarvis – Front-End Web Developer in Boston, MA" title: "Jake Jarvis – Front-End Web Developer in Boston, MA"
date: 2020-05-01 23:50:11-0400 date: 2020-05-07 00:09:46-0400
type: home type: home
sitemap: sitemap:
changefreq: weekly changefreq: weekly
@ -29,5 +29,3 @@ sitemap:
<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>.</p> <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>.</p>
<p>You can find some of my work on <a href="https://github.com/jakejarvis" title="Jake Jarvis on GitHub" id="github" target="_blank" rel="me noopener">GitHub</a> or <a href="https://www.linkedin.com/in/jakejarvis/" title="Jake Jarvis on LinkedIn" id="linkedin" target="_blank" rel="me noopener">LinkedIn</a>, my adventures on <a href="https://twitter.com/jakejarvis" title="Jake Jarvis on Twitter" id="twitter" target="_blank" rel="me noopener">Twitter</a>, <a href="https://www.facebook.com/jakejarvis" title="Jake Jarvis on Facebook" id="facebook" target="_blank" rel="me noopener">Facebook</a>, <a href="https://www.instagram.com/jakejarvis/" title="Jake Jarvis on Instagram" id="instagram" target="_blank" rel="me noopener">Instagram</a>, or <a href="https://pogge.rs/@jake" title="Jake Jarvis on Mastodon" id="mastodon" target="_blank" rel="me noopener">Mastodon</a>, and my old-school <a href="/resume.pdf" title="View PDF Resume" id="resume">PDF resume here</a>.</p> <p>You can find some of my work on <a href="https://github.com/jakejarvis" title="Jake Jarvis on GitHub" id="github" target="_blank" rel="me noopener">GitHub</a> or <a href="https://www.linkedin.com/in/jakejarvis/" title="Jake Jarvis on LinkedIn" id="linkedin" target="_blank" rel="me noopener">LinkedIn</a>, my adventures on <a href="https://twitter.com/jakejarvis" title="Jake Jarvis on Twitter" id="twitter" target="_blank" rel="me noopener">Twitter</a>, <a href="https://www.facebook.com/jakejarvis" title="Jake Jarvis on Facebook" id="facebook" target="_blank" rel="me noopener">Facebook</a>, <a href="https://www.instagram.com/jakejarvis/" title="Jake Jarvis on Instagram" id="instagram" target="_blank" rel="me noopener">Instagram</a>, or <a href="https://pogge.rs/@jake" title="Jake Jarvis on Mastodon" id="mastodon" target="_blank" rel="me noopener">Mastodon</a>, and my old-school <a href="/resume.pdf" title="View PDF Resume" id="resume">PDF resume here</a>.</p>
<p>I'd love to hear from you via <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>&nbsp;<a class="no-underline" href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=3bc6e5776bf379d36f6714802b0c9cf251e69a39" title="My Public PGP Key" id="pgp" target="_blank" rel="pgpkey authn noopener">2B0C 9CF2 51E6 9A39</a></sup>, <a href="https://twitter.com/messages/compose?recipient_id=229769022" title="Send Direct Message on Twitter" id="dm" target="_blank" rel="noopener">DM</a>, or <a href="sms:+1-617-917-3737" title="Send SMS: +1 (617) 917-3737" id="sms">text</a>!</p> <p>I'd love to hear from you via <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>&nbsp;<a class="no-underline" href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=3bc6e5776bf379d36f6714802b0c9cf251e69a39" title="My Public PGP Key" id="pgp" target="_blank" rel="pgpkey authn noopener">2B0C 9CF2 51E6 9A39</a></sup>, <a href="https://twitter.com/messages/compose?recipient_id=229769022" title="Send Direct Message on Twitter" id="dm" target="_blank" rel="noopener">DM</a>, or <a href="sms:+1-617-917-3737" title="Send SMS: +1 (617) 917-3737" id="sms">text</a>!</p>
<p><a href="/notes/" title="My Blog" id="blog" rel="me"><span>&#x1F4DD;</span> Read more at my blog...</a></p>