r/lumbung.space
0
0
Fork 0
forked from ruangrupa/lumbung.space
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'main' of ssh://git.autonomic.zone:2222/ruangrupa/living-room into main

Browse Source
This commit is contained in:
cellarspoon 2022-01-05 10:30:06 +01:00
commit 36d5d2c976
No known key found for this signature in database
GPG Key ID: 03789458B3D0C410
3 changed files with 254 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,4 +1,5 @@
*.lock *.lock
.env .env
.venv/
/content/ /content/
/public/ /public/

274
themes/lumbung-theme/static/css/main.css
View File

@ -41,85 +41,84 @@ body {
font-family: ZenMaruGothic; font-family: ZenMaruGothic;
color: maroon; color: maroon;
} }
a { a {
color: #1B4C8A; color: #1B4C8A;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
#content { #content {
margin: 2em auto; margin: 2em auto;
max-width: 80%; max-width: 80%;
margin-bottom: 0; margin-bottom: 0;
} }
.card{ .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;
}
border: 2px solid var(--border-color); .card {
box-shadow:1em 1em 0 #d2d1c8; background-color: peachpuff;
background-color: #fff09d; }
max-width: 600px;
margin-bottom: 2em;
flex: auto;
margin: 0 3em 3em 0;
align-self: start;
} .side-bar {
border: 2px solid var(--border-color);
.card{ max-width: 400px;
background-color: peachpuff; }
}
.side-bar {
border: 2px solid var(--border-color);
max-width: 400px;
}
.card:nth-child(even){ .card:nth-child(even) {
transform: rotate(-1deg); transform: rotate(-1deg);
} }
.card:nth-child(odd){ .card:nth-child(odd) {
transform: rotate(1deg); transform: rotate(1deg);
} }
.card:nth-child(5){ .card:nth-child(5) {
transform: rotate(2deg); transform: rotate(2deg);
} }
.video.box{ .video.box {
margin-top:3em; margin-top:3em;
} }
.bar{ .bar {
border: 2px solid var(--border-color); border: 2px solid var(--border-color);
box-shadow: 0.6em 0.6em 0 #d2d1c8; box-shadow: 0.6em 0.6em 0 #d2d1c8;
margin-bottom: 2em; margin-bottom: 2em;
margin-top:3em; margin-top:3em;
display: inline-block; display: inline-block;
background-color: #fff09d; background-color: #fff09d;
} }
.h-feed{ .h-feed {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
width: 100%; width: 100%;
} }
.entries{ .entries {
padding-top: 10%; padding-top: 10%;
} }
/* base header & menu */ /* base header & menu */
#top-menu{ #top-menu {
position: fixed; position: fixed;
left: 5%; left: 5%;
transform: translate(-50%); transform: translate(-50%);
@ -153,10 +152,10 @@ body {
border-top: 2px solid var(--border-color); border-top: 2px solid var(--border-color);
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
.menu ul{ .menu ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -176,7 +175,7 @@ body {
justify-content: space-between; justify-content: space-between;
} }
.h-entry header h2{ .h-entry header h2 {
padding: 0.2em; padding: 0.2em;
margin: 0; margin: 0;
padding-right: 0.3em; padding-right: 0.3em;
@ -185,9 +184,9 @@ body {
flex-grow: 1; flex-grow: 1;
} }
.h-entry header h2:hover{ .h-entry header h2:hover {
box-shadow: inset 4px 4px 0px tomato; box-shadow: inset 4px 4px 0px tomato;
cursor: pointer; cursor: pointer;
} }
.h-entry header h2 a { .h-entry header h2 a {
@ -196,7 +195,7 @@ body {
} }
.h-entry header .header-metadata{ .h-entry header .header-metadata {
margin: 0; margin: 0;
display: flex; display: flex;
flex-flow: column wrap; flex-flow: column wrap;
@ -232,17 +231,17 @@ body {
} }
.summary-image > img { .summary-image > img {
/* height: 100%; /* height: 100%;
object-fit: cover; object-fit: cover;
max-width: 100%;*/ max-width: 100%;*/
} }
.summary-image > a { .summary-image > a {
display: flex; display: flex;
} }
.summary-image{ .summary-image {
border-right: 2px solid var(--border-color); border-right: 2px solid var(--border-color);
} }
@ -255,6 +254,7 @@ footer.post-footer {
border-top: 2px solid var(--border-color); border-top: 2px solid var(--border-color);
flex-grow: 1; flex-grow: 1;
} }
.read-more { .read-more {
border-top: 2px solid var(--border-color); border-top: 2px solid var(--border-color);
border-left: 2px solid var(--border-color); border-left: 2px solid var(--border-color);
@ -265,18 +265,17 @@ footer.post-footer {
/* network cards */ /* network cards */
.card.network{ .card.network {
border: 2px solid darkcyan;
border: 2px solid darkcyan; box-shadow:1em 1em 0 #d2d1c8;
box-shadow:1em 1em 0 #d2d1c8; background-color: lightgreen;
background-color: lightgreen; max-width: min-content;
max-width: min-content; margin-bottom: 2em;
margin-bottom: 2em; flex: auto;
flex: auto; margin: 0 3em 3em 0;
margin: 0 3em 3em 0; align-self: start;
align-self: start; color: darkcyan;
color: darkcyan; }
}
.h-entry.network header { .h-entry.network header {
display: flex; display: flex;
@ -284,15 +283,15 @@ footer.post-footer {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.h-entry.network header h2{ .h-entry.network header h2 {
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
margin: 0; margin: 0;
border: none; border: none;
} }
.h-entry.network header h2:hover{ .h-entry.network header h2:hover {
box-shadow: inset 4px 4px 0px darkcyan; box-shadow: inset 4px 4px 0px darkcyan;
cursor: pointer; cursor: pointer;
} }
.h-entry.network header h2 a { .h-entry.network header h2 a {
@ -305,7 +304,7 @@ footer.post-footer {
} }
.network .header-metadata .dt-published{ .network .header-metadata .dt-published{
border-bottom: 2px solid darkcyan; border-bottom: 2px solid darkcyan;
} }
@ -344,7 +343,7 @@ footer.post-footer {
font-size: 18px; font-size: 18px;
} }
div.network-source{ div.network-source {
padding: 0.5em 1em 0.5em 1em; padding: 0.5em 1em 0.5em 1em;
border-bottom: 2px solid darkcyan; border-bottom: 2px solid darkcyan;
font-size: 14px; font-size: 14px;
@ -357,12 +356,12 @@ div.network-source{
color: darkcyan; color: darkcyan;
} }
.network .footer-filler{ .network .footer-filler {
border-left: 2px solid darkcyan; border-left: 2px solid darkcyan;
border-top: none; border-top: none;
} }
.network footer.post-footer{ .network footer.post-footer {
border-top: 2px solid darkcyan; border-top: 2px solid darkcyan;
flex-flow: row; flex-flow: row;
font-size: 0.9rem; font-size: 0.9rem;
@ -380,32 +379,32 @@ div.network-source{
/* shouts cards */ /* shouts cards */
.card.shout{ .card.shout {
border-color: steelblue; border-color: steelblue;
border: 2px solid; border: 2px solid;
box-shadow:1em 1em 0 #d2d1c8; box-shadow:1em 1em 0 #d2d1c8;
background-color: aliceblue; background-color: aliceblue;
max-width: min-content; max-width: min-content;
margin-bottom: 2em; margin-bottom: 2em;
flex: auto; flex: auto;
margin: 0 3em 3em 0; margin: 0 3em 3em 0;
align-self: start; align-self: start;
color: steelblue; color: steelblue;
} }
/* calendar cards */ /* calendar cards */
.card.calendar { .card.calendar {
border: 2px solid cornflowerblue; border: 2px solid cornflowerblue;
box-shadow:1em 1em 0 #d2d1c8; box-shadow:1em 1em 0 #d2d1c8;
background-color: lightblue; background-color: lightblue;
max-width: 360px; max-width: 360px;
margin-bottom: 2em; margin-bottom: 2em;
flex: auto; flex: auto;
margin: 0 3em 3em 0; margin: 0 3em 3em 0;
align-self: start; align-self: start;
color: royalblue; color: royalblue;
} }
.card.calendar.past { .card.calendar.past {
@ -421,15 +420,15 @@ div.network-source{
border-bottom: 2px solid cornflowerblue; border-bottom: 2px solid cornflowerblue;
} }
.h-event.calendar header h2{ .h-event.calendar header h2 {
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
margin: 0; margin: 0;
border-right: none; border-right: none;
} }
.h-event.calendar header h2:hover{ .h-event.calendar header h2:hover {
box-shadow: inset 4px 4px 0px royalblue; box-shadow: inset 4px 4px 0px royalblue;
cursor: pointer; cursor: pointer;
} }
.h-event.calendar header h2 a { .h-event.calendar header h2 a {
@ -438,17 +437,17 @@ div.network-source{
} }
.header-filler { .header-filler {
min-width: 10%; min-width: 10%;
} }
.calendar-location{ .calendar-location {
font-size: 0.8rem; font-size: 0.8rem;
min-width: 20%; min-width: 20%;
padding: 0.5em 0.9em 0.5em 0.9em; padding: 0.5em 0.9em 0.5em 0.9em;
border-left: 2px solid cornflowerblue; border-left: 2px solid cornflowerblue;
} }
.calendar-duration{ .calendar-duration {
font-size: 0.8rem; font-size: 0.8rem;
border-right: 2px solid cornflowerblue; border-right: 2px solid cornflowerblue;
padding: 0.5em 0.9em 0.5em 0.9em; padding: 0.5em 0.9em 0.5em 0.9em;
@ -499,13 +498,13 @@ div.network-source{
} }
input + label +.calendar-location+.description{ input + label +.calendar-location+.description{
display: none; display: none;
} }
input:checked + label +.calendar-location+.description { input:checked + label +.calendar-location+.description {
display: block; display: block;
transition: ease .5s; transition: ease .5s;
} }
.metadata label { .metadata label {
text-align: center; text-align: center;
@ -521,7 +520,7 @@ label:hover {
box-shadow: inset 2px 2px 0px #95948c; box-shadow: inset 2px 2px 0px #95948c;
} }
.description{ .description {
padding: 0.5em 0.7em 0.7em 0.5em; padding: 0.5em 0.7em 0.7em 0.5em;
overflow: hidden; overflow: hidden;
flex-basis: 100%; flex-basis: 100%;
@ -535,59 +534,58 @@ label:hover {
/* Paginator */ /* Paginator */
nav.pagination{ nav.pagination {
width: 60%; width: 60%;
margin: auto; margin: auto;
margin-top: 2em; margin-top: 2em;
margin-bottom: 2em; margin-bottom: 2em;
} }
ul.pagination{ ul.pagination {
display: flex; display: flex;
justify-content: space-evenly; /* align horizontal */ justify-content: space-evenly; /* align horizontal */
align-items: center; /* align vertical */ align-items: center; /* align vertical */
} }
.page-item{ .page-item {
display: block; display: block;
text-align: center; text-align: center;
vertical-align: middle;
font-size: 38px; font-size: 38px;
border: 2px solid #1B4C8A; border: 2px solid #1B4C8A;
box-shadow:0.4em 0.4em 0 #d2d1c8; box-shadow:0.4em 0.4em 0 #d2d1c8;
} }
li.page-item{ li.page-item {
background-color: lightblue; background-color: lightblue;
padding: 0.4em; padding: 0.4em;
} }
li.page-item.active{ li.page-item.active {
background-color: peachpuff; background-color: peachpuff;
border: 2px solid tomato; border: 2px solid tomato;
padding: 0.4em; padding: 0.4em;
} }
li.page-item.disabled{ li.page-item.disabled {
display: none; display: none;
} }
li.page-item:nth-child(even){ li.page-item:nth-child(even) {
transform: rotate(-1deg); transform: rotate(-1deg);
} }
li.page-item:nth-child(odd){ li.page-item:nth-child(odd) {
transform: rotate(1deg); transform: rotate(1deg);
} }
li.page-item:nth-child(5){ li.page-item:nth-child(5) {
transform: rotate(2deg); transform: rotate(2deg);
} }
li.page-item:nth-child(8){ li.page-item:nth-child(8) {
transform: rotate(-3deg); transform: rotate(-3deg);
} }

234
themes/lumbung-theme/static/css/video-box.css
View File

@ -2,122 +2,122 @@
--video-border-color: burlywood; --video-border-color: burlywood;
--video-background-color: antiquewhite; --video-background-color: antiquewhite;
} }
.video-box { .video-box {
border:2px solid var(--video-border-color); border:2px solid var(--video-border-color);
max-width:560px; max-width:560px;
margin:auto; margin:auto;
box-shadow:1em 1em 0 #d2d1c8; box-shadow:1em 1em 0 #d2d1c8;
margin-bottom: 2em; margin-bottom: 2em;
color: chocolate; 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 iframe {
max-width: 100%;
} }
.video-box .media { .video-box:nth-child(even){
line-height: 0; transform: rotate(-1deg);
} }
.video { .video-box:nth-child(odd){
background-color: var(--video-background-color); transform: rotate(1deg);
} }
.video .metadata{ .video-box:nth-child(5){
font-size:0.9rem; transform: rotate(3deg);
justify-content: space-between; }
flex-wrap: wrap;
}
.metadata .title{
margin-top:0;
border-top: 2px solid var(--video-border-color);
border-bottom: 2px solid var(--video-border-color);
padding:0.5em;
font-weight:700;
font-size:1.3rem;
flex-basis: 100%;
}
.video.channel{ .video-box img {
border-right: 2px solid var(--video-border-color); max-width: 100%;
padding: 0.5em 0.9em 0.5em 0.9em; }
font-size: 0.8rem;
}
.video.date { .video-box iframe {
float:right; max-width: 100%;
border-left: 2px solid var(--video-border-color); }
padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.video.description { .video-box .media {
border-top: 2px solid var(--video-border-color); line-height: 0;
padding: 0.8em 0.8em 0.8em 0.8em; }
} .video {
.descr_button a { background-color: var(--video-background-color);
color:inherit; }
text-decoration: inherit;
}
input.descr_button { .video .metadata{
display: none; font-size:0.9rem;
} justify-content: space-between;
flex-wrap: wrap;
}
input + label + .video.date + .description{ .metadata .title{
display: none; margin-top:0;
} border-top: 2px solid var(--video-border-color);
border-bottom: 2px solid var(--video-border-color);
padding:0.5em;
font-weight:700;
font-size:1.3rem;
flex-basis: 100%;
}
input:checked + label + .video.date +.description { .video.channel{
display: block; border-right: 2px solid var(--video-border-color);
} padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.play-icon { .video.date {
width: 0; float:right;
height: 0; border-left: 2px solid var(--video-border-color);
position: absolute; padding: 0.5em 0.9em 0.5em 0.9em;
left: 50%; font-size: 0.8rem;
top: 50%; }
transform: translate(-50%,-50%) scale(.5);
border-top: 13px solid transparent; .video.description {
border-bottom: 13px solid transparent; border-top: 2px solid var(--video-border-color);
border-left: 18px solid hsla(0,0%,100%,.95); padding: 0.8em 0.8em 0.8em 0.8em;
}
}
.descr_button a {
color:inherit;
text-decoration: inherit;
}
input.descr_button {
display: none;
}
input + label + .video.date + .description{
display: none;
}
input:checked + label + .video.date +.description {
display: block;
}
.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 {
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 { .video-thumbnail-duration-overlay {
display: inline-block; display: inline-block;
background-color: var(--video-background-color); background-color: var(--video-background-color);
@ -130,26 +130,26 @@
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
border: 2px solid var(--video-border-color); border: 2px solid var(--video-border-color);
} }
.play-overlay { .play-overlay {
transition: all .2s ease; transition: all .2s ease;
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: inherit; width: inherit;
height: inherit; height: inherit;
opacity: 0; opacity: 0;
background-color: rgba(0,0,0,.3); background-color: rgba(0,0,0,.3);
cursor: pointer; cursor: pointer;
} }
.video-thumbnail:hover { .video-thumbnail:hover {
text-decoration:none!important text-decoration:none !important;
} }
.video-thumbnail:hover .play-overlay { .video-thumbnail:hover .play-overlay {
opacity:1 opacity: 1;
} }
.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);
} }