feat(codeberg): accessible header, landing page

styles/codeberg/catppuccin.user.less

@@ -18,37 +18,71 @@
 @import "https://userstyles.catppuccin.com/lib/lib.less";
 
 @-moz-document domain("codeberg.org") {
+  /* GITEA */
   @import (css)
     url("https://catppuccin.github.io/gitea/theme-catppuccin-@{lightFlavor}-@{accentColor}.css")
     (prefers-color-scheme: light);
   @import (css)
     url("https://catppuccin.github.io/gitea/theme-catppuccin-@{darkFlavor}-@{accentColor}.css")
     (prefers-color-scheme: dark);
+  /* @import url(CM_LIB_URL); */
 }
 
+@-moz-document domain("blog.codeberg.org") {
+  @import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css");
+}
+
+@-moz-document domain("docs.codeberg.org") {
+  @import url("https://prismjs.catppuccin.com/variables.important.css");
+}
+
+/*
+ * @-moz-document domain("donate.codeberg.org") {
+ *   @import url(PICO_LIB_URL);
+ * }
+ */
+
 @-moz-document domain("codeberg.org") {
   [data-theme="codeberg-dark"],
   [data-theme="codeberg-light"],
   [data-theme="codeberg-auto"] {
     @media (prefers-color-scheme: light) {
       #catppuccin(@lightFlavor);
     }
+
     @media (prefers-color-scheme: dark) {
       #catppuccin(@darkFlavor);
     }
   }
 
   #catppuccin(@flavor) {
     #lib.palette();
-    // #lib.defaults(); // Not needed, themed in upstream Gitea port.
+    /*
+     * #lib.defaults();
+     * This isn't needed, themed in upstream Gitea port.
+     */
 
     --color-body: @base;
     --color-nav-text: @crust;
-    --color-nav-hover-bg: darken(@accent, 5%);
     --color-secondary-nav-bg: @surface0;
     --color-link: @blue;
     --color-footer-text: @text;
 
+    .ui.secondary.menu .dropdown.item:hover,
+    .ui.secondary.menu a.item:hover,
+    .ui.secondary.menu a.active.item:hover {
+      background-color: var(--color-nav-hover-bg);
+    }
+
+    .ui.secondary.menu .dropdown.item:focus,
+    .ui.secondary.menu .dropdown.item:active,
+    .ui.secondary.menu a.item:focus,
+    .ui.secondary.menu a.item:active,
+    .ui.secondary.menu a.active.item:focus,
+    .ui.secondary.menu a.active.item:active {
+      background-color: var(--color-nav-active-bg);
+    }
+
     .ui.basic.red.buttons .button,
     .ui.basic.red.button {
       &:hover,
@@ -59,6 +93,33 @@
       }
     }
 
+    .ui.secondary.pointing.menu .active.item,
+    .ui.secondary.pointing.menu .active.item:hover,
+    .ui.secondary.pointing.menu .active.item:focus,
+    .ui.secondary.pointing.menu .dropdown.item:hover,
+    .ui.secondary.pointing.menu .dropdown.item:focus {
+      color: var(--color-text-dark);
+    }
+
+    .sha.label.isSigned.isVerified {
+      color: @green;
+    }
+
+    .sha.label.isSigned.isVerified .signature {
+      --color-light: fade(@green, 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 +133,92 @@
       }
     }
 
+    /* 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;
         }
-      }
 
-      .menu {
-        > a, button, details > summary {
-          color: @base;
+        a.item:hover,
+        details.dropdown > summary:hover,
+        button.item:hover {
+          background-color: @accent !important;
+          color: @base !important;
+        }
+
+        a.item:focus,
+        a.item:active,
+        details.dropdown > summary:focus,
+        details.dropdown > summary:active,
+        details.dropdown[open] > summary,
+        button.item:focus,
+        button.item:active {
+          background-color: darken(@accent, 5%) !important;
+          color: @base !important;
         }
 
-        .donation-pretty {
-          --color-secondary-alpha-60: fade(darken(@accent, 10%), 60%)
-            !important;
+        a.item.active,
+        details.dropdown > summary.active,
+        details.dropdown[open] > summary,
+        button.item.active {
+          background-color: @accent !important;
+          color: @base !important;
+        }
+
+        a.item.active:hover,
+        details.dropdown > summary.active:hover,
+        button.item.active:hover {
+          background-color: darken(@accent, 5%) !important;
+          color: @base !important;
+        }
+
+        a.item.active:focus,
+        a.item.active:active,
+        details.dropdown > summary.active:focus,
+        details.dropdown > summary.active:active,
+        button.item.active:focus,
+        button.item.active:active {
+          background-color: darken(@accent, 10%) !important;
+          color: @base !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%);
           }
         }
       }
+
+      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 +230,117 @@
       a:hover {
         color: @blue !important;
       }
+
+      .language.button {
+        &.active {
+          color: @base;
+          background-color: @accent;
+        }
+
+        &:hover {
+          color: @base;
+          background-color: darken(@accent, 5%);
+        }
+
+        &:active,
+        &:focus {
+          color: @base;
+          background-color: darken(@accent, 10%);
+        }
+      }
+    }
+
+    /* 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;
+          }
+        }
+      }
     }
   }
 }