mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 12:36:20 -04:00
clean up style.scss
This commit is contained in:
parent
180c5b3441
commit
08636a7b51
@ -1,64 +1,68 @@
|
||||
/* JJ SCSS */
|
||||
/* Compiled from https://github.com/jakejarvis/jarv.is/blob/master/assets/style.scss */
|
||||
|
||||
|
||||
// Main Colors
|
||||
$color-text: #202020;
|
||||
$color-links: #036e9b;
|
||||
$color-light: #666666;
|
||||
// Global Colors
|
||||
$color-background: #ffffff;
|
||||
$color-text: #202020;
|
||||
$color-light: #666666;
|
||||
$color-medium-light: #9e9e9e;
|
||||
$color-super-light: #dddddd;
|
||||
$color-super-light: #dddddd;
|
||||
$color-super-duper-light: #f4f4f4;
|
||||
$color-read-more: #0077a7;
|
||||
$color-links: #036e9b;
|
||||
|
||||
// Colorful Homepage
|
||||
$colors-home:(
|
||||
boston: #fb4d42,
|
||||
boston: #fb4d42,
|
||||
javascript: #f48024,
|
||||
node: #6fbc4e,
|
||||
golang: #566468,
|
||||
react: #4fb3cd,
|
||||
angular: #c3002f,
|
||||
vue: #486491,
|
||||
java: #ab6311,
|
||||
cpp: #865fc5,
|
||||
python: #fea500,
|
||||
php: #8892bf,
|
||||
ruby: #d34135,
|
||||
infosec: #00b81a,
|
||||
server: #0098ec,
|
||||
serverless: #87cef7,
|
||||
devops: #ff6200,
|
||||
containerization: #c48f49,
|
||||
y2k: #4169e1,
|
||||
jbb: #9932cc,
|
||||
github: #8d4eff,
|
||||
linkedin: #0073b1,
|
||||
facebook: #4267b2,
|
||||
twitter: #00acee,
|
||||
instagram: #a37754,
|
||||
mastodon: #6d8ca7,
|
||||
resume: #d54b3d,
|
||||
email: #de0c0c,
|
||||
pgp: #777777,
|
||||
sms: #6fcc01,
|
||||
news-1: #ff1b1b,
|
||||
news-2: #f78200,
|
||||
news-3: #f2b702,
|
||||
news-4: #5ebd3e,
|
||||
news-5: #009cdf,
|
||||
news-6: #3e49bb,
|
||||
news-7: #973999
|
||||
node: #6fbc4e,
|
||||
golang: #00acd7,
|
||||
react: #4fb3cd,
|
||||
angular: #c3002f,
|
||||
vue: #486491,
|
||||
java: #ab6311,
|
||||
cpp: #865fc5,
|
||||
python: #fea500,
|
||||
php: #8892bf,
|
||||
ruby: #d34135,
|
||||
infosec: #00b81a,
|
||||
server: #0098ec,
|
||||
devops: #ff6200,
|
||||
containers: #c48f49,
|
||||
y2k: #4169e1,
|
||||
jbb: #9932cc,
|
||||
github: #8d4eff,
|
||||
linkedin: #0073b1,
|
||||
facebook: #4267b2,
|
||||
twitter: #00acee,
|
||||
dm: #00acee,
|
||||
instagram: #a37754,
|
||||
mastodon: #6d8ca7,
|
||||
resume: #d54b3d,
|
||||
email: #de0c0c,
|
||||
pgp: #777777,
|
||||
sms: #6fcc01,
|
||||
news-1: #ff1b1b,
|
||||
news-2: #f78200,
|
||||
news-3: #f2b702,
|
||||
news-4: #5ebd3e,
|
||||
news-5: #009cdf,
|
||||
news-6: #3e49bb,
|
||||
news-7: #973999
|
||||
);
|
||||
$color-serverless: #87cef7;
|
||||
$color-fairy: #f23e93;
|
||||
|
||||
|
||||
// Global Styles
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: $color-background;
|
||||
color: $color-text;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
|
||||
@ -67,24 +71,15 @@ body {
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
a {
|
||||
color: $color-links;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-links;
|
||||
border-color: unquote($color-links + '60');
|
||||
border-color: mix($color-links, $color-background, 40%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -136,18 +131,22 @@ body {
|
||||
|
||||
a {
|
||||
// Loop through $colors-home -- the main reason I'm using SASS :)
|
||||
@each $key, $color in $colors-home {
|
||||
&##{$key} {
|
||||
@each $id, $color in $colors-home {
|
||||
&##{$id} {
|
||||
color: $color;
|
||||
|
||||
&:hover {
|
||||
border-color: $color;
|
||||
border-color: unquote($color + '60');
|
||||
border-color: mix($color, $color-background, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
&#serverless {
|
||||
color: $color-serverless;
|
||||
}
|
||||
|
||||
&#shh {
|
||||
color: $color-medium-light;
|
||||
}
|
||||
@ -214,7 +213,6 @@ body {
|
||||
}
|
||||
|
||||
// Blog Styles
|
||||
|
||||
&#notes {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
@ -406,26 +404,6 @@ body {
|
||||
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 {
|
||||
width: 60%;
|
||||
margin: 10px auto;
|
||||
@ -459,6 +437,26 @@ body {
|
||||
margin: 0 auto;
|
||||
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 {
|
||||
@ -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
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
// Responsive Home
|
||||
body#home {
|
||||
@ -592,6 +576,10 @@ body {
|
||||
main#single article {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
div.meta {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
&.k, &.kc, &.kd, &.kp, &.kr, &.kt, &.no {
|
||||
color: #03748a;
|
||||
}
|
||||
|
||||
&.n, &.bp, &.nb, &.ni, &.fm, &.nl, &.nn, &.py, &.nv, &.vc, &.vg, &.vi, &.vm, &.p {
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
&.na, &.nc, &.nd, &.ne, &.nf, &.nx {
|
||||
color: #489c44;
|
||||
}
|
||||
|
||||
&.err, &.nt, &.o, &.ow, &.kn {
|
||||
color: #e8003d;
|
||||
}
|
||||
|
||||
&.l, &.se, &.m, &.mb, &.mf, &.mh, &.mi, &.il, &.mo {
|
||||
color: #8145ec;
|
||||
}
|
||||
|
||||
&.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss {
|
||||
color: #c17005;
|
||||
}
|
||||
|
||||
&.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf {
|
||||
color: #6b6859;
|
||||
}
|
||||
|
||||
&.ge {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&.gs {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
+++
|
||||
title = "Jake Jarvis – Web & Mobile 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."
|
||||
title = "Jake Jarvis – Web Developer in Boston, MA"
|
||||
description = "Hello! I'm a frontend web developer based in Boston, Massachusetts specializing in modern JavaScript frameworks and progressive web apps."
|
||||
type = "home"
|
||||
date = "2019-09-04"
|
||||
date = "2019-09-24"
|
||||
+++
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</header>
|
||||
<p>My recent focus has been on <a href="https://stackoverflow.blog/2018/01/11/brutal-lifecycle-javascript-frameworks/" title=""The Brutal Lifecycle of JavaScript Frameworks" 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=""PHP in 2019" 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=""Serverless Architectures" 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=""DevOps Roadmap" by Kamran Ahmed" id="devops" target="_blank" rel="noopener noreferrer nofollow">efficient DevOps & CI</a>, and the <a href="https://www.digitalocean.com/community/tutorials/the-docker-ecosystem-an-overview-of-containerization" title=""The Docker Ecosystem: An Overview of Containerization" 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=""Serverless Architectures" 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=""DevOps Roadmap" by Kamran Ahmed" id="devops" target="_blank" rel="noopener noreferrer nofollow">efficient DevOps & CI</a>, and the <a href="https://www.digitalocean.com/community/tutorials/the-docker-ecosystem-an-overview-of-containerization" title=""The Docker Ecosystem: An Overview of Containerization" 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>Since then, my side projects
|
||||
<a href="https://tuftsdaily.com/news/2012/04/06/student-designs-iphone-joeytracker-app/" title=""Student designs iPhone JoeyTracker app" 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&lpg=PA226&dq=%22jake%20jarvis%22&pg=PA226#v=onepage&q=%22jake%20jarvis%22&f=false" title=""The Facebook Effect" 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=""Fresh Faces in Tech: 10 Kid Entrepreneurs to Watch" on Gigaom" id="news-7" target="_blank" rel="noopener noreferrer nofollow">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 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>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="mailto:jake@jarv.is" title="Send Email" id="email">email</a><sup> <a href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=87fb4b6006dd1beb3ed47fabd36cb66f4002b25b" title="Jake Jarvis'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>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="mailto:jake@jarv.is" title="Send Email" id="email">email</a><sup> <a href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=87fb4b6006dd1beb3ed47fabd36cb66f4002b25b" title="Jake Jarvis'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>
|
||||
<div id="blog"><a href="{{ "notes/" | absURL }}" title="Jake Jarvis'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>🐼</span></a></div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user