diff --git a/content/reviews/the-french-dispatch.md b/content/reviews/the-french-dispatch.md index 669dc28..d0d1b5e 100644 --- a/content/reviews/the-french-dispatch.md +++ b/content/reviews/the-french-dispatch.md @@ -2,7 +2,7 @@ title: "The French Dispatch" date: 2022-08-17T17:18:04+09:00 draft: false -rating: 5 +rating: 4 imdb: 7.2 image: https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX300.jpg summary: A new film from Wes Anderson styled after a magazine @@ -12,20 +12,34 @@ genres: - Drama - Romance --- - -## Synopsis -The french dispatch follows several different stories and perspectives surrounding the authors of a magazine based in kansas, but about -a small town in France. The film is framed in sections similar to how a magazine like The New Yorker is divided and each section is -stylistically different from the last to reflect the style of the author. - -## Review -I found this movie very charming. I am a sucker for Wes Anderson films and this, like The Grand Budapest Hotel, strikes a perfect cord with -me both stylistically and substantively. The movie is very funny without many outright spoken jokes. It is visually pleasing in the standard -Wes Anderson way. Each individual story is also engaging and the binding narrative about the death of the magazine's editor pulls things -together just well enough that the movie as a whole feels coherent. - ## Recommendation -I would recommend this to anyone who is already a Wes Anderson fan, but I wouldn't necessarily suggest this if you are new to Wes Anderson. -It is _very_ stylized and if you don't like the style you would hate the film. It also has a lot of absurdist humor which is not for everyone. -As my rating reflects, I really enjoyed this film so it gets a general recommendation from me as long as you consider my hesitations about -style. I think I might recommend watching another Wes Anderson film first and then, if you liked that, watch this one next! + +*The French Dispatch* follows several different stories and perspectives surrounding the authors of a magazine based in Kansas, but about a small town in France. The film is framed in sections similar to how a magazine like The New Yorker is divided and each section is stylistically different from the last to reflect the style of the author. + +I found this movie very charming. I am a sucker for Wes Anderson films and this. For example, *The Grand Budapest Hotel* strikes a perfect cord with me both stylistically and substantively. The movie is very funny without many outright spoken jokes. It is visually pleasing in the standard Wes Anderson way. Each individual story is also engaging and the binding narrative about the death of the magazine's editor pulls things together just well enough that the movie as a whole feels coherent. + +I would recommend this to anyone who is already a Wes Anderson fan, but I wouldn't necessarily suggest this if you are new to Wes Anderson. It is _very_ stylized and if you don't like the style you would hate the film. It also has a lot of absurdist humor which is not for everyone. As my rating reflects, I really enjoyed this film so it gets a general recommendation from me as long as you consider my hesitations about style. I think I might recommend watching another Wes Anderson film first and then, if you liked that, watch this one next! + +## Thoughts + +Spoilers ahead, but if you've seen the movie or if you choose to watch it I'd love to spark some thoughts/discussion! + +### The Artist + +I really enjoyed how the dynamic between the artist prisoner character (Benicio Del Toro) and the female prison guard (Léa Seydoux) is played with when their characters are first introduced. I think that first scene is the platonic idea of what it means to "subvert expectations" in a pleasing way. We've all seen the setting before, a rich asshole artist uses his position of power to take liberties with a young female assistant. In this scenario, however, the scene ends with a complete power dynamic reversal with him entering a straightjacket and being carted away back to a cell. Something about that was not overtly funny but struck my funny bone all the same. + +### The Art + +Another moment I enjoyed was the discussion about modern art. There's a funny commentary on the idea that "a third grader could have made this", wherein they discuss his arts validity and make the claim that because he has techinical prowess (the ability to draw a realistic picture of a bird) his more modern style is somehow valid. The sort of mental gymnastics that the art collectors go through to justify why the art is the next best thing works as a commentary on art in general in a way I liked. + +### The Revolutionary Students + +I have quite a soft spot for chess, so the sections of the magazine following the student revolutionary movement that centered around a chess game were very entertaining to me. I appreciate how that portion of the movie puts you in the shoes of a student. The parents are all concerned about how much of a bother the revolution is but for the students it's life or death. + +### The Dinner Party Kidnapping + +I felt the storyline where the author recounts the dinner party kidnapping was honestly the weakest part of the film. For me it's a combination of not really liking that cartoon style (and this is partially why I haven't made it through Isle of Dogs yet dispite that on the surface seeming like a perfect fit for me.) The other issue I have with it was pointed out in a review I read, which I will paraphrase as being too many layers deep. + +The story is told in the setting of a section of the magazine, but in retrospective as spoken by the author on the set of a talk show. Then we have the actual story which has aspects of live action and cartoon. The cartoon scenes feel nested within the live action for a total depth 4 levels removed from the viewer. It just makes things a little difficult to follow. That style of storytelling can work: I loved _If on a Winter's Night a Traveler_ by _Italio Calvino_ which relies heavily on this nesting of view points, but the first chapter of that book is incredibly jarring as you get accustomed to the style. + +I think because this section stands alone and is tonally different from the rest of the movie, you don't have time to get over that jarring feeling to orient yourself. I think as a stand alone short it might work, and it's just it's presence in this larger narrative that makes it feel especially awkard tonally. For me, this discordance is the main reason I feel this movie is more of a 4/5 than a perfect 5/7. diff --git a/docs/style.css b/docs/style.css index b2c3567..df2e940 100644 --- a/docs/style.css +++ b/docs/style.css @@ -40,6 +40,7 @@ --numbers-font-weight: 400; --numbers-font-line-height: 12px; --numbers-font-size: 16px; + --numbers-font-size-large: 40px; --numbers-font-letter-spacing: -0.02em; --color-primary: #FFFFFF; @@ -110,6 +111,13 @@ html, body { font-size: var(--numbers-font-size); letter-spacing: var(--numbers-font-letter-spacing); } +.numbers-large { + font-family: var(--numbers-font-family); + font-weight: var(--numbers-font-weight); + line-height: var(--numbers-font-line-height); + font-size: var(--numbers-font-size-large); + letter-spacing: var(--numbers-font-letter-spacing); +} button, .button { border: none; @@ -203,5 +211,4 @@ a:hover { } .p1 { - padding: 10px; -} + padding: 10px;2} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index bb54bb3..c8a4735 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -2,20 +2,6 @@

