Big refactor

_content/news/2021-12-22-notizia-1.md

@@ -0,0 +1,91 @@
+---
+id: 2021-12-22-notizia-1
+title: "Notizia 1"
+tags: important, prova, test, foo, bar
+publish_date: 2021/12/22 22:00
+description: |
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
+---
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+Lorem ipsum dolor, sit amet consectetur "adipisicing" elit. Repudiandae -- optio ad, consequatur **distinctio possimus** laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora $1 + 1$ ea, cupiditate explicabo vel! Porro?
+
+$$
+\int_0^1 x^2 \mathrm d x
+$$
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus _laudantium molestias similique placeat_, dolore omnis et aperiam rem [delectus tempora ea,](#) cupiditate explicabo vel! Porro?
+
+![testing](https://picsum.photos/400/300)
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora ea, cupiditate explicabo vel! Porro?
+
+- Item 1
+    - Item 2
+        - Item 3
+    - Item 4
+- Item 5
+- Item 5
+- Item 5
+
+- foo
+    ```  
+    type Article struct {
+        Id          string
+        Title       string
+        Description string
+        Tags        []string
+        PublishDate time.Time
+
+        MarkdownSource string
+        renderedHTML   string
+    }
+    ```
+    - bar with some `code`
+        ```go   
+        type Article struct {
+            Id          string
+            Title       string
+            Description string
+            Tags        []string
+            PublishDate time.Time
+
+            MarkdownSource string
+            renderedHTML   string
+        }
+        ```
+
+#### Tables
+
+<https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables>
+
+Colons can be used to align columns.
+
+| Tables        | Are           | Cool  |
+| ------------- |:-------------:| -----:|
+| col 3 is      | right-aligned | $1600 |
+| col 2 is      | centered      |   $12 |
+| zebra stripes | are neat      |    $1 |
+
+There must be at least 3 dashes separating each header cell.
+The outer pipes (|) are optional, and you don't need to make the 
+raw Markdown line up prettily. You can also use inline Markdown.
+
+Markdown | Less | Pretty
+--- | --- | ---
+*Still* | `renders` | **nicely**
+1 | 2 | 3
+
+
+| Expression | Derivative | Integral  |
+| :---: | :---: | :---: |
+| $x^a$ | $a x^{a-1}$ | $\displaystyle \frac{1}{a+1} x^{a+1} + c$ se $a \neq -1$ |
+| $\sin x$ | $\cos x$ | $\displaystyle -\cos x + c$ |
+| $e^x$ | $e^x$ | $\displaystyle e^x + c$ |
+
+

_content/news/2021-12-23-notizia-2.md

@@ -0,0 +1,37 @@
+---
+id: 2021-12-23-notizia-2
+title: "Notizia 2"
+tags: prova, test, foo, bar
+publish_date: 2021/12/23 22:00
+description: |
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
+---
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur **distinctio possimus** laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora ea, cupiditate explicabo vel! Porro?
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus _laudantium molestias similique placeat_, dolore omnis et aperiam rem [delectus tempora ea,](#) cupiditate explicabo vel! Porro?
+
+![testing](https://picsum.photos/200/300)
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora ea, cupiditate explicabo vel! Porro?
+
+- Item 1
+    - Item 2
+        - Item 3
+    - Item 4
+- Item 5
+- Item 5
+- Item 5
+
+- foo
+  -  bar
+     ```Makefile
+     foo
+     	foo
+     ```

_content/news/2021-12-24-notizia-3.md

@@ -0,0 +1,37 @@
+---
+id: 2021-12-24-notizia-3
+title: "Notizia 3"
+tags: prova, test, foo, bar
+publish_date: 2021/12/24 18:00
+description: |
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis nemo aperiam, voluptas quam alias esse sed natus tempore suscipit fugiat sit delectus exercitationem numquam ipsum assumenda recusandae consequatur...
+---
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur **distinctio possimus** laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora ea, cupiditate explicabo vel! Porro?
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus _laudantium molestias similique placeat_, dolore omnis et aperiam rem [delectus tempora ea,](#) cupiditate explicabo vel! Porro?
+
+![testing](https://picsum.photos/200/300)
+
+Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae optio ad, consequatur distinctio possimus laudantium molestias similique placeat, dolore omnis et aperiam rem delectus tempora ea, cupiditate explicabo vel! Porro?
+
+- Item 1
+    - Item 2
+        - Item 3
+    - Item 4
+- Item 5
+- Item 5
+- Item 5
+
+- foo
+  -  bar
+     ```Makefile
+     foo
+     	foo
+     ```

_content/public/css/main.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap";:root{--fg-300: #777;--fg-400: #666;--fg-500: #333;--fg-600: #222;--bg-000: #f0f0f0;--bg-100: #f0f0f0;--bg-500: #eaeaea;--bg-550: #ecedee;--bg-600: #e4e5e7;--bg-700: #d5d5d5;--bg-750: #c8c8c8;--bg-800: #c0c0c0;--bg-850: #b8b8b8;--accent-300: #5cc969;--accent-400: #4eaa59;--accent-500: #278542;--accent-600: #2e974c;--accent-700: #154d24;--accent-800: #002d0d;--ft-ss: "Inter", sans-serif;--ft-ss-wt-light: 300;--ft-ss-wt-normal: 400;--ft-ss-wt-medium: 500;--ft-ss-wt-bold: 700;--shadow-500: 0 0 16px 0 #00000018;--text-input-bg: var(--bg-000);--text-input-readonly-bg: var(--bg-600);--text-input-readonly-fg: var(--fg-300)}*{box-sizing:border-box}html,body{margin:0}html{height:100%;width:100%}body{background:var(--bg-500);color:var(--fg-500);font-family:var(--ft-ss);font-size:17px;font-weight:var(--ft-ss-wt-normal);width:100%;min-height:100%;position:relative}h1,h2,h3,h4{margin:0;margin-top:1rem;margin-bottom:.5rem;font-weight:var(--font-weight-light)}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.35rem}h4{font-size:1.2rem;font-weight:var(--font-weight-bold)}p,ul,ol,li{margin:0;width:70ch;max-width:100%;line-height:1.8}p+p{padding-top:.5rem}ul,ol{padding:0 0 0 1.5rem}hr{width:50ch;height:1px;margin:0;border:none;background-color:var(--bg-darker-2)}pre{margin:.5rem 0;background:var(--bg-lighter);border:1px solid #cbcbcb;border-radius:2px;box-shadow:0 2px 4px 0 rgba(0,0,0,.2);font-size:90%;display:flex;overflow-x:auto}pre>code{display:block;margin:.25rem}p.center{text-align:center}

_content/public/home.js

@@ -0,0 +1,342 @@
+
+function pointInInterval(a, b, x) {
+  return a <= x && x <= b;
+}
+
+function intervalIntersectsInterval(a, b, c, d) {
+  if (c <= a) {
+    return a <= d;
+  }
+
+  return pointInInterval(a, b, c);
+}
+
+function rectIntersectRect(x1, y1, x2, y2, x3, y3, x4, y4) {
+  return intervalIntersectsInterval(x1, x2, x3, x4) && intervalIntersectsInterval(y1, y2, y3, y4);
+}
+
+function intersects(x1, y1, x2, y2, x3, y3, x4, y4) {
+  const a_minx = Math.min(x1, x2);
+  const a_maxx = Math.max(x1, x2);
+  const a_miny = Math.min(y1, y2);
+  const a_maxy = Math.max(y1, y2);
+
+  const b_minx = Math.min(x3, x4);
+  const b_maxx = Math.max(x3, x4);
+  const b_miny = Math.min(y3, y4);
+  const b_maxy = Math.max(y3, y4);
+
+  if (!rectIntersectRect(a_minx, a_miny, a_maxx, a_maxy, b_minx, b_miny, b_maxx, b_maxy))
+    return false;
+
+  const a_dx = x2 - x1;
+  const a_dy = y2 - y1;
+
+  const b_dx = x4 - x3;
+  const b_dy = y4 - y3;
+
+  const det = -b_dx * a_dy + a_dx * b_dy;
+
+  if (Math.abs(det) === 0 && -a_dy * (x3 - x1) + a_dx * (y3 - y1) === 0) {
+    return y1 <= y3 <= y2 || y1 <= y4 <= y2;
+  }
+
+  const s = (-a_dy * (x1 - x3) + a_dx * (y1 - y3)) / det;
+  const t = (+b_dx * (y1 - y3) - b_dy * (x1 - x3)) / det;
+
+  return s >= 0 && s <= 1 && t >= 0 && t <= 1;
+}
+
+const $canvas = document.querySelector('#circuit-pattern');
+let g = $canvas.getContext('2d');
+
+let WIDTH = $canvas.offsetWidth;
+let HEIGHT = $canvas.offsetHeight;
+
+const TS = 20;
+
+let ROWS = HEIGHT / TS;
+let COLS = WIDTH / TS;
+
+function updateCanvasDimensions() {
+  g = $canvas.getContext('2d');
+
+  WIDTH = $canvas.offsetWidth;
+  HEIGHT = $canvas.offsetHeight;
+
+  ROWS = HEIGHT / TS;
+  COLS = WIDTH / TS;
+
+  $canvas.width = WIDTH * devicePixelRatio;
+  $canvas.height = HEIGHT * devicePixelRatio;
+  g.scale(devicePixelRatio, devicePixelRatio);
+}
+
+window.addEventListener('resize', () => updateCanvasDimensions());
+updateCanvasDimensions();
+
+const state = {
+  wires: [], // :: [(Int, Int)]
+  nextWire: null,
+  nextWireIndex: 0,
+  nextSegmentLen: 0,
+  t: 0,
+};
+
+function randomFloat(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+function randomInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+function randomChoice(list) {
+  return list[randomInt(0, list.length - 1)];
+}
+
+const DIRS = {
+  left: [-1, 1],
+  center: [0, 1],
+  right: [+1, 1],
+};
+
+const NEXT_DIRS = {
+  left: ['center'],
+  center: ['left', 'right'],
+  right: ['center'],
+};
+
+function canPlaceSegment([[p1x, p1y], [p2x, p2y]]) {
+  return state.wires.every(wire => {
+    return everyWireSegment(wire, ([[sx, sy], [lx, ly]]) => {
+      return !intersects(sx, sy, lx, ly, p1x, p1y, p2x, p2y);
+    });
+  })
+}
+
+function everyWireSegment(wire, segmentFn) {
+  let [start, ...rest] = wire;
+
+  return rest.every((pt) => {
+    const r = segmentFn([start, pt]);
+    start = pt;
+    return r;
+  });
+}
+
+function generateWire() {
+  const pieceCount = Math.pow(randomFloat(1, 2.5), 2) | 0;
+  const startPoint = [
+    randomInt(0, COLS),
+    Math.pow(randomFloat(0, ROWS / 12), 2) | 0,
+  ];
+  const sizes = Array(pieceCount).fill(0).map(() => randomInt(2, 4) | 0);
+
+  const dirs = [randomChoice(Object.keys(DIRS))];
+  for (let i = 0; i < pieceCount - 1; i++) {
+    const last = dirs[dirs.length - 1];
+    dirs.push(randomChoice(NEXT_DIRS[last]));
+  }
+
+  const wire = [startPoint];
+  for (let i = 0; i < pieceCount; i++) {
+    const [lpx, lpy] = wire[wire.length - 1];
+    const [dx, dy] = DIRS[dirs[i]];
+    const s = sizes[i];
+
+    const s_bonus = (dirs[i] === 'center' ? s * 2 : s) | 0;
+
+    wire.push([lpx + dx * s_bonus, lpy + dy * s_bonus]);
+  }
+
+  const ok = everyWireSegment(wire, segment => {
+    return canPlaceSegment(segment);
+  });
+
+  if (!ok)
+    return null;
+
+  return wire;
+}
+
+// // LinearintERPolation
+function lerp(a, b, t) {
+  return t * (b - a) + a;
+}
+function lerpPoint([x1, y1], [x2, y2], t) {
+  return [lerp(x1, x2, t), lerp(y1, y2, t)];
+}
+
+const CELLS_PER_SECOND = 15;
+
+let lastTime = new Date().getTime();
+
+function update() {
+  const now = new Date().getTime();
+  const delta = (now - lastTime) / 1000;
+  lastTime = now;
+
+  if (state.nextWire) {
+    state.t += CELLS_PER_SECOND * delta;
+
+    if (state.t >= 1.0) {
+      const [[x1, y1], [x2, y2]] = state.nextWire.slice(state.nextWireIndex - 2, state.nextWireIndex);
+      const dx = Math.abs(x2 - x1);
+      const dy = Math.abs(y2 - y1);
+      state.t = 0;
+      state.nextSegmentLen = Math.sqrt(dx * dx + dy * dy);
+
+      state.nextWireIndex++;
+    }
+
+    if (state.nextWireIndex > state.nextWire.length) {
+      state.wires.push(state.nextWire);
+      state.nextWire = null;
+    }
+  } else {
+    const wire = generateWire();
+    if (wire) {
+      state.nextWire = wire;
+      state.nextWireIndex = 2;
+
+      const [[x1, y1], [x2, y2]] = state.nextWire.slice(state.nextWireIndex - 2, state.nextWireIndex);
+      const dx = Math.abs(x2 - x1);
+      const dy = Math.abs(y2 - y1);
+      state.t = 0;
+      state.nextSegmentLen = Math.sqrt(dx * dx + dy * dy);
+    }
+  }
+}
+
+function getColors() {
+  if (document.body.classList.contains('dark-mode')) {
+    return {
+      BACKGROUND: '#282828',
+      CIRCUIT: '#38302e',
+    }
+  } else {
+    return {
+      BACKGROUND: '#eaeaea',
+      CIRCUIT: '#d4d4d4',
+    };
+  }
+}
+
+function render() {
+  const { BACKGROUND, CIRCUIT } = getColors();
+
+  g.clearRect(0, 0, WIDTH, HEIGHT);
+
+  g.strokeStyle = CIRCUIT;
+  g.lineWidth = 3;
+
+  state.wires.forEach(wire => {
+    const [[sx, sy], ...rest] = wire;
+
+    function renderDot(x, y) {
+      if (y === 0) {
+        return;
+      }
+
+      g.beginPath();
+      g.ellipse(x * TS, y * TS, TS / 5, TS / 5, 0, 0, Math.PI * 2);
+      g.stroke();
+    }
+
+    renderDot(sx, sy);
+
+    g.beginPath();
+    g.moveTo(sx * TS, sy * TS);
+    rest.forEach(([x, y]) => {
+      g.lineTo(x * TS, y * TS);
+    });
+    g.stroke();
+
+    const [lx, ly] = wire[wire.length - 1];
+
+    renderDot(lx, ly);
+
+    [wire[0], wire[wire.length - 1]].forEach(([x, y]) => {
+      if (y === 0) {
+        return;
+      }
+
+      g.fillStyle = BACKGROUND;
+      g.beginPath();
+      g.ellipse(x * TS, y * TS, TS / 5 - 1, TS / 5 - 1, 0, 0, Math.PI * 2);
+      g.fill();
+    });
+  });
+
+  if (state.nextWire) {
+    const wirePart = state.nextWire.slice(0, state.nextWireIndex);
+    const wire = [
+      ...wirePart.slice(0, wirePart.length - 1),
+      lerpPoint(
+        wirePart[wirePart.length - 2],
+        wirePart[wirePart.length - 1],
+        state.t
+      )
+    ];
+    const [[sx, sy], ...rest] = wire;
+
+    function renderDot(x, y) {
+      if (y === 0) {
+        return;
+      }
+
+      g.beginPath();
+      g.ellipse(x * TS, y * TS, TS / 5, TS / 5, 0, 0, Math.PI * 2);
+      g.stroke();
+    }
+
+    renderDot(sx, sy);
+
+    g.beginPath();
+    g.moveTo(sx * TS, sy * TS);
+    rest.forEach(([x, y]) => {
+      g.lineTo(x * TS, y * TS);
+    });
+    g.stroke();
+
+    const [lx, ly] = wire[wire.length - 1];
+
+    renderDot(lx, ly);
+
+    [wire[0], wire[wire.length - 1]].forEach(([x, y]) => {
+      if (y === 0) {
+        return;
+      }
+
+      g.fillStyle = BACKGROUND;
+      g.beginPath();
+      g.ellipse(x * TS, y * TS, TS / 5 - 1, TS / 5 - 1, 0, 0, Math.PI * 2);
+      g.fill();
+    });
+  }
+
+  requestAnimationFrame(render);
+}
+
+// g.translate(0.5, 0.5);
+
+window.addEventListener('DOMContentLoaded', () => {
+  // $canvas.classList.remove('hide');
+
+  render();
+
+  let i = 20;
+  while (i > 0) {
+    const wire = generateWire();
+
+    if (wire) {
+      state.wires.push(wire);
+      i--;
+    }
+  }
+
+  setInterval(() => {
+    update();
+  }, 1000 / 30);
+})

_content/public/images/logo-circuit-board.svg

@@ -0,0 +1,87 @@
+<svg width="1000" height="500" viewBox="0 0 1000 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="80" y="190" width="60" height="120" fill="#1E6733"/>
+<rect x="160" y="50" width="150" height="60" fill="#1E6733"/>
+<rect x="140" y="90" width="10" height="50" fill="#ECC333"/>
+<rect x="140" y="200" width="10" height="50" fill="#ECC333"/>
+<rect x="140" y="410" width="10" height="20" fill="#ECC333"/>
+<rect x="140" y="350" width="10" height="50" fill="#ECC333"/>
+<rect x="240" y="110" width="70" height="10" fill="#ECC333"/>
+<rect x="250" y="130" width="60" height="130" fill="#1E6733"/>
+<rect x="340" y="50" width="60" height="120" fill="#1E6733"/>
+<rect x="340" y="190" width="60" height="120" fill="#1E6733"/>
+<rect x="590" y="190" width="60" height="120" fill="#1E6733"/>
+<rect x="690" y="180" width="60" height="120" fill="#1E6733"/>
+<rect x="690" y="310" width="60" height="140" fill="#1E6733"/>
+<rect x="690" y="50" width="60" height="120" fill="#1E6733"/>
+<rect x="590" y="320" width="60" height="130" fill="#1E6733"/>
+<rect x="590" y="50" width="60" height="130" fill="#1E6733"/>
+<rect x="420" y="240" width="150" height="60" fill="#1E6733"/>
+<rect x="340" y="320" width="60" height="130" fill="#1E6733"/>
+<rect x="240" y="140" width="10" height="50" fill="#ECC333"/>
+<rect x="350" y="170" width="40" height="10" fill="#ECC333"/>
+<rect x="330" y="330" width="10" height="50" fill="#ECC333"/>
+<rect x="160" y="200" width="80" height="60" fill="#1E6733"/>
+<rect x="650" y="200" width="10" height="50" fill="#ECC333"/>
+<rect x="750" y="330" width="10" height="60" fill="#ECC333"/>
+<rect x="800" y="450" width="40" height="10" fill="#ECC333"/>
+<rect x="850" y="450" width="30" height="10" fill="#ECC333"/>
+<rect x="750" y="90" width="10" height="50" fill="#ECC333"/>
+<rect x="810" y="110" width="60" height="10" fill="#ECC333"/>
+<rect x="580" y="330" width="10" height="50" fill="#ECC333"/>
+<rect x="580" y="60" width="10" height="50" fill="#ECC333"/>
+<rect x="710" y="420" width="20" height="20" fill="#C4C4C4"/>
+<rect x="710" y="390" width="20" height="20" fill="#C4C4C4"/>
+<rect x="100" y="280" width="20" height="10" fill="#C4C4C4"/>
+<rect x="100" y="260" width="20" height="10" fill="#C4C4C4"/>
+<rect x="110" y="210" width="20" height="20" fill="#C4C4C4"/>
+<rect x="350" y="430" width="40" height="10" fill="#303030"/>
+<rect x="350" y="410" width="40" height="10" fill="#303030"/>
+<rect x="350" y="390" width="40" height="10" fill="#303030"/>
+<rect x="700" y="70" width="20" height="40" fill="#303030"/>
+<rect x="700" y="120" width="20" height="40" fill="#303030"/>
+<rect x="610" y="280" width="20" height="20" fill="#C4C4C4"/>
+<rect x="600" y="240" width="20" height="20" fill="#C4C4C4"/>
+<rect x="430" y="250" width="10" height="10" fill="#C4C4C4"/>
+<rect x="430" y="265" width="10" height="10" fill="#C4C4C4"/>
+<rect x="430" y="280" width="10" height="10" fill="#C4C4C4"/>
+<rect x="445" y="250" width="10" height="10" fill="#C4C4C4"/>
+<rect x="445" y="265" width="10" height="10" fill="#C4C4C4"/>
+<rect x="460" y="280" width="40" height="10" fill="#C4C4C4"/>
+<rect x="475" y="250" width="10" height="10" fill="#C4C4C4"/>
+<rect x="475" y="265" width="10" height="10" fill="#C4C4C4"/>
+<rect x="505" y="250" width="10" height="10" fill="#C4C4C4"/>
+<rect x="505" y="265" width="10" height="10" fill="#C4C4C4"/>
+<rect x="520" y="265" width="10" height="15" fill="#C4C4C4"/>
+<rect x="505" y="280" width="25" height="10" fill="#C4C4C4"/>
+<rect x="535" y="250" width="10" height="10" fill="#C4C4C4"/>
+<rect x="535" y="265" width="10" height="10" fill="#C4C4C4"/>
+<rect x="535" y="280" width="10" height="10" fill="#C4C4C4"/>
+<rect x="445" y="280" width="10" height="10" fill="#C4C4C4"/>
+<rect x="460" y="250" width="10" height="10" fill="#C4C4C4"/>
+<rect x="460" y="265" width="10" height="10" fill="#C4C4C4"/>
+<rect x="490" y="250" width="10" height="10" fill="#C4C4C4"/>
+<rect x="490" y="265" width="10" height="10" fill="#C4C4C4"/>
+<rect x="520" y="250" width="10" height="10" fill="#C4C4C4"/>
+<rect x="550" y="250" width="10" height="10" fill="#C4C4C4"/>
+<rect x="550" y="265" width="10" height="10" fill="#C4C4C4"/>
+<rect x="550" y="280" width="10" height="10" fill="#C4C4C4"/>
+<rect x="620" y="210" width="20" height="20" fill="#C4C4C4"/>
+<rect x="370" y="70" width="20" height="30" fill="#303030"/>
+<rect x="370" y="110" width="20" height="30" fill="#303030"/>
+<rect x="870" y="440" width="40" height="10" transform="rotate(-90 870 440)" fill="#303030"/>
+<rect x="890" y="440" width="40" height="10" transform="rotate(-90 890 440)" fill="#303030"/>
+<rect x="810" y="440" width="40" height="10" transform="rotate(-90 810 440)" fill="#303030"/>
+<rect x="790" y="440" width="40" height="10" transform="rotate(-90 790 440)" fill="#303030"/>
+<rect x="270" y="100" width="40" height="10" transform="rotate(-90 270 100)" fill="#303030"/>
+<rect x="290" y="100" width="40" height="10" transform="rotate(-90 290 100)" fill="#303030"/>
+<rect x="190" y="100" width="40" height="10" transform="rotate(-90 190 100)" fill="#303030"/>
+<rect x="170" y="100" width="40" height="10" transform="rotate(-90 170 100)" fill="#303030"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M140 60V170C134.477 170 130 174.477 130 180H90C90 174.477 85.5228 170 80 170V60C85.5228 60 90 55.5228 90 50H130C130 55.5228 134.477 60 140 60Z" fill="#1E6733"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M130 320H90C90 325.523 85.5229 330 80 330V440C85.5229 440 90 444.477 90 450H130C130 444.477 134.477 440 140 440V330C134.477 330 130 325.523 130 320Z" fill="#1E6733"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M770 60C775.523 60 780 55.5228 780 50H910C910 55.5228 914.477 60 920 60V100C914.477 100 910 104.477 910 110H780C780 104.477 775.523 100 770 100V60Z" fill="#1E6733"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M770 400C775.523 400 780 395.523 780 390H910C910 395.523 914.477 400 920 400V440C914.477 440 910 444.477 910 450H780C780 444.477 775.523 440 770 440V400Z" fill="#1E6733"/>
+<rect x="750" y="190" width="10" height="40" fill="#ECC333"/>
+<rect x="750" y="240" width="10" height="20" fill="#ECC333"/>
+<rect x="400" y="200" width="10" height="40" fill="#ECC333"/>
+<rect x="400" y="250" width="10" height="20" fill="#ECC333"/>
+</svg>

_content/public/js/profilo.min.js

@@ -0,0 +1 @@
+!function(a){"use strict";function o(a){return a&&"object"==typeof a&&"default"in a?a:{default:a}}var s=o(a);s.default.data("profilo",(()=>({init(){console.log("Profilo!")}}))),s.default.data("passwordForm",(()=>({password:"",passwordAgain:"",passwordSame:!0,onUpdate(){this.passwordSame=this.password===this.passwordAgain}})))}(Alpine);

_content/public/js/utenti.min.js

@@ -0,0 +1 @@
+!function(e,s){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e),r=t(s);const i={includeScore:!0,keys:["nome","cognome","tags",{name:"nomeCompleto",getFn:e=>`${e.nome} ${e.cognome}`}]},h={chronological:()=>0,name:(e,s)=>e.nome<s.nome?-1:1,surname:(e,s)=>e.cognome<s.cognome?-1:1};o.default.data("utenti",(()=>({searchField:"",sortMode:"chronological",fetchedUsers:[],sortedUserBuffer:[],fuse:new r.default([],i),searchResultsBuffer:[],searchResults:[],async init(){const e=await fetch("/api/utenti");this.fetchedUsers=await e.json(),new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting&&(console.log("Near the bottom of the page"),this.showMore())}))})).observe(this.$refs.spinner),this.updateSortMode(),this.updateSearch()},showMore(){const e=this.searchResults.length+15;this.searchResults=this.searchResultsBuffer.slice(0,e)},setResults(e){this.searchResultsBuffer=e.filter((e=>void 0===e.score||e.score<=.25)),this.searchResults=this.searchResultsBuffer.slice(0,15)},updateSortMode(){var e,s;this.sortedUserBuffer=(e=this.fetchedUsers,s=this.sortMode,[...e].sort(h[s])),this.fuse.setCollection(this.sortedUserBuffer),this.updateSearch()},updateSearch(){console.time("search"),0===this.searchField.trim().length?this.setResults(this.sortedUserBuffer.map((e=>({item:e})))):this.setResults(this.fuse.search(this.searchField)),console.timeEnd("search")}})))}(Alpine,Fuse);

