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

style calendar cards

Browse Source
This commit is contained in:
Aadil Ayub 2022-02-02 17:30:15 +05:00
parent 41e52ce461
commit 25709716b3
3 changed files with 36 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
themes/lumbung-theme/layouts/partials/calendar_card.html
View File

@ -1,5 +1,6 @@
{{ $t := (time .Params.event_end) }} {{ $t := (time .Params.event_end) }}
<div class='card calendar {{ if $t.Before now }}past{{end}}'> <div class='card calendar {{ if $t.Before now }}past{{end}}'>
<div class='date tape-label'><span> {{ substr .Params.date 0 11}}</span></div>
<article class="h-event calendar "> <article class="h-event calendar ">
<header> <header>
<h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2> <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>

2
themes/lumbung-theme/layouts/partials/video_box.html
View File

@ -1,5 +1,5 @@
<div class='video-box'> <div class='video-box'>
<div class='video channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div> <div class='video channel tape-label'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
<div class='media' id='media-{{ .Params.uuid }}'> <div class='media' id='media-{{ .Params.uuid }}'>
<span class='video-thumbnail' id='thumb-{{ .Params.uuid }}' <span class='video-thumbnail' id='thumb-{{ .Params.uuid }}'
href="https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}" href="https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}"

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

@ -496,14 +496,22 @@ div.network-source {
/* calendar cards */ /* calendar cards */
.card.calendar { .card.calendar {
border: 2px solid cornflowerblue; border: 2px solid var(--calendar-dark);
background-color: lightblue; background-color: var(--calendar-light);
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: var(--calendar-dark);
}
.calendar .tape-label {
background-color: var(--calendar-light);
}
.calendar .tape-label span {
background-color: var(--calendar-dark);
} }
/* disabling temporarily since all the events are past events atm */ /* disabling temporarily since all the events are past events atm */
@ -532,7 +540,11 @@ div.network-source {
.h-event.calendar header h2 a { .h-event.calendar header h2 a {
text-decoration: none; text-decoration: none;
color: royalblue; color: var(--calendar-dark);
}
.h-event.calendar .calendar-location a {
color: var(--calendar-dark);
} }
.header-filler { .header-filler {
@ -584,6 +596,24 @@ div.network-source {
/* Card metadata (video & calendar) */ /* Card metadata (video & calendar) */
.tape-label {
display: flex;
justify-content: center;
border: none;
font-size: 1rem;
}
.tape-label a,
.tape-label span {
width: max-content;
padding: 0.5em;
position: relative;
bottom: 19px;
z-index: 1;
transform: rotate(2deg);
color: white;
}
.metadata { .metadata {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;