From ba567e0d65defba9dd0e20e4814b970117db9feb Mon Sep 17 00:00:00 2001 From: "Alexander \"PapaTutuWawa" Date: Sun, 16 Jul 2023 22:51:58 +0200 Subject: [PATCH] feat: Make my blog much prettier --- assets/css/blog.css | 103 ---------------------------- assets/css/{syntax.css => code.css} | 45 ++++++------ content/about.html | 41 ----------- flake.lock | 8 +-- flake.nix | 10 ++- input.css | 20 ++++++ layout/item.html | 21 +++--- layout/list.html | 9 ++- layout/page.html | 88 ++++++++++-------------- layout/post.html | 36 ++++------ params.json | 3 +- pkgs/blog.nix | 14 ++-- tailwind.config.js | 10 +++ 13 files changed, 146 insertions(+), 262 deletions(-) delete mode 100644 assets/css/blog.css rename assets/css/{syntax.css => code.css} (70%) delete mode 100644 content/about.html create mode 100644 input.css create mode 100644 tailwind.config.js diff --git a/assets/css/blog.css b/assets/css/blog.css deleted file mode 100644 index c151517..0000000 --- a/assets/css/blog.css +++ /dev/null @@ -1,103 +0,0 @@ -* { - box-sizing: border-box; -} - -/* Looks bad. And it is! Workaround for having no control over - * how the markdown python module renders the post. - */ -.post > article > p > img { - /* Prevent images in blog posts from getting too big */ - max-width: 800px; -} - -.profile-picture { - max-width: 200px; -} - -h1, h2, h3, h4 { - color: #9b59b6; -} - -.post-list { - padding: 10px; -} - -.post-list-item { - display: block; - max-width: 800px; -} - -.post-list-item-title { - color: #3498db; -} - -.post { - display: block; - width: 100%; - - padding: 10px; - - font-size: 21px; -} - -.text { - font-size: 21px; -} - -.text-content { - max-width: 1000px; -} - -.stretch-horizontally { - width: 100%; -} - -@media only screen and (max-width: 768px) { - .page-title { - /* The page header title otherwise overflows the page on small screens */ - font-size: 8vw; - } - - .text-content { - /* Otherwise the page content overflows the page */ - max-width: 100%; - } - - .text { - /* A smaller font looks better on smaller devices */ - font-size: 19px; - } - - .post { - /* A smaller font looks better on smaller devices */ - font-size: 19px; - - /* Otherwise the entire page overflows for some reason */ - width: 100%; - } - - p > img { - /* This should match all images used inside blog posts */ - width: 100%; - } -} - -code { - display: inline-block; - padding: 0 3px; - border-radius: 3px; - - background-color: black; - line-height: 1.5; -} - -pre > code { - background-color: black; - line-height: 1.5; - border-radius: 3px; - - padding: 10px; - - width: 100%; - overflow-x: auto; -} diff --git a/assets/css/syntax.css b/assets/css/code.css similarity index 70% rename from assets/css/syntax.css rename to assets/css/code.css index 824bb34..6afecdc 100644 --- a/assets/css/syntax.css +++ b/assets/css/code.css @@ -1,26 +1,25 @@ -/* Generated by python pygmentize, modified by me*/ pre { line-height: 125%; } -td.linenos pre { color: #000000; background-color: #f0f0f0; padding-left: 5px; padding-right: 5px; } -span.linenos { color: #000000; background-color: #f0f0f0; padding-left: 5px; padding-right: 5px; } -td.linenos pre.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } +td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; } +span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; } +td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; } .codehilite .hll { background-color: #ffffcc } -.codehilite .c { color: #408080; font-style: italic } /* Comment */ +.codehilite .c { color: #3D7B7B; font-style: italic } /* Comment */ .codehilite .err { border: 1px solid #FF0000 } /* Error */ .codehilite .k { color: #008000; font-weight: bold } /* Keyword */ .codehilite .o { color: #666666 } /* Operator */ -.codehilite .ch { color: #408080; font-style: italic } /* Comment.Hashbang */ -.codehilite .cm { color: #408080; font-style: italic } /* Comment.Multiline */ -.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */ -.codehilite .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */ -.codehilite .c1 { color: #408080; font-style: italic } /* Comment.Single */ -.codehilite .cs { color: #408080; font-style: italic } /* Comment.Special */ +.codehilite .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */ +.codehilite .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */ +.codehilite .cp { color: #9C6500 } /* Comment.Preproc */ +.codehilite .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */ +.codehilite .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */ +.codehilite .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */ .codehilite .gd { color: #A00000 } /* Generic.Deleted */ .codehilite .ge { font-style: italic } /* Generic.Emph */ -.codehilite .gr { color: #FF0000 } /* Generic.Error */ +.codehilite .gr { color: #E40000 } /* Generic.Error */ .codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */ -.codehilite .gi { color: #00A000 } /* Generic.Inserted */ -.codehilite .go { color: #888888 } /* Generic.Output */ +.codehilite .gi { color: #008400 } /* Generic.Inserted */ +.codehilite .go { color: #717171 } /* Generic.Output */ .codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */ .codehilite .gs { font-weight: bold } /* Generic.Strong */ .codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ @@ -33,18 +32,18 @@ span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: .codehilite .kt { color: #B00040 } /* Keyword.Type */ .codehilite .m { color: #666666 } /* Literal.Number */ .codehilite .s { color: #BA2121 } /* Literal.String */ -.codehilite .na { color: #7D9029 } /* Name.Attribute */ +.codehilite .na { color: #687822 } /* Name.Attribute */ .codehilite .nb { color: #008000 } /* Name.Builtin */ .codehilite .nc { color: #0000FF; font-weight: bold } /* Name.Class */ .codehilite .no { color: #880000 } /* Name.Constant */ .codehilite .nd { color: #AA22FF } /* Name.Decorator */ -.codehilite .ni { color: #999999; font-weight: bold } /* Name.Entity */ -.codehilite .ne { color: #D2413A; font-weight: bold } /* Name.Exception */ +.codehilite .ni { color: #717171; font-weight: bold } /* Name.Entity */ +.codehilite .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */ .codehilite .nf { color: #0000FF } /* Name.Function */ -.codehilite .nl { color: #A0A000 } /* Name.Label */ +.codehilite .nl { color: #767600 } /* Name.Label */ .codehilite .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */ .codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */ -.codehilite .nv { color: #7473CE } /* Name.Variable */ +.codehilite .nv { color: #19177C } /* Name.Variable */ .codehilite .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */ .codehilite .w { color: #bbbbbb } /* Text.Whitespace */ .codehilite .mb { color: #666666 } /* Literal.Number.Bin */ @@ -58,11 +57,11 @@ span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: .codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */ .codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */ .codehilite .s2 { color: #BA2121 } /* Literal.String.Double */ -.codehilite .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */ +.codehilite .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */ .codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */ -.codehilite .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */ +.codehilite .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */ .codehilite .sx { color: #008000 } /* Literal.String.Other */ -.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */ +.codehilite .sr { color: #A45A77 } /* Literal.String.Regex */ .codehilite .s1 { color: #BA2121 } /* Literal.String.Single */ .codehilite .ss { color: #19177C } /* Literal.String.Symbol */ .codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */ @@ -71,4 +70,4 @@ span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: .codehilite .vg { color: #19177C } /* Name.Variable.Global */ .codehilite .vi { color: #19177C } /* Name.Variable.Instance */ .codehilite .vm { color: #19177C } /* Name.Variable.Magic */ -.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */ +.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/content/about.html b/content/about.html deleted file mode 100644 index 52f633a..0000000 --- a/content/about.html +++ /dev/null @@ -1,41 +0,0 @@ - - - -
-
-
-

About "PapaTutuWawa"

- -

- Profile Picture -

- -
-

- Student, Anime expert, Vocaloid listener, Docker and Linux fan - and hobby SysAdmin. -

-
- - - -

Contact

-
    -
  • EMail: {{ email_user }} ["a" with a weird circle] {{ email_domain }} (GPG)
    • -
- -

About This Page

-
    -
  • Source
    • -
  • Last updated {{ build_time }}
    • -
-
-
-
diff --git a/flake.lock b/flake.lock index 07cc22b..235e3fb 100644 --- a/flake.lock +++ b/flake.lock @@ -36,16 +36,16 @@ }, "nixpkgs_2": { "locked": { - "lastModified": 1638239011, - "narHash": "sha256-AjhmbT4UBlJWqxY0ea8a6GU2C2HdKUREkG43oRr3TZg=", + "lastModified": 1689449371, + "narHash": "sha256-sK3Oi8uEFrFPL83wKPV6w0+96NrmwqIpw9YFffMifVg=", "owner": "NixOS", "repo": "nixpkgs", - "rev": "a7ecde854aee5c4c7cd6177f54a99d2c1ff28a31", + "rev": "29bcead8405cfe4c00085843eb372cc43837bb9d", "type": "github" }, "original": { "owner": "NixOS", - "ref": "21.11", + "ref": "nixpkgs-unstable", "repo": "nixpkgs", "type": "github" } diff --git a/flake.nix b/flake.nix index f8b55ca..08ef8cb 100644 --- a/flake.nix +++ b/flake.nix @@ -2,7 +2,7 @@ description = "The blog hosted at https://blog.polynom.me"; inputs = { - nixpkgs.url = "github:NixOS/nixpkgs/21.11"; + nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable"; assets.url = "git+https://git.polynom.me/polynom.me/shared-assets.git"; }; @@ -16,9 +16,17 @@ 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/blog.nix { shared-assets = assets.packages.${system}.default; + + inherit tailwindWithTypography; }; }); diff --git a/input.css b/input.css new file mode 100644 index 0000000..9b4152a --- /dev/null +++ b/input.css @@ -0,0 +1,20 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +html { + background-color: #212121; +} + +@layer base { + article > p > a, h1, h2, h3, h4, h5, h6 { + @apply text-indigo-400 !important; + } + article > p > strong, code { + @apply text-white !important; + } + + article > h1, h2, h3, h4, h5, h6 { + @apply text-indigo-400 !important; + } +} \ No newline at end of file diff --git a/layout/item.html b/layout/item.html index 2d97804..751bf07 100644 --- a/layout/item.html +++ b/layout/item.html @@ -1,11 +1,14 @@ -
-
-

{{ title }}

+ +
+ +

{{ title }}

+ -

> {{ date }}

+

+ Posted on {{ date }} +

-
-

{{ summary }}...

-
-
-
+

+ {{ summary }}... +

+
\ No newline at end of file diff --git a/layout/list.html b/layout/list.html index 365d604..4473bc4 100644 --- a/layout/list.html +++ b/layout/list.html @@ -1,5 +1,4 @@ -
-
- {{ content }} -
-
+ +
+ {{ content }} +
\ No newline at end of file diff --git a/layout/page.html b/layout/page.html index df20e1a..916020f 100644 --- a/layout/page.html +++ b/layout/page.html @@ -1,61 +1,49 @@ - - - - {{ title }} - - - + + - - - - - - {{ mathjax_include }} + + {{ title }} + + + + + + + + + + + {{ mathjax_include }} + title="PapaTutuWawa's Blog" + href="https://{{ blog_url }}/atom.xml" /> - - - - -
-
- + -
- - Created by PapaTutuWawa with <3 using - Roboto, - Overpass and - makesitea - -
-
-
- - + \ No newline at end of file diff --git a/layout/post.html b/layout/post.html index 26776af..7329f23 100644 --- a/layout/post.html +++ b/layout/post.html @@ -1,24 +1,18 @@ -
-
-
-

{{ title }}

+ +
+

{{ title }}

-

// Posted {{ date }}

+

Posted on {{ date }}

- - - {{ mathjax_warning }} +
+ {{ content }} +
- {{ content }} - -
- - If you have any questions or comments, then feel free to send me an email - (Preferably with GPG encryption) to - {{ email_user }} [weird "a" with a circle] {{ email_domain }}. -
-
-
+ + + If you have any questions or comments, then feel free to send me an email (Preferably with GPG encryption) to + {{ email_user }} [at] {{ email_domain }} or + reach out to me on the Fediverse at {{ fediverse_handle }}. + + \ No newline at end of file diff --git a/params.json b/params.json index 7810435..57801ae 100644 --- a/params.json +++ b/params.json @@ -4,7 +4,8 @@ "blog_description": "My personal blog. Mainly tech stuff.", "git_url": "git.polynom.me", "blog_url": "blog.polynom.me", - "mastodon_url": "fosstodon.org/@polynomdivision", + "fediverse_url": "social.polynom.me/PapaTutuWawa", + "fediverse_handle": "@PapaTutuWawa@social.polynom.me", "email_gpg_url": "pki.polynom.me/pubkeys/papatutuwawa.pub", "email_user": "papatutuwawa", "email_domain": "polynom.me", diff --git a/pkgs/blog.nix b/pkgs/blog.nix index d421805..0b5a219 100644 --- a/pkgs/blog.nix +++ b/pkgs/blog.nix @@ -1,9 +1,12 @@ { lib, stdenv , gnumake, imagemagick -, shared-assets -}: -stdenv.mkDerivation { +, python3 +, shared-assets # For makesite.py +, tailwindWithTypography +}: let + pythonEnv = python3.withPackages (ps: with ps; [markdown pygments]); +in stdenv.mkDerivation { pname = "blog"; version = "20231507"; @@ -12,12 +15,15 @@ stdenv.mkDerivation { buildInputs = [ shared-assets gnumake imagemagick ]; patchPhase = '' - sed -i Makefile -e "s|python ../shared-assets/makesite.py|python ${shared-assets}/bin/makesite.py|g" + sed -i Makefile -e "s|python ../shared-assets/makesite.py|${pythonEnv}/bin/python ${shared-assets}/bin/makesite.py|g" sed -i Makefile -e "s|tar -czf blog.tar.gz _site||g" ''; buildPhase = '' make buildnosign + + # Generate Tailwind CSS data + ${tailwindWithTypography}/bin/tailwindcss --input ./input.css --output _site/assets/css/index.css ''; installPhase = '' diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..1f6f979 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,10 @@ +module.exports = { + content: [ + "./layout/*.html", + ], + theme: { + }, + plugins: [ + require('@tailwindcss/typography'), + ], +} \ No newline at end of file