Tweak index content

content/_index.md

@@ -3,7 +3,7 @@ toc: False
 ---
 
 # Grounded Insights from Open Data
-### Deriving meaningful insights from data enables us to make better decisions. 
+## Deriving meaningful insights from data enables us to make better decisions. 
 
 Data is often chaotic and dispersed. This requires us to build solid data pipelines to efficiently transform data into a unified and useful format. We can think of this as a path with the following steps:
 
@@ -21,7 +21,7 @@ Insights are the deep understanding we've derived from our data. Specifically, t
 
 ### Explore Based Data
 
-{{< card-list >}} 
+{{< content-list >}} 
 ["Data Lab"]
   pic = "/pics/home/data-lab.webp"
   content = "Analysis and Insights derived from Open Data"
@@ -33,5 +33,5 @@ Insights are the deep understanding we've derived from our data. Specifically, t
 ["Services"]
   pic = "/pics/home/services.webp"
   content = "Please reach out if you wish to work with me."
-  link = "/services"
+  link = "/about-me"
-{{</ card-list >}}
+{{</ content-list >}}

hugo.toml

@@ -2,12 +2,20 @@ baseURL = 'https://baseddate.io/'
 languageCode = 'en-gb'
 title = 'baseddata.io'
 
-[markup]
+[markup.highlight]
-  [highlight]
+    pygmentsUseClasses = false
-  noClasses=false
+    codeFences = true
+    guessSyntax = true
+    hl_Lines = ""
+    lineNoStart = 1
+    lineNos = false
+    lineNumbersInTable = false
+    tabWidth = 4
+    noClasses = true
+    style = "catppuccin-latte"
 
-  [markup.tableOfContents]
+[markup.tableOfContents]
-    endLevel = 2
+  endLevel = 2
-    ordered = false
+  ordered = false
-    startLevel = 2
+  startLevel = 2
 

layouts/_default/list.html

@@ -1,10 +1,10 @@
 {{ define "main" }}
-<div class="page-content">
-  <h1>{{ .Title }}</h1>
-  {{ .Content }}
-</div>
 <div class="list-content-container">
-  <div class="article-card-flex-container">
+  <div class="page-content">
+    <h1>{{ .Title }}</h1>
+    {{ .Content }}
+  </div>
+  <div class="article-card-container">
     {{ range.Pages }}
     <a class="article-card" href="{{ .RelPermalink }}">
       <div class="article-card-info">
@@ -13,12 +13,10 @@
           <h3><strong>{{ .Title | safeHTML }}</strong></h3>
           <p>{{ .Summary | safeHTML }}</p>
           <br />
+          <div class="article-card-author-row">
+            <time>{{ .Date.Format "January 2, 2006" }}</time>
+          </div>
         </div>
-        {{ if isset .Params "date" }}
-        <div class="article-card-author-row">
-          <time>{{ .Date.Format "January 2, 2006" }}</time>
-        </div>
-        {{ end }}
       </div>
     </a>
     {{ end }}

layouts/partials/head.html

@@ -7,17 +7,17 @@
   <link rel="stylesheet" href="/css/tables.css" type="text/css" media="all" />
   <link rel="stylesheet" href="/css/toc.css" type="text/css" media="all" />
   <link rel="stylesheet" href="/css/articles.css" type="text/css" media="all" />
+  <link rel="stylesheet" href="/css/charts.css" type="text/css" media="all" />
   <link
     rel="stylesheet"
     href="/css/codeblock.css"
     type="text/css"
     media="all"
   />
-  <link rel="stylesheet" href="/css/syntax.css" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link
-    href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
     rel="stylesheet"
   />
 </html>

layouts/shortcodes/card-list.html

@@ -1,16 +0,0 @@
-<div class="list-content-container">
-  <div class="article-card-flex-container">
-    {{ $items := .Inner | unmarshal }} {{ range $k, $v := $items }}
-    <a class="article-card" href="{{ $v.link }}">
-      <div class="article-card-info">
-        <img class="article-card-thumbnail" src="{{ $v.pic }}" />
-        <div class="article-card-summary">
-          <h3><strong>{{ $k | safeHTML }}</strong></h3>
-          <p>{{ $v.content | safeHTML }}</p>
-          <br />
-        </div>
-      </div>
-    </a>
-    {{ end }}
-  </div>
-</div>

