make video boxes closer to figma design

This commit is contained in:
2022-01-06 17:38:36 +05:00
parent 2442944d69
commit ed3eefdd0a
4 changed files with 38 additions and 13 deletions
themes/lumbung-theme

@ -1,4 +1,5 @@
<div class='video-box'> <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 }}'> <div class='media' id='media-{{ .Params.uuid }}'>
<span class='video-thumbnail' id='thumb-{{ .Params.uuid }}' <span class='video-thumbnail' id='thumb-{{ .Params.uuid }}'
href="https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}" href="https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}"
@ -21,10 +22,13 @@
</div> </div>
<div class='video metadata'> <div class='video metadata'>
<div class='title'>{{ .Title }}</div> <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 }}'/> <input class='descr_button' type='checkbox' id='toggle-{{ .Params.uuid }}'/>
<label class='video' for='toggle-{{ .Params.uuid }}'></label> <label class='video' for='toggle-{{ .Params.uuid }}'>
<div class='video date'> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></div> <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 }} <div class="description video" id='vid-{{ .Params.uuid }}'> {{ .Content }}
<ul> <ul>
{{ range (.GetTerms "categories") }} {{ range (.GetTerms "categories") }}

@ -542,7 +542,6 @@ input:checked + label +.calendar-location+.description {
} }
.metadata label { .metadata label {
text-align: center;
vertical-align: sub; vertical-align: sub;
flex-grow: 1; flex-grow: 1;
font-weight: normal; font-weight: normal;

@ -4,9 +4,9 @@
} }
.video-box { .video-box {
border:2px solid var(--tv-dark); border-top: 1px solid var(--tv-dark);
max-width:560px; max-width: 560px;
margin:auto; margin: auto;
margin-bottom: 2em; margin-bottom: 2em;
color: var(--tv-dark); color: var(--tv-dark);
} }
@ -124,8 +124,8 @@ input:checked + label + .video.date +.description {
.video-thumbnail-duration-overlay { .video-thumbnail-duration-overlay {
display: inline-block; display: inline-block;
background-color: var(--tv-light); background-color: var(--tv-dark);
color: chocolate; color: white;
font-size: 14px; font-size: 14px;
line-height: 1.1; line-height: 1.1;
z-index: 10; z-index: 10;
@ -157,3 +157,25 @@ input:checked + label + .video.date +.description {
.video-thumbnail:hover .play-overlay .play-icon { .video-thumbnail:hover .play-overlay .play-icon {
transform:translate(-50%,-50%) scale(1); 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;
}

@ -1,3 +1,3 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <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" fill="black"/> <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> </svg>

Before

(image error) Size: 765 B

After

(image error) Size: 745 B