add font inspired by Hugo Prose theme

prncevince · Oct 31, 2023 · 7678dab · 7678dab
1 parent 5351d66
commit 7678dab
Show file tree

Hide file tree

Showing 19 changed files with 40 additions and 9 deletions.
diff --git a/_quarto-site.yml b/_quarto-site.yml
@@ -95,7 +95,7 @@ format:
     code-link: true
     link-external-icon: true
     link-external-newwindow: true
-    css: [assets/css/site.css]
+    css: [assets/css/site.css, assets/css/font.css]
     grid:
       body-width: 1100px
       sidebar-width: 300px

diff --git a/_site/404.html b/_site/404.html
@@ -76,6 +76,7 @@
 
 
 <link rel="stylesheet" href="/assets/css/site.css">
+<link rel="stylesheet" href="/assets/css/font.css">
 <meta property="og:title" content="Vincent Clemson - Page Not Found">
 <meta property="og:description" content="A collection of unique spatial data science content by Vincent Clemson">
 <meta property="og:image" content="https://prncevince.io/assets/img/logo-og.png">

diff --git a/_site/LICENSE.html b/_site/LICENSE.html
@@ -76,6 +76,7 @@
 
 
 <link rel="stylesheet" href="assets/css/site.css">
+<link rel="stylesheet" href="assets/css/font.css">
 <link rel="stylesheet" href="./assets/css/non-posts.css">
 </head>
 

diff --git a/_site/SETUP.html b/_site/SETUP.html
@@ -100,6 +100,7 @@
     "search-label": "Search"
   }
 }</script><link rel="stylesheet" href="assets/css/site.css">
+<link rel="stylesheet" href="assets/css/font.css">
 <link rel="stylesheet" href="./assets/css/non-posts.css">
 </head>
 <body class="nav-fixed fullcontent">

diff --git a/_site/about/index.html b/_site/about/index.html
@@ -75,6 +75,7 @@
 
 
 <link rel="stylesheet" href="../assets/css/site.css">
+<link rel="stylesheet" href="../assets/css/font.css">
 <link rel="stylesheet" href="../assets/css/non-posts.css">
 <link rel="stylesheet" href="../assets/css/about.css">
 <meta property="og:title" content="About - Vincent Clemson">

diff --git a/_site/about/usapop.html b/_site/about/usapop.html
@@ -77,6 +77,7 @@
 
 
 <link rel="stylesheet" href="../assets/css/site.css">
+<link rel="stylesheet" href="../assets/css/font.css">
 <link rel="stylesheet" href="../assets/css/non-posts.css">
 </head>
 

diff --git a/_site/assets/css/font.css b/_site/assets/css/font.css
@@ -0,0 +1,9 @@
+h1, h2, h3 {
+  font-family: Palatino;
+}
+body {
+  font-family: Optima;
+}
+code.sourceCode {
+  font-family: "Lucida Console";
+}
diff --git a/_site/index.html b/_site/index.html
@@ -76,6 +76,7 @@
 
 
 <link rel="stylesheet" href="assets/css/site.css">
+<link rel="stylesheet" href="assets/css/font.css">
 <link rel="stylesheet" href="./assets/css/non-posts.css">
 <meta property="og:title" content="">
 <meta property="og:description" content="A collection of unique spatial data science content">

diff --git a/_site/posts/geo/encoding-decoding-images/index.html b/_site/posts/geo/encoding-decoding-images/index.html
@@ -78,6 +78,7 @@
 
 
 <link rel="stylesheet" href="../../../assets/css/site.css">
+<link rel="stylesheet" href="../../../assets/css/font.css">
 <link rel="stylesheet" href="../../../assets/css/posts.css">
 <meta property="og:title" content="Encoding &amp; Decoding Images Over The Web | Vincent Clemson">
 <meta property="og:image" content="https://prncevince.io/assets/img/posts.png">

diff --git a/_site/posts/geo/image-collections-with-geemap/index.html b/_site/posts/geo/image-collections-with-geemap/index.html
@@ -116,6 +116,7 @@
 
 
 <link rel="stylesheet" href="../../../assets/css/site.css">
+<link rel="stylesheet" href="../../../assets/css/font.css">
 <link rel="stylesheet" href="../../../assets/css/posts.css">
 <meta property="og:title" content="Using Geemap with Image Collections | Vincent Clemson">
 <meta property="og:image" content="https://prncevince.io/assets/img/posts.png">

diff --git a/_site/posts/geo/maps-ggplot-svglite/index.html b/_site/posts/geo/maps-ggplot-svglite/index.html
@@ -103,6 +103,7 @@
     "search-label": "Search"
   }
 }</script><link rel="stylesheet" href="../../../assets/css/site.css">
