From 6d7cd88cc1ec98717076f0f26406951efd8a3cf6 Mon Sep 17 00:00:00 2001 From: Campbell Alden Date: Sun, 21 Aug 2022 10:32:26 +0900 Subject: [PATCH] PUBLISH --- docs/about/index.html | 7 ++- docs/card.css | 46 ++++++++++++++++++ docs/imdb-logo-small.png | Bin 0 -> 1541 bytes docs/index.html | 51 +++++++++++--------- docs/reviews/index.html | 6 ++- docs/reviews/the-french-dispatch/index.html | 9 +++- docs/style.css | 23 +++++++-- 7 files changed, 110 insertions(+), 32 deletions(-) create mode 100644 docs/card.css create mode 100644 docs/imdb-logo-small.png diff --git a/docs/about/index.html b/docs/about/index.html index 7083296..6ddf1a8 100644 --- a/docs/about/index.html +++ b/docs/about/index.html @@ -4,6 +4,7 @@ + @@ -12,10 +13,10 @@

CaAlden: Films

@@ -25,6 +26,7 @@

About

+

This is a blog that I’ve wanted to start for a long time! I create it with two goals in mind.

@@ -40,6 +42,7 @@ For now, I hope you can find something useful or interesting in what I write.

+
diff --git a/docs/card.css b/docs/card.css new file mode 100644 index 0000000..7a2a259 --- /dev/null +++ b/docs/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/docs/imdb-logo-small.png b/docs/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/docs/index.html b/docs/index.html index 58ee7e2..4f51681 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,6 +5,7 @@ + @@ -13,10 +14,10 @@

CaAlden: Films

@@ -26,40 +27,44 @@

This site is under construction but will eventually host my movie comments and reviews!

-
+
-
-
-

- - The French Dispatch - -

+ +
+
+ +
+
+
+

+ The French Dispatch + +

+
A new film from Wes Anderson styled after a magazine
-
-
- - +
+
+ + 7.2 +
-
-

- - About - -

-
- This is a blog that I’ve wanted to start for a long time! I create it with two goals in mind. -First, I want to jot down and share my thoughts about movies as I have them. I normally have a pretty clear opinion and thoughts about movies after I watch them, but then cannot remember clearly all the little things I was thinking after about a week. I hope to use this blog to track those ideas while they’re still fresh. + + Read review +
+ + +
+
diff --git a/docs/reviews/index.html b/docs/reviews/index.html index 15099f4..b6caaa2 100644 --- a/docs/reviews/index.html +++ b/docs/reviews/index.html @@ -4,6 +4,7 @@ + @@ -12,10 +13,10 @@

CaAlden: Films

@@ -38,6 +39,7 @@
+
diff --git a/docs/reviews/the-french-dispatch/index.html b/docs/reviews/the-french-dispatch/index.html index f06d340..3b18602 100644 --- a/docs/reviews/the-french-dispatch/index.html +++ b/docs/reviews/the-french-dispatch/index.html @@ -4,6 +4,7 @@ + @@ -12,10 +13,10 @@

CaAlden: Films

@@ -25,6 +26,9 @@

The French Dispatch

+ Poster + + Rating ⭐ @@ -58,6 +62,7 @@ style. I think I might recommend watching another Wes Anderson film first and th diff --git a/docs/style.css b/docs/style.css index a3b6844..1bcfd6d 100644 --- a/docs/style.css +++ b/docs/style.css @@ -122,7 +122,6 @@ button, .button { background: transparent; /* inherit font & color from ancestor */ - color: inherit; font: inherit; /* Corrects font smoothing for webkit */ @@ -182,9 +181,27 @@ a:hover { 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; } -.s2 { - gap: 20px; + +.p1 { + padding: 10px; }