Add forgejo card and bump logo images resolution

src/static/css/tailwind.css

@@ -518,18 +518,12 @@
   }
 }
 @layer utilities {
-  .collapse {
-    visibility: collapse;
-  }
   .invisible {
     visibility: hidden;
   }
   .absolute {
     position: absolute;
   }
-  .fixed {
-    position: fixed;
-  }
   .relative {
     position: relative;
   }
@@ -560,8 +554,8 @@
   .col-span-full {
     grid-column: 1 / -1;
   }
-  .col-start-2 {
+  .col-start-3 {
-    grid-column-start: 2;
+    grid-column-start: 3;
   }
   .row-\[1\] {
     grid-row: 1;
@@ -605,6 +599,9 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
+  .mb-32 {
+    margin-bottom: calc(var(--spacing) * 32);
+  }
   .-ml-1 {
     margin-left: calc(var(--spacing) * -1);
   }
@@ -632,15 +629,6 @@
   .inline {
     display: inline;
   }
-  .inline-flex {
-    display: inline-flex;
-  }
-  .list-item {
-    display: list-item;
-  }
-  .table {
-    display: table;
-  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -662,6 +650,9 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-\[100dvh\] {
+    height: 100dvh;
+  }
   .h-\[114px\] {
     height: 114px;
   }
@@ -671,21 +662,12 @@
   .h-full {
     height: 100%;
   }
-  .max-h-\[105\%\] {
+  .h-screen {
-    max-height: 105%;
+    height: 100vh;
-  }
-  .max-h-\[110dvh\] {
-    max-height: 110dvh;
   }
   .max-h-\[512px\] {
     max-height: 512px;
   }
-  .max-h-full {
-    max-height: 100%;
-  }
-  .min-h-\[140dvh\] {
-    min-height: 140dvh;
-  }
   .min-h-\[438px\] {
     min-height: 438px;
   }
@@ -698,9 +680,6 @@
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
-  .w-8 {
-    width: calc(var(--spacing) * 8);
-  }
   .w-\[114px\] {
     width: 114px;
   }
@@ -722,15 +701,9 @@
   .max-w-\[1210px\] {
     max-width: 1210px;
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
   .origin-center {
     transform-origin: center;
   }
@@ -758,15 +731,9 @@
     --tw-scale-z: 150%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
-  .transform {
-    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
-  }
   .animate-ping {
     animation: var(--animate-ping);
   }
-  .resize {
-    resize: both;
-  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -776,8 +743,8 @@
   .grid-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
-  .grid-rows-\[repeat\(4\,minmax\(0\,136px\)\)\] {
+  .grid-rows-\[repeat\(4\,minmax\(0\,160px\)\)\] {
-    grid-template-rows: repeat(4,minmax(0,136px));
+    grid-template-rows: repeat(4,minmax(0,160px));
   }
   .grid-rows-\[repeat\(7\,210px\)\] {
     grid-template-rows: repeat(7,210px);
@@ -821,9 +788,15 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .overflow-clip {
+    overflow: clip;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-x-clip {
+    overflow-x: clip;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -859,12 +832,12 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
-  .from-\[var\(--color\)\/0\] {
+  .from-\[rgba\(var\(--color\)\,\.5\)\] {
-    --tw-gradient-from: var(--color)/0;
+    --tw-gradient-from: rgba(var(--color),.5);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .to-\[var\(--color\)\] {
+  .to-\[rgb\(var\(--color\)\)\] {
-    --tw-gradient-to: var(--color);
+    --tw-gradient-to: rgb(var(--color));
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .to-\[50\%\] {
@@ -897,9 +870,6 @@
   .pb-8 {
     padding-bottom: calc(var(--spacing) * 8);
   }
-  .pb-16 {
-    padding-bottom: calc(var(--spacing) * 16);
-  }
   .text-right {
     text-align: right;
   }
@@ -937,20 +907,6 @@
   .text-white {
     color: var(--color-white);
   }
-  .underline {
-    text-decoration-line: underline;
-  }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
-  .filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1035,11 +991,6 @@
       padding-block: calc(var(--spacing) * 14);
     }
   }
-  .sm\:pb-14 {
-    @media (width >= 40rem) {
-      padding-bottom: calc(var(--spacing) * 14);
-    }
-  }
   .sm\:text-base {
     @media (width >= 40rem) {
       font-size: var(--text-base);
@@ -1051,6 +1002,11 @@
       margin-block: calc(var(--spacing) * -8);
     }
   }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
   .md\:scale-85 {
     @media (width >= 48rem) {
       --tw-scale-x: 85%;
@@ -1077,11 +1033,6 @@
       padding-block: calc(var(--spacing) * 0);
     }
   }
-  .md\:pb-0 {
-    @media (width >= 48rem) {
-      padding-bottom: calc(var(--spacing) * 0);
-    }
-  }
   .md\:text-\[32px\] {
     @media (width >= 48rem) {
       font-size: 32px;
@@ -1232,31 +1183,6 @@
   inherits: false;
   initial-value: 1;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateX(0);
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateY(0);
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: rotateZ(0);
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: skewX(0);
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: skewY(0);
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1312,83 +1238,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-backdrop-sepia {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-duration {
   syntax: "*";
   inherits: false;

src/templates/Bento.tsx

@@ -8,7 +8,7 @@ export default function Bento() {
         logo="/static/images/logos/xbb.png"
         image="/static/images/cards/xbb.png"
         title="XBackBone"
-        color="#111827"
+        color="17,24,39"
         description="Image uploading with ShareX compatibility."
         className="row-[1]"
         link="https://file.wah.su"
@@ -17,7 +17,7 @@ export default function Bento() {
         logo="/static/images/logos/matrix.png"
         image="/static/images/cards/matrix.png"
         title="Matrix"
-        color="#111827"
+        color="17,24,39"
         description="An open network for secure, decentralised communication."
         className="row-[1]"
         link="https://chat.wah.su"
@@ -27,7 +27,7 @@ export default function Bento() {
         logo="/static/images/logos/nextcloud.png"
         image="/static/images/cards/nextcloud.png"
         title="NextCloud"
-        color="#fff"
+        color="255,255,255"
         description="Privacy-Friendly, productivity suite, offering file sharing and collaboration tools."
         className="row-start-1 text-black"
         link="https://cloud.wah.su"
@@ -37,7 +37,7 @@ export default function Bento() {
         logo="/static/images/logos/vaultwarden.png"
         image="/static/images/cards/vaultwarden.png"
         title="Vaultwarden"
-        color="#fff"
+        color="255,255,255"
         description="Unofficial Bitwarden password manager compatible server."
         className="row-start-2 text-black"
         link="https://vault.wah.su"
@@ -47,7 +47,7 @@ export default function Bento() {
         logo="/static/images/logos/immich.png"
         image="/static/images/cards/immich.png"
         title="Immich"
-        color="#000"
+        color="0,0,0"
         description="Platform for managing and browsing your photos. Privacy-Friendly Google Photos alternative."
         className="row-start-2"
         link="https://photos.wah.su"
@@ -56,12 +56,21 @@ export default function Bento() {
         logo="/static/images/logos/linkwarden.png"
         image="/static/images/cards/linkwarden.png"
         title="Linkwarden"
-        color="#111827"
+        color="17,24,39"
         description="Bookmark manager to collect, organize, and preserve webpages."
         className="row-[4]"
         link="https://links.wah.su"
       />
-      <Footer className="col-span-full col-start-2" id="footer" />
+      <BentoCard
+        logo="/static/images/logos/forgejo.png"
+        image="/static/images/cards/forgejo.png"
+        title="Forgejo"
+        color="17,24,39"
+        description="Federated Git Hosting made easy."
+        className="row-[4]"
+        link="https://git.wah.su"
+      />
+      <Footer className="col-span-full col-start-3" id="footer" />
     </div>
   );
 }

src/templates/BentoCards/Big.tsx

@@ -24,7 +24,7 @@ export default function BentoCardBig({
               alt=""
             />
             <div
-              className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[50%] "
+              className="absolute inset-0 bg-gradient-to-r from-[rgba(var(--color),.5)] to-[rgb(var(--color))] to-[50%] "
               style={{ "--color": color } as React.CSSProperties}
             ></div>
           </>
@@ -56,7 +56,7 @@ export default function BentoCardBig({
             alt=""
           />
           <div
-            className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[50%] "
+            className="absolute inset-0 bg-gradient-to-r from-[rgba(var(--color),.5)] to-[rgb(var(--color))] to-[50%] "
             style={{ "--color": color } as React.CSSProperties}
           ></div>
         </>

src/templates/BentoCards/Large.tsx

@@ -24,7 +24,7 @@ export default function BentoCardLarge({
               alt=""
             />
             <div
-              className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[75%] "
+              className="absolute inset-0 bg-gradient-to-r from-[rgba(var(--color),.5)] to-[rgb(var(--color))] to-[75%] "
               style={{ "--color": color } as React.CSSProperties}
             ></div>
           </>
@@ -56,7 +56,7 @@ export default function BentoCardLarge({
             alt=""
           />
           <div
-            className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[75%] "
+            className="absolute inset-0 bg-gradient-to-r from-[rgba(var(--color),.5)] to-[rgb(var(--color))] to-[75%] "
             style={{ "--color": color } as React.CSSProperties}
           ></div>
         </>

src/templates/BentoCards/Normal.tsx

@@ -24,7 +24,7 @@ export default function BentoCardNormal({
               alt=""
             />
             <div
-              className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[75%] "
+              className="absolute inset-0 bg-gradient-to-r from-[rgba(var(--color),.5)] to-[rgb(var(--color))] to-[75%] "
               style={{ "--color": color } as React.CSSProperties}
             ></div>
           </>
@@ -56,7 +56,7 @@ export default function BentoCardNormal({
             alt=""
           />
           <div
-            className="absolute inset-0 bg-gradient-to-r from-[var(--color)/0] to-[var(--color)] to-[75%] "
+            className="absolute inset-0 bg-gradient-to-r from-[rgba(var(--color),.5)] to-[rgb(var(--color))] to-[75%] "
             style={{ "--color": color } as React.CSSProperties}
           ></div>
         </>

src/templates/NotBento.tsx

@@ -8,7 +8,7 @@ export default function NotBento() {
         logo="/static/images/logos/xbb.png"
         image="/static/images/cards/xbb.png"
         title="XBackBone"
-        color="#111827"
+        color="17,24,39"
         description="Image uploading with ShareX compatibility."
         link="https://file.wah.su"
       />
@@ -16,7 +16,7 @@ export default function NotBento() {
         logo="/static/images/logos/matrix.png"
         image="/static/images/cards/matrix.png"
         title="Matrix"
-        color="#111827"
+        color="17,24,39"
         description="An open network for secure, decentralised communication."
         link="https://chat.wah.su"
       />
@@ -24,7 +24,7 @@ export default function NotBento() {
         logo="/static/images/logos/nextcloud.png"
         image="/static/images/cards/nextcloud.png"
         title="NextCloud"
-        color="#fff"
+        color="255,255,255"
         description="Privacy-Friendly, productivity suite, offering file sharing and collaboration tools."
         className=" text-black"
         link="https://cloud.wah.su"
@@ -33,7 +33,7 @@ export default function NotBento() {
         logo="/static/images/logos/vaultwarden.png"
         image="/static/images/cards/vaultwarden.png"
         title="Vaultwarden"
-        color="#fff"
+        color="255,255,255"
         description="Unofficial Bitwarden password manager compatible server."
         className="text-black"
         link="https://vault.wah.su"
@@ -42,7 +42,7 @@ export default function NotBento() {
         logo="/static/images/logos/immich.png"
         image="/static/images/cards/immich.png"
         title="Immich"
-        color="#000"
+        color="0,0,0"
         description="Platform for managing and browsing your photos. Privacy-Friendly Google Photos alternative."
         link="https://photos.wah.su"
       />
@@ -50,10 +50,18 @@ export default function NotBento() {
         logo="/static/images/logos/linkwarden.png"
         image="/static/images/cards/linkwarden.png"
         title="Linkwarden"
-        color="#111827"
+        color="17,24,39"
         description="Bookmark manager to collect, organize, and preserve webpages."
         link="https://links.wah.su"
       />
+      <BentoCard
+        logo="/static/images/logos/forgejo.png"
+        image="/static/images/cards/forgejo.png"
+        title="Forgejo"
+        color="17,24,39"
+        description="Federated Git Hosting made easy."
+        link="https://git.wah.su"
+      />
       <Footer className="col-span-full" id="mobile-footer"/>
     </div>
   );