Add Barbie review; paragraph spoilers

content/posts/reviews/movies/barbie/index.md

@@ -0,0 +1,18 @@
+---
+title: Barbie
+type: review
+date: 2023-07-29T07:51:48+01:00
+emoji: 🍿
+---
+
+{{< film "Barbie" "2023" "https://www.themoviedb.org/movie/346698-barbie" "barbie.jpg" >}}
+
+This was an _excellent_ film that left me emotionally stretched in just the right way. This is an adult movie with childhood references (not a kids' film at all), and seems pitched at people roughly my age (the Goo Goo Dolls referenced as a track for wooing is too close for comfort!) It _superly_ voices the internal contradictions women need to navigate to be accepted. It works hard not to centre Ken, even while his role is a critical counterpoint, but also gives a little airtime to how much a male-dominated world makes it hard to be a man too.
+
+{{% spoiler "tmdb:346698" %}}In fact using Ken — an obviously one-dimensional doll of a man — as the very literal face of the very literal patriarchy neatly sidesteps any "but not all men" reactions getting in the way of the message. (I think they also rolled in some [incel](https://en.wikipedia.org/wiki/Incel) representation into his persona, giving him his own mini-arc to self-understanding and maturity.){{%/ spoiler %}}
+
+The writing is out of this world, the pacing is spot on, and Margot Robbie utterly _nails_ the role — especially the emotional and physical aspects of being a doll in a way that playfully nods to the many ways that children play with Barbie.
+
+{{% spoiler "tmdb:346698" %}}I remember wondering on a few occsaions how the plot was going to resolve without requiring Ken to "win", be "defeated", or overly-centred. I shouldn't have worried; the battle and show number, followed by Ken being very emotionally mature while he faces his immaturity towards his relationship with Barbie was excellent!{{%/ spoiler %}}
+
+It's a wonderful film that I'd encourage everyone to see. It's _hard_ to watch, as man — feeling responsible for so many challenges women face — but Barbie doesn't judge, it voices. It's a message that informs me, helps me, as well as entertaining me, but it isn't meant for _me_; the extent to which Yvette felt seen, understood and perfectly spoken on behalf of _is_ this movie, and why it deserves all the praise it's getting.

layouts/partials/film.html

@@ -0,0 +1,12 @@
+<figure class="film">
+  <a href="{{ .url }}" target="_blank" title="Open film details">
+    {{ $title := .title }}
+    {{ with .cover }}
+      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="The poster for the film {{ $title }}">
+    {{ end}}
+  </a>
+
+  <figcaption>
+    <a href="{{ .url }}" target="_blank" title="Open film details">{{ .title }}</a> ({{ .year }})
+  </figcaption>
+</figure>

layouts/shortcodes/film.html

@@ -0,0 +1 @@
+{{ partial "film.html" (dict "title" (.Get 0) "year" (.Get 1) "url" (.Get 2) "cover" (.Page.Resources.Get (.Get 3))) }}

layouts/shortcodes/spoiler.html

@@ -0,0 +1,4 @@
+<details class="spoiler" data-spoiled-thing="{{ .Get 0 }}">
+  <summary>Show spoiler paragraph</summary>
+  <p>{{ .Page.RenderString .Inner }}</p>
+</details>

themes/hello-friend-ng/assets/scss/_main.scss

@@ -131,7 +131,7 @@ a[href^="https://web.archive.org/"] {
   text-decoration: none;
 }
 
-main p a, main li a, nav a, .social a, section a, .accented, .banner-404 a, .syndication a, figcaption a {
+a:not(.noaccent) {
   &:hover {
     color: var(--accent);
   }
@@ -141,6 +141,10 @@ main p a, main li a, nav a, .social a, section a, .accented, .banner-404 a, .syn
   transition-timing-function: ease-in;
 }
 
+a.noaccent {
+  text-decoration: none;
+}
+
 img.profile {
   float: left;
   height: 3em;

themes/hello-friend-ng/assets/scss/_single.scss

@@ -257,14 +257,18 @@
   }
 }
 
-.book {
+.book, .film {
   max-width: 180px;
   float: right;
   text-align: right;
   margin: 0 0 16px 16px;
+  // A hack to prevent spoilers from going over the link
+  position: relative;
+  z-index: 10;
 
   img {
     width: 100%;
+    height: auto;
   }
 
   .authors {
@@ -285,4 +289,28 @@
       }
     }
   }
+}
+
+details.spoiler {
+  position: relative;
+
+  p:first-of-type {
+    margin-top: 0;
+  }
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+
+  &[closed] {
+    display: inline;
+  }
+
+  & > summary {
+    color: $light-color-secondary;
+    cursor: pointer;
+  }
+
+  &[open] > summary {
+    display: none;
+  }
 }

themes/hello-friend-ng/layouts/_default/single.html

@@ -18,7 +18,7 @@
     <article>
       <hgroup class="post-title">
         <h1 class="p-name"{{ with .Params.emoji }} data-emoji="{{.}}"{{end}}>
-          <a href="{{ .Permalink }}" class="u-url">{{ .Title | markdownify }}</a>
+          <a href="{{ .Permalink }}" class="noaccent u-url">{{ .Title | markdownify }}</a>
         </h1>
         {{ with .Params.Subtitle }}
           <h2 class="post-subtitle">{{ . | markdownify }}</h2>

themes/hello-friend-ng/layouts/partials/logo.html

@@ -1,4 +1,4 @@
-<a href="{{ if .Site.Params.Logo.LogoHomeLink }}{{ .Site.Params.Logo.LogoHomeLink }}{{ else }}{{ .Site.BaseURL | relLangURL }}{{ end }}" style="text-decoration: none;">
+<a href="{{ if .Site.Params.Logo.LogoHomeLink }}{{ .Site.Params.Logo.LogoHomeLink }}{{ else }}{{ .Site.BaseURL | relLangURL }}{{ end }}" class="noaccent">
     <div class="logo">
         {{ if .Site.Params.Logo.path }}
             <img src="{{ .Site.Params.Logo.path }}" alt="{{ .Site.Params.Logo.alt }}" />