Tweak titles and spacing.

dam5s · Feb 18, 2024 · f1c34b9 · f1c34b9
1 parent 591ac17
commit f1c34b9
Showing 1 changed file with 35 additions and 16 deletions.
diff --git a/Damo.Io.Server/www/styles/app.css b/Damo.Io.Server/www/styles/app.css
@@ -196,27 +196,30 @@ figure {
 
 article {
     background-color: var(--card-color);
-    padding: var(--spacing-2) var(--spacing-4);
+    padding: var(--spacing-4);
     margin: 0 0 var(--spacing-2) 0;
     border-radius: 1rem;
     box-shadow: var(--card-shadow);
 
     header {
         overflow: hidden;
+        margin-bottom: var(--spacing-4);
+
+        h1 {
+            a:link, a:visited {
+                color: var(--title-color);
+            }
+        }
+
+        h2 {
+            margin: 0;
+            font-size: 1.7rem;
+            font-weight: normal;
+            letter-spacing: -0.1px;
+            color: var(--article-date-text-color);
+        }
     }
 
-    header h2 {
-        margin: 0;
-        float: right;
-        font-size: 1.7rem;
-        font-weight: normal;
-        letter-spacing: -0.1px;
-        color: var(--article-date-text-color);
-    }
-
-    h1 a:link, h1 a:visited {
-        color: var(--title-color);
-    }
 
     img {
         max-width: 100%;
@@ -239,11 +242,19 @@ article:last-child {
 article.Social {
     background-image: url('data:image/svg+xml;utf8,%3Csvg%20height%3D%222500%22%20width%3D%222331%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-0.41%200.22%20747.62%20801.4499999999999%22%3E%3Cpath%20d%3D%22M729.94%20479.5c-10.96%2056.4-98.17%20118.12-198.34%20130.08-52.23%206.23-103.66%2011.96-158.49%209.44-89.68-4.1-160.45-21.4-160.45-21.4%200%208.73.54%2017.04%201.62%2024.81%2011.66%2088.52%2087.76%2093.82%20159.84%2096.29%2072.76%202.49%20137.55-17.94%20137.55-17.94l2.99%2065.79s-50.89%2027.32-141.55%2032.35c-50%202.75-112.07-1.26-184.37-20.39C31.94%20737.02%204.97%20569.86.85%20400.26-.41%20349.9.37%20302.42.37%20262.7.37%2089.27%20113.99%2038.44%20113.99%2038.44%20171.28%2012.12%20269.59%201.06%20371.79.22h2.52c102.19.84%20200.57%2011.9%20257.86%2038.22%200%200%20113.62%2050.83%20113.62%20224.26%200%200%201.42%20127.96-15.85%20216.8%22%20fill%3D%22%23888%22%2F%3E%3Cpath%20d%3D%22M611.77%20276.16v209.99h-83.2V282.33c0-42.97-18.07-64.77-54.23-64.77-39.98%200-60.01%2025.86-60.01%2077.02v111.57h-82.71V294.58c0-51.16-20.04-77.02-60.01-77.02-36.16%200-54.24%2021.8-54.24%2064.77v203.82h-83.19V276.16c0-42.92%2010.93-77.03%2032.88-102.26%2022.63-25.23%2052.27-38.17%2089.07-38.17%2042.57%200%2074.81%2016.37%2096.12%2049.1l20.72%2034.74%2020.73-34.74c21.31-32.73%2053.55-49.1%2096.12-49.1%2036.79%200%2066.44%2012.94%2089.07%2038.17%2021.95%2025.23%2032.88%2059.34%2032.88%20102.26z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
     background-repeat: no-repeat;
-    background-position: 4.8rem 2.4rem;
-    background-size: 4.8rem 4.8rem;
+    background-position-x: right var(--spacing-4);
+    background-position-y: var(--spacing-2);
+    background-size: var(--spacing-4) var(--spacing-4);
 
+    header {
+        height: var(--spacing-4);
+
+        h2 {
+            line-height: var(--spacing-4);
+        }
+    }
+
     section {
-        padding-top: var(--spacing-2);
         line-height: 130%;
         font-size: 2.4rem;
         text-align: center;
@@ -306,4 +317,12 @@ article.Social {
             width: auto;
         }
     }
+
+    article header {
+        display: block;
+
+        h1 {
+            margin-bottom: var(--spacing);
+        }
+    }
 }