Add images for all blog posts with a licence in hero, and an optional img explanation

master
Quentin Duchemin 2021-05-27 00:26:57 +02:00
parent 439318aabb
commit 74384d7bdc
17 changed files with 50 additions and 12 deletions

View File

@ -25,3 +25,8 @@ For development, run `hugo server --watch` to watch for config/content changes,
## Using the theme ## Using the theme
TODO 😄 TODO 😄
## TODO
* RSS feeds
* Make burger menu work on mobiles

View File

@ -5,6 +5,8 @@ categories:
- Technologie - Technologie
- Réflexion - Réflexion
summary: "Les précédents billets présentent trois pistes pour explorer les raisons de l'addiction au smartphone : la curiosité, les peurs contemporaines et les notifications. Cette addiction a des conséquences tangibles." summary: "Les précédents billets présentent trois pistes pour explorer les raisons de l'addiction au smartphone : la curiosité, les peurs contemporaines et les notifications. Cette addiction a des conséquences tangibles."
imgLicence: Art Libre - Sarah Brulard
imgExplanation: En image d'illustration, moi au foyer étudiant de l'UTC, absorbé par mon téléphone et entouré de gens très chouettes.
--- ---
Ces mécanismes combinés font exploser le temps passé sur un smartphone dans la journée -- plusieurs heures pour la plupart d'entre nous, oscillant entre les recherches consenties, le scroll automatique, l'ingestion compulsive de nouvelles et la réponse aux stimuli des notifications. Ces mécanismes combinés font exploser le temps passé sur un smartphone dans la journée -- plusieurs heures pour la plupart d'entre nous, oscillant entre les recherches consenties, le scroll automatique, l'ingestion compulsive de nouvelles et la réponse aux stimuli des notifications.

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB

View File

@ -5,6 +5,7 @@ categories:
- Technologie - Technologie
- Réflexion - Réflexion
summary: « Se perdre sur Internet », voilà une activité contemporaine qui partage le haut du classement avec la destruction méthodique des écosystèmes et des acquis sociaux. Mais pourquoi se perd-on sur le web ? summary: « Se perdre sur Internet », voilà une activité contemporaine qui partage le haut du classement avec la destruction méthodique des écosystèmes et des acquis sociaux. Mais pourquoi se perd-on sur le web ?
imgLicence: CC BY 2.0 - Moyan Bren
--- ---
## La curiosité est un joli défaut ## La curiosité est un joli défaut

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 MiB

View File

@ -5,6 +5,7 @@ categories:
- Technologie - Technologie
- Réflexion - Réflexion
summary: Ce billet est le premier d'une série qui s'intéresse à la place du smartphone dans nos vies. J'y raconte comment j'en suis venu à interroger mes usages, ce que j'en ai compris, et ce que j'ai décidé pour m'en extirper. summary: Ce billet est le premier d'une série qui s'intéresse à la place du smartphone dans nos vies. J'y raconte comment j'en suis venu à interroger mes usages, ce que j'en ai compris, et ce que j'ai décidé pour m'en extirper.
imgLicence: CC BY-SA 4.0 - Quentin Duchemin
--- ---
## Pourquoi ? ## Pourquoi ?

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 MiB

View File

@ -5,6 +5,7 @@ categories:
- Technologie - Technologie
- Réflexion - Réflexion
summary: Les notifications, a priori inoffensives et pratiques, offrent à tous les marchands de données la clé de notre attention, à toute heure de la journée. Tous les publicitaires en ont rêvé, les smartphones l'ont fait. summary: Les notifications, a priori inoffensives et pratiques, offrent à tous les marchands de données la clé de notre attention, à toute heure de la journée. Tous les publicitaires en ont rêvé, les smartphones l'ont fait.
imgExplanation: En illustration de cet article, une notification de CNN qui invite tous les utilisateurs de l'application à faire une sieste car il n'y a plus de nouveaux articles. Merci de l'autorisation, j'étais crevé !
--- ---
Dans les précédentes parties, on a d'abord vu que la curiosité était un besoin qui s'est construit au cours de l'évolution. Probablement d'abord utile pour le fourrageage, elle est aujourd'hui une source de motivation pour l'apprentissage, la remise en question de notre présent et la fabrique de nouveaux imaginaires. En tant qu'il rend l'accès à l'information recherchée immédiat et en propose d'autres, le web est un puissant capteur d'attention qui récompense notre curiosité et l'appétence de notre cerveau pour la nouveauté. Dans les précédentes parties, on a d'abord vu que la curiosité était un besoin qui s'est construit au cours de l'évolution. Probablement d'abord utile pour le fourrageage, elle est aujourd'hui une source de motivation pour l'apprentissage, la remise en question de notre présent et la fabrique de nouveaux imaginaires. En tant qu'il rend l'accès à l'information recherchée immédiat et en propose d'autres, le web est un puissant capteur d'attention qui récompense notre curiosité et l'appétence de notre cerveau pour la nouveauté.

Binary file not shown.

After

Width:  |  Height:  |  Size: 205 KiB

View File

@ -5,6 +5,8 @@ categories:
- Technologie - Technologie
- Réflexion - Réflexion
summary: Comment casser la boucle de l'addiction au smartphones ? Quelques pistes de réflexion, certes très autocentrées, mais qui m'ont été utiles, en attendant de changer le monde. summary: Comment casser la boucle de l'addiction au smartphones ? Quelques pistes de réflexion, certes très autocentrées, mais qui m'ont été utiles, en attendant de changer le monde.
imgLicence: Art Libre - Baptiste Filleau
imgExplanation: En illustration de cet article, une aquarelle de mon meilleur ami, qui m'a beaucoup fait avancer dans mes réflexions.
--- ---
## S'il vous plaît, ne me tapez pas ## S'il vous plaît, ne me tapez pas

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