+<link rel="stylesheet" href="../../../assets/css/font.css">
 <link rel="stylesheet" href="../../../assets/css/posts.css">
 <meta property="og:title" content="Designing aesthetic maps in R with ggplot2 &amp; svglite | Vincent Clemson">
 <meta property="og:description" content="A method to create beautiful lightweight interactive maps in R using ggplot2 and SVG (Scalar Vector Graphics).">
@@ -250,7 +251,7 @@
     <div>
     <div class="quarto-title-meta-heading">Modified</div>
     <div class="quarto-title-meta-contents">
-      <p class="date-modified">October 30, 2023</p>
+      <p class="date-modified">October 31, 2023</p>
     </div>
   </div>
 
@@ -273,7 +274,7 @@
 <p>At the end of November, I plan on packing up my belongings and trekking 6,500 miles across the continental United States from Virginia out to the West coast (🗣️ roadtrip 🛣️).</p>
 <p>Being who I am, I figured it’d be a great idea to plot out the journey using R. Additionally, the <a href="https://30daymapchallenge.com/">#30DayMapChallenge</a> is approaching, so I figured that it was a great time to create a new thing in preparation for the challenge. Most of my time went into development over the past week, so the next steps for me are the trip planning, but I think the proof of concept is a great start!</p>
 </section><section id="thoughts-on-data-driven-javascript-visuals" class="level2"><h2 class="anchored" data-anchor-id="thoughts-on-data-driven-javascript-visuals">Thoughts on Data Driven JavaScript Visuals</h2>
-<p>Plots &amp; maps are cool, and interactive plots can be even cooler, but the bloat of adding external JavaScript libraries can sometimes create a performance hit to a users’ experience on the web. A typically approach within the <a href="../../../posts/#category=R" target="_blank">R</a> user community to embed data driven interactive graphics in web content involves using the incredible <a href="http://htmlwidgets.org">htmlwidgets</a> package. There are <a href="http://www.htmlwidgets.org/showcase_leaflet.html">several</a> HTML widget R packages. These packages work by using htmlwidgets to bind &amp; format data as JSON input to their respective JavaScript visualization libraries and then to output the results as an HTML element.</p>
+<p>Plots &amp; maps are cool, and interactive plots can be even cooler, but the bloat of adding external JavaScript libraries can sometimes create a performance hit to a user’s experience on the web. A typically approach within the <a href="../../../posts/#category=R" target="_blank">R</a> user community to embed data driven interactive graphics in web content involves using the incredible <a href="http://htmlwidgets.org">htmlwidgets</a> package. There are <a href="http://www.htmlwidgets.org/showcase_leaflet.html">several</a> HTML widget R packages. These packages work by using htmlwidgets to bind &amp; format data as JSON input to their respective JavaScript visualization libraries and then to output the results as an HTML element.</p>
 <p>My biggest gripe with HTML widgets is that they embed the entire JavaScript library passed to them. So, if you say want <strong>2</strong> unique HTML widgets on your web page that are created from the same htmlwidgets ‘binding’ R package, then you’ll have <strong>2</strong> identical copies of the same JavaScript library downloaded to your web browser. Having the option to embed the library in say your web pages <code>&lt;head&gt;</code> element could help cut down on some of this bloat.</p>
 <p>Aside from this, I think that being able to create data driven interactive graphics without the need for external JavaScript libraries has a lot of potential when it comes to creating beautiful plots in the browser. Building plots with SVG has been conquered by <a href="https://d3js.org">D3.js</a> as well as many others that have taken significant influence from D3, such as <a href="https://plotly.com">plotly</a> &amp; <a href="https://jkunst.com/highcharter/">highcharter</a>. Additionally, <a href="https://observablehq.com/about">Observable</a> has changed the game when it comes to quickly prototyping &amp; sharing new data visuals in the browser. Making it easier than ever before to collaborate &amp; maximize one’s reach when developing a new dataviz powered by web technologies. In particular, its lead by Mike Bostock, one who I would call a super human with <a href="https://bost.ocks.org/mike/algorithms/">eons</a> of data visualization expertise. At Observable, they’re building the <a href="https://observablehq.com/plot">Observable Plot</a> library to help folks efficiently visualize tabluar data in the browser.</p>
 <p>Plot is inspired by <a href="http://vita.had.co.nz/papers/layered-grammar.pdf"><strong>the grammar of graphics</strong></a> style, which is the foundation that <a href="https://ggplot2.tidyverse.org">ggplot2</a> was built upon. I think that the ability to turn a ggplot into a an interactive graphic can be extremely powerful and can open up many new doors into the world of dataviz. Using plotly and the incredible <a href="https://blog.cpsievert.me/2018/01/30/learning-improving-ggplotly-geom-sf"><code>plotly::ggplotly</code></a> designed by Carson Sievert is an htmlwidgets approach to doing this. The approach to use <a href="https://svglite.r-lib.org">svglite</a> to save ggplot2 created plots and then post process these graphics allows you to keep the design portion of the dataviz mostly outside of the web browser and within the Plot pane of your IDE (i.e.&nbsp;RStudio). The choice to post process the SVG output within R allows one to minimize JavaScript library dependencies, but presents the challenge of making the SVG interactive.</p>

