style: Add blog post styles

.gitignore

@@ -189,3 +189,5 @@ Icon
 Network Trash Folder
 Temporary Items
 .apdisk
+
+/.quarto/

.prettierrc

@@ -7,3 +7,6 @@ overrides:
   - files: "*.gotmpl"
     options:
       parser: "go-template"
+  - files: "*.qmd"
+    options:
+      parser: "markdown"

.zed/settings.json

@@ -9,5 +9,5 @@
       }
     }
   },
-  "file_types": { "HTML": ["gotmpl"] }
+  "file_types": { "HTML": ["gotmpl"], "Markdown": ["qmd"] }
 }

_quarto.yml

@@ -0,0 +1,13 @@
+project:
+  type: hugo
+  preview:
+    serve:
+      cmd: "hugo server --port {port} --bind 0.0.0.0 --navigateToChanged"
+      ready: "Web Server is available at"
+
+format:
+  hugo-md:
+    code-fold: true
+
+execute:
+  warning: false

assets/styles/millironx.css

@@ -289,6 +289,15 @@ article > p {
   line-height: 1.5em;
 }
 
+h2#references ~ p {
+  font-size: 1rem;
+  text-justify: unset;
+  text-align: left;
+  hyphens: none;
+  line-height: 1rem;
+  text-indent: 2ch hanging;
+}
+
 article h1 + p,
 article h2 + p,
 article h3 + p,
@@ -337,6 +346,10 @@ figure:has(blockquote) > figcaption {
   font-size: 80%;
 }
 
+figure > img {
+  max-width: 100%;
+}
+
 footer {
   display: flex;
   flex-direction: column;

assets/styles/mix-twbs.scss

@@ -0,0 +1,179 @@
+$web-font-path: "/fonts/nunito-sans/index.css";
+
+@import "bootstrap/functions";
+@import "bootswatch/lux/variables";
+@import "bootstrap/bootstrap";
+@import "bootswatch/lux/bootswatch";
+
+$peek-height: 25rem;
+
+.blurred-container {
+  position: relative;
+  width: 100%;
+  min-height: 35vh;
+  height: $peek-height;
+  top: 0;
+  left: 0;
+}
+
+.blurred-container .motto {
+  color: #fff;
+  font-size: 76px;
+  font-weight: 600;
+  text-align: center;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.33);
+  text-transform: uppercase;
+  top: 7.5vh;
+  z-index: 3;
+  display: block;
+  margin: 0 auto;
+  position: relative;
+  width: 60%;
+  height: 0;
+}
+
+.motto h1 {
+  background: #0000007d;
+  -webkit-text-stroke: 0.3px $gray-100;
+  line-height: 1;
+}
+
+.blurred-container .img-src {
+  position: fixed;
+  width: 100%;
+  min-height: 35vh;
+  height: $peek-height;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+}
+
+.list-main {
+  position: relative;
+  background-color: #fff;
+  padding-bottom: calc(1rem + 95px);
+  padding-top: 1rem;
+}
+
+.footer-contents {
+  position: relative;
+  background-color: $gray-200;
+}
+
+/* Gives me greater control over fonts */
+.font-serif {
+  font-family: Georgia, "Times New Roman", Times, serif;
+}
+
+.font-sans {
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.font-mono {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+.font-small-caps {
+  font-variant-caps: small-caps;
+}
+
+.strikethrough {
+  text-decoration: line-through;
+}
+
+.sfTable {
+  margin: 0 auto;
+}
+
+.text-align-left {
+  text-align: left;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+.media-object {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+@media (min-width: 768px) {
+  .pull-left {
+    max-width: 25%;
+  }
+
+  .w-md-50 {
+    width: 50%;
+  }
+}
+
+h1 small {
+  font-size: 60%;
+  color: #9a9a9a;
+  font-weight: 300;
+  line-height: 1.5;
+}
+
+h1 {
+  font-weight: 400;
+  margin: 30px 0 15px;
+}
+
+.dogear {
+  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
+}
+
+.fa-stack-top {
+  vertical-align: top;
+}
+
+.table-condensed th {
+  padding: 0.5rem;
+}
+
+.table-condensed td {
+  padding: 0.5rem;
+}
+
+@media (min-width: map-get($grid-breakpoints, md)) {
+  .fixed-bottom {
+    left: 25%;
+  }
+
+  .md-max-width-33 {
+    max-width: 33%;
+  }
+}
+
+.card-link {
+  white-space: nowrap;
+}
+
+.category-button {
+  position: absolute;
+  top: 1em;
+  right: 1em;
+  display: grid;
+}
+
+.card-title {
+  margin-right: 2.25em;
+}
+
+.thumb-icon-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.thumb-icon-badge {
+  font-size: xx-large;
+}

config.toml

@@ -1,6 +1,7 @@
 baseURL = "https://millironx.com"
 languageCode = "en-us"
 title = "Milliron X"
+ignoreFiles = ["\\.qmd$", "\\.ipynb$", "\\.py$"]
 
 [pagination]
 pagerSize = 5
@@ -51,6 +52,9 @@ notAlternative = "true"
 [markup.goldmark.parser.attribute]
 block = true
 
+[markup.goldmark.renderer]
+unsafe = true
+
 [markup.goldmark.renderHooks]
 
 [markup.goldmark.renderHooks.link]

flake.lock

@@ -20,16 +20,16 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1737597992,
-        "narHash": "sha256-FECKBxkd+w5I/fhsquthDiw/r/MdCpqmKikBU9yQGug=",
+        "lastModified": 1762756533,
+        "narHash": "sha256-HiRDeUOD1VLklHeOmaKDzf+8Hb7vSWPVFcWwaTrpm+U=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "d0bb4699177f691c8e558b32b3bdc38bc112f76f",
+        "rev": "c2448301fb856e351aab33e64c33a3fc8bcf637d",
         "type": "github"
       },
       "original": {
         "owner": "nixos",
-        "ref": "nixos-unstable-small",
+        "ref": "nixos-25.05",
         "repo": "nixpkgs",
         "type": "github"
       }

flake.nix

@@ -1,13 +1,13 @@
 {
   inputs = {
-    nixpkgs.url = "github:nixos/nixpkgs/nixos-unstable-small";
+    nixpkgs.url = "github:nixos/nixpkgs/nixos-25.05";
     flake-utils.url = "github:numtide/flake-utils";
   };
   outputs = { self, nixpkgs, flake-utils }:
     flake-utils.lib.eachDefaultSystem (system:
       let
         pkgs = import nixpkgs { inherit system; };
-        buildInputs = with pkgs; [ hugo nodejs ];
+        buildInputs = with pkgs; [ hugo nodejs quarto julia-bin ];
       in with pkgs; {
         devShells.default = mkShell { inherit buildInputs; };
         packages.default = stdenvNoCC.mkDerivation {

layouts/partials/scrolling-image-header.html

@@ -1,6 +1,6 @@
 {{ $thumbnailImage := .Resources.GetMatch "*thumbnail*" }}
 {{ with $thumbnailImage }}
-  {{ $croppedImage := $thumbnailImage.Fill "960x320 center" }}
+  {{ $croppedImage := $thumbnailImage.Fill "1500x500 center" }}
 <style>
   .motto::before {
     background-image: url('{{ $croppedImage.Permalink }}');