diff options
| author | Quentin Aristote <quentin@aristote.fr> | 2022-11-16 23:05:51 +0100 |
|---|---|---|
| committer | Quentin Aristote <quentin@aristote.fr> | 2022-11-16 23:05:51 +0100 |
| commit | 3229cdeb36992f429a4cba6c0e0f0c0fb38db527 (patch) | |
| tree | 461b217408ed0ec51ab3bb5ca4a9515ceae264ad | |
| parent | 22feac158125136a669b3436f601bd90529d230d (diff) | |
adapt avatar size to screen
| -rw-r--r-- | default.nix | 20 | ||||
| -rw-r--r-- | flake.lock | 12 | ||||
| -rw-r--r-- | html/basics/default.nix | 12 |
3 files changed, 35 insertions, 9 deletions
diff --git a/default.nix b/default.nix index 435a5ea..b49c2c0 100644 --- a/default.nix +++ b/default.nix @@ -30,13 +30,22 @@ let in pkgs.callPackage ({ # Packages - line-awesome, line-awesome-css, uncss, yuicompressor, + line-awesome, line-awesome-css, uncss, yuicompressor, imagemagick, # Source files index-html ? indexHTML, classless-css ? classlessCSS, files ? data.files , icon ? ./static/icon.png }: let compress = "${yuicompressor}/bin/yuicompressor"; clean = "${uncss}/bin/uncss"; + compressJPEG = size: '' + ${imagemagick}/bin/convert -sampling-factor 4:2:0 \ + -strip \ + -quality 85 \ + -interlace JPEG \ + -colorspace RGB \ + -resize ${size} \ + -colorspace sRGB \ + ''; in pkgs.runCommand "webpage" { } '' set -o xtrace mkdir $out && pushd "$_" @@ -45,7 +54,14 @@ in pkgs.callPackage ({ mkdir $out/static && pushd "$_" ln -sT ${icon} icon.png - ln -sT ${files} files + cp -r ${files} files + chmod a+w files + pushd files + ${compressJPEG "128x128"} avatar.jpg avatar.jpg.128 + ${compressJPEG "256x256"} avatar.jpg avatar.jpg.256 + ${compressJPEG "512x512"} avatar.jpg avatar.jpg.512 + popd + chmod a-w files popd mkdir -p $out/static/css && pushd "$_" @@ -10,11 +10,11 @@ ] }, "locked": { - "lastModified": 1668375475, - "narHash": "sha256-rp+tPVJkm8QWG48MBhk/+qblvYOmSpLamfAZkhMnyKw=", + "lastModified": 1668631291, + "narHash": "sha256-4c4vm/qb9PP6OTgHtEJcD2NoDwlMgYg4Z9Q6natda9o=", "owner": "qaristote", "repo": "info", - "rev": "5a8c11a5fae47a8eaad7a90ac3a70020243ceb48", + "rev": "bc83aaf07a793823676d3d94c1d50b10be9b4a57", "type": "github" }, "original": { @@ -39,11 +39,11 @@ }, "nixpkgs": { "locked": { - "lastModified": 1668531822, - "narHash": "sha256-rNt2SphDCQTbAgWBX9ZCMIn5ISxeb0l6b6kRLvzbFVo=", + "lastModified": 1668595402, + "narHash": "sha256-12zewsdsS3hFyWSb9x8a1pnbYOcsohvWoB6RYkMvlWE=", "owner": "NixOS", "repo": "nixpkgs", - "rev": "97b8d9459f7922ce0e666113a1e8e6071424ae16", + "rev": "c03141948959417b580a9cbd57983af910d6727a", "type": "github" }, "original": { diff --git a/html/basics/default.nix b/html/basics/default.nix index 1490529..ce15589 100644 --- a/html/basics/default.nix +++ b/html/basics/default.nix @@ -1,4 +1,4 @@ -{ html, data, ... }: +{ html, data, lib, ... }: let basics = data.basics; @@ -20,7 +20,17 @@ in { (col [ (imgWith { src = avatar; + srcset = lib.concatStringsSep ", " + (builtins.map (size: "${avatar}.${size} ${size}w") [ + "128" + "256" + "512" + ] ++ [ "${avatar} 934w" ]); + sizes = "(max-width: 480px) 60vw, 30vw"; + loading = "lazy"; + alt = "Quentin Aristote"; style = '' + aspect-ratio: 1 / 1; border-radius: 50%; padding-left: 20%; padding-right: 20%; |