content/code.html

@@ -2,29 +2,24 @@
 <!-- description: Alexander 'PapaTutuWawa' 's code repositories. -->
 <!-- render: yes -->
 
-<div class="flex flex-col pt-8">
+<div class="project-row" />
-  <p class="prose text-white">
-    I keep my code mostly on my private Gitea instance <a class="text-indigo-400"
-      href="https://{{ gitea_url }}/{{ gitea_username }}">here</a>.
-    For purposes of allowing other people to also contribute
-    I try to mirror my code on GitHub and codeberg.
-  </p>
 
-  <div class="pt-8 w-full">
+<p>
-    <table class="text-white pt-8 w-full">
+  I keep my code mostly on my private Gitea instance <a href="https://{{ gitea_url }}/{{ gitea_username }}">here</a>. For purposes of allowing other people to also contribute
+  I try to mirror my code on GitHub and codeberg.
+</p>
+
+<table id="social-links">
   <tr>
     <td>GitHub</td>
-        <td><a class="text-indigo-400" href="https://github.com/{{ github_username }}">{{ github_username }}</a></td>
+    <td><a href="https://github.com/{{ github_username }}">{{ github_username }}</a></td>
   </tr>
   <tr>
     <td>Codeberg</td>
-        <td><a class="text-indigo-400" href="https://codeberg.org/{{ codeberg_username }}">{{ codeberg_username }}</a>
+    <td><a href="https://codeberg.org/{{ codeberg_username }}">{{ codeberg_username }}</a></td>
-        </td>
   </tr>
   <tr>
     <td>Gitea</td>
-        <td><a class="text-indigo-400" href="https://{{ gitea_url }}/{{ gitea_username }}">{{ gitea_username }}</a></td>
+    <td><a href="https://{{ gitea_url }}/{{ gitea_username }}">{{ gitea_username }}</a></td>
   </tr>
-    </table>
+</table>
-  </div>
-</div>

content/contact.html

@@ -1,43 +1,38 @@
 <!-- title: Contact | polynom.me -->
 <!-- description: Contact details for getting in touch with Alexander 'PapaTutuWawa'. -->
 <!-- render: yes -->
-<div class="flex flex-col pt-8">
+<div class="project-row"></div>
-  <p class="prose text-white">
+
+<p>
   If you have any questions about my projects or just want to talk, feel
   free to reach out to me.
-  </p>
+</p>
 
-  <div class="w-full pt-8">
+<table id="social-links">
-    <table class="text-white w-full">
   <tr>
     <td>Fediverse</td>
-        <td><a class="text-indigo-400" href="https://{{ fediverse_instance}}/{{ fediverse_username }}">@{{
+    <td><a href="https://{{ fediverse_instance}}/{{ fediverse_username }}">@{{ fediverse_username }}@{{ fediverse_instance }}</a></td>
-            fediverse_username }}@{{
-            fediverse_instance }}</a></td>
   </tr>
   <tr>
-        <td>E-Mail</td>
+    <td class="table-no-padding-bottom">E-Mail</td>
-        <td>{{ email_user }} [a with a circle] {{ email_domain }}</td>
+    <td class="table-no-padding-bottom">{{ email_user }} [a with a circle] {{ email_domain }}</td>
   </tr>
   <tr>
-        <td />
+    <td class="table-no-padding-top" />
-        <td>
+    <td class="table-no-padding-top">
-          Please use my <a class="text-indigo-400" href="https://{{ gpg_key_url }}">GPG public key</a>
+      Please use my <a href="https://{{ gpg_key_url }}">GPG public key</a>
     </td>
   </tr>
   <tr>
     <td>GitHub</td>
-        <td><a class="text-indigo-400" href="https://github.com/{{ github_username }}">{{ github_username }}</a></td>
+    <td><a href="https://github.com/{{ github_username }}">{{ github_username }}</a></td>
   </tr>
   <tr>
     <td>Codeberg</td>
-        <td><a class="text-indigo-400" href="https://codeberg.org/{{ codeberg_username }}">{{ codeberg_username }}</a>
+    <td><a href="https://codeberg.org/{{ codeberg_username }}">{{ codeberg_username }}</a></td>
-        </td>
   </tr>
   <tr>
     <td>Gitea</td>
-        <td><a class="text-indigo-400" href="https://{{ gitea_url }}/{{ gitea_username }}">{{ gitea_username }}</a></td>
+    <td><a href="https://{{ gitea_url }}/{{ gitea_username }}">{{ gitea_username }}</a></td>
   </tr>
-    </table>
+</table>
-  </div>
-</div>

content/index.html

@@ -1,18 +1,16 @@
 <!-- title: Home | polynom.me -->
 <!-- description: The personal website of Alexander 'PapaTutuWawa'. -->
 <!-- render: yes -->
