From ed3eefdd0a72ef53f01ed7144860175ab755488d Mon Sep 17 00:00:00 2001
From: Aadil Ayub <aadilayub@protonmail.com>
Date: Thu, 6 Jan 2022 17:38:36 +0500
Subject: [PATCH] make video boxes closer to figma design

---
 .../layouts/partials/video_box.html           | 14 +++++---
 themes/lumbung-theme/static/css/main.css      |  1 -
 themes/lumbung-theme/static/css/video-box.css | 32 ++++++++++++++++---
 themes/lumbung-theme/static/img/dot.svg       |  4 +--
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/themes/lumbung-theme/layouts/partials/video_box.html b/themes/lumbung-theme/layouts/partials/video_box.html
index 711800e..508ad70 100644
--- a/themes/lumbung-theme/layouts/partials/video_box.html
+++ b/themes/lumbung-theme/layouts/partials/video_box.html
@@ -1,4 +1,5 @@
 <div class='video-box'>
+  <div class='video channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
   <div class='media' id='media-{{ .Params.uuid }}'>
     <span class='video-thumbnail' id='thumb-{{ .Params.uuid }}'
      href="https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}"
@@ -9,9 +10,9 @@
       <img src="{{.Site.BaseURL}}{{ .File.Dir }}{{ .Params.preview_image }}">
       
       {{ if .Params.is_live}}
-      <div class="video-thumbnail-duration-overlay">LIVE</div>
+        <div class="video-thumbnail-duration-overlay">LIVE</div>
       {{ else }}
-      <div class="video-thumbnail-duration-overlay">{{.Params.video_duration}}</div>
+        <div class="video-thumbnail-duration-overlay">{{.Params.video_duration}}</div>
       {{ end }}
 
       <div class="play-overlay">
@@ -21,10 +22,13 @@
   </div>
   <div class='video metadata'>
     <div class='title'>{{ .Title }}</div>
-    <div class='video channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
     <input class='descr_button' type='checkbox' id='toggle-{{ .Params.uuid }}'/>
-    <label class='video' for='toggle-{{ .Params.uuid }}'>↕</label>
-    <div class='video date'> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></div>
+    <label class='video' for='toggle-{{ .Params.uuid }}'>
+      <svg class="dot" width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" />
+      </svg>
+    </label>
+    <div class='video date' style="display: none;"> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></div>
     <div class="description video" id='vid-{{ .Params.uuid }}'> {{ .Content }}
       <ul>
     {{ range (.GetTerms "categories") }}
diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css
index 91daf0d..5812caf 100644
--- a/themes/lumbung-theme/static/css/main.css
+++ b/themes/lumbung-theme/static/css/main.css
@@ -542,7 +542,6 @@ input:checked + label +.calendar-location+.description {
 }
 
 .metadata label {
-  text-align: center;
   vertical-align: sub;
   flex-grow: 1;
   font-weight: normal;
diff --git a/themes/lumbung-theme/static/css/video-box.css b/themes/lumbung-theme/static/css/video-box.css
index afc37dd..28101e5 100644
--- a/themes/lumbung-theme/static/css/video-box.css
+++ b/themes/lumbung-theme/static/css/video-box.css
@@ -4,9 +4,9 @@
 }
 
 .video-box {
-  border:2px solid var(--tv-dark);
-  max-width:560px;
-  margin:auto;
+  border-top: 1px solid var(--tv-dark);
+  max-width: 560px;
+  margin: auto;
   margin-bottom: 2em;
   color: var(--tv-dark);
 }
@@ -124,8 +124,8 @@ input:checked + label + .video.date +.description {
 
 .video-thumbnail-duration-overlay {
   display: inline-block;
-  background-color: var(--tv-light);
-  color: chocolate;
+  background-color: var(--tv-dark);
+  color: white;
   font-size: 14px;
   line-height: 1.1;
   z-index: 10;
@@ -157,3 +157,25 @@ input:checked + label + .video.date +.description {
 .video-thumbnail:hover .play-overlay .play-icon {
   transform:translate(-50%,-50%) scale(1);
 }
+
+.video-box .dot {
+  fill: var(--tv-dark);
+}
+
+.video.channel a {
+  width: max-content;
+  background: var(--tv-dark);
+  padding: 0.5em;
+  position: relative;
+  bottom: 19px;
+  z-index: 1;
+  transform: rotate(2deg);
+  color: white;
+}
+
+.video.channel {
+  background: var(--tv-light);
+  display: flex;
+  justify-content: center;
+  border: none;
+}
\ No newline at end of file
diff --git a/themes/lumbung-theme/static/img/dot.svg b/themes/lumbung-theme/static/img/dot.svg
index ce8b2e2..2bb094a 100644
--- a/themes/lumbung-theme/static/img/dot.svg
+++ b/themes/lumbung-theme/static/img/dot.svg
@@ -1,3 +1,3 @@
-<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" fill="black"/>
+<svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" />
 </svg>