Marketplace: retro theme

database_assets/com.nebula.retro/retro.css

@@ -0,0 +1,24 @@
+:root {
+    --background-primary: #000000;
+    --background-lighter: #000000;
+    --navbar-color: #020805;
+    --navbar-height: 60px;
+    --navbar-text-color: #3cb371;
+    --navbar-link-color: #3cb371;
+    --navbar-link-hover-color: white;
+    --input-text-color: #3cb371;
+    --input-placeholder-color: white;
+    --input-background-color: #000000;
+    --input-border-color: #3cb371;
+    --input-border-size: 1.3px;
+    --navbar-logo-filter: none;
+    --dropdown-option-hover-color: #000000;
+    --tab-color: #000000;
+    --border-color: #3cb371;
+    --font-family: 'terminal';
+}
+
+@font-face {
+    font-family: terminal;
+    src: url('./terminal.ttf');
+}

server/dbSetup.ts

@@ -59,9 +59,20 @@ async function setupDB(db: ModelStatic<CatalogModel>) {
             author: "Nebula Services",
             version: "1.0.0",
             description: "A sleek light theme for Nebula",
-            tags: ["Theme", "Simple", "light", "light mode"],
+            tags: ["Theme", "Simple", "Light"],
             payload: "light.css",
             type: "theme"
+        },
+        {
+            package_name: "com.nebula.retro",
+            title: "Retro Theme",
+            image: "retro.png",
+            author: "Nebula Services",
+            version: "1.0.0",
+            description: "Give a retro look to Nebula",
+            tags: ["Theme", "Simple", "Dark", "Retro"],
+            payload: "retro.css",
+            type: "theme"
         }
     ];
     const dbItems = await db.findAll();

server/server.ts

@@ -115,9 +115,9 @@ app.get("/api/catalog-assets/", async (request: CatalogAssetsReq, reply) => {
             };
             return acc;
         }, {});
-        reply.send({ assets, pages: Math.ceil(totalItems / 20) });
+        return reply.send({ assets, pages: Math.ceil(totalItems / 20) });
     } catch (error) {
-        reply.status(500).send({ error: "An error occured" });
+        return reply.status(500).send({ error: "An error occured" });
     }
 });
 

src/layouts/Layout.astro

@@ -96,10 +96,11 @@ const { title, noHeader } = Astro.props;
           rgb(var(--accent)),
           rgb(var(--accent-light)) 30%,
           white 60%
-        );
+              );
+        font-family: Roboto, sans-serif;
       }
       html {
-        font-family: system-ui, sans-serif;
+          font-family: var(--font-family), Roboto, sans-serif;
         background: #13151a;
         background-size: 224px;
       }
@@ -115,7 +116,7 @@ const { title, noHeader } = Astro.props;
           monospace;
       }
       .roboto {
-        font-family: Roboto;
+          font-family: var(--font-family), Roboto;
       }
     </style>
   </body>

src/layouts/SettingsLayout.astro

@@ -7,7 +7,7 @@ import SidebarButton from "@components/SidebarButton.astro";
 import { Icon } from "astro-icon/components";
 ---
 
-<div class="flex flex-row">
+<div class="flex flex-row roboto">
   <div class="text-text-color mt-16 fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col flex md:flex-row">
       <div class="items-center p-3 flex flex-row border-border-color gap-5 border-r-2 md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0">
       <SidebarButton title={t("settings.appearance")} route={`/${lang}/settings/appearance`}>

src/layouts/SettingsSection.astro

@@ -2,7 +2,7 @@
 const { title, subtitle } = Astro.props;
 ---
 
-<div class="mt-5">
+<div class="mt-5 roboto">
   <hr />
   <div class="mt-3">
     <div class="text-2xl font-semibold">{title}</div>

src/pages/[lang]/index.astro

@@ -19,13 +19,13 @@ import { VERSION } from "astro:env/client";
         <div class="h-32 w-32 fill-navbar-text-color">
           <Logo />
         </div>
-        <h1 class="font-roboto whitespace-nowrap font-bold text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto">
+        <h1 class="roboto whitespace-nowrap font-bold text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto">
           nebula.
         </h1>
       </div>
       <input
         id="nebula-input"
-        class="transition-all duration-300 font-roboto h-14 rounded-t-2xl w-10/12 rounded-b-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text roboto focus:outline-none md:w-3/12"
+        class="transition-all duration-300 roboto h-14 rounded-t-2xl w-10/12 rounded-b-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text roboto focus:outline-none md:w-3/12"
         placeholder={t("home.placeholder")}
       />
       <div
@@ -38,7 +38,7 @@ import { VERSION } from "astro:env/client";
       id="neb-iframe"
       class="hidden z-100 w-full h-full absolute top-0 bottom-0 bg-primary"
       ></iframe>
-    <div id="version" class="flex flex-row w-full absolute bottom-4 pr-4 pl-4 text-text-color h-6 justify-between"> 
+    <div id="version" class="flex flex-row w-full absolute bottom-4 pr-4 pl-4 text-text-color h-6 justify-between roboto"> 
         <p> Version: { VERSION } </p>
         <p> &copy; Nebula Services 2024 </p>
     </div>

src/pages/catalog/[...page].astro

@@ -15,7 +15,7 @@ const lastPage = assetsJson.pages;
 ---
 
 <Layout title="Catalog">
-  <div class="flex mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center overflow-auto">
+  <div class="flex mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center overflow-auto roboto">
       <div class="w-full flex flex-col gap-4 jusitfy-center items-center text-text-color mt-9"> 
           <h1 class="text-5xl font-bold"> Nebula Catalog </h1>
           <p class="text-xl"> The Nebula Catalog is a place for you to find user-created themes and plugins. </p>