testing code font

jbkunst · Mar 28, 2024 · fd11024 · fd11024
1 parent 556aefc
commit fd11024
Show file tree

Hide file tree

Showing 15 changed files with 41,953 additions and 4,697 deletions.
diff --git a/_freeze/posts/2000-01-01-quarto-post-example/index/execute-results/html.json b/_freeze/posts/2000-01-01-quarto-post-example/index/execute-results/html.json
diff --git a/_freeze/site_libs/htmltools-fill-0.5.8/fill.css b/_freeze/site_libs/htmltools-fill-0.5.8/fill.css
@@ -0,0 +1,21 @@
+@layer htmltools {
+  .html-fill-container {
+    display: flex;
+    flex-direction: column;
+    /* Prevent the container from expanding vertically or horizontally beyond its
+    parent's constraints. */
+    min-height: 0;
+    min-width: 0;
+  }
+  .html-fill-container > .html-fill-item {
+    /* Fill items can grow and shrink freely within
+    available vertical space in fillable container */
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+  }
+  .html-fill-container > :not(.html-fill-item) {
+    /* Prevent shrinking or growing of non-fill items */
+    flex: 0 0 auto;
+  }
+}
diff --git a/_freeze/site_libs/jquery-3.5.1/jquery.min.js b/_freeze/site_libs/jquery-3.5.1/jquery.min.js
diff --git a/_freeze/site_libs/proj4js-2.3.15/proj4.js b/_freeze/site_libs/proj4js-2.3.15/proj4.js
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/index.xml b/docs/index.xml
diff --git a/docs/posts/2000-01-01-quarto-post-example/index.html b/docs/posts/2000-01-01-quarto-post-example/index.html
diff --git a/docs/search.json b/docs/search.json
@@ -4,7 +4,7 @@
     "href": "index.html",
     "title": "Data, Code and Visualization",
     "section": "",
