From 9931edd601fc219c92d05d546a48cd8e019334e0 Mon Sep 17 00:00:00 2001 From: Campbell Alden Date: Sun, 21 Aug 2022 10:32:09 +0900 Subject: [PATCH] Add card styles and some more information to fill them out --- .gitignore | 1 + archetypes/reviews.md | 2 ++ content/reviews/the-french-dispatch.md | 2 ++ docs/style.css | 7 ++++ layouts/_default/single.html | 3 ++ layouts/_default/summary.html | 28 +++++++++++---- layouts/index.html | 8 +++-- layouts/partials/footer.html | 1 + layouts/partials/head.html | 1 + layouts/partials/header.html | 2 +- layouts/partials/nav.html | 4 +-- static/card.css | 46 +++++++++++++++++++++++++ static/imdb-logo-small.png | Bin 0 -> 1541 bytes static/style.css | 26 +++++++++++++- 14 files changed, 117 insertions(+), 14 deletions(-) create mode 100644 static/card.css create mode 100644 static/imdb-logo-small.png diff --git a/.gitignore b/.gitignore index 2a8645f..2e8c801 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ .hugo_build.lock +scratch/ diff --git a/archetypes/reviews.md b/archetypes/reviews.md index 57fe09d..afd37ba 100644 --- a/archetypes/reviews.md +++ b/archetypes/reviews.md @@ -3,5 +3,7 @@ title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} draft: true rating: 5 +imdb: 0.0 +image: https://m.media-amazon.com/images/M/MV5BNmQxZTNiODYtNzBhYy00MzVlLWJlN2UtNTc4YWZjMDIwMmEzXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SX300.jpg --- diff --git a/content/reviews/the-french-dispatch.md b/content/reviews/the-french-dispatch.md index 7c349e8..d4d8bcb 100644 --- a/content/reviews/the-french-dispatch.md +++ b/content/reviews/the-french-dispatch.md @@ -3,6 +3,8 @@ title: "The French Dispatch" date: 2022-08-17T17:18:04+09:00 draft: false rating: 5 +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" --- diff --git a/docs/style.css b/docs/style.css index a880621..a3b6844 100644 --- a/docs/style.css +++ b/docs/style.css @@ -181,3 +181,10 @@ a:hover { background: var(--color-secondary); color: var(--color-primary); } + +.s1 { + gap: 10px; +} +.s2 { + gap: 20px; +} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 23bc5e7..bb54bb3 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -2,6 +2,9 @@

{{- .Title -}}

+ {{ if .Params.image }} + Poster + {{ end }} {{ if .Params.rating }} Rating {{ range seq $.Params.rating }} diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html index bfc259d..53c222d 100644 --- a/layouts/_default/summary.html +++ b/layouts/_default/summary.html @@ -1,12 +1,26 @@ -
-
-

- - {{ .Title }} - -

+
+
+ +
+
+
+

+ {{ .Title }} + +

