jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 06:21:17 -04:00
Code Issues Activity

clean up style.scss

Browse Source
This commit is contained in:
Jake Jarvis
2019-09-24 23:06:17 -04:00
parent 180c5b3441
commit 08636a7b51
3 changed files with 101 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
assets/style.scss
View File

@@ -1,22 +1,21 @@
/* JJ SCSS */ /* JJ SCSS */
/* Compiled from https://github.com/jakejarvis/jarv.is/blob/master/assets/style.scss */ /* Compiled from https://github.com/jakejarvis/jarv.is/blob/master/assets/style.scss */
// Global Colors
// Main Colors $color-background: #ffffff;
$color-text: #202020; $color-text: #202020;
$color-links: #036e9b;
$color-light: #666666; $color-light: #666666;
$color-medium-light: #9e9e9e; $color-medium-light: #9e9e9e;
$color-super-light: #dddddd; $color-super-light: #dddddd;
$color-super-duper-light: #f4f4f4; $color-super-duper-light: #f4f4f4;
$color-read-more: #0077a7; $color-links: #036e9b;
// Colorful Homepage // Colorful Homepage
$colors-home:( $colors-home:(
boston: #fb4d42, boston: #fb4d42,
javascript: #f48024, javascript: #f48024,
node: #6fbc4e, node: #6fbc4e,
golang: #566468, golang: #00acd7,
react: #4fb3cd, react: #4fb3cd,
angular: #c3002f, angular: #c3002f,
vue: #486491, vue: #486491,
@@ -27,15 +26,15 @@ $colors-home:(
ruby: #d34135, ruby: #d34135,
infosec: #00b81a, infosec: #00b81a,
server: #0098ec, server: #0098ec,
serverless: #87cef7,
devops: #ff6200, devops: #ff6200,
containerization: #c48f49, containers: #c48f49,
y2k: #4169e1, y2k: #4169e1,
jbb: #9932cc, jbb: #9932cc,
github: #8d4eff, github: #8d4eff,
linkedin: #0073b1, linkedin: #0073b1,
facebook: #4267b2, facebook: #4267b2,
twitter: #00acee, twitter: #00acee,
dm: #00acee,
instagram: #a37754, instagram: #a37754,
mastodon: #6d8ca7, mastodon: #6d8ca7,
resume: #d54b3d, resume: #d54b3d,
@@ -50,15 +49,20 @@ $colors-home:(
news-6: #3e49bb, news-6: #3e49bb,
news-7: #973999 news-7: #973999
); );
$color-serverless: #87cef7;
$color-fairy: #f23e93; $color-fairy: #f23e93;
// Global Styles // Global Styles
* {
box-sizing: border-box;
}
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
background-color: $color-background;
color: $color-text; color: $color-text;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
@@ -67,24 +71,15 @@ body {
font-weight: 300; font-weight: 300;
font-size: 24px; font-size: 24px;
line-height: 1.5em; line-height: 1.5em;
}
* { a {
box-sizing: border-box; color: $color-links;
}
a {
background-color: transparent; background-color: transparent;
text-decoration: none; text-decoration: none;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
}
body {
a {
color: $color-links;
&:hover { &:hover {
border-color: $color-links; border-color: mix($color-links, $color-background, 40%);
border-color: unquote($color-links + '60');
} }
} }
@@ -136,18 +131,22 @@ body {
a { a {
// Loop through $colors-home -- the main reason I'm using SASS :) // Loop through $colors-home -- the main reason I'm using SASS :)
@each $key, $color in $colors-home { @each $id, $color in $colors-home {
&##{$key} { &##{$id} {
color: $color; color: $color;
&:hover { &:hover {
border-color: $color; border-color: mix($color, $color-background, 40%);
border-color: unquote($color + '60');
} }
} }
} }
} }
span { span {
&#serverless {
color: $color-serverless;
}
&#shh { &#shh {
color: $color-medium-light; color: $color-medium-light;
} }
@@ -214,7 +213,6 @@ body {
} }
// Blog Styles // Blog Styles
&#notes { &#notes {
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
@@ -406,26 +404,6 @@ body {
padding-left: 0; padding-left: 0;
} }
code {
font-family: monospace;
background: $color-super-duper-light;
padding: 0.2em;
border: 1px solid $color-super-light;
font-size: 16px;
}
pre code {
padding: 1em 1.5em;
line-height: 1.6;
page-break-inside: avoid;
border: 1px solid $color-super-light;
border-left: 3px solid $color-links;
overflow-x: scroll;
display: block;
max-width: 100%;
object-fit: scale-down;
}
hr { hr {
width: 60%; width: 60%;
margin: 10px auto; margin: 10px auto;
@@ -459,6 +437,26 @@ body {
margin: 0 auto; margin: 0 auto;
display: block; display: block;
} }
code {
font-family: monospace;
background: $color-super-duper-light;
padding: 0.2em;
border: 1px solid $color-super-light;
font-size: 16px;
}
pre code {
padding: 1em 1.5em;
line-height: 1.6;
page-break-inside: avoid;
border: 1px solid $color-super-light;
border-left: 3px solid $color-links;
overflow-x: scroll;
display: block;
max-width: 100%;
object-fit: scale-down;
}
} }
&#commento { &#commento {
@@ -514,21 +512,7 @@ body {
} }
// Fancy Waving Hand Emoji (TM) - https://jarv.is/notes/css-waving-hand-emoji/
@keyframes wave {
0% { transform: rotate( 0.0deg); }
10% { transform: rotate(-10.0deg); }
20% { transform: rotate( 12.0deg); }
30% { transform: rotate(-10.0deg); }
40% { transform: rotate( 9.0deg); }
50% { transform: rotate( 0.0deg); }
100% { transform: rotate( 0.0deg); }
}
// Responsive Awesomeness // Responsive Awesomeness
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
// Responsive Home // Responsive Home
body#home { body#home {
@@ -592,6 +576,10 @@ body {
main#single article { main#single article {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
div.meta {
font-size: 14px;
}
} }
header { header {
@@ -632,49 +620,48 @@ body {
} }
} }
} }
main#single article div.meta {
font-size: 14px;
}
} }
} }
// Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight /* Fancy Waving Hand Emoji (TM) - https://jarv.is/notes/css-waving-hand-emoji/ */
@keyframes wave {
0% { transform: rotate( 0.0deg); }
10% { transform: rotate(-10.0deg); }
20% { transform: rotate( 12.0deg); }
30% { transform: rotate(-10.0deg); }
40% { transform: rotate( 9.0deg); }
50% { transform: rotate( 0.0deg); }
100% { transform: rotate( 0.0deg); }
}
/* Syntax Highlighting - modified from Monokai Light https://github.com/mlgill/pygments-style-monokailight */
div.highlight span { div.highlight span {
&.k, &.kc, &.kd, &.kp, &.kr, &.kt, &.no { &.k, &.kc, &.kd, &.kp, &.kr, &.kt, &.no {
color: #03748a; color: #03748a;
} }
&.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p { &.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p {
color: #111111; color: #111111;
} }
&.na, &.nc, &.nd, &.ne, &.nf, &.nx { &.na, &.nc, &.nd, &.ne, &.nf, &.nx {
color: #489c44; color: #489c44;
} }
&.err, &.nt, &.o, &.ow, &.kn { &.err, &.nt, &.o, &.ow, &.kn {
color: #e8003d; color: #e8003d;
} }
&.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo { &.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo {
color: #8145ec; color: #8145ec;
} }
&.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss { &.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss {
color: #c17005; color: #c17005;
} }
&.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf { &.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf {
color: #6b6859; color: #6b6859;
} }
&.ge { &.ge {
font-style: italic; font-style: italic;
} }
&.gs { &.gs {
font-weight: bold; font-weight: bold;
} }

6
content/_index.md
View File

@@ -1,6 +1,6 @@
+++ +++
title = "Jake Jarvis – Web & Mobile Developer in Boston, MA" title = "Jake Jarvis – Web Developer in Boston, MA"
description = "I'm a full-stack web engineer and mobile developer based in Boston, Massachusetts specializing in modern JavaScript frameworks and iOS apps." description = "Hello! I'm a frontend web developer based in Boston, Massachusetts specializing in modern JavaScript frameworks and progressive web apps."
type = "home" type = "home"
date = "2019-09-04" date = "2019-09-24"
+++ +++

6
layouts/index.html
View File

@@ -7,7 +7,7 @@
</header> </header>
<p>My recent focus has been on <a href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/" title="&quot;The Brutal Lifecycle of JavaScript Frameworks&quot; by Ian Allen" id="javascript" target="_blank" rel="noopener noreferrer nofollow">modern JavaScript frameworks</a> like <a href="https://reactjs.org/" title="React Official Website" id="react" target="_blank" rel="noopener noreferrer nofollow">React</a>, <a href="https://angular.io/" title="Angular Official Website" id="angular" target="_blank" rel="noopener noreferrer nofollow">Angular</a>, and <a href="https://vuejs.org/" title="Vue.js Official Website" id="vue" target="_blank" rel="noopener noreferrer nofollow">Vue</a> in front of <a href="https://nodejs.org/en/" title="Node.js Official Website" id="node" target="_blank" rel="noopener noreferrer nofollow">Node</a> and <a href="https://golang.org/" title="Golang Official Website" id="golang" target="_blank" rel="noopener noreferrer nofollow">Go</a> backends...</p> <p>My recent focus has been on <a href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/" title="&quot;The Brutal Lifecycle of JavaScript Frameworks&quot; by Ian Allen" id="javascript" target="_blank" rel="noopener noreferrer nofollow">modern JavaScript frameworks</a> like <a href="https://reactjs.org/" title="React Official Website" id="react" target="_blank" rel="noopener noreferrer nofollow">React</a>, <a href="https://angular.io/" title="Angular Official Website" id="angular" target="_blank" rel="noopener noreferrer nofollow">Angular</a>, and <a href="https://vuejs.org/" title="Vue.js Official Website" id="vue" target="_blank" rel="noopener noreferrer nofollow">Vue</a> in front of <a href="https://nodejs.org/en/" title="Node.js Official Website" id="node" target="_blank" rel="noopener noreferrer nofollow">Node</a> and <a href="https://golang.org/" title="Golang Official Website" id="golang" target="_blank" rel="noopener noreferrer nofollow">Go</a> backends...</p>
<p>...but I'm fluent in classics like <a href="https://stitcher.io/blog/php-in-2019" title="&quot;PHP in 2019&quot; by Brent Roose" id="php" target="_blank" rel="noopener noreferrer nofollow">PHP</a>, <a href="https://www.ruby-lang.org/en/" title="Ruby Official Website" id="ruby" target="_blank" rel="noopener noreferrer nofollow">Ruby</a>, <a href="https://go.java/index.html" title="Java Official Website" id="java" target="_blank" rel="noopener noreferrer nofollow">Java</a>, <a href="https://isocpp.org/" title="Standard C++ Official Website" id="cpp" target="_blank" rel="noopener noreferrer nofollow">C++</a>, and <a href="https://www.python.org/" title="Python Official Website" id="python" target="_blank" rel="noopener noreferrer nofollow">Python</a> as well.</p> <p>...but I'm fluent in classics like <a href="https://stitcher.io/blog/php-in-2019" title="&quot;PHP in 2019&quot; by Brent Roose" id="php" target="_blank" rel="noopener noreferrer nofollow">PHP</a>, <a href="https://www.ruby-lang.org/en/" title="Ruby Official Website" id="ruby" target="_blank" rel="noopener noreferrer nofollow">Ruby</a>, <a href="https://go.java/index.html" title="Java Official Website" id="java" target="_blank" rel="noopener noreferrer nofollow">Java</a>, <a href="https://isocpp.org/" title="Standard C++ Official Website" id="cpp" target="_blank" rel="noopener noreferrer nofollow">C++</a>, and <a href="https://www.python.org/" title="Python Official Website" id="python" target="_blank" rel="noopener noreferrer nofollow">Python</a> as well.</p>
<p>Whenever possible, I also prioritize my experience with <a href="https://bugcrowd.com/jakejarvis" title="Jake Jarvis on Bugcrowd" id="infosec" target="_blank" rel="me noopener noreferrer">information security</a>, <a href="https://martinfowler.com/articles/serverless.html" title="&quot;Serverless Architectures&quot; by Mike Roberts" id="server" target="_blank" rel="noopener noreferrer nofollow">server<span id="serverless">(less)</span> architecture</a>, <a href="https://github.com/kamranahmedse/developer-roadmap/blob/67a72aab113e79c11e292ada394606f079f6a263/images/devops.png" title="&quot;DevOps Roadmap&quot; by Kamran Ahmed" id="devops" target="_blank" rel="noopener noreferrer nofollow">efficient DevOps &amp; CI</a>, and the <a href="https://www.digitalocean.com/community/tutorials/the-docker-ecosystem-an-overview-of-containerization" title="&quot;The Docker Ecosystem: An Overview of Containerization&quot; on DigitalOcean" id="containerization" target="_blank" rel="noopener noreferrer nofollow">containerization of everything</a>.</p> <p>Whenever possible, I also prioritize my experience with <a href="https://bugcrowd.com/jakejarvis" title="Jake Jarvis on Bugcrowd" id="infosec" target="_blank" rel="me noopener noreferrer">information security</a>, <a href="https://martinfowler.com/articles/serverless.html" title="&quot;Serverless Architectures&quot; by Mike Roberts" id="server" target="_blank" rel="noopener noreferrer nofollow">server<span id="serverless">(less)</span> architecture</a>, <a href="https://github.com/kamranahmedse/developer-roadmap/blob/67a72aab113e79c11e292ada394606f079f6a263/images/devops.png" title="&quot;DevOps Roadmap&quot; by Kamran Ahmed" id="devops" target="_blank" rel="noopener noreferrer nofollow">efficient DevOps &amp; CI</a>, and the <a href="https://www.digitalocean.com/community/tutorials/the-docker-ecosystem-an-overview-of-containerization" title="&quot;The Docker Ecosystem: An Overview of Containerization&quot; on DigitalOcean" id="containers" target="_blank" rel="noopener noreferrer nofollow">containerization of everything</a>.</p>
<p>I fell in love with <a href="{{ "y2k/" | absURL }}" title="My Terrible, Horrible, No Good, Very Bad First Website" id="y2k" target="_blank" rel="noopener">frontend web design</a> and <a href="https://github.com/jakejarvis/jbb#readme" title="Jake's Bulletin Board, circa 2003" id="jbb" target="_blank" rel="noopener noreferrer">backend programming</a> when my only source of income was <span id="fairy">the Tooth Fairy</span>. <span id="shh">(I've improved a little bit since those projects, I promise...)</span></p> <p>I fell in love with <a href="{{ "y2k/" | absURL }}" title="My Terrible, Horrible, No Good, Very Bad First Website" id="y2k" target="_blank" rel="noopener">frontend web design</a> and <a href="https://github.com/jakejarvis/jbb#readme" title="Jake's Bulletin Board, circa 2003" id="jbb" target="_blank" rel="noopener noreferrer">backend programming</a> when my only source of income was <span id="fairy">the Tooth Fairy</span>. <span id="shh">(I've improved a little bit since those projects, I promise...)</span></p>
<p>Since then, my side projects <p>Since then, my side projects
<a href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/" title="&quot;Student designs iPhone JoeyTracker app&quot; on The Tufts Daily" id="news-1" target="_blank" rel="noopener noreferrer nofollow">have</a> <!-- https://archive.fo/LZ3y0 --> <!-- /daily.pdf --> <a href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/" title="&quot;Student designs iPhone JoeyTracker app&quot; on The Tufts Daily" id="news-1" target="_blank" rel="noopener noreferrer nofollow">have</a> <!-- https://archive.fo/LZ3y0 --> <!-- /daily.pdf -->
@@ -18,8 +18,8 @@
<a href="https://books.google.com/books?id=RRUkLhyGZVgC&amp;lpg=PA226&amp;dq=%22jake%20jarvis%22&amp;pg=PA226#v=onepage&amp;q=%22jake%20jarvis%22&amp;f=false" title="&quot;The Facebook Effect&quot; by David Kirkpatrick (Google Books)" id="news-6" target="_blank" rel="noopener noreferrer nofollow">news</a> <a href="https://books.google.com/books?id=RRUkLhyGZVgC&amp;lpg=PA226&amp;dq=%22jake%20jarvis%22&amp;pg=PA226#v=onepage&amp;q=%22jake%20jarvis%22&amp;f=false" title="&quot;The Facebook Effect&quot; by David Kirkpatrick (Google Books)" id="news-6" target="_blank" rel="noopener noreferrer nofollow">news</a>
<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-7" target="_blank" rel="noopener noreferrer nofollow">outlets</a>. <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-7" target="_blank" rel="noopener noreferrer nofollow">outlets</a>.
</p> </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 noreferrer">GitHub</a> or <a href="https://www.linkedin.com/in/jakejarvis/" title="Jake Jarvis on LinkedIn" id="linkedin" target="_blank" rel="me noopener noreferrer">LinkedIn</a>, my adventures on <a href="https://twitter.com/jakejarvis" title="Jake Jarvis on Twitter" class="twitter" target="_blank" rel="me noopener noreferrer">Twitter</a>, <a href="https://www.facebook.com/jakejarvis" title="Jake Jarvis on Facebook" id="facebook" target="_blank" rel="me noopener noreferrer">Facebook</a>, <a href="https://www.instagram.com/jakejarvis/" title="Jake Jarvis on Instagram" id="instagram" target="_blank" rel="me noopener noreferrer">Instagram</a>, or <a href="https://mastodon.social/@jakejarvis" title="Jake Jarvis on Mastodon" id="mastodon" target="_blank" rel="me noopener noreferrer">Mastodon</a>, and my standard <a href="{{ "resume.pdf" | absURL }}" title="View PDF Resume" id="resume" target="_blank" rel="noopener">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 noreferrer">GitHub</a> or <a href="https://www.linkedin.com/in/jakejarvis/" title="Jake Jarvis on LinkedIn" id="linkedin" target="_blank" rel="me noopener noreferrer">LinkedIn</a>, my adventures on <a href="https://twitter.com/jakejarvis" title="Jake Jarvis on Twitter" id="twitter" target="_blank" rel="me noopener noreferrer">Twitter</a>, <a href="https://www.facebook.com/jakejarvis" title="Jake Jarvis on Facebook" id="facebook" target="_blank" rel="me noopener noreferrer">Facebook</a>, <a href="https://www.instagram.com/jakejarvis/" title="Jake Jarvis on Instagram" id="instagram" target="_blank" rel="me noopener noreferrer">Instagram</a>, or <a href="https://mastodon.social/@jakejarvis" title="Jake Jarvis on Mastodon" id="mastodon" target="_blank" rel="me noopener noreferrer">Mastodon</a>, and my standard <a href="{{ "resume.pdf" | absURL }}" title="View PDF Resume" id="resume" target="_blank" rel="noopener">PDF resume here</a>.</p>
<p>If any of this fits with what you're looking for, I'd love to hear from you via <a itemprop="email" class="u-email" 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 href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=87fb4b6006dd1beb3ed47fabd36cb66f4002b25b" title="Jake Jarvis&#39;s Public Key on Keybase" id="pgp" target="_blank" rel="noopener noreferrer nofollow">D36C B66F 4002 B25B</a></sup>, <a href="https://twitter.com/messages/compose?recipient_id=229769022" title="Send Direct Message on Twitter" class="twitter" target="_blank" rel="noopener noreferrer nofollow">DM</a>, or <a href="sms:+1-617-917-3737" title="Send SMS: +1 (617) 917-3737" id="sms">text</a>!</p> <p>If any of this fits with what you're looking for, I'd love to hear from you via <a itemprop="email" class="u-email" 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 href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=87fb4b6006dd1beb3ed47fabd36cb66f4002b25b" title="Jake Jarvis&#39;s Public Key on Keybase" id="pgp" target="_blank" rel="noopener noreferrer nofollow">D36C B66F 4002 B25B</a></sup>, <a href="https://twitter.com/messages/compose?recipient_id=229769022" title="Send Direct Message on Twitter" id="dm" target="_blank" rel="noopener noreferrer nofollow">DM</a>, or <a href="sms:+1-617-917-3737" title="Send SMS: +1 (617) 917-3737" id="sms">text</a>!</p>
<footer> <footer>
<div id="blog"><a href="{{ "notes/" | absURL }}" title="Jake Jarvis&#39;s Blog" rel="me">Read more at my blog...</a></div> <div id="blog"><a href="{{ "notes/" | absURL }}" title="Jake Jarvis&#39;s Blog" rel="me">Read more at my blog...</a></div>
<div id="panda"><a href="https://nationalzoo.si.edu/webcams/panda-cam#maincontent" title="Live Panda Party!" target="_blank" rel="noopener noreferrer nofollow"><span>&#x1F43C;</span></a></div> <div id="panda"><a href="https://nationalzoo.si.edu/webcams/panda-cam#maincontent" title="Live Panda Party!" target="_blank" rel="noopener noreferrer nofollow"><span>&#x1F43C;</span></a></div>