commit
c3e34bb48f
15 changed files with 613 additions and 0 deletions
@ -0,0 +1,2 @@ |
|||||
|
+++ |
||||
|
+++ |
||||
@ -0,0 +1,2 @@ |
|||||
|
{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}} |
||||
|
<img width = "{{- $image.Width -}}" height = "{{- $image.Height -}}" alt = "{{- .PlainText | htmlUnescape -}}" src = "{{- $image.RelPermalink -}}"> |
||||
@ -0,0 +1,30 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="{{ .Site.LanguageCode | default "en" }}"> |
||||
|
{{- partial "head.html" . -}} |
||||
|
<body> |
||||
|
{{- partial "header.html" . -}} |
||||
|
<div id="content"> |
||||
|
{{- block "main" . }}{{- end }} |
||||
|
</div> |
||||
|
{{- partial "footer.html" . -}} |
||||
|
</body> |
||||
|
<script> |
||||
|
function toggleDescription(id){ |
||||
|
document.querySelector(id).classList.toggle("collapsed"); |
||||
|
} |
||||
|
function loadPlayer(id, embed_path){ |
||||
|
media = document.querySelector('#media-'+ id) |
||||
|
|
||||
|
var iframe = document.createElement('iframe'); |
||||
|
iframe.src = embed_path + '?autoplay=1&title=0'; |
||||
|
iframe.width = 560; |
||||
|
iframe.height = 315; |
||||
|
iframe.frameBorder = 0; |
||||
|
iframe.sandbox = "allow-same-origin allow-scripts allow-popups" ; |
||||
|
media.appendChild(iframe); |
||||
|
document.querySelector('#thumb-'+ id).remove(); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
</html> |
||||
|
|
||||
@ -0,0 +1,23 @@ |
|||||
|
{{ define "main" }} |
||||
|
<section class="entries"> |
||||
|
<div class="h-feed"> |
||||
|
{{ range .Pages }} |
||||
|
<div class='card'> |
||||
|
<article class="h-entry"> |
||||
|
<header> |
||||
|
<h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2> |
||||
|
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time> |
||||
|
</header> |
||||
|
{{ if .Truncated }} |
||||
|
<div class="p-summary truncated"> |
||||
|
{{ .Summary }} |
||||
|
<p><a href="{{ .RelPermalink }}">Read More…</a></p> |
||||
|
{{ else }} |
||||
|
<div class="p-summary"> |
||||
|
{{ end }} |
||||
|
</div> |
||||
|
</article> |
||||
|
</div> |
||||
|
{{ end }} |
||||
|
</section> |
||||
|
{{ end }} |
||||
@ -0,0 +1,16 @@ |
|||||
|
{{ define "main" }} |
||||
|
<main class="main"> |
||||
|
<article class="h-entry"> |
||||
|
<header> |
||||
|
<h1 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h1> |
||||
|
<p> |
||||
|
Published by <a class="p-author" href="/about">{{ $.Param "author" }}</a> |
||||
|
on <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time> |
||||
|
</p> |
||||
|
|
||||
|
<div class="e-content"> |
||||
|
{{ .Content }} |
||||
|
</div> |
||||
|
</article> |
||||
|
</main> |
||||
|
{{ end }} |
||||
@ -0,0 +1,26 @@ |
|||||
|
{{ define "main" }} |
||||
|
<section class='entries'> |
||||
|
<div class="h-feed"> |
||||
|
{{ range (.Paginator 10).Pages }} |
||||
|
|
||||
|
|
||||
|
{{ if in .Params.category "tv"}} |
||||
|
|
||||
|
{{- partial "video_box.html" . -}} |
||||
|
|
||||
|
{{ else }} |
||||
|
|
||||
|
{{- partial "card.html" . -}} |
||||
|
|
||||
|
{{ end }} |
||||
|
|
||||
|
{{ end }} |
||||
|
</div> |
||||
|
|
||||
|
<nav class="pagination"> |
||||
|
{{ template "_internal/pagination.html" . }} |
||||
|
</nav> |
||||
|
|
||||
|
</main> |
||||
|
{{ end }} |
||||
|
|
||||
@ -0,0 +1,34 @@ |
|||||
|
<div class='card'> |
||||
|
<article class="h-entry"> |
||||
|
<header> |
||||
|
<h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2> |
||||
|
<div class="header-metadata"> |
||||
|
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time> |
||||
|
{{ if .Params.author }} |
||||
|
<div class='author'>{{.Params.author}}</div> |
||||
|
{{ end }} |
||||
|
</div> |
||||
|
</header> |
||||
|
|
||||
|
{{ $img := (.Resources.ByType "image").GetMatch "*featured*" }} |
||||
|
|
||||
|
<div class="p-summary {{if .Truncated}} truncated {{end}} {{if $img}} image {{end}}" > |
||||
|
<div class="summary-text"> |
||||
|
{{ .Summary }} |
||||
|
</div> |
||||
|
{{ with $img }} |
||||
|
{{ $thumb := .Resize "400x300"}} |
||||
|
<div class="summary-image"> |
||||
|
<img src="{{ $thumb.Permalink }}" alt="{{ .Title }}"> |
||||
|
</div> |
||||
|
{{ end }} |
||||
|
</div> |
||||
|
{{ if .Truncated }} |
||||
|
<footer class='post-footer'> |
||||
|
<div class='read-more'><a href="{{ .RelPermalink }}">Read More…</a></div> |
||||
|
<div class='footer-filler'></div> |
||||
|
</footer> |
||||
|
{{ end }} |
||||
|
|
||||
|
</article> |
||||
|
</div> |
||||
@ -0,0 +1,5 @@ |
|||||
|
<footer class="bar"> |
||||
|
<div> |
||||
|
Imprint - Privacy Policy - Copyright |
||||
|
</div> |
||||
|
</footer> |
||||
@ -0,0 +1,25 @@ |
|||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
|
|
||||
|
<title>{{ if .IsHome }} {{ .Site.Title }} {{ else }} {{ .Title }} | {{ .Site.Title }} {{ end }}</title> |
||||
|
|
||||
|
{{- if or .Description .Site.Params.description }} |
||||
|
<meta name="description" content="{{ .Description | default .Site.Params.description }}"> |
||||
|
{{- end }} |
||||
|
{{- if or .Description .Site.Params.description }} |
||||
|
<meta name="author" content='{{ .Site.Params.author }}'> |
||||
|
{{- end }} |
||||
|
|
||||
|
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css"> |
||||
|
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/video-box.css"> |
||||
|
|
||||
|
<link rel="canonical" href="{{ .Permalink }}"> |
||||
|
{{ with .Site.Params.favicon }} |
||||
|
<link rel="icon" type="image/ico" href="{{ . | absURL }}"> |
||||
|
{{ end }} |
||||
|
|
||||
|
{{ with .OutputFormats.Get "rss" -}} |
||||
|
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} |
||||
|
{{ end -}} |
||||
|
</head> |
||||
@ -0,0 +1,12 @@ |
|||||
|
<header class="bar" id="top-menu"> |
||||
|
<h1 class="logo"><a href="/"><img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}"/></a></h1> |
||||
|
<nav class="menu"> |
||||
|
<ul> |
||||
|
{{ with .Site.Menus.main }} |
||||
|
{{ range . }} |
||||
|
<li class="menu-nav-item"> <a href="{{ .URL | relURL }}" title="{{ .Title }}">{{ .Name }}</a> |
||||
|
{{ end }} |
||||
|
{{ end }} |
||||
|
</ul> |
||||
|
</nav> |
||||
|
</header> |
||||
@ -0,0 +1,29 @@ |
|||||
|
<div class='video-box'> |
||||
|
<div class='media' id='media-{{ .Params.uuid }}'> |
||||
|
<span class='video-thumbnail' id='thumb-{{ .Params.uuid }}' |
||||
|
href="https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}" |
||||
|
onclick="loadPlayer( |
||||
|
'{{ .Params.uuid }}', |
||||
|
'https://tv.lumbung.space/videos/embed/{{ .Params.uuid }}' |
||||
|
)"> |
||||
|
<img src="{{.Site.BaseURL}}{{ .File.Dir }}{{ .Params.preview_image }}"> |
||||
|
|
||||
|
<div class="video-thumbnail-duration-overlay">{{.Params.video_duration}}</div> |
||||
|
<div class="play-overlay"> |
||||
|
<div class="play-icon"></div> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class='metadata'> |
||||
|
<div class='title'>{{ .Title }}</div> |
||||
|
<span class="description collapsed" id='vid-{{ .Params.uuid }}'> {{ .Content }}</span> |
||||
|
<div class='footer'> |
||||
|
<span class='channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></span> |
||||
|
|
||||
|
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-{{ .Params.uuid }}')"> <a href='#'> </a></span> |
||||
|
|
||||
|
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
@ -0,0 +1,216 @@ |
|||||
|
/*nice body-border color combos |
||||
|
|
||||
|
antiquewhite - burlywood |
||||
|
peachpuff - tomato |
||||
|
lightpink - crimson |
||||
|
lightblue - cornflowerblue |
||||
|
palegreen - lightseagreen |
||||
|
|
||||
|
fonts |
||||
|
bungeeshade |
||||
|
allerta |
||||
|
*/ |
||||
|
|
||||
|
:root { |
||||
|
--border-color: tomato; |
||||
|
} |
||||
|
|
||||
|
/*Main Stuff*/ |
||||
|
body { |
||||
|
font-size:16px; |
||||
|
font-family: sans-serif; |
||||
|
color: maroon; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: #1B4C8A; |
||||
|
} |
||||
|
|
||||
|
* { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
#content { |
||||
|
margin: 2em auto; |
||||
|
max-width: 80%; |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.card{ |
||||
|
|
||||
|
border: 2px solid var(--border-color); |
||||
|
box-shadow:1em 1em 0 #d2d1c8; |
||||
|
background-color: #fff09d; |
||||
|
max-width: 600px; |
||||
|
margin-bottom: 2em; |
||||
|
flex: auto; |
||||
|
margin: 0 3em 3em 0; |
||||
|
align-self: start; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.card{ |
||||
|
background-color: peachpuff; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.card:nth-child(even){ |
||||
|
transform: rotate(-1deg); |
||||
|
} |
||||
|
|
||||
|
.card:nth-child(odd){ |
||||
|
transform: rotate(1deg); |
||||
|
} |
||||
|
|
||||
|
.card:nth-child(5){ |
||||
|
transform: rotate(2deg); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.video.box{ |
||||
|
margin-top:3em; |
||||
|
} |
||||
|
|
||||
|
.bar{ |
||||
|
border: 2px solid var(--border-color); |
||||
|
box-shadow: 0.6em 0.6em 0 #d2d1c8; |
||||
|
margin-bottom: 2em; |
||||
|
margin-top:3em; |
||||
|
display: inline-block; |
||||
|
background-color: #fff09d; |
||||
|
} |
||||
|
|
||||
|
.h-feed{ |
||||
|
display: flex; |
||||
|
flex-flow: row wrap; |
||||
|
width: 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/* base header & menu */ |
||||
|
|
||||
|
#top-menu{ |
||||
|
transform: rotate(-3deg); |
||||
|
margin-left: 2em; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
margin-left: 0.5em; |
||||
|
margin-right: 0.5em; |
||||
|
margin-top: 0.2em; |
||||
|
margin-bottom: 0.2em; |
||||
|
} |
||||
|
|
||||
|
.logo a { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
.menu { |
||||
|
border-top: 2px solid var(--border-color); |
||||
|
margin: 0px; |
||||
|
padding: 0px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.menu ul{ |
||||
|
list-style-type: none; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.menu-nav-item { |
||||
|
border-right: 2px solid var(--border-color); |
||||
|
padding: 0.5em; |
||||
|
} |
||||
|
|
||||
|
/*Article Summary Cards*/ |
||||
|
|
||||
|
.h-entry{ |
||||
|
} |
||||
|
|
||||
|
.h-entry header { |
||||
|
display: flex; |
||||
|
border-bottom: 2px solid var(--border-color); |
||||
|
} |
||||
|
|
||||
|
.h-entry header h2{ |
||||
|
padding: 0.2em; |
||||
|
margin: 0; |
||||
|
padding-right: 0.3em; |
||||
|
padding-left: 0.3em; |
||||
|
border-right: 2px solid var(--border-color); |
||||
|
} |
||||
|
|
||||
|
.h-entry header h2:hover{ |
||||
|
box-shadow: inset 4px 4px 0px tomato; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.h-entry header h2 a { |
||||
|
text-decoration: none; |
||||
|
color: var(--border-color); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.h-entry header .header-metadata{ |
||||
|
margin: 0; |
||||
|
padding: 0.5em; |
||||
|
display: flex; |
||||
|
flex-flow: column wrap; |
||||
|
font-size: 0.9em; |
||||
|
align-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.p-summary.truncated.image { |
||||
|
display: flex; |
||||
|
flex-direction: row-reverse; |
||||
|
} |
||||
|
|
||||
|
.p-summary.truncated { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.summary-text { |
||||
|
flex: 1; |
||||
|
padding: 1em; |
||||
|
max-height: 300px; |
||||
|
min-width: 20ch; |
||||
|
text-overflow: ellipsis; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.summary-image > img { |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
max-width: 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.summary-image{ |
||||
|
border-right: 2px solid var(--border-color); |
||||
|
} |
||||
|
|
||||
|
footer.post-footer { |
||||
|
display: flex; |
||||
|
flex-flow: row-reverse; |
||||
|
} |
||||
|
|
||||
|
.footer-filler{ |
||||
|
border-top: 2px solid var(--border-color); |
||||
|
flex-grow: 1; |
||||
|
} |
||||
|
.read-more { |
||||
|
border-top: 2px solid var(--border-color); |
||||
|
border-left: 2px solid var(--border-color); |
||||
|
align-content: flex-end; |
||||
|
padding: 0.2em 1em 0.2em 1em; |
||||
|
font-size: 0.9rem; |
||||
|
} |
||||
|
|
||||
|
/* footer */ |
||||
|
|
||||
|
footer.bar { |
||||
|
margin-top:0; |
||||
|
} |
||||
@ -0,0 +1,172 @@ |
|||||
|
:root { |
||||
|
--video-border-color: burlywood; |
||||
|
--video-background-color: antiquewhite; |
||||
|
} |
||||
|
.video-box { |
||||
|
border:2px solid var(--video-border-color); |
||||
|
max-width:560px; |
||||
|
margin:auto; |
||||
|
box-shadow:1em 1em 0 #d2d1c8; |
||||
|
margin-bottom: 2em; |
||||
|
color: chocolate; |
||||
|
} |
||||
|
|
||||
|
.video-box:nth-child(even){ |
||||
|
transform: rotate(-1deg); |
||||
|
} |
||||
|
|
||||
|
.video-box:nth-child(odd){ |
||||
|
transform: rotate(1deg); |
||||
|
} |
||||
|
|
||||
|
.video-box:nth-child(5){ |
||||
|
transform: rotate(3deg); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.video-box img { |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
|
||||
|
.video-box .media { |
||||
|
line-height: 0; |
||||
|
} |
||||
|
|
||||
|
.metadata{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background-color: var(--video-background-color); |
||||
|
font-size:0.9rem; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.title{ |
||||
|
margin-top:0; |
||||
|
border-top: 2px solid var(--video-border-color); |
||||
|
padding:0.5em; |
||||
|
font-weight:700; |
||||
|
font-size:1.3rem; |
||||
|
} |
||||
|
|
||||
|
.footer{ |
||||
|
margin-top:0; |
||||
|
border-top: 2px solid var(--video-border-color); |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.channel{ |
||||
|
border-right: 2px solid var(--video-border-color); |
||||
|
padding-left: 1em; |
||||
|
padding-right: 1em; |
||||
|
padding-top: 0.2em; |
||||
|
display: inline-block; |
||||
|
padding-bottom: 0.2em; |
||||
|
} |
||||
|
|
||||
|
.date { |
||||
|
float:right; |
||||
|
border-left: 2px solid var(--video-border-color); |
||||
|
padding-left: 1em; |
||||
|
padding-right: 1em; |
||||
|
padding-top: 0.2em; |
||||
|
display: inline-block; |
||||
|
padding-bottom: 0.2em; |
||||
|
} |
||||
|
|
||||
|
.description{ |
||||
|
padding: 1em; |
||||
|
display: block; |
||||
|
/*transition: height 0.5s linear;*/ |
||||
|
overflow: hidden; |
||||
|
border-top: 2px solid var(--video-border-color); |
||||
|
} |
||||
|
|
||||
|
.collapsed { |
||||
|
border-top: 0px; |
||||
|
/*transform:scaleY(0);*/ |
||||
|
height: 0; |
||||
|
padding:0; |
||||
|
} |
||||
|
|
||||
|
.descr_button { |
||||
|
cursor: pointer; |
||||
|
flex-grow: 1; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.descr_button a { |
||||
|
color:inherit; |
||||
|
text-decoration: inherit; |
||||
|
} |
||||
|
|
||||
|
.descr_button a:before { |
||||
|
content:'↕'; |
||||
|
vertical-align: sub; |
||||
|
} |
||||
|
|
||||
|
.descr_button:hover { |
||||
|
box-shadow: inset 2px 2px 0px #95948c; |
||||
|
} |
||||
|
|
||||
|
.play-icon { |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%,-50%) scale(.5); |
||||
|
border-top: 13px solid transparent; |
||||
|
border-bottom: 13px solid transparent; |
||||
|
border-left: 18px solid hsla(0,0%,100%,.95); |
||||
|
} |
||||
|
|
||||
|
.video-thumbnail { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
} |
||||
|
.video-thumbnail { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
background-color: #ececec; |
||||
|
transition: filter .2s ease; |
||||
|
} |
||||
|
|
||||
|
.video-thumbnail-duration-overlay { |
||||
|
display: inline-block; |
||||
|
background-color: var(--video-background-color); |
||||
|
color: chocolate; |
||||
|
font-size: 14px; |
||||
|
line-height: 1.1; |
||||
|
z-index: 10; |
||||
|
position: absolute; |
||||
|
padding: 1px 3px 1px 3px; |
||||
|
right: 5px; |
||||
|
bottom: 5px; |
||||
|
border: 2px solid var(--video-border-color); |
||||
|
} |
||||
|
|
||||
|
.play-overlay { |
||||
|
transition: all .2s ease; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
width: inherit; |
||||
|
height: inherit; |
||||
|
opacity: 0; |
||||
|
background-color: rgba(0,0,0,.3); |
||||
|
} |
||||
|
|
||||
|
.video-thumbnail:hover { |
||||
|
text-decoration:none!important |
||||
|
} |
||||
|
.video-thumbnail:hover .play-overlay { |
||||
|
opacity:1 |
||||
|
} |
||||
|
.video-thumbnail:hover .play-overlay .play-icon { |
||||
|
transform:translate(-50%,-50%) scale(1) |
||||
|
} |
||||
@ -0,0 +1,21 @@ |
|||||
|
# theme.toml template for a Hugo theme |
||||
|
# See https://github.com/gohugoio/hugoThemes#themetoml for an example |
||||
|
|
||||
|
name = "Lumbung" |
||||
|
license = "AGPL3" |
||||
|
licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE" |
||||
|
description = "" |
||||
|
homepage = "http://example.com/" |
||||
|
tags = [] |
||||
|
features = [] |
||||
|
min_version = "0.41.0" |
||||
|
|
||||
|
[author] |
||||
|
name = "" |
||||
|
homepage = "" |
||||
|
|
||||
|
# If porting an existing theme |
||||
|
[original] |
||||
|
name = "" |
||||
|
homepage = "" |
||||
|
repo = "" |
||||
Loading…
Reference in new issue