1 files changed, 120 insertions, 0 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 4671b37..5d3e4a5 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -28,3 +28,123 @@ img {
 	max-width: 100%;
 	height: auto;
 }
+
+/* Movie list */
+
+.movies {
+	--movie-cols: 1rem 1fr 12rem 4.5rem 5rem;
+	margin: 1rem 0;
+}
+
+.movies-head,
+.movie-plain,
+.movie > summary {
+	display: grid;
+	grid-template-columns: var(--movie-cols);
+	align-items: baseline;
+	gap: 0 0.5rem;
+	padding: 0.3rem 0;
+	border-bottom: 1px solid #e2e2dd;
+}
+
+.movies-head {
+	font-weight: bold;
+	border-bottom: 2px solid #cccccc;
+}
+
+.movie > summary {
+	cursor: pointer;
+	list-style: none;
+}
+
+.movie > summary::-webkit-details-marker {
+	display: none;
+}
+
+.movie > summary:hover {
+	background: #f7f7f7;
+}
+
+.movie-caret {
+	display: inline-block;
+	color: #888888;
+	transition: transform 0.1s;
+}
+
+.movie[open] > summary .movie-caret {
+	transform: rotate(90deg);
+}
+
+.movie-date,
+.movie-rating-cell {
+	white-space: nowrap;
+}
+
+.movie-rating {
+	position: relative;
+	display: inline-block;
+	color: #d0d0cb;
+	letter-spacing: 0.05em;
+}
+
+.movie-rating::before {
+	content: "\2605\2605\2605\2605\2605";
+}
+
+.movie-rating-fill {
+	position: absolute;
+	top: 0;
+	left: 0;
+	overflow: hidden;
+	color: #444444;
+}
+
+.movie-rating-fill::before {
+	content: "\2605\2605\2605\2605\2605";
+}
+
+.movie-review {
+	margin: 0 0 0.5rem 1.5rem;
+	padding: 0.5rem 0.75rem;
+	border-left: 2px solid #d5d5cf;
+}
+
+.movie-review > :first-child {
+	margin-top: 0;
+}
+
+.movie-review > :last-child {
+	margin-bottom: 0;
+}
+
+@media (max-width: 34rem) {
+	.movies {
+		--movie-cols: 1rem 1fr 5rem;
+	}
+
+	.movies-head {
+		display: none;
+	}
+
+	.movie-title {
+		grid-column: 2;
+		grid-row: 1;
+	}
+
+	.movie-director {
+		grid-column: 2;
+		grid-row: 2;
+		color: #666666;
+	}
+
+	.movie-date {
+		grid-column: 2;
+		grid-row: 3;
+		color: #666666;
+	}
+
+	.movie-rating-cell {
+		grid-column: 3;
+		grid-row: 1;
+	}
+}