diff --git a/_site/posts/geo/natural-disasters-maxar-open-data/index.html b/_site/posts/geo/natural-disasters-maxar-open-data/index.html
@@ -116,6 +116,7 @@
 
 
 <link rel="stylesheet" href="../../../assets/css/site.css">
+<link rel="stylesheet" href="../../../assets/css/font.css">
 <link rel="stylesheet" href="../../../assets/css/posts.css">
 <meta property="og:title" content="Visualizing Natural Disasters through Dynamic Tiling and Maxar’s Open Data Program | Vincent Clemson">
 <meta property="og:description" content="A deep dive into visualizing satellite imagery from Maxar’s ODP on-the-fly using STAC, dynamic tiling, and Leaflet.">

diff --git a/_site/posts/geo/north-india-floods-2023/index.html b/_site/posts/geo/north-india-floods-2023/index.html
@@ -116,6 +116,7 @@
 
 
 <link rel="stylesheet" href="../../../assets/css/site.css">
+<link rel="stylesheet" href="../../../assets/css/font.css">
 <link rel="stylesheet" href="../../../assets/css/posts.css">
 <meta property="og:title" content="North India Floods of October 2023 | Vincent Clemson">
 <meta property="og:description" content="A quick turn analysis to visually compare events caused by the Glacial Lake Outburst Flood in the Indian Himalayan Region of Sikkim during early October of 2023.">

diff --git a/_site/posts/geo/rgb-satellite-images-in-R/index.html b/_site/posts/geo/rgb-satellite-images-in-R/index.html
@@ -77,6 +77,7 @@
 
 
 <link rel="stylesheet" href="../../../assets/css/site.css">
+<link rel="stylesheet" href="../../../assets/css/font.css">
 <link rel="stylesheet" href="../../../assets/css/posts.css">
 <meta property="og:title" content="Plotting RGB Satellite Images in R | Vincent Clemson">
 <meta property="og:image" content="https://prncevince.io/assets/img/posts.png">

diff --git a/_site/posts/index.html b/_site/posts/index.html
@@ -110,6 +110,7 @@
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>
 
 <link rel="stylesheet" href="../assets/css/site.css">
+<link rel="stylesheet" href="../assets/css/font.css">
 <link rel="stylesheet" href="../assets/css/posts-listing.css">
 <link rel="alternate" type="application/rss+xml" title="Big &amp; tiny Spatial Thoughts" href="index.xml" data-external="1"><meta property="og:title" content="Big &amp; tiny spatial thoughts | Vincent Clemson">
 <meta property="og:description" content="A collection of unique spatial data science content">
@@ -253,7 +254,7 @@ <h1 class="title">Big &amp; <span style="font-size:0.75rem;vertical-align:middle
   </div>
 </div>
 <div class="list grid quarto-listing-cols-3">
-<div class="g-col-1" data-index="0" data-categories="ggplot2,R,Geospatial,svglite,SVG,JavaScript,rspatial,tidyverse,30DayMapChallenge" data-listing-date-sort="1698552000000" data-listing-file-modified-sort="1698652016451" data-listing-date-modified-sort="1698652016000" data-listing-reading-time-sort="9" data-listing-word-count-sort="1746">
+<div class="g-col-1" data-index="0" data-categories="ggplot2,R,Geospatial,svglite,SVG,JavaScript,rspatial,tidyverse,30DayMapChallenge" data-listing-date-sort="1698552000000" data-listing-file-modified-sort="1698734220356" data-listing-date-modified-sort="1698734220000" data-listing-reading-time-sort="9" data-listing-word-count-sort="1746">
 <a href="../posts/geo/maps-ggplot-svglite/index.html" class="quarto-grid-link">
 <div class="quarto-grid-item card h-100 card-left">
 <p class="card-img-top"><img src="geo/maps-ggplot-svglite/usapop-ggplot-svglite-3x-3fps-1920w-80lossy-O3.gif" style="height: 150px;"  class="thumbnail-image card-img"/></p>
@@ -275,7 +276,7 @@ <h5 class="no-anchor card-title listing-title">
 </div>
 <div class="card-footer">
 <div class="card-file-modified listing-file-modified">
-<p>October 30, 2023</p>
+<p>October 31, 2023</p>
 </div>
 </div>
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -76,6 +76,7 @@ @@
     <link rel="stylesheet" href="assets/css/site.css">
+    <link rel="stylesheet" href="assets/css/font.css">
     <link rel="stylesheet" href="./assets/css/non-posts.css">
     </head>
@@ Expand Down @@