diff --git a/build.sh b/build.sh
index cbb9d9c..f439b9a 100755
--- a/build.sh
+++ b/build.sh
@@ -5,17 +5,15 @@ mkdir build
 
 ln -s $(realpath res) build/res
 
-git_rev=$(git rev-parse --short=12 HEAD)
-git_commit_date=$(date -d @$(git log -1 --format=%at) +'%d. %B %Y %H:%M')
-
-compile ()  {
-    typst compile --root . --features html --input git_rev=$git_rev --input git_commit_date="$git_commit_date" -j 6 $@
-}
-
 page () {
-    compile --format pdf --input web=false "pages/$1" "build/$1.min.pdf"
-    compile --format html --input web=true "pages/$1" "build/$1.desktop.html"
-    compile --format html --input web=false "pages/$1" "build/$1.min.html"
+    last_modified=$(git log -1 --format="%ad" --date="format:%d. %B %Y %H:%M" -- "pages/$1")
+    full_commit_hash=$(git log -1 --format="%H" -- "pages/$1")
+    git_inp=(--input "git_rev=$full_commit_hash" --input "git_commit_date=$last_modified")
+
+    typst compile --root . --features html -j 6 "${git_inp[@]}" --format pdf --input web=false "pages/$1" "build/$1.min.pdf"
+    typst compile --root . --features html -j 6 "${git_inp[@]}" --format html --input web=true "pages/$1" "build/$1.desktop.html"
+    typst compile --root . --features html -j 6 "${git_inp[@]}" --format html --input web=false "pages/$1" "build/$1.min.html"
+    typst compile --root . --features html -j 6 "${git_inp[@]}" --format html --input web=false --input nano=true "pages/$1" "build/$1.nano.html"
 }
 
 page "article-make-regex-engine-1.typ"
diff --git a/common.typ b/common.typ
index 4bbd078..9e8d5de 100644
--- a/common.typ
+++ b/common.typ
@@ -9,6 +9,7 @@
 }
 
 #let is-web = to-bool(sys.inputs.at("web", default: "true"))
+#let is-nano = to-bool(sys.inputs.at("nano", default: "false"))
 #let is-html() = { if sys.inputs.at("query", default:"false") == "true" {
   return false
 } else {
@@ -16,6 +17,9 @@
 } }
 
 #let git_rev = sys.inputs.at("git_rev", default: "")
+#let short_git_rev = if git_rev != "" {
+  git_rev.slice(0, count:8)
+} else { "" }
 #let git_commit_date = sys.inputs.at("git_commit_date", default: "")
 
 #let res-path() = {
@@ -49,17 +53,9 @@
   }
 }
 
-#let html-p(txt) = {
-  context if is-html() {
-    html.elem("p", txt)
-  } else {
-    text(txt)
-  }
-}
-
 #let sized-p(size, txt) = {
   context if is-html() {
-    html.elem("p", attrs: (style: "font-size: " + str(size.abs.pt()) + "pt"), txt)
+    html.elem("span", attrs: (style: "font-size: " + str(size.abs.pt()) + "pt"), txt)
   } else {
     text(size, txt)
   }
@@ -81,6 +77,11 @@
   }
 }
 
+#let html-code(inner) = {
+  html-opt-elem("code", (:),
+    inner)
+}
+
 #let html-span(attrs, content) = {
   html-opt-elem("span", attrs, content)
 }
@@ -305,3 +306,7 @@ document.addEventListener('scroll', (event) => {
 #let person(p) = {
   flink(p.url, p.nick)
 }
+
+#let blocking-code(raw) = {
+  context html-frame(raw)
+}
diff --git a/components/header.typ b/components/header.typ
new file mode 100644
index 0000000..f2670eb
--- /dev/null
+++ b/components/header.typ
@@ -0,0 +1,18 @@
+#import "../common.typ": *
+
+#let rev() = [
+  #if git_rev != "" {[
+    Git revision #flink("https://github.com/alex-s168/website/tree/" + git_rev)[\##short_git_rev]
+  ]}
+
+  #if git_commit_date != "" {[
+    Modified at #git_commit_date
+  ]}
+]
+
+// authors is list of people in common:people
+#let rev-and-authors(authors) = [
+  #rev()
+
+  Written by #authors.map((p) => person(p)).join[, ]
+]
diff --git a/core-page-style.typ b/core-page-style.typ
index a43b5da..07d4d47 100644
--- a/core-page-style.typ
+++ b/core-page-style.typ
@@ -28,14 +28,30 @@
 
 #set text(font: "DejaVu Sans Mono", size: default-font-size)
 
