Refactor stylesheet, removed comments

content/blog/batch-import-postgis-rasters.md

@@ -0,0 +1,74 @@
+---
+title: 'Import Global SRTM Elevation Data Into Postgres Database Using PostGIS'
+date: 2024-08-06T12:15:44+01:00
+author: 
+    name: "Sam Chance"
+header_image: '/pics/blog/batch-import-postgis-rasters/batch-import-postgis-rasters.webp'
+summary: "This article explains how to batch import rasters into a PostGIS table"
+toc: true
+---
+
+{{< figure src="/pics/blog/batch-import-postgis-rasters/batch-import-postgis-rasters.webp" title="DEM (Digital Elevation Model) of Singapore. NASA Shuttle Radar Topography Mission (2013)." width="600">}}
+
+## Introduction
+It's possible to download the entire SRTM (Shuttle Radar Topography Mission) satellite imagery dataset and insert it into a Postgres database for personal use. This can be helpful for if you need global elevation data for your analysis and don't want to be limited by third-parties APIs.
+
+The SRTM is a near-global dataset of elevation data with a resolution of 1-arc-second (30m). More information is available from [USGS](https://www.usgs.gov/centers/eros/science/usgs-eros-archive-digital-elevation-shuttle-radar-topography-mission-srtm?qt-science_center_objects=0#qt-science_center_objects). 
+In this guide we will go through downloading the data, inserting it into a Postgres database with PostGIS, then querying the final result to create a DEM for any country or region.
+
+ This guide assumes you are using Linux (this may also apply to other Unix like systems such as MacOS) and have a Postgres database with the PostGIS extension installed. More information [here](https://postgis.net/documentation/getting_started/).
+
+## Download data
+
+We'll download the data from the [OpenTopography](https://portal.opentopography.org/raster?opentopoID=OTSRTM.082015.4326.1) AWS S3 bucket. You should create a free account with them before downloading. Also, remember to provide citations where necessary.
+
+To download the data, first we need to install the [AWS](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) CLI utility:
+
+{{< highlight shell >}}
+# install for linux
+curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
+unzip awscliv2.zip
+sudo ./aws/install
+
+# MacOS
+curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"
+sudo installer -pkg AWSCLIV2.pkg -target /
+{{</ highlight >}}
+
+Next we can run the following command to download the rasters. This will take some time depending on your internet speed. The final size is about 127GB and took me about 1 hour to download on a 600MB connection.
+
+{{< highlight shell >}}
+aws s3 cp s3://raster/SRTM_GL1/ . --recursive --endpoint-url https://opentopography.s3.sdsc.edu --no-sign-request
+{{</ highlight >}}
+
+## Using raster2pgsql to import raster tiles into PostGIS
+Now we have the data downloaded on our system, we can import it into our database.
+If we look inside the SRTM_GL1_srtm directory, we can see all of the 14280 raster files: 
+
+{{< figure src="/pics/blog/batch-import-postgis-rasters/raster-tiffs.webp" title=" " width="600">}}
+
+Next we will use the `raster2pgsql` command to import these rasters into our database.
+
+{{< highlight shell >}}
+raster2pgsql -d -M -C -I -s 4326 -t 128x128 -F *.tif dem.srtm | psql --dbname=osm --username=postgres -h 127.0.0.1
+{{</ highlight >}}
+
+Here's a breakdown of the above command:
+- -d This drops an existing table if it already exists. It's useful to include this in case we need to run the command again.
+- -M This runs `VACUUM ANALYZE` on the table after the raster tiles have been inserted into the database. This optimizes the table by reclaiming storage space and then collecting table statistics.
+- -C This applies raster constraints to the table by using the `AddRasterConstraints` function in PostGIS. This adds several types of constraints to the table which ensures data integrity and enforces rules for consistency.
+- -I Creates a spatial index (GiST) on the table.
+- -s Assign SRID (Spatial Reference System Identifier) to the raster.
+- -t Tile size. This splits the raster into tiles of the specified size. Each tile is a row in the final table.
+- -F Creates a filename column. As the raster is split into many smaller tiles, this is useful to help us identify the original file the tile belonged to.
+- *.tif Selects all of the .tif files in the directory.
+- dem.srtm Defines the schema and name of the table. Remember to create the `dem` schema in the database before running the command.
+
+The `raster2pgsql` command will output a sql query which we can then pipe into the `psql` command.
+
+For more information on the `raster2pgsql` command, please visit the PostGIS [website](https://postgis.net/docs/manual-2.1/using_raster_dataman.html).
+
+This process will take a couple of hours. It could take longer if running over a network, so it'd be best to run this command on the same machine as the database.
+
+#### Citations
+NASA Shuttle Radar Topography Mission (SRTM)(2013). Shuttle Radar Topography Mission (SRTM) Global. Distributed by OpenTopography. https://doi.org/10.5069/G9445JDF. Accessed: 2024-08-06

content/blog/install-artix.md

@@ -3,9 +3,10 @@ title: "Artix Linux Installation Guide"
 date: 2024-02-24T17:04:21Z
 author: 
     name: "Sam Chance"
-header_image: "/pics/blog/artix-logo.webp"
+header_image: "/pics/blog/install-artix/artix-logo.webp"
 draft: False
 summary: "This guide will run through the process of installing Artix Linux with runit as the init system on an encrypted disk partition."
+toc: true
 ---
 
 This guide will run through the process of installing Artix Linux, which is a
@@ -33,7 +34,7 @@ guide I'll be using an encrypted partition on an UEFI system. If if you want a
 different configuration, please consult the [Arch
 wiki](https://wiki.archlinux.org/title/Partitioning#Example_layouts).
 
-![artix-keyboard-select](/pics/blog/artix-keyboard-select.webp)
+![artix-keyboard-select](/pics/blog/install-artix/artix-keyboard-select.webp)
 
 ## Partition layout
 
@@ -67,7 +68,7 @@ List all drives attached to system:
 lsblk
 {{</ highlight >}}
 
-![artix-lsblk](/pics/blog/artix-lsblk.webp)
+![artix-lsblk](/pics/blog/install-artix/artix-lsblk.webp)
 
 Locate the target drive (in this case `/dev/sda`) where we will install Artix.
 
@@ -88,7 +89,7 @@ Run through the options to partition the disk:
  
 You should now have two partitions under `/dev/sda`:
 
-![artix-lsblk1](/pics/blog/artix-lsblk1.webp)
+![artix-lsblk1](/pics/blog/install-artix/artix-lsblk1.webp)
 
 `/dev/sda1` is the unencrypted boot partition, and `/dev/sda2` will be where we store our encrypted volume.
 
@@ -132,7 +133,7 @@ lsblk -f
 
 It should look something like this:
 
-![artix-lsblk2](/pics/blog/artix-lsblk2.webp)
+![artix-lsblk2](/pics/blog/install-artix/artix-lsblk2.webp)
 
 Note the UUIDs - they will be needed later for setting up decryption during boot.
 
@@ -284,7 +285,7 @@ grub-install --target=x86_64-efi --efi-directory=/boot --bootloader-id=grub
 grub-mkconfig -o /boot/grub/grub.cfg
 {{</ highlight >}}
 
-![artix-grub-install](/pics/blog/artix-grub-install.webp)
+![artix-grub-install](/pics/blog/install-artix/artix-grub-install.webp)
 
 ## Add Users
 

hugo.toml

@@ -2,4 +2,12 @@ baseURL = 'https://baseddate.io/'
 languageCode = 'en-gb'
 title = 'baseddata.io'
 
-markup.highlight.noClasses=false
+[markup]
+  [highlight]
+  noClasses=false
+
+  [markup.tableOfContents]
+    endLevel = 2
+    ordered = false
+    startLevel = 2
+

layouts/partials/main-article.html

@@ -1,15 +1,22 @@
-<article class="main-article">
-  <header>
-    <h1>{{ .Title }}</h1>
-    <div class="author-row">
-      {{ with .Params.author }}
-      <strong><p class="author-name">{{ .name }}</p></strong>
-      <p class="author-name">on</p>
-      {{ end }} 
-      {{ if isset .Params "date" }}
-      <time>{{ .Date.Format "January 2, 2006" }}</time>
+<div class="article-container">
+  <article class="main-article">
+    <header>
+      <h1>{{ .Title }}</h1>
+      <div class="author-row">
+        {{ with .Params.author }}
+        <strong><p class="author-name">{{ .name }}</p></strong>
+        <p class="author-name">on</p>
+        {{ end }} {{ if isset .Params "date" }}
+        <time>{{ .Date.Format "January 2, 2006" }}</time>
+        {{ end }}
+      </div>
+    </header>
+    <div id="tocWrapper">
+      <h4>Table of Contents</h4>
+      {{ if .Params.toc }}
+      <aside>{{.TableOfContents}}</aside>
       {{ end }}
     </div>
-  </header>
-  {{ .Content }}
-</article>
+    {{ .Content }}
+  </article>
+</div>

static/css/navbar.css

@@ -1,6 +1,9 @@
 /* Navbar */
 .navbar {
   background-color: var(--navbar-background-color);
+  border-color: var(--border-color);
+  border-width: var(--border-width);
+  border-style: var(--border-style);
   display: flex;
   justify-content: space-between;
   position: sticky;

static/css/style.css

@@ -11,11 +11,11 @@
   --heading1-font-size: 25px;
   --code-block-font-size: 10px;
   --chart-modifier-height: 60px;
-  --article-max-width: 60vw;
+  --article-max-width: 70%;
   --content-padding: 40px;
   --content-margin: 40px;
   --element-padding: 20px;
-  --element-margin: 10px;
+  --element-margin: 20px;
   --article-margin: 10px;
   --heading-margin: 30px;
   --radius: 5px;
@@ -26,27 +26,30 @@
   --background-color: #181a1b;
   --text-color: #e0ddd9;
   --subtext-color: #6c757d;
-  --link-color: #749571;
+  --link-color: #60b2f1;
   --hover-color: #0056b3;
   --heading1-color: #fc8452;
   --heading2-color: #e0ddd9;
   --heading3-color: #e0ddd9;
-  --navbar-background-color: #343451;
+  --navbar-background-color: #181a1b;
   --navbar-text-color: #e0ddd9;
-  --navbar-hover: #50507c;
+  --navbar-hover: #333;
   --footer-background-color: #333;
   --summary-container-hover-bg: #343a40;
-  --codeblock-bg-color: #0d1117;
-  --inline-code-bg-color: #749571;
+  --codeblock-bg-color: #1b1d1e;
+  --inline-code-bg-color: #353535;
   --table-even-row-bg-color: #343a40;
   --table-odd-row-bg-color: #515c66;
   --table-header-bg: #212529;
   --table-font-color: #e0ddd9;
   --table-header-font-size: 14px;
   --table-row-font-size: 12px;
+  --border-color: #363a3d;
+  --border-width: 2px;
+  --border-style: solid;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 600px) {
   :root {
     --font-size: 10;
     --author-row-font-size: 12px;
@@ -76,6 +79,11 @@ body {
   flex: 1;
 }
 
+.article-container {
+  display: flex;
+  justify-content: center;
+}
+
 .page-container {
   display: flex;
   flex-direction: column;
@@ -85,11 +93,11 @@ body {
 a {
   text-decoration: none;
   color: var(--link-color);
-  text-decoration: underline;
 }
 
 a:hover {
   color: var(--hover-color);
+  text-decoration: underline;
 }
 
 .page-content {
@@ -127,6 +135,11 @@ a:hover {
   height: auto;
 }
 
+figcaption h4 {
+  font-size: 10px;
+  padding-bottom: var(--element-padding);
+}
+
 @media (max-width: 800px) {
   .home-page {
     flex-direction: column;
@@ -152,6 +165,8 @@ a:hover {
   width: var(--article-max-width);
   line-height: 1.5;
   text-align: left;
+  border-left: var(--border-width) var(--border-style) var(--border-color);
+  border-right: var(--border-width) var(--border-style) var(--border-color);
 }
 
 .main-article h1 {
@@ -177,8 +192,7 @@ ol {
 }
 
 .main-article img {
-  max-width: 60vw;
-  margin-bottom: var(--article-margin);
+  max-width: 100%;
 }
 
 time {
@@ -250,127 +264,6 @@ time {
   background-color: var(--summary-container-hover-bg);
 }
 
-/* .navbar {
-  background-color: var(--navbar-background-color);
-  display: flex;
-  justify-content: space-between;
-  position: sticky;
-  top: 0;
-  height: 50px;
-  width: 100%;
-  z-index: 999;
-}
-
-.navbar a {
-  color: var(--navbar-text-color);
-  padding: 10px;
-  margin: 5px;
-  text-decoration: none;
-  transition: background-color 0.3s ease;
-  border-radius: var(--radius);
-}
-
-.navbar a:hover {
-  padding: 10px;
-  background-color: var(--navbar-hover);
-  border-radius: var(--radius);
-  color: var(--text-color);
-}
-
-.navbar__left a {
-  text-decoration: none !important;
-  color: var(--text-color) !important;
-  font-size: 22px;
-}
-
-.navbar__left {
-  display: flex;
-  align-items: center;
-}
-
-.navbar__right {
-  display: flex;
-  align-items: center;
-}
-
-.navbar-links {
-  display: flex;
-  align-items: center;
-  margin-right: var(--element-margin);
-}
-
-.navbar-dropdown {
-  display: none;
-}
-
-@media (max-width: 800px) {
-  .navbar-links {
-    display: none;
-  }
-
-  .navbar-dropdown {
-    display: block;
-    align-items: center;
-    float: right;
-    max-height: 60px;
-  }
-
-  .hamburger {
-    width: 30px;
-    margin-right: var(--article-margin);
-  }
-
-  .navbar-dropdown .hamburger-dropbtn {
-    font-size: 66px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    max-height: 60px;
-    outline: none;
-    color: white;
-    background-color: inherit;
-    font-family: inherit;
-    margin: 0;
-    border-radius: var(--radius);
-  }
-
-  .navbar-dropdown:hover .hamburger {
-    background-color: var(--navbar-hover);
-    border-radius: var(--radius);
-  }
-
-  .navbar-dropdown-content {
-    display: none;
-    position: absolute;
-    right: 20px;
-    width: 300px;
-    background-color: var(--navbar-background-color);
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-    z-index: 1;
-    border-radius: var(--radius);
-  }
-
-  .navbar-dropdown-content a {
-    float: none;
-    color: var(--text-color);
-    padding: 12px 16px;
-    text-decoration: none;
-    display: block;
-    text-align: left;
-  }
-
-  .navbar-dropdown-content a:hover {
-    padding: 12px 16px;
-    background-color: var(--navbar-hover);
-  }
-
-  .navbar-dropdown:hover .navbar-dropdown-content {
-    display: block;
-  }
-} */
-
 /* Charts */
 .chart-flex-container {
   display: flex;
@@ -390,27 +283,6 @@ time {
   margin: var(--article-margin);
 }
 
-/* @media only screen and (max-width: 800px) {
-  .chart-flex-container {
-    flex-direction: column;
-  }
-
-  .chart-area {
-    width: 95%;
-    margin: var(--article-margin);
-  }
-
-  #chart {
-    width: 100%;
-    height: 30vh;
-    order: 1;
-  }
-
-  .chart-flex-container article {
-    order: 2;
-  }
-} */
-
 /* Footer */
 footer {
   background-color: var(--footer-background-color);
@@ -464,6 +336,7 @@ footer a:hover {
   align-items: center;
   color: var(--subtext-color);
   font-size: var(--author-row-font-size);
+  margin-bottom: 20px;
 }
 
 .avatar-container {
@@ -478,7 +351,11 @@ footer a:hover {
 }
 
 .author-name {
-  margin-right: var(--element-margin);
+  margin: 2px;
+}
+
+.author-row time {
+  margin: 2px;
 }
 
 article p {
@@ -490,6 +367,30 @@ article strong {
   color: var(--heading-color);
 }
 
+/* table of contents */
+#tocWrapper {
+  margin-bottom: 20px;
+}
+
+#TableOfContents {
+  margin-top: 10px;
+}
+
+#TableOfContents li::marker {
+  content: none;
+  margin: 0px;
+}
+
+#TableOfContents li,
+a {
+  margin: 0px;
+  font-size: 14px;
+}
+
+#TableOfContents ul {
+  margin: 0px;
+}
+
 /* Code block */
 pre {
   overflow-x: auto;
@@ -498,12 +399,12 @@ pre {
 .codeblock {
   position: relative;
   background-color: var(--codeblock-bg-color);
-  max-width: 100vw;
-  width: 60vw;
+  width: 100%;
   padding: var(--element-padding);
-  margin-top: var(--article-margin);
-  margin-bottom: var(--article-margin);
+  margin-top: 20px;
+  margin-bottom: 20px;
   border-radius: var(--radius);
+  border: var(--border-width) var(--border-style) var(--border-color);
   font-size: var(--code-block-font-size);
 }
 
@@ -519,10 +420,10 @@ pre {
 
 /* Styles for inline <code> */
 :not(pre) > code {
-  color: #343a40;
+  color: #aaa4a0;
   background-color: var(--inline-code-bg-color);
-  padding: 0.1em 0.3em;
-  border-radius: var(--radius);
+  padding: 5px;
+  border-radius: 2px;
   font-size: var(--code-block-font-size);
 }
 

static/css/syntax.css

@@ -1,86 +1,371 @@
-/* Background */ .bg { color: #e6edf3; background-color: #0d1117; }
-/* PreWrapper */ .chroma { color: #e6edf3; background-color: #0d1117; }
-/* Other */ .chroma .x {  }
-/* Error */ .chroma .err { color: #f85149 }
-/* CodeLine */ .chroma .cl {  }
-/* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
-/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .chroma .hl { color: #6e7681 }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #737679 }
-/* LineNumbers */ .chroma .ln { white-space: pre; -webkit-user-select: none; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #6e7681 }
-/* Line */ .chroma .line { display: flex; }
-/* Keyword */ .chroma .k { color: #ff7b72 }
-/* KeywordConstant */ .chroma .kc { color: #79c0ff }
-/* KeywordDeclaration */ .chroma .kd { color: #ff7b72 }
-/* KeywordNamespace */ .chroma .kn { color: #ff7b72 }
-/* KeywordPseudo */ .chroma .kp { color: #79c0ff }
-/* KeywordReserved */ .chroma .kr { color: #ff7b72 }
-/* KeywordType */ .chroma .kt { color: #ff7b72 }
-/* Name */ .chroma .n {  }
-/* NameAttribute */ .chroma .na {  }
-/* NameBuiltin */ .chroma .nb {  }
-/* NameBuiltinPseudo */ .chroma .bp {  }
-/* NameClass */ .chroma .nc { color: #f0883e; font-weight: bold }
-/* NameConstant */ .chroma .no { color: #79c0ff; font-weight: bold }
-/* NameDecorator */ .chroma .nd { color: #d2a8ff; font-weight: bold }
-/* NameEntity */ .chroma .ni { color: #ffa657 }
-/* NameException */ .chroma .ne { color: #f0883e; font-weight: bold }
-/* NameFunction */ .chroma .nf { color: #d2a8ff; font-weight: bold }
-/* NameFunctionMagic */ .chroma .fm {  }
-/* NameLabel */ .chroma .nl { color: #79c0ff; font-weight: bold }
-/* NameNamespace */ .chroma .nn { color: #ff7b72 }
-/* NameOther */ .chroma .nx {  }
-/* NameProperty */ .chroma .py { color: #79c0ff }
-/* NameTag */ .chroma .nt { color: #7ee787 }
-/* NameVariable */ .chroma .nv { color: #79c0ff }
-/* NameVariableClass */ .chroma .vc {  }
-/* NameVariableGlobal */ .chroma .vg {  }
-/* NameVariableInstance */ .chroma .vi {  }
-/* NameVariableMagic */ .chroma .vm {  }
-/* Literal */ .chroma .l { color: #a5d6ff }
-/* LiteralDate */ .chroma .ld { color: #79c0ff }
-/* LiteralString */ .chroma .s { color: #a5d6ff }
-/* LiteralStringAffix */ .chroma .sa { color: #79c0ff }
-/* LiteralStringBacktick */ .chroma .sb { color: #a5d6ff }
-/* LiteralStringChar */ .chroma .sc { color: #a5d6ff }
-/* LiteralStringDelimiter */ .chroma .dl { color: #79c0ff }
-/* LiteralStringDoc */ .chroma .sd { color: #a5d6ff }
-/* LiteralStringDouble */ .chroma .s2 { color: #a5d6ff }
-/* LiteralStringEscape */ .chroma .se { color: #79c0ff }
-/* LiteralStringHeredoc */ .chroma .sh { color: #79c0ff }
-/* LiteralStringInterpol */ .chroma .si { color: #a5d6ff }
-/* LiteralStringOther */ .chroma .sx { color: #a5d6ff }
-/* LiteralStringRegex */ .chroma .sr { color: #79c0ff }
-/* LiteralStringSingle */ .chroma .s1 { color: #a5d6ff }
-/* LiteralStringSymbol */ .chroma .ss { color: #a5d6ff }
-/* LiteralNumber */ .chroma .m { color: #a5d6ff }
-/* LiteralNumberBin */ .chroma .mb { color: #a5d6ff }
-/* LiteralNumberFloat */ .chroma .mf { color: #a5d6ff }
-/* LiteralNumberHex */ .chroma .mh { color: #a5d6ff }
-/* LiteralNumberInteger */ .chroma .mi { color: #a5d6ff }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #a5d6ff }
-/* LiteralNumberOct */ .chroma .mo { color: #a5d6ff }
-/* Operator */ .chroma .o { color: #ff7b72; font-weight: bold }
-/* OperatorWord */ .chroma .ow { color: #ff7b72; font-weight: bold }
-/* Punctuation */ .chroma .p {  }
-/* Comment */ .chroma .c { color: #8b949e; font-style: italic }
-/* CommentHashbang */ .chroma .ch { color: #8b949e; font-style: italic }
-/* CommentMultiline */ .chroma .cm { color: #8b949e; font-style: italic }
-/* CommentSingle */ .chroma .c1 { color: #8b949e; font-style: italic }
-/* CommentSpecial */ .chroma .cs { color: #8b949e; font-weight: bold; font-style: italic }
-/* CommentPreproc */ .chroma .cp { color: #8b949e; font-weight: bold; font-style: italic }
-/* CommentPreprocFile */ .chroma .cpf { color: #8b949e; font-weight: bold; font-style: italic }
-/* Generic */ .chroma .g {  }
-/* GenericDeleted */ .chroma .gd { color: #ffa198; background-color: #490202 }
-/* GenericEmph */ .chroma .ge { font-style: italic }
-/* GenericError */ .chroma .gr { color: #ffa198 }
-/* GenericHeading */ .chroma .gh { color: #79c0ff; font-weight: bold }
-/* GenericInserted */ .chroma .gi { color: #56d364; background-color: #0f5323 }
-/* GenericOutput */ .chroma .go { color: #8b949e }
-/* GenericPrompt */ .chroma .gp { color: #8b949e }
-/* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu { color: #79c0ff }
-/* GenericTraceback */ .chroma .gt { color: #ff7b72 }
-/* GenericUnderline */ .chroma .gl { text-decoration: underline }
-/* TextWhitespace */ .chroma .w { color: #6e7681 }
+/* Background */
+.bg {
+  color: #e6edf3;
+  background-color: #1b1d1e;
+}
+/* PreWrapper */
+.chroma {
+  color: #e6edf3;
+  background-color: #1b1d1e;
+}
+/* Other */
+.chroma .x {
+}
+/* Error */
+.chroma .err {
+  color: #f85149;
+}
+/* CodeLine */
+.chroma .cl {
+}
+/* LineLink */
+.chroma .lnlinks {
+  outline: none;
+  text-decoration: none;
+  color: inherit;
+}
+/* LineTableTD */
+.chroma .lntd {
+  vertical-align: top;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+/* LineTable */
+.chroma .lntable {
+  border-spacing: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+/* LineHighlight */
+.chroma .hl {
+  color: #6e7681;
+}
+/* LineNumbersTable */
+.chroma .lnt {
+  white-space: pre;
+  -webkit-user-select: none;
+  user-select: none;
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: #737679;
+}
+/* LineNumbers */
+.chroma .ln {
+  white-space: pre;
+  -webkit-user-select: none;
+  user-select: none;
+  margin-right: 0.4em;
+  padding: 0 0.4em 0 0.4em;
+  color: #6e7681;
+}
+/* Line */
+.chroma .line {
+  display: flex;
+}
+/* Keyword */
+.chroma .k {
+  color: #ff7b72;
+}
+/* KeywordConstant */
+.chroma .kc {
+  color: #79c0ff;
+}
+/* KeywordDeclaration */
+.chroma .kd {
+  color: #ff7b72;
+}
+/* KeywordNamespace */
+.chroma .kn {
+  color: #ff7b72;
+}
+/* KeywordPseudo */
+.chroma .kp {
+  color: #79c0ff;
+}
+/* KeywordReserved */
+.chroma .kr {
+  color: #ff7b72;
+}
+/* KeywordType */
+.chroma .kt {
+  color: #ff7b72;
+}
+/* Name */
+.chroma .n {
+}
+/* NameAttribute */
+.chroma .na {
+}
+/* NameBuiltin */
+.chroma .nb {
+}
+/* NameBuiltinPseudo */
+.chroma .bp {
+}
+/* NameClass */
+.chroma .nc {
+  color: #f0883e;
+  font-weight: bold;
+}
+/* NameConstant */
+.chroma .no {
+  color: #79c0ff;
+  font-weight: bold;
+}
+/* NameDecorator */
+.chroma .nd {
+  color: #d2a8ff;
+  font-weight: bold;
+}
+/* NameEntity */
+.chroma .ni {
+  color: #ffa657;
+}
+/* NameException */
+.chroma .ne {
+  color: #f0883e;
+  font-weight: bold;
+}
+/* NameFunction */
+.chroma .nf {
+  color: #d2a8ff;
+  font-weight: bold;
+}
+/* NameFunctionMagic */
+.chroma .fm {
+}
+/* NameLabel */
+.chroma .nl {
+  color: #79c0ff;
+  font-weight: bold;
+}
+/* NameNamespace */
+.chroma .nn {
+  color: #ff7b72;
+}
+/* NameOther */
+.chroma .nx {
+}
+/* NameProperty */
+.chroma .py {
+  color: #79c0ff;
+}
+/* NameTag */
+.chroma .nt {
+  color: #7ee787;
+}
+/* NameVariable */
+.chroma .nv {
+  color: #79c0ff;
+}
+/* NameVariableClass */
+.chroma .vc {
+}
+/* NameVariableGlobal */
+.chroma .vg {
+}
+/* NameVariableInstance */
+.chroma .vi {
+}
+/* NameVariableMagic */
+.chroma .vm {
+}
+/* Literal */
+.chroma .l {
+  color: #a5d6ff;
+}
+/* LiteralDate */
+.chroma .ld {
+  color: #79c0ff;
+}
+/* LiteralString */
+.chroma .s {
+  color: #a5d6ff;
+}
+/* LiteralStringAffix */
+.chroma .sa {
+  color: #79c0ff;
+}
+/* LiteralStringBacktick */
+.chroma .sb {
+  color: #a5d6ff;
+}
+/* LiteralStringChar */
+.chroma .sc {
+  color: #a5d6ff;
+}
+/* LiteralStringDelimiter */
+.chroma .dl {
+  color: #79c0ff;
+}
+/* LiteralStringDoc */
+.chroma .sd {
+  color: #a5d6ff;
+}
+/* LiteralStringDouble */
+.chroma .s2 {
+  color: #a5d6ff;
+}
+/* LiteralStringEscape */
+.chroma .se {
+  color: #79c0ff;
+}
+/* LiteralStringHeredoc */
+.chroma .sh {
+  color: #79c0ff;
+}
+/* LiteralStringInterpol */
+.chroma .si {
+  color: #a5d6ff;
+}
+/* LiteralStringOther */
+.chroma .sx {
+  color: #a5d6ff;
+}
+/* LiteralStringRegex */
+.chroma .sr {
+  color: #79c0ff;
+}
+/* LiteralStringSingle */
+.chroma .s1 {
+  color: #a5d6ff;
+}
+/* LiteralStringSymbol */
+.chroma .ss {
+  color: #a5d6ff;
+}
+/* LiteralNumber */
+.chroma .m {
+  color: #a5d6ff;
+}
+/* LiteralNumberBin */
+.chroma .mb {
+  color: #a5d6ff;
+}
+/* LiteralNumberFloat */
+.chroma .mf {
+  color: #a5d6ff;
+}
+/* LiteralNumberHex */
+.chroma .mh {
+  color: #a5d6ff;
+}
+/* LiteralNumberInteger */
+.chroma .mi {
+  color: #a5d6ff;
+}
+/* LiteralNumberIntegerLong */
+.chroma .il {
+  color: #a5d6ff;
+}
+/* LiteralNumberOct */
+.chroma .mo {
+  color: #a5d6ff;
+}
+/* Operator */
+.chroma .o {
+  color: #ff7b72;
+  font-weight: bold;
+}
+/* OperatorWord */
+.chroma .ow {
+  color: #ff7b72;
+  font-weight: bold;
+}
+/* Punctuation */
+.chroma .p {
+}
+/* Comment */
+.chroma .c {
+  color: #8b949e;
+  font-style: italic;
+}
+/* CommentHashbang */
+.chroma .ch {
+  color: #8b949e;
+  font-style: italic;
+}
+/* CommentMultiline */
+.chroma .cm {
+  color: #8b949e;
+  font-style: italic;
+}
+/* CommentSingle */
+.chroma .c1 {
+  color: #8b949e;
+  font-style: italic;
+}
+/* CommentSpecial */
+.chroma .cs {
+  color: #8b949e;
+  font-weight: bold;
+  font-style: italic;
+}
+/* CommentPreproc */
+.chroma .cp {
+  color: #8b949e;
+  font-weight: bold;
+  font-style: italic;
+}
+/* CommentPreprocFile */
+.chroma .cpf {
+  color: #8b949e;
+  font-weight: bold;
+  font-style: italic;
+}
+/* Generic */
+.chroma .g {
+}
+/* GenericDeleted */
+.chroma .gd {
+  color: #ffa198;
+  background-color: #490202;
+}
+/* GenericEmph */
+.chroma .ge {
+  font-style: italic;
+}
+/* GenericError */
+.chroma .gr {
+  color: #ffa198;
+}
+/* GenericHeading */
+.chroma .gh {
+  color: #79c0ff;
+  font-weight: bold;
+}
+/* GenericInserted */
+.chroma .gi {
+  color: #56d364;
+  background-color: #0f5323;
+}
+/* GenericOutput */
+.chroma .go {
+  color: #8b949e;
+}
+/* GenericPrompt */
+.chroma .gp {
+  color: #8b949e;
+}
+/* GenericStrong */
+.chroma .gs {
+  font-weight: bold;
+}
+/* GenericSubheading */
+.chroma .gu {
+  color: #79c0ff;
+}
+/* GenericTraceback */
+.chroma .gt {
+  color: #ff7b72;
+}
+/* GenericUnderline */
+.chroma .gl {
+  text-decoration: underline;
+}
+/* TextWhitespace */
+.chroma .w {
+  color: #6e7681;
+}