feat(codeberg): accessible header, themed landing page.

styles/codeberg/catppuccin.user.less

@@ -33,6 +33,7 @@
     @media (prefers-color-scheme: light) {
       #catppuccin(@lightFlavor);
     }
+
     @media (prefers-color-scheme: dark) {
       #catppuccin(@darkFlavor);
     }
@@ -44,11 +45,30 @@
 
     --color-body: @base;
     --color-nav-text: @crust;
-    --color-nav-hover-bg: darken(@accent, 5%);
     --color-secondary-nav-bg: @surface0;
+    --color-nav-hover-bg: @surface1;
+    --color-nav-active-bg: @surface2;
     --color-link: @blue;
     --color-footer-text: @text;
 
+    .ui.secondary.menu {
+      .dropdown.item, .item, .active.item {
+        &:hover {
+          background-color: var(--color-nav-hover-bg);
+        }
+
+        &:active, &:focus {
+          background-color: var(--color-nav-active-bg);
+        }
+      }
+
+      &.pointing {
+        .active.item, .dropdown.item:is(:hover, :focus) {
+          color: var(--color-text-dark);
+        }
+      }
+    }
+
     .ui.basic.red.buttons .button,
     .ui.basic.red.button {
       &:hover,
@@ -59,6 +79,37 @@
       }
     }
 
+    .sha.label {
+      &.isSigned {
+        &.isVerified {
+          color: @green;
+
+          .signature {
+            --color-light: fade(@green, 30%);
+          }
+        }
+
+        &.isWarning {
+          color: @red;
+
+          .signature {
+            --color-light: fade(@red, 30%);
+          }
+        }
+      }
+    }
+
+    /* HUNK HEADER */
+    .tag-code,
+    .tag-code td {
+      color: @peach !important;
+      background-color: @surface0 !important;
+
+      &.lines-num {
+        background-color: @surface1 !important;
+      }
+    }
+
     #codeberg-logo(@color) {
       @svg: escape(
         '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><defs><linearGradient id="b" x1="42519.285" x2="42575.336" y1="-7078.7891" y2="-6966.9312" gradientUnits="userSpaceOnUse" href="#a"/><linearGradient id="a"><stop color="@{color}" offset="0" stop-opacity="0"/><stop offset=".495" stop-color="@{color}" stop-opacity=".3"/><stop offset="1" stop-color="@{color}" stop-opacity=".3"/></linearGradient></defs><path fill="url(#b)" d="M42519.285-7078.79a.76.568 0 0 0-.738.675l33.586 125.888a87.2 87.2 0 0 0 39.381-33.763l-71.565-92.52a.76.568 0 0 0-.664-.28" transform="translate(-5840.572 980.524)scale(.13766)"/><path fill="@{color}" d="M12.003.525A12.003 12.003 0 0 0 0 12.533 11.9 11.9 0 0 0 1.826 18.9L11.838 5.956c.068-.09.25-.09.324 0l10.007 12.939A11.9 11.9 0 0 0 24 12.522 12.003 12.003 0 0 0 12.003.525"/></svg>'
@@ -72,27 +123,85 @@
       }
     }
 
+    /* NAVBAR */
     #navbar {