+
{{ .Summary }}
+
+
+ + {{- .Params.imdb -}} +
+
diff --git a/layouts/index.html b/layouts/index.html index a38c1d0..edfacd7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -2,9 +2,11 @@
{{ .Content }}
-
- {{ range first 10 .Site.RegularPages }} - {{ .Render "summary"}} +
+ {{ range (where .Site.Pages "Section" "reviews") }} + {{ range .Pages }} + {{ .Render "summary" }} + {{ end }} {{ end }}
{{end}} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 5e0ea02..30cf4cc 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,2 +1,3 @@
+ {{ .Site.Copyright }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 43bbe5b..3dad807 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -3,6 +3,7 @@ + diff --git a/layouts/partials/header.html b/layouts/partials/header.html index dbe9f2d..0cf4f72 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,4 +1,4 @@

CaAlden: Films

- {{- partial "nav.html" -}} + {{- partial "nav.html" . -}}
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index c193074..8b902ea 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -1,10 +1,10 @@ diff --git a/static/card.css b/static/card.css new file mode 100644 index 0000000..7a2a259 --- /dev/null +++ b/static/card.css @@ -0,0 +1,46 @@ +.card { + position: relative; + display: flex; + flex-direction: column; + border-radius: 10px; + background: var(--color-primary); + aspect-ratio: 2 / 3; + max-width: 250px; + max-height: 380px; + padding: 10px; +} + +.card .card-content { + flex-basis: 0.0001%; +} +.card .card-image { + flex-basis: 99.9999%; +} + +.card:hover .card-content { + flex-basis: 50%; + padding-top: 10px; +} +.card:hover .card-image { + flex-basis: 50%; +} + +.card-content { + overflow: hidden; + display: flex; + flex-direction: column; + gap: 10px; + justify-content: space-between; + transition: flex-basis 250ms ease-out; +} + +.card-image { + transition: flex-basis 250ms ease-out; + flex-grow: 1; + flex-basis: 100%; + object-fit: cover; + display: flex; + overflow: hidden; + border-radius: 8px; +} + diff --git a/static/imdb-logo-small.png b/static/imdb-logo-small.png new file mode 100644 index 0000000000000000000000000000000000000000..ba13906735a65fae6afdde74e69224185289879a GIT binary patch literal 1541 zcmeAS@N?(olHy`uVBq!ia0y~yU`PRB4rT@h26vm(GzJC+mUKs7M+SzC{oH>NSs54@ z6p}rHd>I(3)EF2VS{N99F)%PRykKA`HDF+PmB7GYHG_dcykO3*KpO@ICffj?5LX5U zhG#qFC_#tjNUrJ>+c!h<_yVcxYh`v%leoWG_R&_^HCgpPqCp+X$ zE|iM#;$dK5@Ur2`kK&(JDWa>wc6zbY)zvcGoQy^q>?N`MXO~Ks#_{Jz@)gDKKiw%O zz{|wR&e)MB6yU(c$jC6QLPTGUO+v{BW4(D?%{kY0i~Bop-QFO3a*@=9<~YA-1+#Y*Lx9hZU!-A;*e#v2)9$H5FMOZIkt~=E@4?-e%_0&*&&_Q>iv8Sp8&*UW-8V^^m%jpp|zyJRj$r@G75l=r)6gy3BLu^>Quy z85IN?Ib0N&1Unp9lmr_8+&;n39>&Z#r_W>O6Wit&X>2^lrdXe9zrd_hyT=VV|IvU1qY0dJ%J5!JF7e7)g zHay$y`b4MeV~Hm!+S z+OzuXgsQF!(OO43)&#Px|Fv*Us!PV&)5*?W*R-#1bL^Csoamc6`|DrPoDw|Ct&hki>6{4PAmS$bYqFjKlT3`b0Lxfhl_&FiTKE8$LH!-(UHO`RcXW+S^uNtYlzd5G!$wC~+=IO)SaG&r=A= z%uQu5u+TR!)i*SIHRY@$0|SE$NJVgdT1k0gQ7VIDN`6wRf?H-$YI%N9cCmtUu-S_} Tn|c@+7#KWV{an^LB{Ts5_4P@0 literal 0 HcmV?d00001 diff --git a/static/style.css b/static/style.css index a880621..1bcfd6d 100644 --- a/static/style.css +++ b/static/style.css @@ -122,7 +122,6 @@ button, .button { background: transparent; /* inherit font & color from ancestor */ - color: inherit; font: inherit; /* Corrects font smoothing for webkit */ @@ -181,3 +180,28 @@ a:hover { background: var(--color-secondary); color: var(--color-primary); } + +.cluster { + display: flex; +} +.spacing\:between { + justify-content: space-between; +} +.align\:center { + align-items: center; +} + +.icon { + width: 24px; + height: 24px; + border-radius: 4px; + overflow: hidden; +} + +.s1 { + gap: 10px; +} + +.p1 { + padding: 10px; +}