@casoon/pages-theme 0.12.8 → 0.12.9

package/components/CallToAction.astro

@@ -28,8 +28,9 @@ const { title, href, label } = Astro.props;
     text-align: center;
   }
   h2 {
-    max-width: 14ch;
+    max-width: 18ch;
     margin: 0;
+    text-wrap: balance;
     color: #fff;
     font-size: clamp(40px, 6vw, 70px);
     font-weight: 600;

package/components/Footer.astro

@@ -1,6 +1,5 @@
 ---
 import config from 'virtual:casoon-pages/config';
-import logo from '../assets/casoon-logo.svg';
 import logoDark from '../assets/casoon-logo-dark.svg';
 import { t } from '../lib/i18n';
 import { CASOON_URL, catalogUrl, url } from '../lib/url';
@@ -41,33 +40,35 @@ const columns = [
 ---
 
 <footer class="footer">
-  <div class="cols">
-    <div>
-      <a class="logo" href={CASOON_URL}>
-        <img class="logo-light" src={logo.src} width="150" height="41" alt="CASOON" />
-        <img class="logo-dark" src={logoDark.src} width="150" height="41" alt="CASOON" />
-      </a>
-      <p>{config.description}</p>
-      <p class="by">{s.footerBy} · Jörn Seidel</p>
+  <div class="top">
+    <div class="intro">
+      <p class="name">{config.name}</p>
+      <p class="description">{config.description}</p>
+    </div>
+    <div class="cols">
+      {
+        columns.filter((col) => col.links.length > 0).map((col) => (
+          <nav aria-label={col.title}>
+            <p class="title">{col.title}</p>
+            <ul>
+              {col.links.map((link) => (
+                <li>
+                  <a href={link.href}>{link.label}</a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ))
+      }
     </div>
-    {
-      columns.filter((col) => col.links.length > 0).map((col) => (
-        <nav aria-label={col.title}>
-          <p class="title">{col.title}</p>
-          <ul>
-            {col.links.map((link) => (
-              <li>
-                <a href={link.href}>{link.label}</a>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      ))
-    }
   </div>
   <div class="bottom">
-    <span>{config.license && `${s.license(config.license)} · `}© {new Date().getFullYear()} Jörn Seidel</span>
+    <a class="by" href={CASOON_URL}>
+      <img src={logoDark.src} width="150" height="41" alt="CASOON" />
+      <span>{s.footerBy} · Jörn Seidel</span>
+    </a>
     <span class="legal">
+      <span>{config.license && `${s.license(config.license)} · `}© {new Date().getFullYear()}</span>
       <a href={IMPRESSUM}>{s.imprint}</a>
       <a href={DATENSCHUTZ}>{s.privacyPolicy}</a>
     </span>
@@ -78,47 +79,56 @@ const columns = [
   /* Black footer in both themes. */
   .footer {
     --text: #b4b1ac;
-    --muted: #b4b1ac;
+    --muted: #8f8b85;
     --heading: #fff;
     --border: rgb(255 255 255 / 0.12);
 
     background: #11100e;
     color: var(--text);
-    font-size: 14px;
+    font-size: 15px;
   }
-  .cols {
+  .top {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 40px;
+    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+    gap: 48px 64px;
     max-width: var(--max);
     margin: 0 auto;
-    padding: 80px 24px 48px;
+    padding: 96px 24px 72px;
   }
-  .logo {
-    display: inline-block;
-    margin-bottom: 14px;
+  .intro p {
+    margin: 0;
   }
-  .logo img {
-    display: block;
-    width: 120px;
-    height: auto;
+  .name {
+    color: var(--heading);
+    font-size: clamp(36px, 4.5vw, 56px);
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    line-height: 1;
   }
-  .logo-light {
-    display: none !important;
+  .name::after {
+    content: '.';
+    color: var(--accent-fill);
   }
-  p {
-    margin: 0 0 6px;
-    max-width: 32ch;
+  .intro .description {
+    max-width: 34ch;
+    margin-top: 20px;
+    color: var(--text);
+    font-size: 17px;
+    line-height: 1.5;
+    text-wrap: pretty;
   }
-  .by {
-    color: var(--muted);
-    font-size: 12.5px;
+  .cols {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 32px;
   }
   .title {
-    margin-bottom: 16px;
-    color: var(--heading);
-    font-size: 18px;
-    font-weight: 500;
+    margin: 0 0 18px;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
   }
   ul {
     display: flex;
@@ -129,27 +139,50 @@ const columns = [
     list-style: none;
   }
   ul a {
-    color: var(--text);
+    color: var(--heading);
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    text-underline-offset: 4px;
+    transition: text-decoration-color 0.2s;
   }
   ul a:hover {
-    color: var(--heading);
+    text-decoration-color: currentColor;
+  }
+  ul a[href^='http']::after {
+    content: ' ↗' / '';
+    color: var(--muted);
   }
   .bottom {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     justify-content: space-between;
-    gap: 16px;
+    gap: 16px 32px;
     max-width: var(--max);
     margin: 0 auto;
-    padding: 16px 24px 40px;
+    padding: 24px 24px 40px;
     border-top: 1px solid var(--border);
     color: var(--muted);
     font-size: 13px;
   }
+  .by {
+    display: inline-flex;
+    align-items: center;
+    gap: 14px;
+    color: var(--muted);
+  }
+  .by img {
+    display: block;
+    width: 96px;
+    height: auto;
+  }
+  .by:hover {
+    color: var(--heading);
+  }
   .legal {
     display: flex;
     flex-wrap: wrap;
-    gap: 18px;
+    gap: 8px 20px;
   }
   .legal a {
     color: var(--muted);
@@ -157,4 +190,10 @@ const columns = [
   .legal a:hover {
     color: var(--heading);
   }
+  @media (max-width: 760px) {
+    .top {
+      grid-template-columns: 1fr;
+      padding-top: 72px;
+    }
+  }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casoon/pages-theme",
-  "version": "0.12.8",
+  "version": "0.12.9",
   "description": "Shared Astro theme for the GitHub Pages sites of CASOON open-source projects",
   "type": "module",
   "license": "MIT",