-    "text": "Order By\n       Default\n         \n          Title\n        \n         \n          Date - Oldest\n        \n         \n          Date - Newest\n        \n     \n  \n    \n      \n      \n    \n\n\n\n\n\n\n\n\n\n\nMy favorite ggplot2 packages with examples\n\n\n11 min\n\n\n\nminipost\n\n\nggplot2\n\n\ndont-forget\n\n\n\n\nJul 23, 2023\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nVisualización en el Análisis de Datos\n\n\n18 min\n\n\n\nggplot2\n\n\ndata-visualization\n\n\nspanish\n\n\n\n\nJul 9, 2023\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSimulating and watching autoregressive processes\n\n\n11 min\n\n\n\nminipost\n\n\nstats\n\n\nhighcharts\n\n\nhighcharter\n\n\ntime-series\n\n\ndata-visualization\n\n\n\n\nJun 18, 2021\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRegression, ANOVA, t-test are related…\n\n\n0 min\n\n\n\nminipost\n\n\nstats\n\n\ndont-forget\n\n\n\n\nJun 8, 2021\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nvalueBoxes and Sparklines\n\n\n15 min\n\n\n\nshiny\n\n\nhighcharts\n\n\nhighcharter\n\n\nhtmlwidgets\n\n\n\n\nJun 29, 2020\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe tale of two charts combined\n\n\n9 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\n\n\nJun 24, 2020\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n30diasdegraficos Parte 3\n\n\n11 min\n\n\n\nspanish\n\n\nhighcharts\n\n\ndata-visualization\n\n\nggplot2\n\n\n\n\nJun 2, 2020\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n30diasdegraficos Parte 2\n\n\n26 min\n\n\n\nspanish\n\n\nhighcharts\n\n\ndata-visualization\n\n\nggplot2\n\n\n\n\nMay 22, 2020\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n30diasdegraficos Parte 1\n\n\n19 min\n\n\n\nspanish\n\n\nhighcharts\n\n\ndata-visualization\n\n\nggplot2\n\n\n\n\nMay 12, 2020\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nGOT Animating the Shifting of Affiliations\n\n\n8 min\n\n\n\ndata-visualization\n\n\nggplot2\n\n\nanimation\n\n\n\n\nApr 23, 2019\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen charts are integrated in the web page\n\n\n2 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\n\n\nApr 8, 2019\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nUsing tooltips in unexpected ways\n\n\n2 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\n\n\nFeb 4, 2019\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nGiving a Thematic Touch to your Interactive Chart\n\n\n6 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\n\n\nMar 3, 2017\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nThematic Interactive Map\n\n\n3 min\n\n\n\nmaps\n\n\ndata-visualization\n\n\nhighcharts\n\n\nminipost\n\n\n\n\nJan 20, 2017\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nInteractive and Styled Middle Earth Map\n\n\n3 min\n\n\n\nmaps\n\n\nhighcharts\n\n\n\n\nDec 15, 2016\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReplicating NYT Weather App\n\n\n5 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\n\n\nDec 2, 2016\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAdding motion to choropleths\n\n\n1 min\n\n\n\nmaps\n\n\nhighcharts\n\n\nanimation\n\n\n\n\nApr 12, 2016\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHow to: Weather Radials\n\n\n3 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\nggplot2\n\n\nminipost\n\n\n\n\nMar 24, 2016\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nVisualizing Chess Data With ggplot\n\n\n12 min\n\n\n\ndata-visualization\n\n\nggplot2\n\n\nchess\n\n\n\n\nOct 30, 2015\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nrchess a Chess Package for R\n\n\n1 min\n\n\n\npackage\n\n\nhtmlwidgets\n\n\nchess\n\n\n\n\nOct 7, 2015\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nVisualizing sort algorithms with ggplot2\n\n\n4 min\n\n\n\nggplot2\n\n\ndata-visualization\n\n\n\n\nSep 25, 2015\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nQuarto post example\n\n\n1 min\n\n\n\ntesting\n\n\ndont-forget\n\n\n\n\nJan 1, 2000\n\n\n\n\n\n\n\n\nNo matching items"
+    "text": "Order By\n       Default\n         \n          Title\n        \n         \n          Date - Oldest\n        \n         \n          Date - Newest\n        \n     \n  \n    \n      \n      \n    \n\n\n\n\n\n\n\n\n\n\nMy favorite ggplot2 packages with examples\n\n\n12 min\n\n\n\nminipost\n\n\nggplot2\n\n\ndont-forget\n\n\n\n\nJul 23, 2023\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nVisualización en el Análisis de Datos\n\n\n19 min\n\n\n\nggplot2\n\n\ndata-visualization\n\n\nspanish\n\n\n\n\nJul 9, 2023\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSimulating and watching autoregressive processes\n\n\n12 min\n\n\n\nminipost\n\n\nstats\n\n\nhighcharts\n\n\nhighcharter\n\n\ntime-series\n\n\ndata-visualization\n\n\n\n\nJun 18, 2021\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRegression, ANOVA, t-test are related…\n\n\n1 min\n\n\n\nminipost\n\n\nstats\n\n\ndont-forget\n\n\n\n\nJun 8, 2021\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nvalueBoxes and Sparklines\n\n\n16 min\n\n\n\nshiny\n\n\nhighcharts\n\n\nhighcharter\n\n\nhtmlwidgets\n\n\n\n\nJun 29, 2020\n\n\n\n\n\n\n\n\n\n\n\n\nThe tale of two charts combined\n\n\n10 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\n\n\nJun 24, 2020\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n30diasdegraficos Parte 3\n\n\n12 min\n\n\n\nspanish\n\n\nhighcharts\n\n\ndata-visualization\n\n\nggplot2\n\n\n\n\nJun 2, 2020\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n30diasdegraficos Parte 2\n\n\n27 min\n\n\n\nspanish\n\n\nhighcharts\n\n\ndata-visualization\n\n\nggplot2\n\n\n\n\nMay 22, 2020\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n30diasdegraficos Parte 1\n\n\n20 min\n\n\n\nspanish\n\n\nhighcharts\n\n\ndata-visualization\n\n\nggplot2\n\n\n\n\nMay 12, 2020\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nGOT Animating the Shifting of Affiliations\n\n\n9 min\n\n\n\ndata-visualization\n\n\nggplot2\n\n\nanimation\n\n\n\n\nApr 23, 2019\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen charts are integrated in the web page\n\n\n3 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\n\n\nApr 8, 2019\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nUsing tooltips in unexpected ways\n\n\n3 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\n\n\nFeb 4, 2019\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nGiving a Thematic Touch to your Interactive Chart\n\n\n7 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\n\n\nMar 3, 2017\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nThematic Interactive Map\n\n\n4 min\n\n\n\nmaps\n\n\ndata-visualization\n\n\nhighcharts\n\n\nminipost\n\n\n\n\nJan 20, 2017\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nInteractive and Styled Middle Earth Map\n\n\n4 min\n\n\n\nmaps\n\n\nhighcharts\n\n\n\n\nDec 15, 2016\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReplicating NYT Weather App\n\n\n6 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\n\n\nDec 2, 2016\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAdding motion to choropleths\n\n\n2 min\n\n\n\nmaps\n\n\nhighcharts\n\n\nanimation\n\n\n\n\nApr 12, 2016\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHow to: Weather Radials\n\n\n4 min\n\n\n\ndata-visualization\n\n\nhighcharts\n\n\nggplot2\n\n\nminipost\n\n\n\n\nMar 24, 2016\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nVisualizing Chess Data With ggplot\n\n\n13 min\n\n\n\ndata-visualization\n\n\nggplot2\n\n\nchess\n\n\n\n\nOct 30, 2015\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nrchess a Chess Package for R\n\n\n2 min\n\n\n\npackage\n\n\nhtmlwidgets\n\n\nchess\n\n\n\n\nOct 7, 2015\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nVisualizing sort algorithms with ggplot2\n\n\n5 min\n\n\n\nggplot2\n\n\ndata-visualization\n\n\n\n\nSep 25, 2015\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nQuarto post example\n\n\n2 min\n\n\n\ntesting\n\n\ndont-forget\n\n\n\n\nJan 1, 2000\n\n\n\n\n\n\n\n\nNo matching items"
   },
   {
     "objectID": "about.html",
@@ -18,14 +18,14 @@
     "href": "posts/2000-01-01-quarto-post-example/index.html",
     "title": "Quarto post example",
     "section": "",
-    "text": "Titles in the main are with ##: Yes, the <h1> title is of the first/main title.\nThis is a link. Another link is https://github.com/quarto-dev/quarto-cli"
+    "text": "Titles in the main are with ##: Yes, the &lt;h1&gt; title is of the first/main title.\nThis is a link. Another link is https://github.com/quarto-dev/quarto-cli"
   },
   {
     "objectID": "posts/2000-01-01-quarto-post-example/index.html#testing-htmlwidgets",
     "href": "posts/2000-01-01-quarto-post-example/index.html#testing-htmlwidgets",
     "title": "Quarto post example",
     "section": "Testing htmlwidgets",
-    "text": "Testing htmlwidgets\n\nCode```{r}\nlibrary(highcharter)\nlibrary(palmerpenguins)\n\nhc <- hchart(\n  penguins, \n  \"point\", \n  hcaes(bill_length_mm, bill_depth_mm, group = species)\n  )\n\nhc\n```"
+    "text": "Testing htmlwidgets\n\n\nCode\n```{r}\nlibrary(highcharter)\nlibrary(palmerpenguins)\n\nhc &lt;- hchart(\n  penguins, \n  \"point\", \n  hcaes(bill_length_mm, bill_depth_mm, group = species)\n  )\n\nhc\n```"
   },
   {
     "objectID": "posts/2000-01-01-quarto-post-example/index.html#types-of-column",
@@ -39,14 +39,14 @@
     "href": "posts/2000-01-01-quarto-post-example/index.html#figures",
     "title": "Quarto post example",
     "section": "Figures",
-    "text": "Figures\nAccording to https://r4ds.hadley.nz/quarto.html#sec-figures:\n\nCode```{r}\nlibrary(ggplot2)\nlibrary(ggforce)\n\np <- ggplot(penguins, aes(x = flipper_length_mm, y = bill_length_mm)) +\n  # geom_smooth(aes(color = species), method = \"lm\") +\n  geom_mark_hull(\n    aes(filter = species == \"Gentoo\", label = species),\n    description = \"A species with long flippers\",\n    color = \"gray95\",\n    fill = \"gray80\",\n    concavity = 4,\n    size = 20\n  ) +\n  geom_point(aes(fill = species), color = \"gray80\", size = 3, shape = 21) +\n  scale_fill_viridis_d(option = \"B\", begin = 0.1, end = 0.9) +\n  # scale_color_viridis_d(option = \"B\", begin = 0.1, end = 0.9) +\n  labs(\n    title = \"Flipper and bill length\",\n    subtitle = \"Dimensions for Adelie, Chinstrap and Gentoo Penguins at Palmer Station LTER\",\n    x = \"Flipper length (mm)\",\n    y = \"Bill length (mm)\",\n    fill = \"Penguin species\",\n    captions = \"Source: https://allisonhorst.github.io/palmerpenguins/\" \n  )\n\np\n```\n\n\n\n\n\nCode```{r}\n#| fig-width: 6\n#| out-width: \"100%\"\n#| fig-asp: 0.618\n#| column: body-outset\np\n```\n\n\n\n\n\nCode```{r}\n#| out-width: \"100%\"\n#| fig-align: \"center\"\n#| column: body-outset\np\n```\n\n\n\n\n\n\n\n\nCode```{r}\n#| out-width: \"100%\"\n#| fig-align: \"center\"\n#| column: page\np + theme_minimal(base_size = 7)\n```"
+    "text": "Figures\nAccording to https://r4ds.hadley.nz/quarto.html#sec-figures:\n\n\nCode\n```{r}\nlibrary(ggplot2)\nlibrary(ggforce)\n\np &lt;- ggplot(penguins, aes(x = flipper_length_mm, y = bill_length_mm)) +\n  # geom_smooth(aes(color = species), method = \"lm\") +\n  geom_mark_hull(\n    aes(filter = species == \"Gentoo\", label = species),\n    description = \"A species with long flippers\",\n    color = \"gray95\",\n    fill = \"gray80\",\n    concavity = 4,\n    size = 20\n  ) +\n  geom_point(aes(fill = species), color = \"gray80\", size = 3, shape = 21) +\n  scale_fill_viridis_d(option = \"B\", begin = 0.1, end = 0.9) +\n  # scale_color_viridis_d(option = \"B\", begin = 0.1, end = 0.9) +\n  labs(\n    title = \"Flipper and bill length\",\n    subtitle = \"Dimensions for Adelie, Chinstrap and Gentoo Penguins at Palmer Station LTER\",\n    x = \"Flipper length (mm)\",\n    y = \"Bill length (mm)\",\n    fill = \"Penguin species\",\n    captions = \"Source: https://allisonhorst.github.io/palmerpenguins/\" \n  )\n\np\n```\n\n\n\n\n\n\n\n\n\n\n\nCode\n```{r}\n#| fig-width: 6\n#| out-width: \"100%\"\n#| fig-asp: 0.618\n#| column: body-outset\np\n```\n\n\n\n\n\n\n\n\n\n\n\nCode\n```{r}\n#| out-width: \"100%\"\n#| fig-align: \"center\"\n#| column: body-outset\np\n```\n\n\n\n\n\n\n\n\n\n\n\nCode\n```{r}\n#| out-width: \"100%\"\n#| fig-align: \"center\"\n#| column: page\np + theme_minimal(base_size = 7)\n```"
   },
   {
     "objectID": "posts/2000-01-01-quarto-post-example/index.html#marging-content",
     "href": "posts/2000-01-01-quarto-post-example/index.html#marging-content",
     "title": "Quarto post example",
     "section": "Marging content",
-    "text": "Marging content\nContent in the right:\n\nCode```{r, out.height=300}\n#| column: margin\n# This will be in margin so make points smaller\n# #| column: margin\n# out.height=300\nhc |> \n  hc_plotOptions(\n   scatter = list(showInLegend = FALSE, marker = list(radius = 2)) \n  )\n```\n\n\n\n\n\n\n\n\n\n\n.column-margin"
+    "text": "Marging content\nContent in the right:\n\n\nCode\n```{r, out.height=300}\n#| column: margin\n# This will be in margin so make points smaller\n# #| column: margin\n# out.height=300\nhc |&gt; \n  hc_plotOptions(\n   scatter = list(showInLegend = FALSE, marker = list(radius = 2)) \n  )\n```\n\n\n\n\n\n\n\n\n\n\n.column-margin"
   },
   {
     "objectID": "posts/2015-09-25-visualizing-sort-algorithms-with-ggplot2/index.html",
@@ -1034,5 +1034,12 @@
     "title": "#30diasdegraficos Parte 1",
     "section": "",
     "text": "Agradecer por la iniciativa a la comunidad de R4DS_es &lt;3:\n\n\n\n\n30dias\n\n\n\n\n\n\n\nEste post es muy espacial pues cumpl(e|irá|iría) muchas características.\n\nSerá el primero en español en este blog!\nHaré la mayoría de gráficos con el paquete {highcharter}, intentando ser lo más claro posible con el fin de que sirva también como introducción, casos de usos y ejemplos para el paquete. Partiremos de menos a más: desde las funciones básicas, complementando luego con mejores práctivas y agregando funcionalidades desde le mundo Javascript y HTML.\nTambién comentaremos usos y cuidados de cada uno de los tipos de gráficos para que esto también sea termine siendo una ayuda al comenzar este viaje en el mundo de la visualización. Dicho lo anterior intentaré ir siempre dando link de material de ayuda a buenas fuentes de información.\n\nAsí que sin más, vamos a cargar los paquetes necesarios que en este caso serán {datos} para los data frames, {highcharter} y {ggplot2} para graficar y {dplyr} para la manipulación de datos. Eventualmente utilizaremos otros paquetes como {lubridate} o {forcats} a medida que necesitemos de ellos.\n\n\nCode\nlibrary(datos)       # datos\nlibrary(highcharter) # gráficos\nlibrary(ggplot2)     # más gráficos  \nlibrary(dplyr)       # manipulación de datos\nlibrary(tidyr)       # más manipulación de datos"
+  },
+  {
+    "objectID": "posts/2000-01-01-quarto-post-example/index.html#some-quicks-points",
+    "href": "posts/2000-01-01-quarto-post-example/index.html#some-quicks-points",
+    "title": "Quarto post example",
+    "section": "",
+    "text": "Titles in the main are with ##: Yes, the &lt;h1&gt; title is of the first/main title.\nThis is a link. Another link is https://github.com/quarto-dev/quarto-cli"
   }
 ]
