feat(feed): add year header

believer · Sep 26, 2023 · 47d98a5 · 47d98a5
1 parent abb7a15
commit 47d98a5
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 2 deletions.
diff --git a/public/styles.76485b.css → public/styles.923eee.css b/public/styles.76485b.css → public/styles.923eee.css
@@ -538,10 +538,22 @@ video {
   position: static;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .relative {
   position: relative;
 }
 
+.right-8 {
+  right: 2rem;
+}
+
+.top-8 {
+  top: 2rem;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -566,6 +578,14 @@ video {
   display: grid;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -756,6 +776,62 @@ video {
   view-transition-name: var(--title-transition);
 }
 
+.text-stroke-3 {
+  -webkit-text-stroke: 2px;
+  -webkit-text-stroke-color: #fff;
+}
+
+.before\:relative::before {
+  content: var(--tw-content);
+  position: relative;
+}
+
+.before\:mb-4::before {
+  content: var(--tw-content);
+  margin-bottom: 1rem;
+}
+
+.before\:block::before {
+  content: var(--tw-content);
+  display: block;
+}
+
+.before\:text-4xl::before {
+  content: var(--tw-content);
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.before\:text-transparent::before {
+  content: var(--tw-content);
+  color: transparent;
+}
+
+.before\:opacity-10::before {
+  content: var(--tw-content);
+  opacity: 0.1;
+}
+
+.before\:content-\[attr\(data-year\)\]::before {
+  --tw-content: attr(data-year);
+  content: var(--tw-content);
+}
+
+.before\:content-none::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+
+.before\:\[-webkit-text-stroke-color\:_\#fff\]::before {
+  content: var(--tw-content);
+  -webkit-text-stroke-color: #fff;
+}
+
+.before\:\[-webkit-text-stroke-width\:_2px\]::before {
+  content: var(--tw-content);
+  -webkit-text-stroke-width: 2px;
+}
+
 .after\:h-\[0\.5px\]::after {
   content: var(--tw-content);
   height: 0.5px;
@@ -851,3 +927,48 @@ video {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+
+@media (min-width: 1024px) {
+  .lg\:before\:absolute::before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+
+  .lg\:before\:-left-52::before {
+    content: var(--tw-content);
+    left: -13rem;
+  }
+
+  .lg\:before\:-top-0::before {
+    content: var(--tw-content);
+    top: -0px;
+  }
+
+  .lg\:before\:mb-0::before {
+    content: var(--tw-content);
+    margin-bottom: 0px;
+  }
+
+  .lg\:before\:mt-0::before {
+    content: var(--tw-content);
+    margin-top: 0px;
+  }
+
+  .lg\:before\:text-7xl::before {
+    content: var(--tw-content);
+    font-size: 4.5rem;
+    line-height: 1;
+  }
+}
+
+.\[\&\:not\(\:first-child\)\]\:before\:mt-8:not(:first-child)::before {
+  content: var(--tw-content);
+  margin-top: 2rem;
+}
+
+@media (min-width: 1024px) {
+  .\[\&\:not\(\:first-child\)\]\:before\:lg\:-top-8:not(:first-child)::before {
+    content: var(--tw-content);
+    top: -2rem;
+  }
+}
diff --git a/views/index.html b/views/index.html
@@ -12,7 +12,15 @@
 
   <ol role="feed" class="relative flex flex-col gap-6 text-sm">
     {{ range .Movies }}
-    <li role="article">
+    <li role="article"
+        class="relative before:relative lg:before:absolute lg:before:-left-52 lg:before:-top-0 [&:not(:first-child)]:before:lg:-top-8 before:text-4xl before:mb-4 [&:not(:first-child)]:before:mt-8 lg:before:mb-0 lg:before:mt-0 before:block lg:before:text-7xl before:[-webkit-text-stroke-width:_2px] before:[-webkit-text-stroke-color:_#fff] before:opacity-10 before:text-transparent"
+        data-year="{{ .WatchedAt.Format "2006" }}"
+        _="on load if my @data-year is not equal to @data-year of previous <li/>
+           then add .{'before:content-[attr(data-year)]'}
+           else add .before:content-none
+           end
+          "
+      >
       <a
         href="/movies/{{ .ID }}"
         hx-swap="innerHTML transition:true"

diff --git a/views/layouts/main.html b/views/layouts/main.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <title>Movies</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link href="/public/styles.76485b.css" rel="stylesheet" />
+    <link href="/public/styles.923eee.css" rel="stylesheet" />
     <script
       src="https://unpkg.com/htmx.org@1.9.6"
       integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"