forked from ruangrupa/lumbung.space
Merge branch 'main' of ssh://git.autonomic.zone:2222/ruangrupa/living-room into main
This commit is contained in:
cellarspoon
commit
36d5d2c976
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,4 +1,5 @@
|
||||
*.lock
|
||||
.env
|
||||
.venv/
|
||||
/content/
|
||||
/public/
|
||||
|
||||
@ -42,84 +42,83 @@ body {
|
||||
color: maroon;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1B4C8A;
|
||||
}
|
||||
a {
|
||||
color: #1B4C8A;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin: 2em auto;
|
||||
max-width: 80%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
margin: 2em auto;
|
||||
max-width: 80%;
|
||||
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);
|
||||
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{
|
||||
background-color: peachpuff;
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
border: 2px solid var(--border-color);
|
||||
max-width: 400px;
|
||||
}
|
||||
.side-bar {
|
||||
border: 2px solid var(--border-color);
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
|
||||
.card:nth-child(even){
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
.card:nth-child(even) {
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
.card:nth-child(odd){
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
.card:nth-child(odd) {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
|
||||
.card:nth-child(5){
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
.card:nth-child(5) {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
|
||||
|
||||
.video.box{
|
||||
margin-top:3em;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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{
|
||||
.h-feed {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.entries{
|
||||
.entries {
|
||||
padding-top: 10%;
|
||||
}
|
||||
|
||||
|
||||
/* base header & menu */
|
||||
|
||||
#top-menu{
|
||||
#top-menu {
|
||||
position: fixed;
|
||||
left: 5%;
|
||||
transform: translate(-50%);
|
||||
@ -156,7 +155,7 @@ body {
|
||||
|
||||
}
|
||||
|
||||
.menu ul{
|
||||
.menu ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -176,7 +175,7 @@ body {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.h-entry header h2{
|
||||
.h-entry header h2 {
|
||||
padding: 0.2em;
|
||||
margin: 0;
|
||||
padding-right: 0.3em;
|
||||
@ -185,9 +184,9 @@ body {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.h-entry header h2:hover{
|
||||
box-shadow: inset 4px 4px 0px tomato;
|
||||
cursor: pointer;
|
||||
.h-entry header h2:hover {
|
||||
box-shadow: inset 4px 4px 0px tomato;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.h-entry header h2 a {
|
||||
@ -196,7 +195,7 @@ body {
|
||||
}
|
||||
|
||||
|
||||
.h-entry header .header-metadata{
|
||||
.h-entry header .header-metadata {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
@ -232,9 +231,9 @@ body {
|
||||
}
|
||||
|
||||
.summary-image > img {
|
||||
/* height: 100%;
|
||||
object-fit: cover;
|
||||
max-width: 100%;*/
|
||||
/* height: 100%;
|
||||
object-fit: cover;
|
||||
max-width: 100%;*/
|
||||
|
||||
}
|
||||
|
||||
@ -242,7 +241,7 @@ body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.summary-image{
|
||||
.summary-image {
|
||||
border-right: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
@ -255,6 +254,7 @@ footer.post-footer {
|
||||
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);
|
||||
@ -265,18 +265,17 @@ footer.post-footer {
|
||||
|
||||
/* network cards */
|
||||
|
||||
.card.network{
|
||||
|
||||
border: 2px solid darkcyan;
|
||||
box-shadow:1em 1em 0 #d2d1c8;
|
||||
background-color: lightgreen;
|
||||
max-width: min-content;
|
||||
margin-bottom: 2em;
|
||||
flex: auto;
|
||||
margin: 0 3em 3em 0;
|
||||
align-self: start;
|
||||
color: darkcyan;
|
||||
}
|
||||
.card.network {
|
||||
border: 2px solid darkcyan;
|
||||
box-shadow:1em 1em 0 #d2d1c8;
|
||||
background-color: lightgreen;
|
||||
max-width: min-content;
|
||||
margin-bottom: 2em;
|
||||
flex: auto;
|
||||
margin: 0 3em 3em 0;
|
||||
align-self: start;
|
||||
color: darkcyan;
|
||||
}
|
||||
|
||||
.h-entry.network header {
|
||||
display: flex;
|
||||
@ -284,15 +283,15 @@ footer.post-footer {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.h-entry.network header h2{
|
||||
.h-entry.network header h2 {
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.h-entry.network header h2:hover{
|
||||
box-shadow: inset 4px 4px 0px darkcyan;
|
||||
cursor: pointer;
|
||||
.h-entry.network header h2:hover {
|
||||
box-shadow: inset 4px 4px 0px darkcyan;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.h-entry.network header h2 a {
|
||||
@ -344,7 +343,7 @@ footer.post-footer {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
div.network-source{
|
||||
div.network-source {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
border-bottom: 2px solid darkcyan;
|
||||
font-size: 14px;
|
||||
@ -357,12 +356,12 @@ div.network-source{
|
||||
color: darkcyan;
|
||||
}
|
||||
|
||||
.network .footer-filler{
|
||||
.network .footer-filler {
|
||||
border-left: 2px solid darkcyan;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.network footer.post-footer{
|
||||
.network footer.post-footer {
|
||||
border-top: 2px solid darkcyan;
|
||||
flex-flow: row;
|
||||
font-size: 0.9rem;
|
||||
@ -380,31 +379,31 @@ div.network-source{
|
||||
|
||||
/* shouts cards */
|
||||
|
||||
.card.shout{
|
||||
border-color: steelblue;
|
||||
border: 2px solid;
|
||||
box-shadow:1em 1em 0 #d2d1c8;
|
||||
background-color: aliceblue;
|
||||
max-width: min-content;
|
||||
margin-bottom: 2em;
|
||||
flex: auto;
|
||||
margin: 0 3em 3em 0;
|
||||
align-self: start;
|
||||
color: steelblue;
|
||||
}
|
||||
.card.shout {
|
||||
border-color: steelblue;
|
||||
border: 2px solid;
|
||||
box-shadow:1em 1em 0 #d2d1c8;
|
||||
background-color: aliceblue;
|
||||
max-width: min-content;
|
||||
margin-bottom: 2em;
|
||||
flex: auto;
|
||||
margin: 0 3em 3em 0;
|
||||
align-self: start;
|
||||
color: steelblue;
|
||||
}
|
||||
|
||||
/* calendar cards */
|
||||
|
||||
.card.calendar {
|
||||
border: 2px solid cornflowerblue;
|
||||
box-shadow:1em 1em 0 #d2d1c8;
|
||||
background-color: lightblue;
|
||||
max-width: 360px;
|
||||
margin-bottom: 2em;
|
||||
flex: auto;
|
||||
margin: 0 3em 3em 0;
|
||||
align-self: start;
|
||||
color: royalblue;
|
||||
border: 2px solid cornflowerblue;
|
||||
box-shadow:1em 1em 0 #d2d1c8;
|
||||
background-color: lightblue;
|
||||
max-width: 360px;
|
||||
margin-bottom: 2em;
|
||||
flex: auto;
|
||||
margin: 0 3em 3em 0;
|
||||
align-self: start;
|
||||
color: royalblue;
|
||||
|
||||
}
|
||||
|
||||
@ -421,15 +420,15 @@ div.network-source{
|
||||
border-bottom: 2px solid cornflowerblue;
|
||||
}
|
||||
|
||||
.h-event.calendar header h2{
|
||||
.h-event.calendar header h2 {
|
||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
||||
margin: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.h-event.calendar header h2:hover{
|
||||
box-shadow: inset 4px 4px 0px royalblue;
|
||||
cursor: pointer;
|
||||
.h-event.calendar header h2:hover {
|
||||
box-shadow: inset 4px 4px 0px royalblue;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.h-event.calendar header h2 a {
|
||||
@ -438,17 +437,17 @@ div.network-source{
|
||||
}
|
||||
|
||||
.header-filler {
|
||||
min-width: 10%;
|
||||
min-width: 10%;
|
||||
}
|
||||
|
||||
.calendar-location{
|
||||
.calendar-location {
|
||||
font-size: 0.8rem;
|
||||
min-width: 20%;
|
||||
padding: 0.5em 0.9em 0.5em 0.9em;
|
||||
border-left: 2px solid cornflowerblue;
|
||||
}
|
||||
|
||||
.calendar-duration{
|
||||
.calendar-duration {
|
||||
font-size: 0.8rem;
|
||||
border-right: 2px solid cornflowerblue;
|
||||
padding: 0.5em 0.9em 0.5em 0.9em;
|
||||
@ -499,13 +498,13 @@ div.network-source{
|
||||
}
|
||||
|
||||
input + label +.calendar-location+.description{
|
||||
display: none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:checked + label +.calendar-location+.description {
|
||||
display: block;
|
||||
transition: ease .5s;
|
||||
}
|
||||
display: block;
|
||||
transition: ease .5s;
|
||||
}
|
||||
|
||||
.metadata label {
|
||||
text-align: center;
|
||||
@ -521,7 +520,7 @@ label:hover {
|
||||
box-shadow: inset 2px 2px 0px #95948c;
|
||||
}
|
||||
|
||||
.description{
|
||||
.description {
|
||||
padding: 0.5em 0.7em 0.7em 0.5em;
|
||||
overflow: hidden;
|
||||
flex-basis: 100%;
|
||||
@ -535,59 +534,58 @@ label:hover {
|
||||
|
||||
/* Paginator */
|
||||
|
||||
nav.pagination{
|
||||
nav.pagination {
|
||||
width: 60%;
|
||||
margin: auto;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
ul.pagination{
|
||||
ul.pagination {
|
||||
display: flex;
|
||||
justify-content: space-evenly; /* align horizontal */
|
||||
align-items: center; /* align vertical */
|
||||
}
|
||||
|
||||
.page-item{
|
||||
.page-item {
|
||||
display: block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 38px;
|
||||
border: 2px solid #1B4C8A;
|
||||
box-shadow:0.4em 0.4em 0 #d2d1c8;
|
||||
|
||||
}
|
||||
|
||||
li.page-item{
|
||||
li.page-item {
|
||||
background-color: lightblue;
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
li.page-item.active{
|
||||
li.page-item.active {
|
||||
background-color: peachpuff;
|
||||
border: 2px solid tomato;
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
li.page-item.disabled{
|
||||
li.page-item.disabled {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li.page-item:nth-child(even){
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
li.page-item:nth-child(even) {
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
li.page-item:nth-child(odd){
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
li.page-item:nth-child(odd) {
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
|
||||
li.page-item:nth-child(5){
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
li.page-item:nth-child(5) {
|
||||
transform: rotate(2deg);
|
||||
}
|
||||
|
||||
li.page-item:nth-child(8){
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
li.page-item:nth-child(8) {
|
||||
transform: rotate(-3deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,121 +2,121 @@
|
||||
--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 iframe {
|
||||
max-width: 100%;
|
||||
.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 .media {
|
||||
line-height: 0;
|
||||
}
|
||||
.video-box:nth-child(even){
|
||||
transform: rotate(-1deg);
|
||||
}
|
||||
|
||||
.video {
|
||||
background-color: var(--video-background-color);
|
||||
}
|
||||
.video-box:nth-child(odd){
|
||||
transform: rotate(1deg);
|
||||
}
|
||||
|
||||
.video .metadata{
|
||||
font-size:0.9rem;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.video-box:nth-child(5){
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
|
||||
.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{
|
||||
border-right: 2px solid var(--video-border-color);
|
||||
padding: 0.5em 0.9em 0.5em 0.9em;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.video-box img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.video.date {
|
||||
float:right;
|
||||
border-left: 2px solid var(--video-border-color);
|
||||
padding: 0.5em 0.9em 0.5em 0.9em;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.video-box iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.video.description {
|
||||
border-top: 2px solid var(--video-border-color);
|
||||
padding: 0.8em 0.8em 0.8em 0.8em;
|
||||
.video-box .media {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
}
|
||||
.descr_button a {
|
||||
color:inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
.video {
|
||||
background-color: var(--video-background-color);
|
||||
}
|
||||
|
||||
input.descr_button {
|
||||
display: none;
|
||||
}
|
||||
.video .metadata{
|
||||
font-size:0.9rem;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
input + label + .video.date + .description{
|
||||
display: none;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
|
||||
input:checked + label + .video.date +.description {
|
||||
display: block;
|
||||
}
|
||||
.video.channel{
|
||||
border-right: 2px solid var(--video-border-color);
|
||||
padding: 0.5em 0.9em 0.5em 0.9em;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.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.date {
|
||||
float:right;
|
||||
border-left: 2px solid var(--video-border-color);
|
||||
padding: 0.5em 0.9em 0.5em 0.9em;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.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.description {
|
||||
border-top: 2px solid var(--video-border-color);
|
||||
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-duration-overlay {
|
||||
display: inline-block;
|
||||
@ -130,26 +130,26 @@
|
||||
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);
|
||||
cursor: pointer;
|
||||
}
|
||||
.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);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.video-thumbnail:hover {
|
||||
text-decoration:none!important
|
||||
text-decoration:none !important;
|
||||
}
|
||||
.video-thumbnail:hover .play-overlay {
|
||||
opacity:1
|
||||
opacity: 1;
|
||||
}
|
||||
.video-thumbnail:hover .play-overlay .play-icon {
|
||||
transform:translate(-50%,-50%) scale(1)
|
||||
transform:translate(-50%,-50%) scale(1);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user