diff --git a/assets/sass/abstracts/_settings.scss b/assets/sass/abstracts/_settings.scss index 948af749..e422e4e1 100644 --- a/assets/sass/abstracts/_settings.scss +++ b/assets/sass/abstracts/_settings.scss @@ -18,7 +18,7 @@ $font-stack-mono: $webfont-mono, $system-fonts-monospace; $font-stack-mono-variable: $webfont-mono-variable, $system-fonts-monospace; // Width at which to switch to mobile styles -$responsive-width: 830px; +$responsive-width: 800px; // Fancy link underline settings $link-underline-opacity: 40%; diff --git a/assets/sass/components/_content.scss b/assets/sass/components/_content.scss index 6436ea8a..76285400 100644 --- a/assets/sass/components/_content.scss +++ b/assets/sass/components/_content.scss @@ -1,8 +1,8 @@ @charset "UTF-8"; div#content { - font-size: 0.935em; // ~15px - letter-spacing: -0.008em; + font-size: 0.925em; + letter-spacing: -0.004em; line-height: 1.7; h1, diff --git a/assets/sass/components/_global.scss b/assets/sass/components/_global.scss index 31123dc3..348e5113 100644 --- a/assets/sass/components/_global.scss +++ b/assets/sass/components/_global.scss @@ -6,6 +6,9 @@ body { height: 100%; margin: 0 auto; scroll-behavior: smooth; + + // global base font size: + font-size: 0.975em; } // manually setting light/dark mode backgrounds and bulb icon diff --git a/assets/sass/components/_header.scss b/assets/sass/components/_header.scss index 1dd7655c..22cb5c97 100644 --- a/assets/sass/components/_header.scss +++ b/assets/sass/components/_header.scss @@ -29,9 +29,10 @@ header { } h1#name { - margin: 0.95em 0 0.95em 0.725em; + margin: 1.1em 0 1.1em 0.725em; font-size: 1.35em; font-weight: 500; + line-height: 1; letter-spacing: -0.01em; } @@ -67,12 +68,10 @@ header { align-items: center; margin: 0; padding: 0; - font-size: 1.2em; - letter-spacing: -0.002em; li { text-align: right; - margin-left: 1.7em; + margin-left: 2em; a { display: inline-block; @@ -83,7 +82,7 @@ header { } &:hover { - transform: scale(1.1); + transform: scale(1.15); @include colors() { color: c(links); @@ -91,14 +90,15 @@ header { } span.icon { - font-size: 1.15em; + font-size: 1.35em; vertical-align: -0.075em; } span.text { - font-size: 0.8em; + font-size: 0.95em; font-weight: 500; - margin-left: 0.5em; + letter-spacing: -0.002em; + margin-left: 0.55em; } } @@ -123,7 +123,7 @@ header { height: 1.5em; width: 1em; - margin-left: 1.7em; + margin-left: 2em; cursor: pointer; // hidden by default in case user's JS is disabled, switches to `block` onload in dark-mode.js diff --git a/assets/sass/pages/_home.scss b/assets/sass/pages/_home.scss index 6d391fd5..c0221e0d 100644 --- a/assets/sass/pages/_home.scss +++ b/assets/sass/pages/_home.scss @@ -2,7 +2,7 @@ // Home Styles div.layout-home { - font-size: 1.025em; + font-size: 1em; padding-top: 1.5em; padding-bottom: 0.75em; @@ -26,7 +26,7 @@ div.layout-home { p { margin: 0.85em 0; letter-spacing: -0.009em; - line-height: 1.65; + line-height: 1.7; } sup { @@ -48,7 +48,7 @@ div.layout-home { img#me { float: right; margin-bottom: 0.6em; - margin-left: 1.6em; + margin-left: 1.2em; padding: 4px; width: 160px; height: 160px; diff --git a/assets/sass/pages/_list.scss b/assets/sass/pages/_list.scss index 0ecaa36e..4c765b0f 100644 --- a/assets/sass/pages/_list.scss +++ b/assets/sass/pages/_list.scss @@ -9,7 +9,7 @@ div.layout-list { font-size: 1.05em; h2 { - font-size: 2.25em; + font-size: 2em; letter-spacing: -0.025em; margin-top: 0; margin-bottom: 0.4em; @@ -24,7 +24,7 @@ div.layout-list { li { display: flex; - letter-spacing: -0.011em; + letter-spacing: -0.008em; line-height: 1.75; margin-bottom: 1em; @@ -53,7 +53,7 @@ div.layout-list { font-size: 1em; h2 { - font-size: 2em; + font-size: 1.75em; } } } diff --git a/assets/sass/pages/_single.scss b/assets/sass/pages/_single.scss index 7baed639..d82cb190 100644 --- a/assets/sass/pages/_single.scss +++ b/assets/sass/pages/_single.scss @@ -6,7 +6,7 @@ div.layout-single { padding-bottom: 1em; div#meta { - font-size: 0.85em; + font-size: 0.875em; line-height: 1.3; letter-spacing: 0.04em; margin-top: 0.8em; @@ -26,12 +26,12 @@ div.layout-single { h1.title { margin-top: 0.3em; - margin-bottom: 0.6em; + margin-bottom: 0.5em; margin-left: -0.03em; // TODO: why is this indented slightly? - font-size: 2.2em; + font-size: 2.1em; line-height: 1.3; font-weight: 700; - letter-spacing: -0.005em; + letter-spacing: -0.006em; a { color: inherit; diff --git a/assets/sass/pages/_videos.scss b/assets/sass/pages/_videos.scss index 6d09920d..dcbe08ce 100644 --- a/assets/sass/pages/_videos.scss +++ b/assets/sass/pages/_videos.scss @@ -32,7 +32,6 @@ div.layout-video { video { width: 100%; - max-width: 975px; height: auto; } } diff --git a/config.toml b/config.toml index b57f5c8d..5fa210ec 100644 --- a/config.toml +++ b/config.toml @@ -29,7 +29,7 @@ disableAliases = true image = "img/logo.png" # relative to assetDir root mainSection = "notes" # content that appears in feeds [params.theme] - maxWidth = 940 # px + maxWidth = 865 # px defaultTheme = "light" # light or dark? [params.license] name = "CC-BY-4.0" diff --git a/content/_index.md b/content/_index.md index 9a1b45f0..c3ab9ce0 100644 --- a/content/_index.md +++ b/content/_index.md @@ -15,13 +15,13 @@ amp: false ## Hi there! I'm Jake. ๐Ÿ‘‹ -### I'm a frontend web developer based in Boston. +### I'm a frontend web developer based in Boston, MA. My current focus is on the JAMstack and modern JavaScript frameworks like React and Angular in front of Node and Go backends, but I'm fluent in classics like PHP, Ruby, and Python too. Whenever possible, I also apply my passion for information security, server(less) architecture, efficient DevOps automation, and the containerization of everything. -I fell in love with frontend web design and backend programming when my only source of income was the Tooth Fairy. I've improved a bit since then, I hope... ๐Ÿคทโ€โ™‚๏ธ +I fell in love with frontend web design and backend programming back when my only source of income was the Tooth Fairy. I've improved a bit since then, I hope... ๐Ÿคทโ€โ™‚๏ธ Over the years, some of my side projects have diff --git a/content/notes/coronavirus-open-source/index.md b/content/notes/coronavirus-open-source/index.md index 41c83125..62c2f36d 100644 --- a/content/notes/coronavirus-open-source/index.md +++ b/content/notes/coronavirus-open-source/index.md @@ -25,7 +25,7 @@ draft: false {{< octocat.inline >}} {{- with index .Params 0 -}} - + {{- end -}} {{}} @@ -33,7 +33,7 @@ We're all quickly learning that worldwide pandemics can bring out both [the best These are just a few incredible open source projects that didn't exist a few months ago, but rapidly formed teams of dozens of contributors to fill both big needs and small niches in the fight to defeat the novel coronavirus, aka [**COVID-19**](https://www.cdc.gov/coronavirus/2019-nCoV/index.html). -## [The COVID Tracking Project](https://covidtracking.com/)ย {{< octocat.inline "https://github.com/COVID19Tracking/website" />}} +## [The COVID Tracking Project](https://covidtracking.com/)ย {{% octocat.inline "https://github.com/COVID19Tracking/website" /%}} Now that Americans are _finally_ starting to get tested for the coronavirus, information and statistics about the results are being released state-by-state, which has led to a scattering of primary sources across the web, each releasing [different figures in different forms](https://docs.google.com/document/d/1OyN6_1UeDePwPwKi6UKZB8GwNC7-kSf1-BO2af8kqVA/edit). The [COVID Tracking Project](https://covidtracking.com/) collects as much information as possible from each local health authority's website and puts everything together in [easy-to-digest tables](https://covidtracking.com/data/), as well as [spreadsheets](https://docs.google.com/spreadsheets/u/2/d/e/2PACX-1vRwAqp96T9sYYq2-i7Tj0pvTf6XVHjDSMIKBdZHXiCGGdNC0ypEU9NbngS8mxea55JuCFuua1MUeOj5/pubhtml) and a [public API](https://covidtracking.com/api/). @@ -41,7 +41,7 @@ The maintainers are also [fully transparent](https://covidtracking.com/about-tra {{< image src="images/covidtracking.png" width="680" alt="The COVID Tracking Project" link="https://covidtracking.com/" />}} -## [#findthemasks](https://findthemasks.com/) {{< octocat.inline "https://github.com/r-pop/findthemasks" />}} +## [#findthemasks](https://findthemasks.com/) {{% octocat.inline "https://github.com/r-pop/findthemasks" /%}} This one might be my favorite, simply because of its laser-like focus on solving a very specific (yet catastrophic) problem. The United States is [already running out](https://www.nytimes.com/2020/03/19/health/coronavirus-masks-shortage.html) of [personal protective equipment (PPE)](https://www.fda.gov/medical-devices/general-hospital-devices-and-supplies/personal-protective-equipment-infection-control) for the healthcare professionals on the front lines of this crisis. [#findthemasks.com](https://findthemasks.com/) has gathered specific donation requests and points of contact from hospitals around the country in desperate need of basic supplies. @@ -49,7 +49,7 @@ _Please_ look up your local hospitals on [#findthemasks](https://findthemasks.co {{< image src="images/findthemasks.png" width="600" alt="#findthemasks" link="https://findthemasks.com/" />}} -## [#StayTheFuckHome](https://staythefuckhome.com/) {{< octocat.inline "https://github.com/flore2003/staythefuckhome" />}} +## [#StayTheFuckHome](https://staythefuckhome.com/) {{% octocat.inline "https://github.com/flore2003/staythefuckhome" /%}} I figured I'd throw in this cheeky website broadcasting a simple but serious message: **STAY THE FUCK HOME!!!** If you're _still_ not convinced of the importance of this "suggestion," give their ["Self-Quarantine Manifesto"](https://staythefuckhome.com/) a quick read. Now. @@ -57,37 +57,37 @@ The [GitHub community](https://github.com/flore2003/staythefuckhome/pulls?q=is%3 {{< image src="images/staythefuckhome.png" width="600" alt="#StayTheFuckHome" link="https://staythefuckhome.com/" />}} -## [COVID-19 Dashboards](https://covid19dashboards.com/) {{< octocat.inline "https://github.com/github/covid19-dashboard" />}} +## [COVID-19 Dashboards](https://covid19dashboards.com/) {{% octocat.inline "https://github.com/github/covid19-dashboard" /%}} This collection of various visualizations is fascinating (and sobering) to look at. If you're smarter than I am and have experience in data analysis, their team (led by a [GitHub engineer](https://github.com/hamelsmu)) would be more than happy to [add your contribution](https://github.com/github/covid19-dashboard/blob/master/CONTRIBUTING.md) to the site โ€”ย they're using [Jupyter Notebooks](https://jupyter.org/) and [fastpages](https://github.com/fastai/fastpages). {{< image src="images/covid19dashboards.png" width="580" alt="COVID-19 Dashboards" link="https://covid19dashboards.com/" />}} -## [CoronaTracker](https://coronatracker.samabox.com/) {{< octocat.inline "https://github.com/MhdHejazi/CoronaTracker" />}} +## [CoronaTracker](https://coronatracker.samabox.com/) {{% octocat.inline "https://github.com/MhdHejazi/CoronaTracker" /%}} CoronaTracker is a _beautiful_ cross-platform app for iOS and macOS with intuitive maps and charts fed by reputable live data. Apple is [being justifiably picky](https://developer.apple.com/news/?id=03142020a) about "non-official" Coronavirus apps in their App Store ([so is Google](https://blog.google/inside-google/company-announcements/coronavirus-covid19-response/), by the way) but you can still [download the macOS app directly](https://coronatracker.samabox.com/) or [compile the iOS source code](https://github.com/MhdHejazi/CoronaTracker#1-ios-app) yourself using Xcode if you wish. {{< image src="images/coronatracker.png" alt="CoronaTracker" link="https://coronatracker.samabox.com/" />}} -## [Staying Home Club](https://stayinghome.club/) {{< octocat.inline "https://github.com/phildini/stayinghomeclub" />}} +## [Staying Home Club](https://stayinghome.club/) {{% octocat.inline "https://github.com/phildini/stayinghomeclub" /%}} A bit more family-friendly than [#StayTheFuckHome](https://staythefuckhome.com/), the [Staying Home Club](https://stayinghome.club/) is maintaining a running list of over a thousand companies and universities mandating that employees and students work from home, as well as events that have been canceled or moved online. Quarantining yourself might feel lonely, but here's solid proof that you're far from alone right now. {{< image src="images/stayinghome.png" width="600" alt="Staying Home Club" link="https://stayinghome.club/" />}} -## [Nextstrain for nCoV](https://nextstrain.org/ncov) {{< octocat.inline "https://github.com/nextstrain/ncov" />}} +## [Nextstrain for nCoV](https://nextstrain.org/ncov) {{% octocat.inline "https://github.com/nextstrain/ncov" /%}} This one is a bit over my head, but apparently [Nextstrain](https://nextstrain.org/) is a pretty impressive open-source service targeted at genome data analysis and visualization of different pathogens. Their [COVID-19 page](https://nextstrain.org/ncov) is still awe-inspiring to look at for a layman like me, but probably a thousand times more so if you're an actual scientist โ€”ย in which case, the [genome data they've open-sourced](https://github.com/nextstrain/ncov) might be of interest to you. {{< image src="images/nextstrain.png" alt="Nextstrain for nCOV" link="https://nextstrain.org/ncov" />}} -## [Johns Hopkins 2019-nCoV Data](https://systems.jhu.edu/research/public-health/ncov/) {{< octocat.inline "https://github.com/CSSEGISandData/COVID-19" />}} +## [Johns Hopkins 2019-nCoV Data](https://systems.jhu.edu/research/public-health/ncov/) {{% octocat.inline "https://github.com/CSSEGISandData/COVID-19" /%}} Johns Hopkins University's [visual COVID-19 global dashboard](https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6) has been bookmarked as my go-to source of information since the beginning of this crisis earlier this year. Now, JHU's [Center for Systems Science and Engineering](https://systems.jhu.edu/) has open-sourced [their data and analysis](https://github.com/CSSEGISandData/COVID-19) for anybody to use. {{< image src="images/hopkins.png" alt="Johns Hopkins 2019-nCoV Data" link="https://systems.jhu.edu/research/public-health/ncov/" />}} -## [COVID-19 Scenarios](https://neherlab.org/covid19/) {{< octocat.inline "https://github.com/neherlab/covid19_scenarios" />}} +## [COVID-19 Scenarios](https://neherlab.org/covid19/) {{% octocat.inline "https://github.com/neherlab/covid19_scenarios" /%}} COVID-19 Scenarios will probably hit everyone in a different way, depending on your levels of optimism and/or pessimism right now. It uses [advanced scientific models](https://neherlab.org/covid19/about) to predict the future of the virus based on past data and future variables and assumptions you can tinker with yourself. @@ -95,13 +95,13 @@ The maintainers at the [Neher Lab in Basel, Switzerland](https://neherlab.org/) {{< image src="images/scenarios.png" width="740" alt="COVID-19 Scenarios" link="https://neherlab.org/covid19/" />}} -## [Corona Data Scraper](https://coronadatascraper.com/#home) {{< octocat.inline "https://github.com/lazd/coronadatascraper" />}} +## [Corona Data Scraper](https://coronadatascraper.com/#home) {{% octocat.inline "https://github.com/lazd/coronadatascraper" /%}} Similar to the [COVID Tracking Project](https://covidtracking.com/) above, the [Corona Data Scraper](https://coronadatascraper.com/#home) has set up an automated process to scrape verified data from across the web to form massive CSV spreadsheets and JSON objects. They even [rate the quality](https://github.com/lazd/coronadatascraper#source-rating) of each source to prioritize data accordingly. {{< image src="images/coronadatascraper.png" width="750" alt="Corona Data Scraper" link="https://coronadatascraper.com/#home" />}} -## [Folding@home](https://foldingathome.org/covid19/) {{< octocat.inline "https://github.com/FoldingAtHome/coronavirus" />}} +## [Folding@home](https://foldingathome.org/covid19/) {{% octocat.inline "https://github.com/FoldingAtHome/coronavirus" /%}} [Folding@home](https://foldingathome.org/) has been around [_forever_](https://en.wikipedia.org/wiki/Folding@home).ย I remember installing it on my family's home computer as a curious kid and making my father infuriated over how slow it got. But they [switched gears this month](https://foldingathome.org/2020/03/15/coronavirus-what-were-doing-and-how-you-can-help-in-simple-terms/) from using our computers to crunch various proteins and molecules in the background, and all of their power is now going towards discovering unknown "folds" in the coronavirus, which might be able to lead scientists to find better cures and potential vaccines. @@ -113,7 +113,7 @@ You can [download their software here](https://foldingathome.org/start-folding/) {{< video mp4="images/folding.mp4" webm="images/folding.webm" width="365" height="291" poster="images/folding-thumb.png" >}} -## [Coronavirus Tracker API](https://coronavirus-tracker-api.herokuapp.com/v2/locations) {{< octocat.inline "https://github.com/ExpDev07/coronavirus-tracker-api" />}} +## [Coronavirus Tracker API](https://coronavirus-tracker-api.herokuapp.com/v2/locations) {{% octocat.inline "https://github.com/ExpDev07/coronavirus-tracker-api" /%}} To wrap this list up, I thought I'd include [yet another API](https://github.com/ExpDev07/coronavirus-tracker-api) fed by multiple data sources that you can use to create your own open-source project if any of these inspired you. This one is incredibly flexible in terms of [query parameters and endpoints](https://github.com/ExpDev07/coronavirus-tracker-api#api-endpoints) but they all return simple JSON responses like we all know and love. diff --git a/layouts/_default/video.amp.html b/layouts/_default/video.amp.html index 7e23986b..00eb7c01 100644 --- a/layouts/_default/video.amp.html +++ b/layouts/_default/video.amp.html @@ -7,7 +7,7 @@ diff --git a/layouts/partials/amp/head.html b/layouts/partials/amp/head.html index ce875b59..8ad39b37 100644 --- a/layouts/partials/amp/head.html +++ b/layouts/partials/amp/head.html @@ -18,17 +18,17 @@ {{ with .OutputFormats.Get "html" }}{{ end }} {{ with .Site.Author.name }}{{ end }} - + {{ partial "head/open-graph" . }} - +