change header & major rework of taxonomies as part of frontpage redesign

This commit is contained in:
rra
2022-09-15 18:39:33 +02:00
parent a226b45bc0
commit 475a614959
14 changed files with 618 additions and 201 deletions

View File

@ -174,8 +174,9 @@ a {
.home-link {
display: block;
max-width: 700px;
width: 70%;
width: 50%;
padding: 0;
margin: auto;
}
.logo {
@ -184,7 +185,7 @@ a {
height: auto;
}
#top-menu .login-link {
.login-link {
background: #009d9b;
padding: 5px 30px;
color: #fff;
@ -194,7 +195,6 @@ a {
.menu-row {
margin: 0 auto;
max-width: 80%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
@ -408,6 +408,7 @@ a {
.h-entry header h2 a {
text-decoration: none;
color: var(--border-color);
word-wrap: anywhere;
}
.h-entry header .header-metadata {
@ -475,9 +476,9 @@ footer.post-footer {
}
/* network cards */
/* shout cards */
.card.network {
.card.shout {
border: 2px solid var(--shouts-dark);
background-color: var(--shouts-light);
max-width: min-content;
@ -489,70 +490,70 @@ footer.post-footer {
}
.h-entry.network header {
.h-entry.shout header {
display: flex;
flex-direction: column;
}
.h-entry.network header h2 {
.h-entry.shout header h2 {
padding: 0.2em 0.5em 0.5em 0.5em;
margin: 0;
border: none;
}
.h-entry.network header h2:hover {
.h-entry.shout header h2:hover {
cursor: pointer;
}
.h-entry.network header h2 a {
.h-entry.shout header h2 a {
text-decoration: none;
color: var(--shouts-dark);
}
.h-entry.network header time {
.h-entry.shout header time {
text-align: right;
padding: 0.6em 0.8em;
font-size: 1rem;
}
.network .header-metadata {
.shout .header-metadata {
align-items: center;
}
.network .header-metadata .dt-published {
.shout .header-metadata .dt-published {
border-bottom: 2px solid var(--shouts-dark);
}
.network .filler {
.shout .filler {
min-height: 1rem;
}
.network .author.p-author {
.shout .author.p-author {
border-color: var(--shouts-dark);
padding: 0.5em 1.2em 0.5em 1.2em;
}
.network .p-summary {
.shout .p-summary {
display: flex;
}
.network .p-summary.portrait {
.shout .p-summary.portrait {
/* flex-direction: row; */
}
.network .p-summary.landscape {
.shout .p-summary.landscape {
flex-direction: column;
}
.network .summary-image > img {
.shout .summary-image > img {
display: inherit;
}
.network .summary-text {
.shout .summary-text {
font-size: 18px;
}
div.network-source {
div.shout-source {
padding: 1em;
padding-right: 2em;
width: fit-content;
@ -565,7 +566,7 @@ div.network-source {
right: 1em;
}
.network-source .triangle {
.shout-source .triangle {
position: absolute;
right: 0px;
bottom: 0;
@ -576,17 +577,17 @@ div.network-source {
fill: var(--shouts-dark);
}
.network-source a {
.shout-source a {
font-weight: bold;
color: white;
}
.network .footer-filler {
.shout .footer-filler {
border-left: 2px solid var(--shouts-dark);
border-top: none;
}
.network footer.post-footer {
.shout footer.post-footer {
border-top: 2px solid var(--shouts-dark);
flex-flow: row;
font-size: 0.9rem;
@ -595,17 +596,17 @@ div.network-source {
padding: 1em;
}
.network footer svg {
.shout footer svg {
fill: var(--shouts-dark)
}
.network .read-more {
.shout .read-more {
border: none;
border-left: 2px solid var(--shouts-dark);
padding: 0.5em 1.2em 0.5em 1.2em;
}
.network .footer-metadata {
.shout .footer-metadata {
padding: 0.5em 1.2em 0.5em 1.2em;
}
@ -736,9 +737,9 @@ div.pen-source {
padding: 0.5em 1.2em 0.5em 1.2em;
}
/* shouts cards */
/* social / hashtag cards */
.card.shout {
.card.social {
border-color: steelblue;
border: 2px solid;
background-color: aliceblue;
@ -750,24 +751,24 @@ div.pen-source {
color: steelblue;
}
.card.shout h2 a {
.card.social h2 a {
color: var(--social-dark);
cursor: pointer;
display: block;
word-wrap: anywhere;
}
.card .card.shout h2 a:hover {
.card .card.social h2 a:hover {
border: none;
text-decoration: none;
}
.card.shout .post-footer {
.card.social .post-footer {
background: var(--social-light);
color: var(--social-dark);
}
.card.shout .post-footer a{
.card.social .post-footer a{
background: var(--social-light);
color: var(--social-dark);
text-decoration: underline;
@ -775,42 +776,42 @@ div.pen-source {
/* gallery cards */
.card.shout.lumbung-gallery {
.card.social.lumbunggallery {
border-color: var(--gallery-dark);
background-color: var(--gallery-light);
color: var(--gallery-dark);
}
.card.shout.lumbung-gallery h2 a {
.card.social.lumbunggallery h2 a {
color: var(--gallery-dark);
}
.card.shout.lumbung-gallery .post-footer {
.card.social.lumbunggallery .post-footer {
background: var(--gallery-light);
color: var(--gallery-dark);
border-top: 2px solid;
}
/* kios cards */
.card.shout.lumbung-kios {
.card.social.lumbungkios {
border-color: var(--kios-dark);
background-color: var(--kios-light);
color: var(--kios-dark);
}
.card.shout.lumbung-kios h2 a {
.card.social.lumbungkios h2 a {
color: var(--kios-dark);
}
.card.shout.lumbung-kios .post-footer {
.card.social.lumbungkios .post-footer {
background: var(--kios-light);
color: var(--kios-dark);
border-top: 2px solid;
}
.card.shout.lumbung-kios .post-footer a {
.card.social.lumbungkios .post-footer a {
background: none;
color: var(--kios-dark);
}
@ -1084,7 +1085,7 @@ li.page-item:after {
/* FILTER */
.filter-item, .card, .video-box {
display: none;
/* display: none;*/
}
.show-item {
@ -1911,7 +1912,7 @@ a.timeline-url {
/* card styles */
.card,
.card.network {
.card.shout {
max-width: 83vw;
}