Browse Source

add cards for calendar items

main
rra 3 years ago
parent
commit
33995d06c2
  1. 13
      layouts/index.html
  2. 24
      layouts/partials/calendar_card.html
  3. 92
      static/css/main.css

13
layouts/index.html

@ -3,16 +3,19 @@
<div class="h-feed">
{{ range (.Paginator 10).Pages }}
{{ if in .Params.category "tv"}}
{{ if in .Params.category "tv"}}
{{- partial "video_box.html" . -}}
{{- partial "video_box.html" . -}}
{{ else if in .Params.category "calendar" }}
{{ else }}
{{- partial "calendar_card.html" . -}}
{{- partial "card.html" . -}}
{{ else }}
{{ end }}
{{- partial "card.html" . -}}
{{ end }}
{{ end }}
</div>

24
layouts/partials/calendar_card.html

@ -0,0 +1,24 @@
<div class='card calendar'>
<article class="h-entry calendar">
<header>
<h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
<div class='header-filler'></div>
</header>
<div class='start-scroller'>
<marquee behavior="scroll" direction="left">
{{ .Params.event_begin | markdownify }}
</marquee>
</div>
<div class='calendar-meta'>
<div class='calendar-duration'>{{ .Params.duration }}</div>
<div class='calendar-location'>{{ .Params.location | markdownify }}</div>
</div>
<div class='calendar-description'>
{{.Content}}
</div>
</article>
</div>

92
static/css/main.css

@ -126,9 +126,6 @@ body {
/*Article Summary Cards*/
.h-entry{
}
.h-entry header {
display: flex;
border-bottom: 2px solid var(--border-color);
@ -209,6 +206,95 @@ footer.post-footer {
font-size: 0.9rem;
}
/* calendar cards */
.card.calendar {
border: 2px solid cornflowerblue;
box-shadow:1em 1em 0 #d2d1c8;
background-color: lightblue;
max-width: 300px;
margin-bottom: 2em;
flex: auto;
margin: 0 3em 3em 0;
align-self: start;
color: royalblue;
}
.h-entry.calendar header {
display: flex;
border-bottom: 2px solid cornflowerblue;
}
.h-entry.calendar header h2{
padding: 0.2em;
margin: 0;
padding-right: 0.3em;
padding-left: 0.3em;
border-right: 2px solid cornflowerblue;
}
.h-entry.calendar header h2:hover{
box-shadow: inset 4px 4px 0px royalblue;
cursor: pointer;
}
.h-entry.calendar header h2 a {
text-decoration: none;
color: royalblue;
}
.header-filler {
min-width: 10%;
}
.calendar-meta {
display: flex;
border-bottom: 2px solid cornflowerblue;
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;
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;
}
.start-scroller {
display: flex;
flex-flow: row-reverse;
border-bottom: 2px solid cornflowerblue;
}
.start-scroller marquee{
font-size: 0.8rem;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
.calendar-description {
padding-top: 0.5em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.5em;
}
.calendar-description p {
margin:0;
}
/* footer */
footer.bar {

Loading…
Cancel
Save