-<div class="flex flex-col w-full sm:w-4/5">
+<div class="project-row"></div>
-  <p class="text-white prose py-8 self-center">
+<p class="quote">
   Hello! My online pseudonym is <i>PapaTutuWawa</i> and I am
   just some random person on the Internet who is passionate about
   topics like XMPP, federated Internet services and privacy. Linux system
   administration, Linux tinkering and programming are my favourite things to do.
-  </p>
+</p>
 
-  <h1 class="prose text-2xl text-indigo-400 self-start">Projects</h1>
+<div class="project-row"></div>
-  <p class="prose text-white text-left self-start">This is a small selection of my projects. More are available <a
+<h1>Projects</h1>
-      class="text-indigo-400" href="code.html">here.</a></p>
+<p>This is a small selection of my projects. More are available <a href="code.html">here.</a></p>
 
 {{ for_each projects layout/templates/project.html }}
-
-</div>

flake.lock

@@ -36,16 +36,16 @@
     },
     "nixpkgs_2": {
       "locked": {
-        "lastModified": 1689449371,
+        "lastModified": 1638239011,
-        "narHash": "sha256-sK3Oi8uEFrFPL83wKPV6w0+96NrmwqIpw9YFffMifVg=",
+        "narHash": "sha256-AjhmbT4UBlJWqxY0ea8a6GU2C2HdKUREkG43oRr3TZg=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "29bcead8405cfe4c00085843eb372cc43837bb9d",
+        "rev": "a7ecde854aee5c4c7cd6177f54a99d2c1ff28a31",
         "type": "github"
       },
       "original": {
         "owner": "NixOS",
-        "ref": "nixpkgs-unstable",
+        "ref": "21.11",
         "repo": "nixpkgs",
         "type": "github"
       }

flake.nix

@@ -2,7 +2,7 @@
   description = "The website hosted at https://polynom.me";
 
   inputs = {
-    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+    nixpkgs.url = "github:NixOS/nixpkgs/21.11";
     assets.url = "git+https://git.polynom.me/polynom.me/shared-assets.git";
   };
 
@@ -16,17 +16,9 @@
   in {
     packages = forAllSystems (system: let
       pkgs = import nixpkgs { inherit system; };
-
-      tailwindWithTypography = pkgs.nodePackages.tailwindcss.overrideAttrs (old: {
-        plugins = [
-          pkgs.nodePackages."@tailwindcss/typography"
-        ];
-      });
     in {
       default = pkgs.callPackage ./pkgs/website.nix {
         shared-assets = assets.packages.${system}.default;
-
-        inherit tailwindWithTypography;
       };
     });
 

input.css

@@ -1,7 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-html {
-    background-color: #212121;
-}

layout/page.html

@@ -1,38 +1,53 @@
-<!doctype html>
+<!DOCTYPE html>
-<html>
+<html lang="en">
-
+  <head>
-<head>
     <title>{{ title }}</title>
 
     <meta property="og:title" content="{{ title }}" />
     <meta property="og:description" content="{{ description }}" />
-
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport"
-    <link href="/assets/css/index.css" rel="stylesheet" />
+	  content="width=device-width, initial-scale=1.0, maximum-scale=1" />
-</head>
 
-<body class="min-h-screen h-full flex flex-col p-8 h-full">
+    <link rel="stylesheet" href="assets/css/index.css" />
-    <div class="flex flex-col items-center">
+    <link rel="stylesheet" href="{{ page_assets }}/css/main.css" />
-        <!-- Allow the header to be independently sized from the content -->
-        <div>
-            <div class="flex flex-row">
-                <img class="w-32 md:w-36 lg:w-48 h-32 md:h-36 lg:h-48 rounded-lg" src="https://cdn.polynom.me/img/avatar.jpg" />
  
-                <div class="flex flex-col justify-center px-8">
+    <!-- Mastodon -->
-                    <a href="/"><h1 class="text-xl lg:text-4xl text-indigo-400">PapaTutuWawa</h1></a>
+    <link rel="me" href="https://{{ mastodon_instance_url }}/{{ mastodon_handle }}" />
+  </head>
+  <body>
+    <div class="horizontal-center">
+      <div class="vertical header">
+	<div id="header" class="horizontal">
+	  <img class="avatar" src="{{ page_assets }}/img/avatar.jpg" alt="" />
 
-                    <div class="flex flex-row justify-between">
+	  <div class="vertical-center">
-                        <a class="text-indigo-400" href="https://blog.polynom.me">Blog</a>
+	    <span class="name-title">Alexander "PapaTutuWawa"</span>
-                        <a class="text-indigo-400" href="/code.html">Code</a>
+
-                        <a class="text-indigo-400" href="/contact.html">Contact</a>
+	    <div id="header-links">
-                    </div>
+	      <ul>
+		<li><a href="index.html">Home</a></li>
+		<li><a href="https://{{ blog_url }}">Blog</a></li>
+		<li><a href="code.html">Code</a></li>
+		<li><a href="contact.html">Contact</a></li>
+	      </ul>
 	    </div>
 	  </div>
 	</div>
 
 	{{ content }}
-    </div>
-</body>
 
+	<br />
+
+	<div class="horizontal-center footer">
+	  <span>
+	    Created by <i>PapaTutuWawa</i> with &lt;3 using
+	    <a href="https://github.com/google/roboto">Roboto</a>,
+	    <a href="https://github.com/RedHatOfficial/Overpass">Overpass</a> and
+	    <a href="https://github.com/sunainapai/makesite">makesite</a>
+	  </span>
+	</div>
+      </div>
+    </div>
+  </body>
 </html>

layout/templates/no_screenshot.html

@@ -1,7 +1,9 @@
-<div class="flex justify-center md:w-48 md:h-48 w-24 h-24 rounded-lg clickable bg-indigo-950">
+<div class="no-screenshot clickable">
-  <a class="prose text-white text-5xl" href="https://{{ item.source_url }}">
+  <a href="https://{{ item.source_url }}">
-    <div class="md:w-48 md:h-48 w-24 h-24 flex flex-col justify-center">
+    <div class="vertical-center">
-      <span class="text-center">#</span>
+      <div class="horizontal-center">
+	<span class="no-screenshot-pound">#</span>
+      </div>
     </div>
   </a>
 </div>

layout/templates/project.html

@@ -1,14 +1,12 @@
-<div class="flex flex-row self-start pt-8">
+<div class="horizontal project-row">
   {{ template_if_empty item.screenshot layout/templates/no_screenshot.html layout/templates/screenshot.html }}
-  <div class="flex flex-col pl-8">
+  <div class="vertical">
-    <h2 class="prose text-indigo-400 text-2xl">{{ item.title }}</h2>
+    <h2>{{ item.title }}</h2>
-    <p class="prose text-white text-justify">{{ item.description }}</p>
+    <p>{{ item.description }}</p>
 
-    <div class="pt-4">
     <ul>
       {{ template_if_empty item.website layout/templates/empty.html layout/templates/project_website.html }}
-        <li><a class="prose text-indigo-400" href="https://{{ item.source_url }}">Code</a></li>
+      <li><a href="https://{{ item.source_url }}">Code</a></li>
     </ul>
   </div>
-  </div>
 </div>

layout/templates/project_website.html

@@ -1 +1 @@
-<li><a class="text-indigo-400" href="https://{{ item.website }}">Website</a></li>
+<li><a href="https://{{ item.website }}">Website</a></li>

layout/templates/screenshot.html

@@ -1,5 +1,5 @@
 <div>
   <a href="https://{{ item.source_url }}" target="_blank">
-    <img class="w-24 md:w-48 max-w-none rounded-lg clickable" src="{{ item.screenshot }}" alt="Screenshot of {{ item.title }}" />
+    <img class="screenshot clickable" src="{{ item.screenshot }}" alt="Screenshot of {{ item.title }}" />
   </a>
 </div>

pkgs/website.nix

@@ -2,29 +2,23 @@
   lib, stdenv
 , python3
 , shared-assets
-, tailwindWithTypography
+}:
-}: let
+
-  pythonEnv = python3.withPackages (ps: with ps; [
+stdenv.mkDerivation {
-    markdown pygments
-  ]);
-in stdenv.mkDerivation {
   pname = "website";
-  version = "20230716";
+  version = "202205120-01";
 
   src = ../.;
 
   buildInputs = [ shared-assets python3 ];
 
   buildPhase = ''
-    ${pythonEnv}/bin/python ${shared-assets}/bin/makesite.py \
+    ${python3}/bin/python ${shared-assets}/bin/makesite.py \
       -v page_assets=https://cdn.polynom.me \
       --assets ./assets \
       --copy-assets \
       --include robots.txt \
       -p params.json
-
-    # Build Tailwind CSS data
-    ${tailwindWithTypography}/bin/tailwindcss --input ./input.css --output _site/assets/css/index.css
   '';
   
   installPhase = ''

tailwind.config.js

@@ -1,12 +0,0 @@
-module.exports = {
-    content: [
-        "./content/*.html",
-        "./layout/*.html",
-        "./layout/templates/*.html",
-    ],
-    theme: {
-    },
-    plugins: [
-        require('@tailwindcss/typography'),
-    ],
-}