layouts/shortcodes/content-list.html

@@ -0,0 +1,15 @@
+<section class="content-list-container">
+  {{ $items := .Inner | unmarshal }} {{ range $k, $v := $items }}
+  <a class="content-list-item" href="{{ $v.link }}">
+    <div class="content-list-info">
+      <img class="content-list-thumbnail" src="{{ $v.pic }}" />
+      <div class="content-list-summary">
+        <div class="content-list-title"><p>{{ $k | safeHTML }}</p></div>
+        <div class="content-list-description">
+          <p>{{ $v.content | safeHTML }}</p>
+        </div>
+      </div>
+    </div>
+  </a>
+  {{ end }}
+</section>

static/css/articles.css

@@ -1,31 +1,41 @@
 .page-container {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
 }
 
 .main-content {
   flex: 1;
-}
-
-.article-container {
   display: flex;
   justify-content: center;
 }
 
-.page-container {
+.author-row {
   display: flex;
-  flex-direction: column;
+  justify-content: left;
-  min-height: 100vh;
+  align-items: center;
+  color: var(--subtext-color);
+  font-size: var(--author-row-font-size);
+  margin-bottom: 20px;
+}
+
+.author-name {
+  margin: 2px;
+}
+
+.author-row time {
+  margin: 2px;
+}
+
+.article-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
 }
 
 .page-content {
   color: var(--text-color);
-  padding-top: var(--content-padding);
   padding: var(--content-padding);
-  padding-left: var(--content-padding);
-  padding-right: var(--content-padding);
-  max-width: 1000px;
   line-height: var(--line-height);
   text-align: left;
 }
@@ -46,11 +56,17 @@
   margin-bottom: 120px;
 }
 
