Update theme and styles

assets/styles/app.css

@@ -22,7 +22,7 @@ h1, h2, h3, h4, h5, h6 {
 h1 {
     font-size: 3.2rem;
     margin-top: 0.25em;
-    font-weight: 600;
+    font-weight: 300;
 }
 
 h1.brand {
@@ -72,7 +72,7 @@ aside p.lede {
 
 .lede {
     font-family: var(--main-body-font), serif;
-    font-size: 1.4rem;
+    font-size: 1.6rem;
     word-wrap: break-word;
     font-weight: 300;
 }
@@ -94,11 +94,16 @@ a:hover {
     text-decoration: underline;
 }
 
-a.card:hover {
+.card a:hover {
     text-decoration: none;
+    color: var(--color-text);
     cursor: pointer;
 }
 
+.card a:hover h2 {
+    color: var(--color-text);
+}
+
 img {
     max-width: 100%;
     height: auto;
@@ -122,10 +127,73 @@ svg.icon {
     background-color: var(--color-bg);
     color: var(--color-text);
     padding: 0;
-    margin: 20px 0 50px 0;
+    margin: 0 0 50px 0;
     border-radius: 0;  /* Sharp edges */
 }
 
+.featured-cat {
+    border-bottom: 2px solid var(--color-border);
+    padding-left: 10px;
+}
+
+.featured-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+div:nth-child(odd) .featured-list {
+    flex-direction: row-reverse;
+}
+
+.featured-list > * {
+    box-sizing: border-box; /* so padding/border don't break the layout */
+    margin-bottom: 5px;
+    padding: 10px;
+}
+
+.featured-list div:first-child {
+    flex: 0 0 66%; /* each item takes up 50% width = 2 columns */
+}
+
+.featured-list div:last-child {
+    flex: 0 0 34%; /* each item takes up 50% width = 2 columns */
+}
+
+.featured-list h2.card-title {
+    font-size: 1.75rem;
+}
+
+.featured-list p.lede {
+    font-size: 1.4rem;
+}
+
+.featured-list .card {
+    margin-bottom: 0;
+}
+
+.featured-list .card-header img {
+    max-height: 100px;
+}
+
+.article-list .metadata {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.article-list .metadata p {
+    margin: 0;
+}
+
+.truncate {
+    display: -webkit-box;
+    -webkit-line-clamp: 3; /* limit to 3 lines */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .card.bordered {
     border: 2px solid var(--color-border);
 }
@@ -160,11 +228,8 @@ svg.icon {
 }
 
 .card-footer {
-    font-size: 0.875rem;
+    border-top: 1px solid var(--color-border);
-    text-align: right;
+    margin: 20px 0;
-    border-top: 2px solid var(--color-border);
-    padding-top: 10px;
-    margin-top: 10px;
 }
 
 .header {
@@ -195,7 +260,7 @@ svg.icon {
     font-weight: bold;
 }
 
-.header__categories li.active a {
+.header__categories a.active {
     font-weight: bold;
 }
 
@@ -262,7 +327,7 @@ footer p {
 }
 
 footer a {
-    color: var(--color-text-mid);
+    color: var(--color-text-contrast);
 }
 
 /* Tags container */

assets/styles/article.css

@@ -1,3 +1,7 @@
+.article-main {
+    margin-top: 30px;
+}
+
 .article-main h2, .article-main h3,
 .article-main h4, .article-main h5, .article-main h6 {
     margin-top: 2em;
@@ -14,10 +18,6 @@
     line-height: 1.75;
 }
 
-.article-main .lede {
-    font-size: 1.9rem;
-}
-
 .article-main table {
     font-size: 1.3rem;
 }
@@ -34,12 +34,13 @@
     margin: 2rem 0;
     padding-top: 0.5rem;
     border-top: 1px solid #8e4585;
-    font-size: 0.875rem;
+    font-size: 1rem;
 }
 
 blockquote {
-    margin: 50px 0;
     border-left: 6px solid var(--color-bg-light);
+    padding-left: 3px;
+    margin: 50px 0 50px 3px;
 }
 
 blockquote p {

assets/styles/button.css

@@ -1,7 +1,7 @@
 
 button, .btn, a.btn {
     background-color: var(--color-primary);
-    color: var(--color-text);
+    color: var(--color-text-contrast);
     border: 2px solid var(--color-primary);
     padding: 10px 20px;
     text-transform: uppercase;
@@ -32,4 +32,4 @@ button:active, .btn:active {
 .btn.btn-secondary:hover {
     border: 2px solid var(--color-secondary);
     text-decoration: none;
-}
+}

assets/styles/card.css

@@ -1,3 +1,7 @@
+h2.card-title {
+    margin-top: 10px;
+}
+
 .price-list {
     display: flex;
     flex-direction: row;
@@ -42,3 +46,4 @@
     width: 100%;
     object-fit: cover;
 }
+

assets/styles/layout.css

@@ -69,8 +69,11 @@ table {
     margin: 20px 0;
 }
 
-code {
+pre, code {
     text-wrap: wrap;
+    padding: 3px;
+    background-color: var(--color-bg-light);
+    font-size: 1rem;
 }
 
 hr {

assets/styles/theme.css

@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100..700;1,100..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,100..700;1,100..700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
 
 
@@ -11,12 +11,12 @@
     --color-text: #f5f5f5;       /* Soft white for readability */
     --color-text-mid: #d8d8d8;   /* Warm light gray */
     --color-text-contrast: #000; /* Black text for contrast */
-    --color-primary: #a2559c;   /* Plum primary color */
+    --color-primary: #5F7355;   /* Plum primary color */
-    --color-secondary: #9CAF88; /*  secondary color */
+    --color-secondary: #495544; /*  secondary color */
     --color-border: #3a3a3a;     /* Subtle gray border */
     --font-family: 'Montserrat', serif; /* Set the Montserrat font as default */
     --main-body-font: 'Newsreader', serif; /* Set the font for the main body */
-    --heading-font: 'Josefin Slab', serif; /* Set the font for headings */
+    --heading-font: 'EB Garamond', serif; /* Set the font for headings */
     --brand-font: 'Lobster', serif; /* A classic, refined branding font */
     --brand-color: white;
 }
@@ -26,5 +26,6 @@
     --color-bg-light: #e8e4df;
     --color-text: #2a2a2a;
     --color-text-mid: #3a3a3a;   /* Warm light gray */
+    --color-text-contrast: #f4f1ee;
     --brand-color: black;
 }