From 167e24f12ac94fac573565daa3df36d6f7f31680 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nu=C5=A1a=20Puk=C5=A1i=C4=8D?= <nusa.puksic@gmail.com>
Date: Sat, 29 Mar 2025 15:18:50 +0100
Subject: [PATCH] New styles

---
 assets/styles/app.css    | 35 ++++++++++++++++++++---------------
 assets/styles/card.css   | 37 +++++++++++++++++++++++++++++++++++++
 assets/styles/layout.css |  8 ++++++++
 assets/styles/theme.css  | 30 ++++++++++++++++++++----------
 4 files changed, 85 insertions(+), 25 deletions(-)

diff --git a/assets/styles/app.css b/assets/styles/app.css
index f87a760..72abaad 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -16,7 +16,7 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: 400;
     line-height: 1.1;
     color: var(--color-primary);
-    margin: 0 0 10px;
+    margin: 30px 0 10px;
 }
 
 h1 {
@@ -31,27 +31,27 @@ h1.brand {
 }
 
 h1.brand a {
-    color: white;
+    color: var(--brand-color);
 }
 
 h2 {
-    font-size: 3rem;
+    font-size: 2.2rem;
 }
 
 h3 {
-    font-size: 2.5rem;
+    font-size: 2rem;
 }
 
 h4 {
-    font-size: 2rem;
+    font-size: 1.9rem;
 }
 
 h5 {
-    font-size: 1.85rem;
+    font-size: 1.75rem;
 }
 
 h6 {
-    font-size: 1.65rem;
+    font-size: 1.5rem;
 }
 
 p {
@@ -59,26 +59,25 @@ p {
 }
 
 aside h1 {
-    font-size: 2rem;
+    font-size: 1.2rem;
 }
 
 aside h2 {
-    font-size: 1.7rem;
+    font-size: 1.1rem;
 }
 
 aside p.lede {
-    font-size: 1.2rem;
+    font-size: 1rem;
 }
 
 .lede {
     font-family: var(--main-body-font), serif;
-    font-size: 1.6rem;
+    font-size: 1.4rem;
     word-wrap: break-word;
-    margin: 20px 0;
     font-weight: 300;
 }
 
-strong, .strong {
+strong:not(>h2), .strong {
     color: var(--color-primary);
 }
 
@@ -106,8 +105,8 @@ img {
 }
 
 svg.icon {
-    width: 1em;
-    height: 1em;
+    width: 2em;
+    height: 2em;
 }
 
 .divider {
@@ -262,6 +261,10 @@ footer p {
     margin: 0;
 }
 
+footer a {
+    color: var(--color-text-mid);
+}
+
 /* Tags container */
 .tags {
     margin: 10px 0;
@@ -296,6 +299,7 @@ footer p {
 }
 
 
+
 .card.card__horizontal {
     display: flex;
     justify-content: space-between;
@@ -319,6 +323,7 @@ footer p {
 }
 
 .article__image img {
+    margin: 1rem 0;
     width: 100%;
 }
 
diff --git a/assets/styles/card.css b/assets/styles/card.css
index 6dc331a..409c418 100644
--- a/assets/styles/card.css
+++ b/assets/styles/card.css
@@ -1,3 +1,40 @@
+.price-list {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.price-list .card {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    border: var(--color-primary) solid 1px;
+    flex-grow: 1;
+    padding: 20px;
+    flex-basis: 300px;
+}
+
+.price-list .card .features {
+    list-style: none; padding: 0;
+}
+
+.price { font-size: 22px; font-weight: bold; color: var(--color-secondary); }
+
+.price-list .card .features li { padding: 8px 0; }
+
+.price-list .card button:last-child {
+    margin-top: auto;
+}
+
+.article-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.article-list .card {
+    margin-bottom: 1rem;
+}
+
 .card-header img {
     max-width: 100%;
     height: auto;
diff --git a/assets/styles/layout.css b/assets/styles/layout.css
index e457c54..7c624a4 100644
--- a/assets/styles/layout.css
+++ b/assets/styles/layout.css
@@ -77,6 +77,10 @@ hr {
     margin: 20px 0;
 }
 
+dt {
+    margin-top: 10px;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     nav, aside {
@@ -97,6 +101,10 @@ footer {
     width: 100%;
 }
 
+footer .footer-links {
+    margin: 24px 0;
+}
+
 .search input {
     flex-grow: 1;
 }
diff --git a/assets/styles/theme.css b/assets/styles/theme.css
index 39eecae..8ce351f 100644
--- a/assets/styles/theme.css
+++ b/assets/styles/theme.css
@@ -3,18 +3,28 @@
 @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=Lobster&display=swap');
 
+
 :root {
-    --color-bg: #222;        /* Black background */
-    --color-bg-light: #444;    /* Lighter black background */
-    --color-bg-primary: #2b1a2b;
-    --color-text: #ffffff;      /* White text */
-    --color-text-mid: #eee;     /* Light gray text */
+    --color-bg: #1a1a1a;        /* Deep charcoal background */
+    --color-bg-light: #2a2a2a;  /* Slightly lighter charcoal */
+    --color-bg-primary: #2e1f2e; /* Muted aubergine for a rich, elegant feel */
+    --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-secondary: #9CAF88; /*  secondary color */
-    --color-border: #333;    /* White border for contrast */
-    --font-family: 'Montserrat'; /* Set the Montserrat font as default */
-    --main-body-font: 'Newsreader'; /* Set the font for the main body */
-    --heading-font: 'Josefin Slab'; /* Set the font for headings */
-    --brand-font: 'Lobster';
+    --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 */
+    --brand-font: 'Lobster', serif; /* A classic, refined branding font */
+    --brand-color: white;
+}
+
+[data-theme="light"] {
+    --color-bg: #f4f1ee;
+    --color-bg-light: #e8e4df;
+    --color-text: #2a2a2a;
+    --color-text-mid: #3a3a3a;   /* Warm light gray */
+    --brand-color: black;
 }