+.home-page-content h2 {
+  font-weight: normal;
+  font-size: 28px;
+  text-align: center;
+  margin-bottom: 60px !important;
+}
+
 .home-page-content h3 {
   font-weight: normal;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 60px;
 }
 
 .home-page-content h4 {
@@ -91,8 +107,8 @@ figcaption h4 {
 }
 
 .main-article {
+  width: 70%;
   padding: var(--content-padding);
-  width: var(--article-max-width);
   line-height: 1.5;
   text-align: left;
   border-left: var(--border-width) var(--border-style) var(--border-color);
@@ -125,66 +141,118 @@ ol {
   max-width: 100%;
 }
 
-.article-card-flex-container {
+/* article cards */
-  margin-left: var(--content-margin);
+.list-content-container {
-  margin-right: var(--content-margin);
-  margin-bottom: var(--content-margin);
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
-  justify-content: left;
+  min-width: 100%;
-  line-height: var(--line-height);
+  justify-content: center;
-  text-align: left;
+  padding: var(--content-padding);
-}
-
-.article-card {
-  margin: var(--element-margin);
-  background-color: black;
-  width: 200px;
-  min-height: 100%;
-  border-radius: var(--radius);
-  transition: background-color 0.3s ease;
-  text-decoration: none; /* Remove underline */
-  position: relative;
-}
-
-.article-card-text p,
-.article-text a {
-  color: var(--subtext-color);
-  margin-bottom: var(--element-margin);
-}
-
-.article-card-summary h3 {
-  color: var(--heading3-color);
-  margin: var(--article-margin);
-  font-size: 16px;
-  font-family: Arial, Helvetica, sans-serif;
 }
 
 .article-card-summary p {
-  color: var(--subtext-color);
+  color: var(--text-color);
-  margin: var(--article-margin);
+  text-align: left;
+  margin: 0px;
+  border: none;
+}
+
+.article-card-container a:hover {
+  text-decoration: underline;
+  color: var(--text-color) !important;
 }
 
 .article-card-info {
+  display: flex;
+  border-top: var(--border-width) var(--border-style) var(--border-color);
+}
+
+.article-card-info img {
+  width: 300px;
+  height: auto;
+  padding: 30px;
+}
+
+@media (max-width: 600px) {
+  .article-card {
+    display: flex;
+    justify-content: center;
+  }
+
+  .article-card-info {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border-bottom: var(--border-width) var(--border-style) var(--border-color);
+  }
+
+  .article-card-info img {
+    width: 80vw;
+    padding: 10px;
+  }
+
+  .article-card-summary {
+    margin-bottom: 30px;
+    padding: 10px;
+  }
+
+  .article-card-summary h3 {
+    margin-top: 0px;
+  }
+}
+
+/* horizontal list*/
+.content-list-container {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  min-width: 100%;
+  justify-content: left;
 }
 
-.article-card-thumbnail {
+.content-list-item {
-  max-width: 100%;
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
-}
-
-.article-card-author-row {
-  font-size: 10px;
-  position: absolute;
-  bottom: 0;
   width: 100%;
-  margin: var(--element-margin);
 }
 
-.article-card:hover {
+.content-list-container a:hover {
-  background-color: var(--summary-container-hover-bg);
+  text-decoration: underline;
+  color: var(--text-color) !important;
+}
+
+.content-list-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+  border-bottom: var(--border-width) var(--border-style) var(--border-color);
+}
+
+.content-list-info img {
+  padding: 10px;
+  height: 100%;
+  width: 200px;
+}
+
+.content-list-summary {
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+}
+
+.content-list-summary p {
+  color: var(--text-color);
+  text-align: left;
+  margin: 0px;
+  border: none;
+}
+
+.content-list-description p {
+  margin: 0px;
+  font-size: 16px;
+  line-height: 1.2;
+  width: 100%;
+}
+
+.content-list-title p {
+  margin-bottom: 1rem;
+  font-size: 22px;
 }

static/css/charts.css

@@ -0,0 +1,18 @@
+/* Charts */
+.chart-flex-container {
+  display: flex;
+}
+
+.chart-flex-container article {
+  flex: 1;
+}
+
+#chart {
+  width: 100%;
+  height: 50vh;
+}
+
+.chart-area {
+  width: 60%;
+  margin: var(--article-margin);
+}

static/css/codeblock.css

@@ -1,4 +1,3 @@
-/* Code block */
 pre {
   overflow-x: auto;
 }
@@ -19,7 +18,6 @@ pre {
   font-size: var(--code-block-font-size);
 }
 
-/* Code block language label */
 .codeblock::before {
   font-family: var(--code-font-family);
   content: attr(data-lang);
@@ -34,9 +32,8 @@ code {
   font-family: var(--code-font-family);
 }
 
-/* Styles for inline <code> */
 :not(pre) > code {
-  color: #aaa4a0;
+  color: var(--inline-code-color);
   background-color: var(--inline-code-bg-color);
   padding: 5px;
   border-radius: 2px;

static/css/navbar.css

@@ -13,18 +13,40 @@
 
 .navbar a {
   color: var(--navbar-text-color);
-  padding: 10px;
-  margin: 5px;
   text-decoration: none;
+  padding: 10px 10px 5px 5px;
   transition: background-color 0.3s ease;
-  border-radius: var(--radius);
+  border-bottom: 3px var(--border-style) transparent;
 }
 
 .navbar a:hover {
-  padding: 10px;
-  background-color: var(--navbar-hover);
-  border-radius: var(--radius);
   color: var(--text-color);
+  border-bottom: 3px var(--border-style) var(--hover-color);
+}
+
+.navbar-link-dropdown-content {
+  display: none;
+  position: absolute;
+  flex-direction: column;
+  right: 20px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  background-color: var(--navbar-background-color);
+  border-radius: 5px;
+  border: var(--border-width) var(--border-style) var(--border-color) !important;
+}
+
+.navbar_link_dropdown:hover .navbar-link-dropdown-content {
+  display: flex;
+  border: none;
+}
+
+.navbar-link-dropdown-content a {
+  border: none;
+}
+
+.navbar-link-dropdown-content a:hover {
+  border: none;
+  background-color: var(--navbar-hover);
 }
 
 .navbar__left a {
@@ -38,6 +60,11 @@
   align-items: center;
 }
 
+.navbar__right {
+  display: flex;
+  align-items: center;
+}
+
 .navbar-links ul {
   list-style-type: none;
   margin: 0;
@@ -52,16 +79,3 @@
 .navbar-links ul li a {
   display: inline-block;
 }
-
-.navbar-link-dropdown-content {
-  display: none;
-  position: absolute;
-  flex-direction: column;
-  right: 20px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  background-color: var(--navbar-background-color);
-}
-
-.navbar_link_dropdown:hover .navbar-link-dropdown-content {
-  display: flex;
-}

static/css/style.css

@@ -5,14 +5,32 @@
 }
 
 :root {
+  /* root */
   --font-family: "Montserrat", sans-serif;
-  --code-font-family: "IBM Plex Mono", monospace;
   --font-size: 10;
-  --author-row-font-size: 12px;
+  --background-color: #f9f9f9;
+  --text-color: #373841;
+  --subtext-color: #6c757d;
+  --link-color: #438bb1;
+  --hover-color: #fc8452;
+  --border-color: #c4c9d9;
+  --border-width: 1px;
+  --border-style: solid;
+
+  /* navbar/footer */
+  --navbar-background-color: #f9f9f9;
+  --navbar-text-color: #373841;
+  --navbar-hover: #e7e7f5;
+  --footer-background-color: #f9f9f9;
+
+  /* headings */
+  --heading1-color: #fc8452;
+  --heading2-color: #373841;
+  --heading3-color: #373841;
   --heading1-font-size: 25px;
-  --code-block-font-size: 10px;
+
-  --chart-modifier-height: 60px;
+  /* content */
-  --article-max-width: 70%;
+  --author-row-font-size: 12px;
   --content-padding: 40px;
   --content-margin: 40px;
   --element-padding: 20px;
@@ -21,33 +39,21 @@
   --heading-margin: 30px;
   --radius: 5px;
   --line-height: 1.5;
-  --checkbox-width: max-content;
+
-  --checkbox-font-size: 16px;
+  /* code */
-  --avatar-width: 20px;
+  --code-block-font-size: 10px;
-  --background-color: #181a1b;
+  --codeblock-bg-color: #edeeee;
-  --text-color: #e0ddd9;
+  --inline-code-color: #373841;
-  --subtext-color: #6c757d;
+  --inline-code-bg-color: #edeeee;
-  --link-color: #60b2f1;
+  --code-font-family: "Fira Mono", monospace;
-  --hover-color: #0056b3;
+
-  --heading1-color: #fc8452;
+  /* table */
-  --heading2-color: #e0ddd9;
-  --heading3-color: #e0ddd9;
-  --navbar-background-color: #181a1b;
-  --navbar-text-color: #e0ddd9;
-  --navbar-hover: #333;
-  --footer-background-color: #333;
-  --summary-container-hover-bg: #343a40;
-  --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: 600px) {
@@ -79,11 +85,18 @@
   background: #454445; /* Background color on hover */
 }
 
+html {
+  height: 100%;
+  display: flex;
+}
+
 body {
   font-family: var(--font-family);
   background-color: var(--background-color);
   font-size: var(--font-size);
   color: var(--text-color);
+  display: flex;
+  width: 100%;
 }
 
 a {
@@ -101,26 +114,6 @@ time {
   margin-bottom: var(--article-margin);
 }
 
-/* Charts */
-.chart-flex-container {
-  display: flex;
-}
-
-.chart-flex-container article {
-  flex: 1;
-}
-
-#chart {
-  width: 100%;
-  height: 50vh;
-}
-
-.chart-area {
-  width: 60%;
-  margin: var(--article-margin);
-}
-
-/* Footer */
 footer {
   background-color: var(--footer-background-color);
   color: var(--text-color);
@@ -128,37 +121,5 @@ footer {
   height: 10vh;
   display: flex;
   justify-content: space-between;
-}
+  border-top: var(--border-width) var(--border-style) var(--border-color);
-
-footer a:hover {
-  background-color: #ddd;
-  color: black;
-}
-
-.author-row {
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  color: var(--subtext-color);
-  font-size: var(--author-row-font-size);
-  margin-bottom: 20px;
-}
-
-.avatar-container {
-  width: var(--avatar-width);
-  margin-right: var(--element-margin);
-}
-
-.avatar {
-  display: block;
-  width: 100%;
-  height: auto;
-}
-
-.author-name {
-  margin: 2px;
-}
-
-.author-row time {
-  margin: 2px;
 }

static/css/syntax.css

@@ -1,371 +0,0 @@
-/* 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;
-}