4 files changed, 42 insertions, 36 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 5d3e4a5..f91b98e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -29,52 +29,71 @@ img {
 	height: auto;
 }
 
-/* Movie list */
+/* Row tables */
 
-.movies {
-	--movie-cols: 1rem 1fr 12rem 4.5rem 5rem;
+.rt {
 	margin: 1rem 0;
 }
 
-.movies-head,
-.movie-plain,
-.movie > summary {
+.rt-head,
+.rt-plain,
+.rt-item > summary {
 	display: grid;
-	grid-template-columns: var(--movie-cols);
+	grid-template-columns: var(--rt-cols);
 	align-items: baseline;
 	gap: 0 0.5rem;
 	padding: 0.3rem 0;
 	border-bottom: 1px solid #e2e2dd;
 }
 
-.movies-head {
+.rt-head {
 	font-weight: bold;
 	border-bottom: 2px solid #cccccc;
 }
 
-.movie > summary {
+.rt-item > summary {
 	cursor: pointer;
 	list-style: none;
 }
 
-.movie > summary::-webkit-details-marker {
+.rt-item > summary::-webkit-details-marker {
 	display: none;
 }
 
-.movie > summary:hover {
+.rt-item > summary:hover {
 	background: #f7f7f7;
 }
 
-.movie-caret {
+.rt-caret {
 	display: inline-block;
 	color: #888888;
 	transition: transform 0.1s;
 }
 
-.movie[open] > summary .movie-caret {
+.rt-item[open] > summary .rt-caret {
 	transform: rotate(90deg);
 }
 
+.rt-note {
+	margin: 0 0 0.5rem 1.5rem;
+	padding: 0.5rem 0.75rem;
+	border-left: 2px solid #d5d5cf;
+}
+
+.rt-note > :first-child {
+	margin-top: 0;
+}
+
+.rt-note > :last-child {
+	margin-bottom: 0;
+}
+
+/* Movie list */
+
+.movies {
+	--rt-cols: 1rem 1fr 12rem 4.5rem 5rem;
+}
+
 .movie-date,
 .movie-rating-cell {
 	white-space: nowrap;
@@ -103,26 +122,12 @@ img {
 	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;
+		--rt-cols: 1rem 1fr 5rem;
 	}
 
-	.movies-head {
+	.rt-head {
 		display: none;
 	}
 
diff --git a/content/_index.md b/content/_index.md
index 0049f79..1d080e9 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,3 +1,4 @@
-Hello. Right now this website hosts some notes. I will add more stuff later.
+Hello. Right now this website hosts some notes and a list of movies I have seen.
+I will add more stuff later.
 
 [Movie list](/movies/)
diff --git a/layouts/_shortcodes/movie.html b/layouts/_shortcodes/movie.html
index 58ac53b..53d8363 100644
--- a/layouts/_shortcodes/movie.html
+++ b/layouts/_shortcodes/movie.html
@@ -6,18 +6,18 @@
 	{{- $rating = printf `<span class="movie-rating" role="img" aria-label="%v out of 5" title="%v / 5"><span class="movie-rating-fill" style="width:%v%%"></span></span>` $r $r $pct | safeHTML -}}
 {{- end -}}
 {{- if $review -}}
-<details class="movie">
+<details class="rt-item movie">
 	<summary>
-		<span class="movie-caret">&#9656;</span>
+		<span class="rt-caret">&#9656;</span>
 		<span class="movie-title">{{ .Get "title" }}</span>
 		<span class="movie-director">{{ .Get "director" }}</span>
 		<span class="movie-date">{{ .Get "released" }}</span>
 		<span class="movie-rating-cell">{{ $rating }}</span>
 	</summary>
-	<div class="movie-review">{{ $review | markdownify }}</div>
+	<div class="rt-note">{{ $review | markdownify }}</div>
 </details>
 {{- else -}}
-<div class="movie movie-plain">
+<div class="rt-plain movie">
 	<span></span>
 	<span class="movie-title">{{ .Get "title" }}</span>
 	<span class="movie-director">{{ .Get "director" }}</span>
diff --git a/layouts/_shortcodes/movies.html b/layouts/_shortcodes/movies.html
index 51d95f7..6548e4c 100644
--- a/layouts/_shortcodes/movies.html
+++ b/layouts/_shortcodes/movies.html
@@ -1,5 +1,5 @@
-<div class="movies">
-	<div class="movies-head">
+<div class="rt movies">
+	<div class="rt-head">
 		<span></span>
 		<span>Title</span>
 		<span class="movie-director">Director(s)</span>