coherence

layouts/partials/list-item.html

@@ -1,5 +1,4 @@
 <div class="list-item">
-    <div>
         <a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
         {{if .Params.audio}}
         {{partial "item-audio" .}}
@@ -9,4 +8,3 @@
         <p>{{.Params.description}}</p>
         <div class="item-tags">{{if .GetTerms "tags"}}{{ range (.GetTerms "tags")}}<a class ="item-tag" href="{{.RelPermalink}}">{{.LinkTitle}}</a>{{end}} {{end}}</div>
 </div>
-</div>

layouts/shortcodes

@@ -1 +1 @@
-Subproject commit 98ec2bb929108c79d434df0a5cc28b6648998054
+Subproject commit 7a5be891296c7bb0f00808c6620201be31050850

static/css/theme.css

@@ -22,6 +22,10 @@ body {
 main{
     width:100vw;
 }
+main>p{
+    max-width:60rem;
+    width:100%;
+}
 
 .background-photo {
     position: fixed;
@@ -833,7 +837,7 @@ article a[href^="https"]:where(:not([href*="{{.Site.BaseURL}}"]))::after {
 
 .list-item{
     display:flex;
-    flex-direction: row;
+    flex-direction: column;
     background-color:rgba(128, 128, 128, 0.15);
     margin:1.5rem;
     border-radius:25px;
@@ -847,7 +851,10 @@ article a[href^="https"]:where(:not([href*="{{.Site.BaseURL}}"]))::after {
     background-position: center center;
     backdrop-filter:opacity(0.15);
     font-size:18px;
-
+}
+.list-item>*{
+    width:100%;
+    text-align: center;
 }
 
 @media screen and (orientation:portrait) {
@@ -873,16 +880,13 @@ article a[href^="https"]:where(:not([href*="{{.Site.BaseURL}}"]))::after {
     max-width:10vw;
     height:min-content;
 }
-.list-item>div {
-    flex-direction: column;
-    align-items: flex-start;
-}
+
 .item-tags{
     display:flex;
     flex-direction: row;
-    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
+    width:100%;
 }
 .item-tag{
     margin:0.15rem;
@@ -899,7 +903,7 @@ article a[href^="https"]:where(:not([href*="{{.Site.BaseURL}}"]))::after {
     justify-content: center;
 }
 
-.hero {
+.hero2 {
     color:var(--theme-color-secondary);
     background-color: var(--hero-color);
     background:linear-gradient(45deg, var(--theme-color-primary) 0%, var(--hero-color) 45%,var(--hero-color) 55%, var(--theme-color-primary) 100%);