_content/public/style.css

@@ -0,0 +1,945 @@
+/* TODO: Don't use CDN and serve as static files */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
+
+:root {
+    --bg: #eaeaea;
+    --fg: #333;
+
+    --bg-lighter: #f0f0f0;
+
+    --bg-dark: hsl(220, 5%, 93%);
+    --bg-darker: hsl(220, 5%, 90%);
+    --bg-darker-2: #d5d5d5;
+    --bg-darker-2-1: #c8c8c8;
+    --bg-darker-3: #c0c0c0;
+    --bg-darker-4: #b8b8b8;
+
+    --accent-1: #278542;
+    --accent-1-fg: #154d24;
+
+    --card-date: #666;
+    --card-content: #222;
+
+    --font-sf: 'Inter', sans-serif;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+
+    --shadow-1: 0 0 16px 0 #00000018;
+
+    --text-input-bg: #fff;
+    --text-input-readonly-bg: #e4e4e4;
+    --text-input-readonly-fg: #777;
+
+    --accent-2-lighter: #5cc969;
+    --accent-2: #4eaa59;
+    --accent-2-darker: #2e974c;
+    --accent-2-darkest: #002d0d;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+}
+
+html {
+    height: 100%;
+    width: 100%;
+}
+
+body {
+    background: var(--bg);
+    color: var(--fg);
+
+    font-family: var(--font-sf);
+    font-size: 17px;
+    font-weight: var(--font-weight-normal);
+
+    width: 100%;
+    min-height: 100%;
+
+    position: relative;
+}
+
+.main {
+    max-width: 70ch;
+    margin: 0 auto;
+    padding-bottom: 8rem;
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    justify-content: center;
+
+    gap: 3rem;
+}
+
+nav {
+    padding: 1rem 0;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    align-items: center;
+    justify-content: center;
+    font-weight: var(--font-weight-medium);
+
+    color: var(--accent-1-fg);
+}
+
+/* Tutti i link dentro la navbar sono speciali e non sembrano link */
+nav .nav-element {
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    align-items: center;
+    justify-content: center;
+
+    text-decoration: none;
+    color: inherit;
+
+    gap: 0.5rem;
+}
+
+nav a:hover {
+    color: var(--accent-1-fg);
+    text-decoration: none;
+}
+
+nav .nav-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem 0;
+
+    background: var(--bg-dark);
+    border-radius: 4px;
+    border: 1px solid var(--bg-darker-2);
+    box-shadow: var(--shadow-1);
+
+    transition: transform 150ms ease-in-out;
+}
+
+nav .nav-logo:hover {
+    transform: scale(1.05);
+}
+
+nav .nav-logo img {
+    width: 150px;
+    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
+}
+
+nav .nav-main {
+    display: flex;
+    /* grid-template-columns: repeat(5, 1fr) 1fr auto 1fr; */
+
+    background: var(--bg-dark);
+    border-radius: 4px;
+    border: 1px solid var(--bg-darker-2);
+    box-shadow: var(--shadow-1);
+
+    z-index: 1;
+}
+
+nav .nav-item.filler {
+    width: 6rem;
+}
+
+nav .nav-main .nav-element {
+    padding: 1rem 1.25rem;
+    cursor: pointer;
+}
+
+nav .nav-main .nav-button {
+    margin: 0 0.5rem;
+    /* padding: 0.5rem; */
+
+    aspect-ratio: 1;
+    width: 2rem;
+    height: 2rem;
+
+    /* background: var(--bg-darker-2); */
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid var(--bg-darker-2);
+    border-radius: 1rem;
+
+    cursor: pointer;
+}
+
+nav .nav-main .nav-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background: var(--bg-dark);
+
+    user-select: none;
+
+    z-index: 2;
+}
+
+nav .nav-main .nav-element:hover,
+nav .nav-main .nav-button:hover {
+    background: var(--bg-darker);
+}
+
+nav .nav-main .nav-item.dropdown {
+    position: relative;
+
+    z-index: 1;
+}
+
+nav .nav-main .nav-item.dropdown .nav-items .nav-item:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+nav .nav-main .nav-item.dropdown .name {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background: var(--bg-dark);
+
+    z-index: 3;
+}
+
+nav .nav-main .nav-item.dropdown .name:hover {
+    background: var(--bg-darker);
+}
+
+nav .nav-main .nav-item.dropdown .nav-items {
+    position: absolute;
+    top: 100%;
+    width: 100%;
+
+    display: none;
+
+    background: var(--bg-dark);
+    border-radius: 4px;
+    border: 1px solid var(--bg-darker-2);
+    box-shadow: var(--shadow-1);
+}
+/*
+nav .nav-main .nav-item.dropdown .nav-items::before {
+    position: absolute;
+    content: '';
+    top: -2px;
+    height: 2px;
+    left: 0;
+    right: 0;
+    width: 100%;
+
+    background: var(--bg-darker);
+} */
+
+nav .nav-main .nav-item.dropdown .name:hover + .nav-items,
+nav .nav-main .nav-item.dropdown .name + .nav-items:hover {
+    display: flex;
+    flex-direction: column;
+}
+
+/* .nav-main borders */
+.nav-main > .nav-item:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+.nav-main > .nav-item:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+footer {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    height: 3rem;
+
+    width: 80ch;
+
+    transform: translate(-50%, 0);
+
+    background: var(--bg-dark);
+    border-radius: 4px;
+    border: 1px solid var(--bg-darker-2);
+    border-bottom: none;
+    box-shadow: var(--shadow-1);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+/* Components */
+
+section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.card-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    gap: 1rem;
+
+    margin-top: 1rem;
+}
+
+.card {
+    background: var(--bg-dark);
+    border-radius: 4px;
+    border: 1px solid var(--bg-darker-2);
+    box-shadow: var(--shadow-1);
+
+    max-width: 60ch;
+
+    padding: 1rem;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.card .title {
+    font-size: 22px;
+    font-weight: var(--font-weight-bold);
+
+    padding-bottom: 0.5rem;
+}
+
+.card .date {
+    font-size: 15px;
+    color: var(--card-date);
+
+    padding-bottom: 0.5rem;
+}
+
+.card .description {
+    font-weight: var(--font-weight-light);
+    color: var(--card-content);
+}
+
+.tags {
+    display: flex;
+    flex-direction: row;
+    gap: 0 0.5rem;
+
+    padding-top: 0.5rem;
+}
+
+.tags .tag {
+    height: 1.5rem;
+    border-radius: calc(1.5rem / 2);
+    padding: 0 calc(1.5rem / 2);
+
+    background: var(--bg-darker-2);
+    color: var(--card-date);
+
+    font-size: 15px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Typography */
+
+h1,
+h2,
+h3,
+h4 {
+    margin: 0;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+
+    font-weight: var(--font-weight-light);
+}
+
+h1 {
+    font-size: 2rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+}
+
+h3 {
+    font-size: 1.35rem;
+}
+
+h4 {
+    font-size: 1.2rem;
+    font-weight: var(--font-weight-bold);
+}
+
+p,
+ul,
+ol,
+li {
+    margin: 0;
+    width: 70ch;
+    max-width: 100%;
+    line-height: 1.8;
+}
+
+p + p {
+    padding-top: 0.5rem;
+}
+
+ul,
+ol {
+    padding: 0 0 0 1.5rem;
+}
+
+hr {
+    width: 50ch;
+    height: 1px;
+    margin: 0;
+
+    border: none;
+    background-color: var(--bg-darker-2);
+}
+
+pre {
+    margin: 0.5rem 0;
+
+    background: var(--bg-lighter);
+    border: 1px solid #cbcbcb;
+    border-radius: 2px;
+    box-shadow: 0 2px 4px 0 #00000033;
+
+    font-size: 90%;
+
+    display: flex;
+    overflow-x: auto;
+}
+
+pre > code {
+    display: block;
+    margin: 0.25rem;
+}
+
+p.center {
+    text-align: center;
+}
+
+/* Controls */
+
+a:not(.button) {
+    color: var(--accent-1-fg);
+    font-weight: var(--font-weight-medium);
+    text-decoration: none;
+}
+
+a:not(.button):hover {
+    color: var(--accent-1);
+    text-decoration: underline;
+}
+
+a.button {
+    text-decoration: none;
+}
+
+/* Buttons */
+
+button,
+.button {
+    display: inline-block;
+
+    font-family: var(--font-sf);
+    font-weight: var(--font-weight-medium);
+    font-size: 17px;
+
+    /* gray variant #b3b3b3 */
+    border: 1px solid var(--bg-darker-3);
+    /* gray variant #bfbfbf */
+    background: var(--bg-darker-2);
+    /* gray variant #333333 */
+    color: var(--fg);
+
+    height: 2rem;
+
+    border-radius: 4px;
+
+    padding: 0 1rem;
+
+    transition: all 100ms ease-in-out;
+
+    box-shadow: 0 4px 8px 0 #00000022;
+
+    cursor: pointer;
+}
+
+button:hover,
+.button:hover {
+    background: var(--bg-darker-2-1);
+    box-shadow: 0 4px 8px 0 #00000033;
+}
+
+button.primary {
+    border: 1px solid var(--accent-2-darker);
+    background: var(--accent-2);
+    color: var(--accent-2-darkest);
+}
+
+button.primary:hover {
+    background: var(--accent-2-lighter);
+}
+
+button.icon {
+    padding: 0;
+    width: 2rem;
+}
+
+select {
+    font-family: var(--font-sf);
+    font-weight: var(--font-weight-medium);
+    font-size: 16px;
+
+    /* gray variant #b3b3b3 */
+    border: 1px solid var(--bg-darker-3);
+    /* gray variant #bfbfbf */
+    background: var(--bg-darker-2);
+    /* gray variant #333333 */
+    color: var(--fg);
+
+    height: 2rem;
+
+    border-radius: 4px;
+
+    padding: 0 0.25rem;
+
+    transition: all 100ms ease-in-out;
+
+    box-shadow: 0 4px 8px 0 #00000022;
+
+    cursor: pointer;
+}
+
+/* Text Fields */
+
+input[type='text'],
+input[type='password'] {
+    border: none;
+    background: none;
+
+    height: 2rem;
+    padding: 0 0.5rem;
+
+    font-size: 17px;
+
+    background: var(--text-input-bg);
+    color: var(--fg);
+
+    border-radius: 4px;
+    border: 1px solid var(--bg-darker-2);
+    box-shadow: 0 0 8px 0 #00000020;
+
+    font-family: var(--font-sf);
+    font-size: 17px;
+    font-weight: var(--font-weight-normal);
+}
+
+input[type='password'] {
+    font-family: caption;
+}
+
+input[type='text']:read-only,
+input[type='password']:read-only {
+    background: var(--text-input-readonly-bg);
+    color: var(--text-input-readonly-fg);
+    box-shadow: 0 0 8px 0 #00000010;
+}
+
+input[type='text'].error,
+input[type='password'].error {
+    background: #faa;
+    color: #311;
+}
+
+/* Compound Controls */
+
+.compound {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 4px;
+    box-shadow: 0 0 8px 0 #00000022;
+
+    border: 1px solid var(--bg-darker-3);
+    background: var(--bg-darker-2);
+    color: var(--fg);
+}
+
+.compound > .divider {
+    height: 2rem;
+    width: 1px;
+
+    background: var(--bg-darker-4);
+}
+
+.compound .icon {
+    width: 2.5rem;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.compound > select {
+    background: none;
+
+    margin-right: 0.25rem;
+}
+
+.compound > button,
+.compound > .button,
+.compound > input,
+.compound > select {
+    border: none;
+    box-shadow: none;
+}
+
+.compound > :not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.compound > :not(:last-child) {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+/* Forms */
+
+form .field {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+form .field-set {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-auto-rows: auto;
+
+    gap: 0.5rem 1rem;
+    padding: 1rem;
+}
+
+form .field-set .fill {
+    grid-column: 1 / span 2;
+}
+
+form .field-set label {
+    grid-column: 1 / 2;
+    align-self: center;
+    justify-self: end;
+
+    font-weight: var(--font-weight-medium);
+}
+
+form .field-set input {
+    grid-column: 2 / 3;
+}
+
+/* Pages */
+
+.page-home {
+    /* TODO: Sarebbe meglio se si riuscisse a capire come farlo senza */
+    overflow-x: hidden;
+}
+
+.page-home .nav-logo {
+    display: none;
+}
+
+.page-home .super {
+    position: absolute;
+    left: 50vw;
+    top: 50vh;
+
+    width: 90vw;
+
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    align-items: center;
+    justify-content: center;
+
+    gap: 2vmin;
+}
+
+.page-home canvas {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    right: 0;
+
+    pointer-events: none;
+    z-index: -1;
+
+    transition: opacity 1000ms ease-in-out;
+    opacity: 1;
+}
+
+.page-home canvas.hide {
+    opacity: 0;
+}
+
+.page-home .super .block.text {
+    max-width: 40ch;
+    font-size: 1.25rem;
+}
+
+.page-home .super .block.text h1 {
+    font-weight: var(--font-weight-medium);
+}
+
+.page-home .super .block.text p {
+    font-weight: var(--font-weight-light);
+}
+
+.page-home .super .block.image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.page-home .super .block.image img {
+    max-width: 80ch;
+    max-height: 50vh;
+    filter: drop-shadow(0 0 64px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
+}
+
+.page-home .main {
+    padding-top: calc(100vh - 6rem);
+}
+
+.page-utenti .user-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.page-utenti .user-item {
+    flex-direction: row;
+    width: 100%;
+}
+
+.page-utenti .user-item .icon {
+    width: 1.75rem;
+    display: grid;
+    place-content: center;
+}
+
+.page-utenti .spinner {
+    display: flex;
+
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    height: 5rem;
+
+    color: var(--fg);
+
+    animation: rotate 1s linear infinite;
+}
+
+.page-storia .history-container {
+    --bar-size: 6px;
+
+    display: flex;
+    flex-direction: row;
+
+    margin: 5rem 0;
+
+    position: relative;
+}
+
+.page-storia .history-container .timeline-bar {
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: -2rem;
+    width: var(--bar-size);
+
+    background: var(--bg-darker-4);
+}
+
+.page-storia .history-container .timeline-bar::before {
+    content: '';
+    position: absolute;
+
+    top: -3rem;
+    bottom: -3rem;
+    left: 0;
+    border-left: var(--bar-size) dashed var(--bg-darker-4);
+}
+
+.page-storia .history-container .events {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.page-storia .history-container .events .event::before {
+    --size: 1rem;
+
+    content: '';
+    position: absolute;
+    left: calc(-2rem + var(--bar-size) / 2 - var(--size) / 2);
+    transform: translate(0, 1rem);
+
+    width: var(--size);
+    height: var(--size);
+
+    border-radius: 100%;
+
+    background: var(--bg-darker-4);
+}
+
+.page-storia .history-container .events .event .title {
+    font-size: 22px;
+
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.page-storia .history-container .events .event .date {
+    color: var(--card-date);
+    font-size: 18px;
+}
+
+.page-storia .history-container .events .spacer {
+    height: calc(var(--size) * 1rem);
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.search {
+    margin: 2rem 0;
+    display: flex;
+    flex-direction: row;
+
+    gap: 1rem;
+}
+
+.search input[type='text'] {
+    width: 50ch;
+    height: 2.5rem;
+}
+
+.search button {
+    width: 2.5rem;
+    height: 2.5rem;
+}
+
+/* Rendered Markdown */
+
+.news-content p {
+    margin: 0.5rem 0;
+}
+
+.news-content {
+    display: block;
+}
+
+.news-content h1 {
+    text-align: center;
+}
+
+.news-content img {
+    display: block;
+    margin: 1rem auto;
+
+    background: var(--bg-dark);
+    border-radius: 4px;
+    border: 1px solid var(--bg-darker-2);
+    box-shadow: 0 2px 8px 0 #00000033;
+}
+
+.news-content .date {
+    font-size: 15px;
+    color: var(--card-date);
+
+    display: flex;
+    justify-content: center;
+}
+
+.news-content .tags,
+.news-content .date {
+    justify-content: center;
+}
+
+.news-content table {
+    margin: 1rem auto;
+}
+
+/* Math */
+
+.katex-display {
+    margin: 1rem 0;
+    font-size: 105%;
+}
+
+/* Tables */
+
+table {
+    border-collapse: collapse;
+}
+
+table td,
+table th {
+    padding: 0.5rem;
+}
+
+table td:not(:first-child),
+table th:not(:first-child) {
+    border-left: 1px solid var(--bg-darker-3);
+}
+
+table td {
+    border-top: 1px solid var(--bg-darker-3);
+}
+
+table tbody tr:hover {
+    background: var(--bg-darker);
+}

_content/public/theme-dark.css

@@ -0,0 +1,92 @@
+body.dark-mode {
+    --bg: #282828;
+    --fg: #a6cc92;
+    /* --fg: #6eac4d; */
+    /* Magari questo: */
+    /* --fg: #a3b09c; */
+
+    --bg-dark: hsl(10, 10%, 20%);
+    --bg-darker: hsl(10, 10%, 17%);
+    --bg-darker-2: #1d2021;
+    --bg-darker-3: #101111;
+
+    --accent-1: #154d24;
+    --accent-1-fg: #278542;
+
+    --card-date: #928374;
+    --card-content: #d4be98;
+
+    --font-sf: 'Inter', sans-serif;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+
+    --shadow-1: 0 0 16px 0 #16182077;
+
+    --text-input-bg: var(--bg-darker);
+    --text-input-readonly-bg: hsl(10, 10%, 22%);
+    --text-input-readonly-fg: hsl(10, 10%, 40%);
+
+    --bg-darker-2-1: #c8c8c8;
+    --accent-2-lighter: #5cc969;
+    --accent-2: #4eaa59;
+    --accent-2-darker: #2e974c;
+    --accent-2-darkest: #002d0d;
+}
+
+.dark-mode button {
+    border: 1px solid var(--bg-darker-2);
+    background: var(--bg-darker);
+    color: #afafaf;
+}
+
+.dark-mode button:hover {
+    background: var(--bg-dark);
+}
+
+.dark-mode button.primary {
+    border: 1px solid #113a1c;
+    background: #1e6732;
+    color: #b7e3c3;
+}
+
+.dark-mode button.primary:hover {
+    background: #23773a;
+}
+
+.dark-mode nav .nav-logo img {
+    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
+}
+
+.dark-mode input[type] {
+    background: #4b4342;
+}
+
+.dark-mode input[type='text']:read-only,
+.dark-mode input[type='password']:read-only {
+    background: var(--text-input-readonly-bg);
+    color: var(--text-input-readonly-fg);
+    box-shadow: 0 0 8px 0 #00000010;
+}
+
+.dark-mode input[type='text'].error,
+.dark-mode input[type='password'].error {
+    background: #633;
+    color: #faa;
+}
+
+.dark-mode pre {
+    background: var(--bg-darker);
+    border: 1px solid var(--bg-darker-2);
+}
+
+/* Trick molto molto malvagio per non dover rendere il colorscheme dei blocchi di codice dinamici rispetto alla dark mode */
+.dark-mode pre > code > span {
+    filter: invert(1);
+}
+
+.dark-mode table td,
+.dark-mode table th {
+    border-color: var(--fg);
+}