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

themes/lumbung-theme/static/css/main.css

@@ -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;
     }