forked from ruangrupa/lumbung.space
style shouts card type
This commit is contained in:
parent
eb55fb2d53
commit
af79d42610
@ -2,9 +2,9 @@
|
|||||||
<article class="h-entry network">
|
<article class="h-entry network">
|
||||||
<header>
|
<header>
|
||||||
{{ $postPermalink := .Permalink}}
|
{{ $postPermalink := .Permalink}}
|
||||||
|
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
|
||||||
<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>
|
||||||
|
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="network-source"><span class="from p-author">From {{ if .Params.author }}<b>{{.Params.author}}</b> at {{ end }}<a href="{{ "/categories/" | relLangURL }}{{ .Params.feed_name | urlize }}">{{ .Params.feed_name }}</a></span></div>
|
<div class="network-source"><span class="from p-author">From {{ if .Params.author }}<b>{{.Params.author}}</b> at {{ end }}<a href="{{ "/categories/" | relLangURL }}{{ .Params.feed_name | urlize }}">{{ .Params.feed_name }}</a></span></div>
|
||||||
@ -26,7 +26,7 @@
|
|||||||
|
|
||||||
<footer class='post-footer'>
|
<footer class='post-footer'>
|
||||||
<div class='footer-metadata'>
|
<div class='footer-metadata'>
|
||||||
<time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
|
|
||||||
</div>
|
</div>
|
||||||
{{ if .Truncated }}
|
{{ if .Truncated }}
|
||||||
<div class="footer-filler"></div>
|
<div class="footer-filler"></div>
|
||||||
|
@ -44,6 +44,8 @@
|
|||||||
--social-dark: #0163A4;
|
--social-dark: #0163A4;
|
||||||
--gallery-light: #FCF4B9;
|
--gallery-light: #FCF4B9;
|
||||||
--gallery-dark: #846A00;
|
--gallery-dark: #846A00;
|
||||||
|
--shouts-dark: #CB001D;
|
||||||
|
--shouts-light: #FFD9DD;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -55,6 +57,7 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
/* pushes footer to bottom */
|
/* pushes footer to bottom */
|
||||||
|
display: grid;
|
||||||
grid-template-rows: auto auto 1fr auto;
|
grid-template-rows: auto auto 1fr auto;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
@ -319,36 +322,40 @@ footer.post-footer {
|
|||||||
/* network cards */
|
/* network cards */
|
||||||
|
|
||||||
.card.network {
|
.card.network {
|
||||||
border: 2px solid darkcyan;
|
border: 2px solid var(--shouts-dark);
|
||||||
background-color: lightgreen;
|
background-color: var(--shouts-light);
|
||||||
max-width: min-content;
|
max-width: min-content;
|
||||||
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: darkcyan;
|
color: var(--shouts-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry.network header {
|
.h-entry.network header {
|
||||||
display: flex;
|
display: flex;
|
||||||
border-bottom: 2px solid darkcyan;
|
flex-direction: column;
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry.network header h2 {
|
.h-entry.network header h2 {
|
||||||
padding: 0.2em 0.5em 0.2em 0.5em;
|
padding: 0.2em 0.5em 0.5em 0.5em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry.network header h2:hover {
|
.h-entry.network header h2:hover {
|
||||||
box-shadow: inset 4px 4px 0px darkcyan;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.h-entry.network header h2 a {
|
.h-entry.network header h2 a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: darkcyan;
|
color: var(--shouts-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-entry.network header time {
|
||||||
|
text-align: right;
|
||||||
|
padding: 0.6em 0.8em;
|
||||||
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network .header-metadata {
|
.network .header-metadata {
|
||||||
@ -356,7 +363,7 @@ footer.post-footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.network .header-metadata .dt-published {
|
.network .header-metadata .dt-published {
|
||||||
border-bottom: 2px solid darkcyan;
|
border-bottom: 2px solid var(--shouts-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.network .filler {
|
.network .filler {
|
||||||
@ -364,7 +371,7 @@ footer.post-footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.network .author.p-author {
|
.network .author.p-author {
|
||||||
border-color: darkcyan;
|
border-color: var(--shouts-dark);
|
||||||
padding: 0.5em 1.2em 0.5em 1.2em;
|
padding: 0.5em 1.2em 0.5em 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -381,11 +388,11 @@ footer.post-footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.network .summary-image.portrait {
|
.network .summary-image.portrait {
|
||||||
border-right: 2px solid darkcyan;
|
border-right: 2px solid var(--shouts-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.network .summary-image.landscape {
|
.network .summary-image.landscape {
|
||||||
border-bottom: 2px solid darkcyan;
|
border-bottom: 2px solid var(--shouts-dark);
|
||||||
border-right: none;
|
border-right: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -398,32 +405,51 @@ footer.post-footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
div.network-source {
|
div.network-source {
|
||||||
padding: 0.5em 1em 0.5em 1em;
|
padding: 1em;
|
||||||
border-bottom: 2px solid darkcyan;
|
padding-right: 2em;
|
||||||
|
width: fit-content;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
background-color: var(--shouts-dark);
|
||||||
|
color: white;
|
||||||
|
position: relative;
|
||||||
|
right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.network-source::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
right: -20px;
|
||||||
|
bottom: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 20px solid var(--shouts-dark);
|
||||||
|
border-top: 23px solid transparent;
|
||||||
|
border-bottom: 23px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network-source a {
|
.network-source a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: darkcyan;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network .footer-filler {
|
.network .footer-filler {
|
||||||
border-left: 2px solid darkcyan;
|
border-left: 2px solid var(--shouts-dark);
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.network footer.post-footer {
|
.network footer.post-footer {
|
||||||
border-top: 2px solid darkcyan;
|
border-top: 2px solid var(--shouts-dark);
|
||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
|
background-color: var(--shouts-light);
|
||||||
|
color: var(--shouts-dark)
|
||||||
}
|
}
|
||||||
|
|
||||||
.network .read-more {
|
.network .read-more {
|
||||||
border: none;
|
border: none;
|
||||||
border-left: 2px solid darkcyan;
|
border-left: 2px solid var(--shouts-dark);
|
||||||
padding: 0.5em 1.2em 0.5em 1.2em;
|
padding: 0.5em 1.2em 0.5em 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user