View File

@ -5,6 +5,7 @@ categories:
- Technologie - Technologie
- Réflexion - Réflexion
summary: La curiosité ne suffit pas à expliquer à elle seule les usages déraisonnables de nos smartphones. Pour mieux comprendre, il faut faire un détour par les peurs qui caractérisent notre époque. summary: La curiosité ne suffit pas à expliquer à elle seule les usages déraisonnables de nos smartphones. Pour mieux comprendre, il faut faire un détour par les peurs qui caractérisent notre époque.
imgLicence: CC BY 2.0 - robinsoncaruso
--- ---
Dans la précédente partie de ce billet, on a vu que la curiosité était un besoin fondamental chez les humains, que la nouveauté en tant que telle était puissamment récompensée par le cerveau et que le web était l'objet idéal pour créer et satisfaire notre curiosité dans une même boucle, encore plus à l'ère du smartphone. Dans la précédente partie de ce billet, on a vu que la curiosité était un besoin fondamental chez les humains, que la nouveauté en tant que telle était puissamment récompensée par le cerveau et que le web était l'objet idéal pour créer et satisfaire notre curiosité dans une même boucle, encore plus à l'ère du smartphone.

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -4,7 +4,7 @@
<main> <main>
{{ with .Content }} {{ with .Content }}
<article class="message mt-5 mb-2"> <article class="message mt-5 mb-2">
<div class="message-body"> <div class="message-body content">
{{ . }} {{ . }}
</div> </div>
</article> </article>

View File

@ -25,10 +25,20 @@
<section class="column is-7"> <section class="column is-7">
<div> <div>
<article> <article>
<!-- First thing is a legend for the hero image, if it exists -->
{{ with .Params.imgExplanation }}
<article class="message mb-5">
<div class="message-body content is-italic">
{{ . }}
</div>
</article>
{{ end }}
<!-- Second, a summary before ToC, if it exists -->
{{ with .Params.summary }} {{ with .Params.summary }}
{{ . }} {{ . }}
<br /><br /> <br /><br />
{{ end }} {{ end }}
<!-- Then, ToC if text has more than 400 words and not explicitly asked not to -->
{{ if (or (not .Params.notoc) (gt .WordCount 400)) }} {{ if (or (not .Params.notoc) (gt .WordCount 400)) }}
<div class="message is-info"> <div class="message is-info">
<div class="message-header">Sommaire</div> <div class="message-header">Sommaire</div>
@ -36,6 +46,7 @@
<div class="message-body pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div> <div class="message-body pt-1">{{ .TableOfContents | replaceRE "<a" "<a style='text-decoration:none;'" | safeHTML }}</div>
</div> </div>
{{ end }} {{ end }}
<!-- Finally, content! -->
{{ .Content }} {{ .Content }}
</article> </article>
</div> </div>

View File

@ -1,12 +1,12 @@
<div class="card has-equal-height mt-5"> <div class="card has-equal-height mt-5">
<div class="card-image"> <div class="card-image">
<figure class="image is-4by3"> <figure class="image is-3by2">
{{ $imageURL := "https://bulma.io/images/placeholders/640x480.png" }} {{ $imageURL := "https://bulma.io/images/placeholders/480x320.png" }}
{{ with .Resources.GetMatch "top.jpg" }} {{ with .Resources.GetMatch "top.jpg" }}
{{ $image := .Fill "640x480 smart" }} {{ $image := .Fill "480x320 left" }}
{{ $imageURL = $image.Permalink }} {{ $imageURL = $image.Permalink }}
{{ end }} {{ end }}
<img src="{{ $imageURL }}" alt="Placeholder image"> <a href="{{ .Permalink }}"><img src="{{ $imageURL }}" alt="Placeholder image"></a>
</figure> </figure>
</div> </div>
<div class="card-content" style="height:100%;"> <div class="card-content" style="height:100%;">

View File

@ -1,14 +1,28 @@
<header> <header>
<section class="hero is-primary has-text-centered is-medium"> <section class="hero is-primary has-text-centered is-medium">
<div class="hero-head mt-5"> <div class="hero-head mx-5">
<div class="level subtitle is-5">
<div class="level-left">
{{ with .Params.imgLicence }}
<div class="level-item">
Image d'illustration {{ . }}
</div>
{{ end }}
</div>
<div class="level-right">
<div class="level-item">
{{ with .Params.categories }} {{ with .Params.categories }}
<div class="tags colums is-justify-content-flex-end mb-2 mx-5"> <div class="tags colums is-vcentered mb-2 mt-5">
{{ range . }} {{ range . }}
<span class="tag is-info is-light is-large mr-4"><a href="{{ "categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span> <span class="tag is-info is-light is-large mr-4"><a href="{{ "categories" | absURL }}/{{ . | urlize }}">{{ . }}</a></span>
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}
</div> </div>
</div>
</div>
</div>
<div class="hero-body"> <div class="hero-body">
<p class="title is-1 is-uppercase">{{ .Title }}</p> <p class="title is-1 is-uppercase">{{ .Title }}</p>
{{ with .Params.subtitle }} {{ with .Params.subtitle }}