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

clean up & modularize css

Browse Source
This commit is contained in:
rra 2021-07-12 22:28:07 +02:00
parent 885b80f5de
commit 84be92afe3
4 changed files with 88 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
layouts/partials/calendar_card.html
View File

@ -9,14 +9,16 @@
{{ .Params.localized_begin | markdownify }}
</marquee>
</div>
<div class='calendar-meta'>
<div class='calendar metadata'>
<div class='calendar-duration'>{{ .Params.duration }}</div>
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#event-{{ .Params.uid }}')"> <a href='#'> </a></span>
<input class='descr_button' type='checkbox' id='toggle-{{ .Params.uid }}'/>
<label class='calendar' for='toggle-{{ .Params.uid }}'>↕</label>
<div class='calendar-location'>{{ .Params.location | markdownify }}</div>
<div class='calendar description' id='event-{{ .Params.uid }}'>
{{.Content}}
</div>
</div>
<div class='calendar-description collapsed' id='event-{{ .Params.uid }}'>
{{.Content}}
</div>
</article>

15
layouts/partials/video_box.html
View File

@ -14,16 +14,13 @@
</div>
</span>
</div>
<div class='metadata'>
<div class='video 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 class='video channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
<input class='descr_button' type='checkbox' id='toggle-{{ .Params.uuid }}'/>
<label class='video' for='toggle-{{ .Params.uuid }}'>↕</label>
<div class='video date'> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></div>
<div class="description video" id='vid-{{ .Params.uuid }}'> {{ .Content }}</div>
</div>
</div>

75
static/css/main.css
View File

@ -227,10 +227,8 @@ footer.post-footer {
}
.h-entry.calendar header h2{
padding: 0.2em;
padding: 0.2em 0.5em 0.2em 0.5em;
margin: 0;
padding-right: 0.3em;
padding-left: 0.3em;
border-right: 2px solid cornflowerblue;
}
@ -248,28 +246,17 @@ footer.post-footer {
min-width: 10%;
}
.calendar-meta {
display: flex;
justify-content: space-between;
}
.calendar-location{
font-size: 0.8rem;
min-width: 20%;
padding-top: 0.2em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.2em;
padding: 0.5em 0.9em 0.5em 0.9em;
border-left: 2px solid cornflowerblue;
}
.calendar-duration{
font-size: 0.8rem;
border-right: 2px solid cornflowerblue;
padding-top: 0.2em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.2em;
padding: 0.5em 0.9em 0.5em 0.9em;
}
.start-scroller {
@ -283,21 +270,59 @@ footer.post-footer {
padding-bottom: 0.2em;
}
.calendar-description {
padding-top: 0.5em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.5em;
display: block;
overflow: hidden;
.calendar .description {
border-top: 2px solid cornflowerblue;
}
.calendar-description p {
/* Card metadata (video & calendar) */
.metadata {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.description p {
margin:0;
}
/* footer */
input + label +.calendar-location+.description{
display: none;
}
input:checked + label +.calendar-location+.description {
display: block;
transition: ease .5s;
}
.metadata label {
text-align: center;
vertical-align: sub;
flex-grow: 1;
font-weight: normal;
cursor: pointer;
padding: 0.4em 0.9em 0.4em 0.9em;
font-size: 0.9em;
}
label:hover {
box-shadow: inset 2px 2px 0px #95948c;
}
.description{
padding: 0.5em 0.7em 0.7em 0.5em;
overflow: hidden;
flex-basis: 100%;
}
.descr_button {
cursor: pointer;
flex-grow: 1;
text-align: center;
}
/* Page footer */
footer.bar {
margin-top:0;

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

@ -36,80 +36,59 @@
line-height: 0;
}
.metadata{
display: flex;
flex-direction: column;
.video {
background-color: var(--video-background-color);
font-size:0.9rem;
}
.video .metadata{
font-size:0.9rem;
justify-content: space-between;
flex-wrap: wrap;
}
.title{
.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%;
}
.footer{
margin-top:0;
border-top: 2px solid var(--video-border-color);
display: flex;
justify-content: space-between;
}
.channel{
.video.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;
padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.date {
.video.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;
padding: 0.5em 0.9em 0.5em 0.9em;
font-size: 0.8rem;
}
.description{
padding: 1em;
display: block;
overflow: hidden;
.video.description {
border-top: 2px solid var(--video-border-color);
}
padding: 0.8em 0.8em 0.8em 0.8em;
.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;
input.descr_button {
display: none;
}
.descr_button:hover {
box-shadow: inset 2px 2px 0px #95948c;
input + label + .video.date + .description{
display: none;
}
input:checked + label + .video.date +.description {
display: block;
}
.play-icon {