make video boxes closer to figma design
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
2442944d69
commit
ed3eefdd0a
@ -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") }}
|
||||
|
@ -542,7 +542,6 @@ input:checked + label +.calendar-location+.description {
|
||||
}
|
||||
|
||||
.metadata label {
|
||||
text-align: center;
|
||||
vertical-align: sub;
|
||||
flex-grow: 1;
|
||||
font-weight: normal;
|
||||
|
@ -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;
|
||||
}
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 765 B After Width: | Height: | Size: 745 B |
Loading…
Reference in New Issue
Block a user