From 24eb85edc1930e02841c297aa5d9bb90587a6e37 Mon Sep 17 00:00:00 2001 From: Pierre-Olivier Mercier Date: Thu, 11 Jun 2026 22:53:12 +0900 Subject: [PATCH] Improve persona page with browser-like screenshots and background color --- content/use-happyDomain/cio.en.md | 6 +++ content/use-happyDomain/cio.fr.md | 6 +++ content/use-happyDomain/devops.en.md | 5 ++ content/use-happyDomain/devops.fr.md | 5 ++ content/use-happyDomain/freelance.en.md | 5 ++ content/use-happyDomain/freelance.fr.md | 5 ++ content/use-happyDomain/geek.en.md | 5 ++ content/use-happyDomain/geek.fr.md | 5 ++ content/use-happyDomain/sysadmin.en.md | 6 +++ content/use-happyDomain/sysadmin.fr.md | 6 +++ layouts/partials/usage-browser.html | 22 +++++++++ layouts/shortcodes/usage-feature.html | 7 ++- static/css/custom.css | 62 +++++++++++++++++++++++++ 13 files changed, 143 insertions(+), 2 deletions(-) create mode 100644 layouts/partials/usage-browser.html diff --git a/content/use-happyDomain/cio.en.md b/content/use-happyDomain/cio.en.md index b19f4e6..2b79247 100644 --- a/content/use-happyDomain/cio.en.md +++ b/content/use-happyDomain/cio.en.md @@ -24,6 +24,7 @@ An expired domain, a broken delegation, a forgotten subdomain still pointing at title="See your entire domain portfolio in one place." image="/img/screenshots/domains-list.webp" alt="List of domains from several providers, grouped by need" + url="app.happydomain.org/domains" >}} happyDomain connects to more than 25 hosting providers worldwide: registrars, cloud DNS, CDNs and your on-premise servers. @@ -34,6 +35,7 @@ Import a provider in one click and get a single, always up-to-date inventory of title="Catch incidents before your users do." image="/img/screenshots/checks-dashboard.webp" alt="Monitoring dashboard showing the status of every check on a domain" + url="app.happydomain.org/domains/example.com/checks" flip="true" bg="green" >}} @@ -46,6 +48,7 @@ Your teams are notified the moment something changes state. Silent failures beco title="Review every change before it reaches production." image="/img/screenshots/zone-diff.webp" alt="Review and confirm the changes that will be applied" + url="app.happydomain.org/domains/example.com/diff" >}} No change is applied blindly: happyDomain shows the exact difference between the current zone and the new one, and asks for confirmation. @@ -56,6 +59,7 @@ A typo in a record no longer takes a service down. Your team sees what will chan title="A full audit trail, and a way back." image="/img/screenshots/domain-logs.webp" alt="Domain logs showing change history" + url="app.happydomain.org/domains/example.com/logs" flip="true" bg="plum" >}} @@ -68,6 +72,7 @@ And because the entire history is kept, you can roll any zone back to a previous title="Delegate to your teams, without losing control." image="/img/screenshots/domain-abstract.webp" alt="Zone management shared between teams" + url="app.happydomain.org/domains/example.com" coming_soon="true" >}} Let each team manage the records related to its own projects, internal or public, instead of queuing tickets to a central admin. @@ -79,6 +84,7 @@ happyDomain's fine-grained access control lets you title="No more forgotten subdomains." image="/img/screenshots/domain-services.webp" alt="Services attached to a domain, each with a clear purpose" + url="app.happydomain.org/domains/example.com/services" flip="true" bg="green" coming_soon="true" diff --git a/content/use-happyDomain/cio.fr.md b/content/use-happyDomain/cio.fr.md index 7f37d19..37a82ab 100644 --- a/content/use-happyDomain/cio.fr.md +++ b/content/use-happyDomain/cio.fr.md @@ -23,6 +23,7 @@ Un domaine expiré, une délégation cassée, un sous-domaine oublié qui pointe {{< usage-feature title="Visualisez tout votre portefeuille de domaines au même endroit." image="/img/screenshots/domains-list.webp" + url="app.happydomain.org/domains" alt="Liste des domaines de plusieurs hébergeurs, regroupés selon vos besoins" >}} happyDomain se connecte à plus de 25 hébergeurs à travers le monde : registrars, DNS cloud, CDN et vos serveurs internes. @@ -33,6 +34,7 @@ Importez un hébergeur en un clic et obtenez un inventaire unique et toujours à {{< usage-feature title="Détectez les incidents avant vos utilisateurs." image="/img/screenshots/checks-dashboard.webp" + url="app.happydomain.org/domains/example.com/checks" alt="Tableau de bord de supervision affichant l'état de chaque vérification d'un domaine" flip="true" bg="green" @@ -45,6 +47,7 @@ Vos équipes sont notifiées dès qu'un état change. Les pannes silencieuses de {{< usage-feature title="Relisez chaque modification avant qu'elle n'atteigne la production." image="/img/screenshots/zone-diff.webp" + url="app.happydomain.org/domains/example.com/diff" alt="Relisez puis confirmez les modifications qui seront appliquées" >}} Aucune modification n'est appliquée à l'aveugle : happyDomain affiche la différence exacte entre la zone actuelle et la nouvelle, et demande confirmation. @@ -55,6 +58,7 @@ Une faute de frappe dans un enregistrement ne met plus un service à terre. Votr {{< usage-feature title="Une piste d'audit complète, et un retour en arrière possible." image="/img/screenshots/domain-logs.webp" + url="app.happydomain.org/domains/example.com/logs" alt="Historique des modifications d'un domaine" flip="true" bg="plum" @@ -67,6 +71,7 @@ Et puisque tout l'historique est conservé, vous pouvez restaurer n'importe quel {{< usage-feature title="Déléguez à vos équipes, sans perdre le contrôle." image="/img/screenshots/domain-abstract.webp" + url="app.happydomain.org/domains/example.com" alt="Gestion d'une zone partagée entre les équipes" coming_soon="true" >}} @@ -78,6 +83,7 @@ Le contrôle d'accès fin de happyDomain vous perme {{< usage-feature title="Fini les sous-domaines oubliés." image="/img/screenshots/domain-services.webp" + url="app.happydomain.org/domains/example.com/services" alt="Services rattachés à un domaine, chacun avec un objectif clair" flip="true" bg="green" diff --git a/content/use-happyDomain/devops.en.md b/content/use-happyDomain/devops.en.md index 60a26d1..1762cc0 100644 --- a/content/use-happyDomain/devops.en.md +++ b/content/use-happyDomain/devops.en.md @@ -23,6 +23,7 @@ Deployments are reviewed, tested and rolled back. DNS changes go straight to pro {{< usage-feature title="One REST API for all your domains' operations." image="/img/screenshots/features/rest.png" + url="app.happydomain.org/swagger/index.html" alt="Our REST API, commented and exposed with Swagger" >}} Everything that's done in the happyDomain web interface can be done with the API, in your language of choice. Script it once, run it everywhere. @@ -35,6 +36,7 @@ Our REST API is fully documented, and thanks to Swagger, you can browse it and g {{< usage-feature title="Forget the quirks of each provider. One abstraction for over 25 hosts." image="/img/screenshots/domain-abstract.webp" + url="app.happydomain.org/domains/example.com" alt="A zone displayed the same way, whatever the provider behind it" flip="true" bg="green" @@ -54,6 +56,7 @@ Write your automation against happyDomain once; it {{< usage-feature title="Bring DNS into your review workflow." image="/img/screenshots/zone-diff.webp" + url="app.happydomain.org/domains/example.com/diff" alt="Review and confirm the changes that will be applied" >}} Before anything is published, happyDomain shows the exact diff between the current zone and the new one, and waits for confirmation. @@ -64,6 +67,7 @@ You can even cherry-pick which changes ship now and which ones wait. It works li {{< usage-feature title="Tooling that plugs into what you already use." image="/img/screenshots/sdk-python.webp" + url="pypi.org/project/happydomain" alt="Python SDK usage" flip="true" bg="plum" @@ -87,6 +91,7 @@ You can even cherry-pick which changes ship now and which ones wait. It works li {{< usage-feature title="Monitoring included, no extra stack to deploy." image="/img/screenshots/checks-dashboard.webp" + url="app.happydomain.org/domains/example.com/checks" alt="Monitoring dashboard showing the status of every check on a domain" >}} happyDomain's checkers continuously verify expirations, DNSSEC, delegation, certificates and service availability for every domain you manage. diff --git a/content/use-happyDomain/devops.fr.md b/content/use-happyDomain/devops.fr.md index 3742999..b358332 100644 --- a/content/use-happyDomain/devops.fr.md +++ b/content/use-happyDomain/devops.fr.md @@ -23,6 +23,7 @@ Les déploiements sont relus, testés et réversibles. Les changements DNS parte {{< usage-feature title="Une seule API REST pour toutes les opérations sur vos domaines." image="/img/screenshots/features/rest.png" + url="app.happydomain.org/swagger/index.html" alt="Notre API REST, commentée et exposée avec Swagger" >}} Tout ce qui se fait dans l'interface web d'happyDomain peut se faire avec l'API, dans votre langage de prédilection. Scriptez-le une fois, exécutez-le partout. @@ -35,6 +36,7 @@ Notre API REST est entièrement documentée et grâce à Swagger, vous pouvez la {{< usage-feature title="Oubliez les particularités de chaque hébergeur. Une seule abstraction pour plus de 25 hébergeurs." image="/img/screenshots/domain-abstract.webp" + url="app.happydomain.org/domains/example.com" alt="Une zone affichée de la même façon, quel que soit le fournisseur derrière" flip="true" bg="green" @@ -54,6 +56,7 @@ Notre API REST est entièrement documentée et grâce à Swagger, vous pouvez la {{< usage-feature title="Intégrez le DNS dans votre workflow de relecture." image="/img/screenshots/zone-diff.webp" + url="app.happydomain.org/domains/example.com/diff" alt="Relisez et confirmez les changements qui seront appliqués" >}} Avant toute publication, happyDomain affiche le diff exact entre la zone actuelle et la nouvelle, et attend votre confirmation. @@ -64,6 +67,7 @@ Vous pouvez même choisir quels changements partent maintenant et lesquels atten {{< usage-feature title="Des outils qui s'intègrent à ce que vous utilisez déjà." image="/img/screenshots/sdk-python.webp" + url="pypi.org/project/happydomain" alt="Utilisation du SDK Python" flip="true" bg="plum" @@ -87,6 +91,7 @@ Vous pouvez même choisir quels changements partent maintenant et lesquels atten {{< usage-feature title="Supervision incluse, aucune stack supplémentaire à déployer." image="/img/screenshots/checks-dashboard.webp" + url="app.happydomain.org/domains/example.com/checks" alt="Tableau de bord de supervision affichant l'état de chaque vérification d'un domaine" >}} Les vérificateurs d'happyDomain contrôlent en continu les expirations, le DNSSEC, la délégation, les certificats et la disponibilité des services pour chaque domaine que vous gérez. diff --git a/content/use-happyDomain/freelance.en.md b/content/use-happyDomain/freelance.en.md index 860432f..d5f3aeb 100644 --- a/content/use-happyDomain/freelance.en.md +++ b/content/use-happyDomain/freelance.en.md @@ -23,6 +23,7 @@ An expired domain, broken mail, an invalid certificate. Too often, the person wh {{< usage-feature title="All your clients' domains, grouped by client." image="/img/screenshots/domains-list.webp" + url="app.happydomain.org/domains" alt="List of domain names, cleverly grouped by client" >}} No matter how many clients you follow, happyDomain gives you a clear overview of every domain you are responsible for, organized your way. @@ -33,6 +34,7 @@ One login, one inventory, no more digging through password managers to answer a {{< usage-feature title="One interface, whatever your client's provider." image="/img/screenshots/domain-abstract.webp" + url="app.happydomain.org/domains/example.com" alt="A zone displayed the same way, whatever the provider behind it" flip="true" bg="green" @@ -45,6 +47,7 @@ Every zone is displayed and edited the same way, so a new client with an exotic {{< usage-feature title="Fix issues before your client even notices." image="/img/screenshots/checks-dashboard.webp" + url="app.happydomain.org/domains/example.com/checks" alt="Monitoring dashboard showing the status of every check on a client domain" >}} happyDomain's built-in checkers keep watch over every client domain: expiry dates, DNSSEC, mail and web service availability, TLS certificates and more, all reported with a clear OK / Warning / Critical status. @@ -55,6 +58,7 @@ Get notified the moment something changes, fix it quietly, and show up looking l {{< usage-feature title="Respond to every request with ease." image="/img/screenshots/domain-services.webp" + url="app.happydomain.org/domains/example.com/services" alt="Services attached to a domain, described in plain words" flip="true" bg="plum" @@ -67,6 +71,7 @@ Less time decoding record types, more time delivering. {{< usage-feature title="Collaborate on a zone with your client or your team." image="/img/screenshots/domain-abstract.webp" + url="app.happydomain.org/domains/example.com" alt="Zone management shared with clients and collaborators" coming_soon="true" >}} diff --git a/content/use-happyDomain/freelance.fr.md b/content/use-happyDomain/freelance.fr.md index 4729c67..9e6fa18 100644 --- a/content/use-happyDomain/freelance.fr.md +++ b/content/use-happyDomain/freelance.fr.md @@ -23,6 +23,7 @@ Un domaine expiré, un mail en panne, un certificat invalide. Trop souvent, celu {{< usage-feature title="Tous les domaines de vos clients, regroupés par client." image="/img/screenshots/domains-list.webp" + url="app.happydomain.org/domains" alt="Liste des domaines, regroupés astucieusement par client" >}} Quel que soit le nombre de clients que vous suivez, happyDomain vous donne un aperçu clair de chaque domaine dont vous êtes responsable, organisé à votre façon. @@ -33,6 +34,7 @@ Un seul login, un seul inventaire, fini de fouiller dans les gestionnaires de mo {{< usage-feature title="Une seule interface, quel que soit l'hébergeur de votre client." image="/img/screenshots/domain-abstract.webp" + url="app.happydomain.org/domains/example.com" alt="Une zone affichée de la même façon, quel que soit l'hébergeur derrière" flip="true" bg="green" @@ -45,6 +47,7 @@ Chaque zone s'affiche et s'édite de la même façon, ainsi un nouveau client av {{< usage-feature title="Corrigez les problèmes avant même que votre client ne s'en aperçoive." image="/img/screenshots/checks-dashboard.webp" + url="app.happydomain.org/domains/example.com/checks" alt="Tableau de bord de supervision affichant l'état de chaque vérification d'un domaine client" >}} Les vérificateurs intégrés de happyDomain veillent sur chaque domaine client : dates d'expiration, DNSSEC, disponibilité des services mail et web, certificats TLS et plus encore, le tout reporté avec un statut clair OK / Avertissement / Critique. @@ -55,6 +58,7 @@ Soyez notifié dès qu'un changement survient, corrigez-le discrètement, et aff {{< usage-feature title="Répondez à toutes les demandes en toute simplicité." image="/img/screenshots/domain-services.webp" + url="app.happydomain.org/domains/example.com/services" alt="Services attachés à un domaine, décrits avec des mots simples" flip="true" bg="plum" @@ -67,6 +71,7 @@ Moins de temps à décoder les types d'enregistrements, plus de temps à livrer. {{< usage-feature title="Collaborez sur une zone avec votre client ou votre équipe." image="/img/screenshots/domain-abstract.webp" + url="app.happydomain.org/domains/example.com" alt="Gestion de zone partagée avec les clients et les collaborateurs" coming_soon="true" >}} diff --git a/content/use-happyDomain/geek.en.md b/content/use-happyDomain/geek.en.md index b8ea76c..57f3a0b 100644 --- a/content/use-happyDomain/geek.en.md +++ b/content/use-happyDomain/geek.en.md @@ -23,6 +23,7 @@ Each registrar's interface decides what you can do and how. Moving your zones el {{< usage-feature title="A simple and clear interface, whatever the host." image="/img/screenshots/domain-abstract.webp" + url="app.happydomain.org/domains/example.com" alt="A zone displayed in a clear, human-readable way" >}} Whether your zones live at a registrar or on your own servers, happyDomain displays them the same clear way, limiting errors. @@ -34,6 +35,7 @@ Install happyDomain next to your Bind or PowerDNS a {{< usage-feature title="Self-hosting made easy, even for DNS." image="/img/screenshots/providers-list.webp" + url="app.happydomain.org/providers" alt="List of supported providers, from cloud services to self-hosted servers" flip="true" bg="green" @@ -48,6 +50,7 @@ happyDomain is open source, needs very few resource {{< usage-feature title="Tinker without fear: preview, history, rollback." image="/img/screenshots/zone-diff.webp" + url="app.happydomain.org/domains/example.com/diff" alt="Review and confirm the changes that will be applied" >}} Before any change is published, happyDomain shows you exactly what will be modified and asks for confirmation. No more silent typos. @@ -58,6 +61,7 @@ And since every version of your zone is kept in history, you can experiment free {{< usage-feature title="Set up any service in all simplicity." image="/img/screenshots/domain-services.webp" + url="app.happydomain.org/domains/example.com/services" alt="Services attached to a domain, described in plain words" flip="true" bg="plum" @@ -70,6 +74,7 @@ We are committed to providing the latest in DNS registration and services, so yo {{< usage-feature title="Manage easily, even special zones." image="/img/screenshots/service-caa.webp" + url="app.happydomain.org/domains/example.com/services" alt="Editing an advanced DNS service through a guided form" coming_soon="true" >}} diff --git a/content/use-happyDomain/geek.fr.md b/content/use-happyDomain/geek.fr.md index 87ec940..22159bc 100644 --- a/content/use-happyDomain/geek.fr.md +++ b/content/use-happyDomain/geek.fr.md @@ -23,6 +23,7 @@ L'interface de chaque registrar décide de ce que vous pouvez faire et comment. {{< usage-feature title="Une interface simple et claire, quel que soit l'hébergeur." image="/img/screenshots/domain-abstract.webp" + url="app.happydomain.org/domains/example.com" alt="Une zone affichée de manière claire et lisible" >}} Que vos zones soient chez un registrar ou sur vos propres serveurs, happyDomain les affiche de la même manière claire, pour limiter les erreurs. @@ -34,6 +35,7 @@ Installez happyDomain à côté de votre Bind ou Po {{< usage-feature title="L'auto-hébergement facilité, même pour le DNS." image="/img/screenshots/providers-list.webp" + url="app.happydomain.org/providers" alt="Liste des fournisseurs pris en charge, des services cloud aux serveurs auto-hébergés" flip="true" bg="green" @@ -48,6 +50,7 @@ happyDomain est open source, n'a besoin que de trè {{< usage-feature title="Bidouillez sans crainte : aperçu, historique, retour arrière." image="/img/screenshots/zone-diff.webp" + url="app.happydomain.org/domains/example.com/diff" alt="Vérifiez et confirmez les modifications qui seront appliquées" >}} Avant la publication de toute modification, happyDomain vous montre exactement ce qui va changer et demande confirmation. Fini les fautes de frappe silencieuses. @@ -58,6 +61,7 @@ Et comme chaque version de votre zone est conservée dans l'historique, vous pou {{< usage-feature title="Répondez à tous vos besoins en toute simplicité." image="/img/screenshots/domain-services.webp" + url="app.happydomain.org/domains/example.com/services" alt="Services rattachés à un domaine, décrits en mots simples" flip="true" bg="plum" @@ -70,6 +74,7 @@ Nous avons à cœur de mettre à disposition les dernières nouveautés en terme {{< usage-feature title="Gérez simplement, même les zones spéciales." image="/img/screenshots/service-caa.webp" + url="app.happydomain.org/domains/example.com/services" alt="Édition d'un service DNS avancé via un formulaire guidé" coming_soon="true" >}} diff --git a/content/use-happyDomain/sysadmin.en.md b/content/use-happyDomain/sysadmin.en.md index 0a7b37c..e314d31 100644 --- a/content/use-happyDomain/sysadmin.en.md +++ b/content/use-happyDomain/sysadmin.en.md @@ -23,6 +23,7 @@ You're the only one trusted to touch DNS, so every record request becomes a tick {{< usage-feature title="Edit all your zones in one place, internal and public." image="/img/screenshots/domain-abstract.webp" + url="app.happydomain.org/domains/example.com" alt="A zone displayed the same clear way, whatever the host" >}} Whatever the host of your zones, happyDomain displays them in the same clear way, limiting errors. @@ -33,6 +34,7 @@ Install happyDomain next to your Bind or PowerDNS a {{< usage-feature title="View your changes before applying them." image="/img/screenshots/zone-diff.webp" + url="app.happydomain.org/domains/example.com/diff" alt="Review and confirm the changes that will be applied" flip="true" bg="green" @@ -45,6 +47,7 @@ You can even select which changes go out now and which ones should wait. {{< usage-feature title="Full history, instant rollback." image="/img/screenshots/domain-history.webp" + url="app.happydomain.org/domains/example.com/logs" alt="History of every version of a zone" >}} Every version of every zone is kept, with who changed what and when. @@ -55,6 +58,7 @@ When something breaks, you don't reconstruct the previous state from backups: yo {{< usage-feature title="Catch problems before they become outages." image="/img/screenshots/checks-dashboard.webp" + url="app.happydomain.org/domains/example.com/checks" alt="Monitoring dashboard showing the status of every check on a domain" flip="true" bg="plum" @@ -67,6 +71,7 @@ Each check is evaluated against clear rules and reported as }} @@ -78,6 +83,7 @@ Delegate all or only part of a zone, down to a single record. The routine reques {{< usage-feature title="Manage simply, even the special zones." image="/img/screenshots/service-caa.webp" + url="app.happydomain.org/domains/example.com/services" alt="Editing an advanced DNS service through a guided form" flip="true" bg="green" diff --git a/content/use-happyDomain/sysadmin.fr.md b/content/use-happyDomain/sysadmin.fr.md index f6ebada..19eef13 100644 --- a/content/use-happyDomain/sysadmin.fr.md +++ b/content/use-happyDomain/sysadmin.fr.md @@ -23,6 +23,7 @@ Vous êtes la seule personne de confiance pour toucher au DNS, alors chaque dema {{< usage-feature title="Éditez toutes vos zones au même endroit, internes et publiques." image="/img/screenshots/domain-abstract.webp" + url="app.happydomain.org/domains/example.com" alt="Une zone affichée de la même manière claire, quel que soit l'hébergeur" >}} Quel que soit l'hébergeur de vos zones, happyDomain les affiche de la même manière claire, pour limiter les erreurs. @@ -33,6 +34,7 @@ Installez happyDomain à côté de votre Bind ou Po {{< usage-feature title="Visualisez vos modifications avant de les appliquer." image="/img/screenshots/zone-diff.webp" + url="app.happydomain.org/domains/example.com/diff" alt="Relisez puis confirmez les modifications qui seront appliquées" flip="true" bg="green" @@ -45,6 +47,7 @@ Vous pouvez même sélectionner les changements qui partent maintenant et ceux q {{< usage-feature title="Historique complet, retour arrière instantané." image="/img/screenshots/domain-history.webp" + url="app.happydomain.org/domains/example.com/logs" alt="Historique de chaque version d'une zone" >}} Chaque version de chaque zone est conservée, avec qui a changé quoi et quand. @@ -55,6 +58,7 @@ Quand quelque chose casse, vous ne reconstruisez pas l'état précédent à part {{< usage-feature title="Détectez les problèmes avant qu'ils ne deviennent des pannes." image="/img/screenshots/checks-dashboard.webp" + url="app.happydomain.org/domains/example.com/checks" alt="Tableau de bord de supervision affichant l'état de chaque vérification d'un domaine" flip="true" bg="plum" @@ -67,6 +71,7 @@ Chaque vérification est évaluée selon des règles claires et reportée en }} @@ -78,6 +83,7 @@ Déléguez tout ou seulement une partie d'une zone, jusqu'à un seul enregistrem {{< usage-feature title="Gérez simplement, même les zones spéciales." image="/img/screenshots/service-caa.webp" + url="app.happydomain.org/domains/example.com/services" alt="Édition d'un service DNS avancé via un formulaire guidé" flip="true" bg="green" diff --git a/layouts/partials/usage-browser.html b/layouts/partials/usage-browser.html new file mode 100644 index 0000000..cddbcaa --- /dev/null +++ b/layouts/partials/usage-browser.html @@ -0,0 +1,22 @@ +{{/* + Wraps a screenshot in a fake browser frame, like the hero on the home page. + Params (passed as a dict): + image (required) — screenshot URL + alt — alt text + url — address shown in the URL bar (default: app.happydomain.org) +*/}} +{{ $image := .image }} +{{ $alt := .alt | default "" }} +{{ $url := .url | default "app.happydomain.org" }} +
+
+
+
+ + {{ $url }} +
+
+
+ {{ $alt }} +
+
diff --git a/layouts/shortcodes/usage-feature.html b/layouts/shortcodes/usage-feature.html index 067644c..71c6ea1 100644 --- a/layouts/shortcodes/usage-feature.html +++ b/layouts/shortcodes/usage-feature.html @@ -1,5 +1,6 @@ {{ $image := .Get "image" }} {{ $alt := .Get "alt" | default "" }} +{{ $url := .Get "url" }} {{ $title := .Get "title" }} {{ $flip := eq (.Get "flip") "true" }} {{ $bg := .Get "bg" | default "" }} @@ -9,12 +10,14 @@ {{ if eq $bg "green" }}{{ $style = "background: var(--hd-green-50)" }}{{ end }} {{ if eq $bg "plum" }}{{ $style = "background: var(--hd-plum-100)" }}{{ end }} +{{ $browserArgs := dict "image" $image "alt" $alt "url" $url }} +
{{ if $flip }}
- {{ $alt }} + {{ partial "usage-browser.html" $browserArgs }}
{{ else }} @@ -28,7 +31,7 @@
{{ if not $flip }}
- {{ $alt }} + {{ partial "usage-browser.html" $browserArgs }}
{{ end }}
diff --git a/static/css/custom.css b/static/css/custom.css index d05865e..1745c71 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -1,3 +1,65 @@ +/* Fake browser frame wrapping usage screenshots (see partials/usage-browser.html) */ +.usage-browser { + background: var(--hd-bg-canvas); + border: 1px solid var(--hd-border-1); + border-radius: 10px; + overflow: hidden; + box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25); +} + +.usage-browser .browser-bar { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 12px; + background: var(--hd-bg-subtle); + border-bottom: 1px solid var(--hd-border-1); +} + +.usage-browser .browser-dots { + display: flex; + gap: 6px; +} + +.usage-browser .browser-dots span { + width: 10px; + height: 10px; + border-radius: 50%; + background: var(--hd-border-2); +} + +.usage-browser .browser-url { + flex: 1; + font-family: var(--hd-font-mono, monospace); + font-size: 11px; + background: var(--hd-bg-canvas); + border: 1px solid var(--hd-border-1); + border-radius: 5px; + padding: 4px 10px; + color: var(--hd-fg-3); + display: flex; + align-items: center; + gap: 6px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.usage-browser .browser-url .lock { + color: var(--hd-accent); + font-size: 10px; +} + +.usage-browser .browser-body { + display: block; +} + +.usage-browser .browser-body img { + display: block; + width: 100%; + height: auto; +} + nav.navbar { background: var(--hd-bg-canvas); box-shadow: 0 0px 3px 0 var(--hd-accent);