diff --git a/docs/site_libs/bootstrap/bootstrap.min.css b/docs/site_libs/bootstrap/bootstrap.min.css
diff --git a/docs/site_libs/htmltools-fill-0.5.8/fill.css b/docs/site_libs/htmltools-fill-0.5.8/fill.css
@@ -0,0 +1,21 @@
+@layer htmltools {
+  .html-fill-container {
+    display: flex;
+    flex-direction: column;
+    /* Prevent the container from expanding vertically or horizontally beyond its
+    parent's constraints. */
+    min-height: 0;
+    min-width: 0;
+  }
+  .html-fill-container > .html-fill-item {
+    /* Fill items can grow and shrink freely within
+    available vertical space in fillable container */
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+  }
+  .html-fill-container > :not(.html-fill-item) {
+    /* Prevent shrinking or growing of non-fill items */
+    flex: 0 0 auto;
+  }
+}
diff --git a/docs/site_libs/jquery-3.5.1/jquery.min.js b/docs/site_libs/jquery-3.5.1/jquery.min.js
diff --git a/docs/site_libs/proj4js-2.3.15/proj4.js b/docs/site_libs/proj4js-2.3.15/proj4.js
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
@@ -2,15 +2,15 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://jkunst.com/blog/index.html</loc>
-    <lastmod>2024-03-27T02:16:41.452Z</lastmod>
+    <lastmod>2024-03-26T03:57:05.976Z</lastmod>
   </url>
   <url>
     <loc>https://jkunst.com/blog/about.html</loc>
     <lastmod>2023-07-09T08:13:29.305Z</lastmod>
   </url>
   <url>
     <loc>https://jkunst.com/blog/posts/2000-01-01-quarto-post-example/index.html</loc>
-    <lastmod>2023-07-10T15:30:14.869Z</lastmod>
+    <lastmod>2024-03-26T03:57:05.980Z</lastmod>
   </url>
   <url>
     <loc>https://jkunst.com/blog/posts/2015-09-25-visualizing-sort-algorithms-with-ggplot2/index.html</loc>

diff --git a/docs/styles.css b/docs/styles.css
@@ -1,5 +1,9 @@
 @import 'https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap';
 
+.sourceCode {
+  font-family: "Fira Code";
+}
+
 /* css styles */
 .nav-footer {
   border-top: 1px solid #dee2e6;

diff --git a/styles.css b/styles.css
@@ -1,5 +1,9 @@
 @import 'https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap';
 
+.sourceCode {
+  font-family: "Fira Code";
+}
+
 /* css styles */
 .nav-footer {
   border-top: 1px solid #dee2e6;