-      a#navbar-logo {
-        img {
-          #codeberg-logo(@base);
+      background-color: var(--color-nav-bg) !important;
+
+      > .menu,
+      > .menu .menu {
+        a,
+        details > summary,
+        button {
+          color: @text !important;
+
+          &.item {
+            &:hover {
+              background-color: @accent !important;
+              color: @base !important;
+            }
+
+            &:active, &:focus {
+              background-color: darken(@accent, 5%) !important;
+              color: @base !important;
+            }
+
+            &.active {
+              background-color: @accent !important;
+              color: @base !important;
+
+              &:hover {
+                background-color: darken(@accent, 5%) !important;
+                color: @base !important;
+              }
+
+              &:active, &:focus {
+                background-color: darken(@accent, 10%) !important;
+                color: @base !important;
+              }
+            }
+          }
         }
-      }
 
-      .menu {
-        > a, button, details > summary {
-          color: @base;
+        details.dropdown[open] > summary {
+          background-color: @accent !important;
+          color: @base !important;
         }
 
-        .donation-pretty {
-          --color-secondary-alpha-60: fade(darken(@accent, 10%), 60%)
-            !important;
+        a.donation-pretty {
+          --donation-pretty-gradient-color-1: @accent;
+          --donation-pretty-gradient-color-2: darken(@accent, 5%);
+          color: @base !important;
 
           &:hover {
-            background: darken(@accent, 3%) !important;
+            --donation-pretty-gradient-color-1: darken(@accent, 5%);
+            --donation-pretty-gradient-color-2: darken(@accent, 10%);
           }
+
+          &:active, &:focus {
+            --donation-pretty-gradient-color-1: darken(@accent, 10%);
+            --donation-pretty-gradient-color-2: darken(@accent, 15%);
+          }
+        }
+      }
+
+      a#navbar-logo {
+        img {
+          #codeberg-logo(@accent);
+        }
+
+        &:hover img {
+          #codeberg-logo(@base);
         }
       }
+
+      img[src^="/assets/img/svg/forgejo-wordmark"] {
+        filter: @text-filter;
+      }
+    }
+
+    /* Otherwise we've got @blue on @green, which is impossible to see :] */
+    .repository .ui.attached.isSigned.isVerified.bottom a strong {
+      color: @crust;
     }
 
     footer {
@@ -104,6 +213,120 @@
       a:hover {
         color: @blue !important;
       }
+
+      .language.button {
+        &:not(.active) {
+          &:hover {
+            color: @base;
+            background-color: darken(@accent, 5%);
+          }
+
+          &:active, &:focus {
+            color: @base;
+            background-color: darken(@accent, 10%);
+          }
+        }
+
+        &.active {
+          color: @base;
+          background-color: @accent;
+        }
+      }
+    }
+
+    /* HOMEPAGE */
+    main {
+      a.button {
+        svg {
+          filter: drop-shadow(-1px -2px 0 @yellow);
+        }
+
+        &:hover svg {
+          filter: drop-shadow(-1px -2px 0 darken(@yellow, 10%));
+        }
+      }
+
+      header {
+        color: @text;
+
+        .header-social-links a {
+          color: @accent;
+
+          &:hover {
+            color: darken(@accent, 5%);
+          }
+        }
+
+        .header-logo img {
+          filter: @text-filter;
+        }
+      }
+
+      section#home-section-about {
+        color: @text;
+
+        .home-section-about-box-container {
+          .home-section-about-box {
+            background-image: linear-gradient(
+              to top,
+              fade(@accent, 30%) 40%,
+              fade(@accent, 40%)
+            );
+          }
+
+          .home-section-about-register-button-container a {
+            color: @base;
+            text-shadow: -1px -2px 0 @yellow;
+            background-color: @yellow;
+
+            &:hover {
+              text-shadow: -1px -2px 0 darken(@yellow, 10%);
+              background-color: darken(@yellow, 5%);
+            }
+          }
+        }
+
+        .home-section-about-container div {
+          color: @accent;
+
+          p.powered-by-forgejo a {
+            color: @accent;
+          }
+        }
+      }
+
+      section#home-section-support {
+        color: @text;
+
+        /* Yellow buttons */
+
+        div a {
+          color: @base;
+          text-shadow: -1px -2px 0 @yellow;
+          background-color: @yellow;
+
+          &:hover {
+            text-shadow: -1px -2px 0 darken(@yellow, 10%);
+            background-color: darken(@yellow, 5%);
+          }
+        }
+
+        /* Your support helps us grow! :hearts: */
+
+        h3 svg.svg.codeberg-icon-hearts {
+          path:nth-child(1) {
+            fill: @peach !important;
+          }
+
+          path:nth-child(2) {
+            fill: @yellow !important;
+          }
+
+          path:nth-child(3) {
+            fill: @sapphire !important;
+          }
+        }
+      }
     }
   }
 }