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 0000000..ba13906 Binary files /dev/null and b/docs/imdb-logo-small.png differ 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; }