Browse Source

clean up & modularize css

main
rra 3 years ago
parent
commit
84be92afe3
  1. 10
      layouts/partials/calendar_card.html
  2. 15
      layouts/partials/video_box.html
  3. 75
      static/css/main.css
  4. 71
      static/css/video-box.css

10
layouts/partials/calendar_card.html

@ -9,14 +9,16 @@
{{ .Params.localized_begin | markdownify }} {{ .Params.localized_begin | markdownify }}
</marquee> </marquee>
</div> </div>
<div class='calendar-meta'> <div class='calendar metadata'>
<div class='calendar-duration'>{{ .Params.duration }}</div> <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-location'>{{ .Params.location | markdownify }}</div>
</div> <div class='calendar description' id='event-{{ .Params.uid }}'>
<div class='calendar-description collapsed' id='event-{{ .Params.uid }}'>
{{.Content}} {{.Content}}
</div> </div>
</div>
</article> </article>

15
layouts/partials/video_box.html

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

75
static/css/main.css

@ -227,10 +227,8 @@ footer.post-footer {
} }
.h-entry.calendar header h2{ .h-entry.calendar header h2{
padding: 0.2em; padding: 0.2em 0.5em 0.2em 0.5em;
margin: 0; margin: 0;
padding-right: 0.3em;
padding-left: 0.3em;
border-right: 2px solid cornflowerblue; border-right: 2px solid cornflowerblue;
} }
@ -248,28 +246,17 @@ footer.post-footer {
min-width: 10%; min-width: 10%;
} }
.calendar-meta {
display: flex;
justify-content: space-between;
}
.calendar-location{ .calendar-location{
font-size: 0.8rem; font-size: 0.8rem;
min-width: 20%; min-width: 20%;
padding-top: 0.2em; padding: 0.5em 0.9em 0.5em 0.9em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.2em;
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-top: 0.2em; padding: 0.5em 0.9em 0.5em 0.9em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.2em;
} }
.start-scroller { .start-scroller {
@ -283,21 +270,59 @@ footer.post-footer {
padding-bottom: 0.2em; padding-bottom: 0.2em;
} }
.calendar-description { .calendar .description {
padding-top: 0.5em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.5em;
display: block;
overflow: hidden;
border-top: 2px solid cornflowerblue; 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; 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 { footer.bar {
margin-top:0; margin-top:0;

71
static/css/video-box.css

@ -36,80 +36,59 @@
line-height: 0; line-height: 0;
} }
.metadata{ .video {
display: flex;
flex-direction: column;
background-color: var(--video-background-color); 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; margin-top:0;
border-top: 2px solid var(--video-border-color); border-top: 2px solid var(--video-border-color);
border-bottom: 2px solid var(--video-border-color);
padding:0.5em; padding:0.5em;
font-weight:700; font-weight:700;
font-size:1.3rem; font-size:1.3rem;
flex-basis: 100%;
} }
.footer{ .video.channel{
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); border-right: 2px solid var(--video-border-color);
padding-left: 1em; padding: 0.5em 0.9em 0.5em 0.9em;
padding-right: 1em; font-size: 0.8rem;
padding-top: 0.2em;
display: inline-block;
padding-bottom: 0.2em;
} }
.date { .video.date {
float:right; float:right;
border-left: 2px solid var(--video-border-color); border-left: 2px solid var(--video-border-color);
padding-left: 1em; padding: 0.5em 0.9em 0.5em 0.9em;
padding-right: 1em; font-size: 0.8rem;
padding-top: 0.2em;
display: inline-block;
padding-bottom: 0.2em;
} }
.description{ .video.description {
padding: 1em;
display: block;
overflow: hidden;
border-top: 2px solid var(--video-border-color); 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 { .descr_button a {
color:inherit; color:inherit;
text-decoration: inherit; text-decoration: inherit;
} }
.descr_button a:before { input.descr_button {
content:'↕'; display: none;
vertical-align: sub;
} }
.descr_button:hover { input + label + .video.date + .description{
box-shadow: inset 2px 2px 0px #95948c; display: none;
}
input:checked + label + .video.date +.description {
display: block;
} }
.play-icon { .play-icon {

Loading…
Cancel
Save