{{- .Title -}}

- {{ if .Params.image }} - Poster - {{ end }} - {{ if .Params.rating }} - Rating - {{ range seq $.Params.rating }} - ⭐ - {{ end }} - {{ if lt .Params.rating 5 }} - {{ range seq $.Params.rating 4 }} - ⭐ - {{ end }} - {{ end }} - {{ end }}
{{- .Content -}} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 37b2651..dbd51c9 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -5,6 +5,7 @@ + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 0cf4f72..830b1d2 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,4 +1,4 @@
-

CaAlden: Films

+

CaAlden: Films

{{- partial "nav.html" . -}}
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 8b902ea..87f5d47 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -3,7 +3,7 @@
  • about
    • -
  • +
  • home
    • diff --git a/layouts/partials/quicklook.html b/layouts/partials/quicklook.html new file mode 100644 index 0000000..ececa36 --- /dev/null +++ b/layouts/partials/quicklook.html @@ -0,0 +1,26 @@ +
    +
    +

    + Quick Look +

    +
    +
    +
    + Rating + {{- .Params.rating -}}/5 +
    +
    + Genre +
    + {{ range $name := .Params.genres }} + {{$name}} + {{end}} +
    +
    +
    +

    + {{.Params.quick_look}} +

    +
    + + diff --git a/layouts/reviews/single.html b/layouts/reviews/single.html new file mode 100644 index 0000000..b4ea861 --- /dev/null +++ b/layouts/reviews/single.html @@ -0,0 +1,25 @@ +{{ define "main" }} +
    +
    +

    {{- .Title -}}

    + {{ if .Params.image }} + Poster + {{ end }} + {{ partial "quicklook.html" . }} + {{ if .Params.rating }} + Rating + {{ range seq $.Params.rating }} + ⭐ + {{ end }} + {{ if lt .Params.rating 5 }} + {{ range seq $.Params.rating 4 }} + ⭐ + {{ end }} + {{ end }} + {{ end }} +
    +
    + {{- .Content -}} +
    +
    +{{ end }} diff --git a/static/quick_look.css b/static/quick_look.css new file mode 100644 index 0000000..33e2dd3 --- /dev/null +++ b/static/quick_look.css @@ -0,0 +1,38 @@ +.quicklook { + max-width: 600px; + flex-basis: 600px; + border-radius: 16px; + background: #F4C2CD; + color: #702E2E; + padding: 20px; + display: flex; + flex-direction: column; + gap: 20px; +} + +.quicklook-emphasized-color { + color: #3D292D !important ; +} + +.quicklook-details { + display: flex; + gap: 30px; +} + +.quicklook-rating { + display: flex; + flex-direction: column; + flex-grow: 0; +} + +.quicklook-genre-section { + display: flex; + flex-direction: column; + align-items: flex-start; + flex-grow: 1; +} + +.quicklook-genre { + text-transform: uppercase; + font-weight: bold; +} diff --git a/static/style.css b/static/style.css index b2c3567..27d210a 100644 --- a/static/style.css +++ b/static/style.css @@ -1,45 +1,46 @@ :root { --title-font-family: 'Merriweather', serif; --title-font-weight: 700; - --title-font-line-height: 80px; + --title-font-line-height: 1.25; --title-font-size: 64px; --title-font-letter-spacing: -0.04em; --h2-font-family: 'Merriweather', serif; --h2-font-weight: 700; - --h2-font-line-height: 50px; + --h2-font-line-height: 1.2; --h2-font-size: 40px; --h2-font-letter-spacing: -0.02em; --subtitle-font-family: 'Rufina', serif; --subtitle-font-weight: 700; - --subtitle-font-line-height: 30px; + --subtitle-font-line-height: 1.25; --subtitle-font-size: 24px; --subtitle-font-letter-spacing: -0.02em; --body-font-family: 'Inika', serif; --body-font-weight: 400; - --body-font-line-height: 26px; + --body-font-line-height: 1.625; --body-font-size: 16px; --body-font-letter-spacing: 0.04em; --caption-font-family: 'Inika', serif; --caption-font-weight: 400; - --caption-font-line-height: 12px; + --caption-font-line-height: 1.2; --caption-font-size: 10px; --caption-font-letter-spacing: 0.05em; --button-font-family: 'Inika', serif; --button-font-weight: 700; - --button-font-line-height: 26px; + --button-font-line-height: 1.625; --button-primary-font-size: 16px; --button-large-font-size: 24px; --button-font-letter-spacing: 0.1em; --numbers-font-family: 'Monaco', sans-serif; --numbers-font-weight: 400; - --numbers-font-line-height: 12px; + --numbers-font-line-height: 1; --numbers-font-size: 16px; + --numbers-font-size-large: 40px; --numbers-font-letter-spacing: -0.02em; --color-primary: #FFFFFF; @@ -53,6 +54,8 @@ * { box-sizing: border-box; + padding: 0; + margin: 0; } html, body, p, section, header, article { font-family: var(--body-font-family); @@ -60,13 +63,23 @@ html, body, p, section, header, article { line-height: var(--body-font-line-height); letter-spacing: var(--body-font-letter-spacing); } + +p { + text-align: justify; +} + html, body { background: var(--color-light-background); color: var(--color-secondary); - width: 100vw; min-height: 100vh; - padding: 0; - margin: 0; +} + +main { + margin: auto; + display: flex; + flex-direction: column; + justify-content: center; + max-width: calc(70ch + 60px); } .title, h1 { @@ -75,8 +88,6 @@ html, body { line-height: var(--title-font-line-height); font-size: var(--title-font-size); letter-spacing: var(--title-font-letter-spacing); - margin: 0; - padding: 0; } .h2, h2 { font-family: var(--h2-font-family); @@ -84,8 +95,6 @@ html, body { line-height: var(--h2-font-line-height); font-size: var(--h2-font-size); letter-spacing: var(--h2-font-letter-spacing); - margin: 0; - padding: 0; } .subtitle, h3, h4, h5, h6 { font-family: var(--subtitle-font-family); @@ -93,8 +102,6 @@ html, body { line-height: var(--subtitle-font-line-height); font-size: var(--subtitle-font-size); letter-spacing: var(--subtitle-font-letter-spacing); - margin: 0; - padding: 0; } .caption { font-family: var(--caption-font-family); @@ -102,6 +109,7 @@ html, body { line-height: var(--caption-font-line-height); font-size: var(--caption-font-size); letter-spacing: var(--caption-font-letter-spacing); + text-transform: uppercase; } .numbers { font-family: var(--numbers-font-family); @@ -110,11 +118,16 @@ html, body { font-size: var(--numbers-font-size); letter-spacing: var(--numbers-font-letter-spacing); } +.numbers-large { + font-family: var(--numbers-font-family); + font-weight: var(--numbers-font-weight); + line-height: var(--numbers-font-line-height); + font-size: var(--numbers-font-size-large); + letter-spacing: var(--numbers-font-letter-spacing); +} button, .button { border: none; - margin: 0; - padding: 0; width: auto; overflow: visible; text-align: inherit; @@ -161,16 +174,9 @@ a:hover { } .navbar-list { list-style: none; - margin: 0; - padding: 0; display: flex; gap: 30px; } -.navbar-item { - padding: 0; - margin: 0; -} - .header { display: flex; flex-wrap: wrap; @@ -205,3 +211,7 @@ a:hover { .p1 { padding: 10px; } + +.review { + max-width: 800px; +}