rra
/
lumbung-theme
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases Wiki Activity
Browse Source

initial commit - WIP

main
rra 3 years ago
commit
c3e34bb48f
15 changed files with 613 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      archetypes/default.md
  2. 0
      layouts/404.html
  3. 2
      layouts/_default/_markdown/render-image.html
  4. 30
      layouts/_default/baseof.html
  5. 23
      layouts/_default/list.html
  6. 16
      layouts/_default/single.html
  7. 26
      layouts/index.html
  8. 34
      layouts/partials/card.html
  9. 5
      layouts/partials/footer.html
  10. 25
      layouts/partials/head.html
  11. 12
      layouts/partials/header.html
  12. 29
      layouts/partials/video_box.html
  13. 216
      static/css/main.css
  14. 172
      static/css/video-box.css
  15. 21
      theme.toml

2
archetypes/default.md
View File

@ -0,0 +1,2 @@
+++
+++

0
layouts/404.html
View File

2
layouts/_default/_markdown/render-image.html
View File

@ -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 -}}">

30
layouts/_default/baseof.html
View File

@ -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>

23
layouts/_default/list.html
View File

@ -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 }}

16
layouts/_default/single.html
View File

@ -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 }}

26
layouts/index.html
View File

@ -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 }}

34
layouts/partials/card.html
View File

@ -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>

5
layouts/partials/footer.html
View File

@ -0,0 +1,5 @@
<footer class="bar">
<div>
Imprint - Privacy Policy - Copyright
</div>
</footer>

25
layouts/partials/head.html
View File

@ -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>

12
layouts/partials/header.html
View File

@ -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>

29
layouts/partials/video_box.html
View File

@ -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>

216
static/css/main.css
View File

@ -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;
}

172
static/css/video-box.css
View File

@ -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)
}

21
theme.toml
View File

@ -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 = ""
Write Preview
Loading…
Cancel
Save