-#show raw: it => box(
-  stroke: black,
-  radius: 2pt,
-  inset: if is-html() { 1.4pt } else { 4pt },
-  outset: 0pt,
-  baseline: 3.1pt,
-  text(it)
-)
+#show raw: it => if type(it.lang) == str and it.lang != "" and is-nano == false {
+  // TODO: after typst fix html exporter breaking line :sob:
+  // context html-frame(context 
+
+  box(
+    stroke: black,
+    radius: 2pt,
+    inset: if is-html() { 1.4pt } else { 5pt },
+    outset: 0pt,
+    baseline: 3.1pt,
+    text(it)
+  )
+} else if is-nano == true {
+  html-code(text(it))
+} else {
+  box(
+    stroke: black,
+    radius: 2pt,
+    inset: if is-html() { 1.4pt } else { 5pt },
+    outset: 0pt,
+    baseline: 3.1pt,
+    text(it)
+  )
+}
 
 #show box: it => {
   context if is-html() {
@@ -119,6 +135,12 @@ html.elem("style", "
   .current {
     font-weight: bold;
   }
+
+  pre {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    display: inline;
+  }
 ")
 }
 
diff --git a/pages/article-favicon.typ b/pages/article-favicon.typ
index 3cd7d55..0c202b0 100644
--- a/pages/article-favicon.typ
+++ b/pages/article-favicon.typ
@@ -1,6 +1,7 @@
 #import "../common.typ": *
 #import "../simple-page-layout.typ": *
 #import "../core-page-style.typ": *
+#import "../components/header.typ": rev-and-authors
 
 #simple-page(
   gen-table-of-contents: true,
@@ -11,7 +12,7 @@
   #title[The making of the favicon]
 
   #sized-p(small-font-size)[
-    Written by alex_s168
+    #rev-and-authors((people.alex,))
   ]
 ]
 
diff --git a/pages/article-make-regex-engine-1.typ b/pages/article-make-regex-engine-1.typ
index 3e3aba7..a4e92d7 100644
--- a/pages/article-make-regex-engine-1.typ
+++ b/pages/article-make-regex-engine-1.typ
@@ -1,6 +1,7 @@
 #import "../common.typ": *
 #import "../simple-page-layout.typ": *
 #import "../core-page-style.typ": *
+#import "../components/header.typ": rev-and-authors
 
 #simple-page(
   gen-table-of-contents: true,
@@ -13,7 +14,7 @@
   #title[Part 1: Introduction to RegEx]
 
   #sized-p(small-font-size)[
-    Written by alex_s168
+    #rev-and-authors((people.alex,))
   ]
 ]
 
diff --git a/pages/compiler-pattern-matching.typ b/pages/compiler-pattern-matching.typ
index 56ebc04..72e1174 100644
--- a/pages/compiler-pattern-matching.typ
+++ b/pages/compiler-pattern-matching.typ
@@ -1,25 +1,18 @@
 #import "../common.typ": *
 #import "../simple-page-layout.typ": *
 #import "../core-page-style.typ": *
+#import "../components/header.typ": rev-and-authors
 
 #simple-page(
   gen-table-of-contents: true,
-  [Alexander Nutz - Approaches to Pattern Matching]
+  [Approaches to Pattern Matching - Alexander Nutz]
 )[
 
 #section[
   #title[Approaches to pattern matching in compilers]
 
   #sized-p(small-font-size)[
-    #if git_rev != "" {[
-      Git revision #flink("https://github.com/alex-s168/website/tree/" + git_rev)[\##git_rev]
-    ]}
-
-    #if git_commit_date != "" {[
-      Modified at #git_commit_date
-    ]}
-
-    Written by alex_s168
+    #rev-and-authors((people.alex,))
   ]
 ]
 
@@ -80,23 +73,23 @@
 
 #section[
   An example is Cranelift's ISLE DSL:
-  #context html-frame[```lisp
+  #blocking-code(```lisp
   ;; x ^ x == 0.
   (rule (simplify (bxor (ty_int ty) x x))
         (subsume (iconst_u ty 0)))
-  ```]
+  ```)
 ]
 
 #section[
   Another example is tinygrad's pattern system:
-  #context html-frame[```python
+  #blocking-code(```python
   (UPat(Ops.AND, src=(
      UPat.var("x"),
      UPat(Ops.SHL, src=(
        UPat.const(1),
        UPat.var("b")))),
    lambda x,b: UOp(Ops.BIT_TEST, src=(x, b)))
-  ```]
+  ```)
   Fun fact: tinygrad actually decompiles the python code inside the second element of the pair, and runs multiple optimization passes on that.
 ]
 
@@ -145,7 +138,7 @@
 #section[
   == Examples
   MLIR's `pdl` dialect can be used to replace `arith.addi` with `my.add` like this:
-  #context html-frame[```llvm
+  #blocking-code(```llvm
   pdl.pattern @replace_addi_with_my_add : benefit(1) {
     %arg0 = pdl.operand
     %arg1 = pdl.operand
@@ -156,7 +149,7 @@
       pdl.replace %op with %new_op
     }
   }
-  ```]
+  ```)
 ]
 
 #section[
@@ -273,7 +266,7 @@
   The main problem is ordering the patterns.
 
   As an example, consider these three patterns:
-  #context html-frame[```lisp
+  #blocking-code(```lisp
   ;; A
   (add x:Const y) => (add y x)
 
@@ -282,19 +275,19 @@
 
   ;; C
   (add x 1) => (inc x)
-  ```]
+  ```)
 ]
 
 #section[
   Now what should the compiler do when it sees this:
-  #context html-frame[```lisp
+  #blocking-code(```lisp
   (sub (add 5 1) 2)
-  ```]
+  ```)
 ]
 
 #section[
   All three patterns would match:
-  #context html-frame[```lisp
+  #blocking-code(```lisp
   ;; apply A
   (sub (add 5 1) 2) => (sub (add 1 5) 2)
   ;; only B applies now
@@ -308,7 +301,7 @@
   ;; atlernatively apply C
   (sub (add 5 1) 2) => (sub (inc 5) 2)
   ;; nothing applies anymore
-  ```]
+  ```)
 ]
 
 #section[