Various design improvements; Trying Geist font

usevital · Jul 10, 2024 · cb376c7 · cb376c7
1 parent 39259c7
commit cb376c7
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 100 deletions.
diff --git a/components/projectCard.vue b/components/projectCard.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="flex flex-col gap-4 bg-[color:var(--brand-colour)] rounded-2xl max-w-full"
-  >
+  <div class="flex flex-col gap-4 max-w-full">
     <!-- Title -->
     <span
       class="gap-4 flex flex-row items-center text-[color:var(--big-text-colour)] text-4xl sm:text-5xl font-bold"
@@ -21,7 +19,7 @@
       {{ description }}
     </div>
     <!-- Buttons -->
-    <div class="flex mb-5 gap-3">
+    <div class="flex flex-row flex-wrap gap-3">
       <NuxtLink
         v-for="(link, index) in urls"
         :to="link"

diff --git a/components/projectSection.vue b/components/projectSection.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="flex flex-col flex-wrap gap-8">
-    <span class="text-white italic text-[4rem]">
+  <div class="flex flex-col flex-wrap gap-6 pb-8">
+    <span
+      class="text-[var(--big-text-color)] italic font-['Geist Mono'] text-[4rem]"
+    >
       <span class="font-[250] tracking wider">{{ title }}</span>
     </span>
     <ProjectCard

diff --git a/i18n/lang/en-US.json b/i18n/lang/en-US.json
@@ -6,7 +6,7 @@
     "footer": {
       "disclaimer": "THIS SITE IS IN NO WAY AFFILIATED WITH ESSENTIAL OR SPARK UNIVERSE",
       "disclaimer_2": "NOT AN OFFICIAL MINECRAFT PRODUCT. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT.",
-      "disclaimer_translation_instructions": "Do not translate 'ESSENTIAL' or 'SPARK UNIVERSE'.",
+      "disclaimer_translation_instructions": "Do not translate 'ESSENTIAL', 'SPARK UNIVERSE', 'MOJANG', 'MINECRAFT' or 'MICROSOFT'",
       "open_source_1": "This page is",
       "open_source_2": "open source",
       "about": "About",

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex justify-center flex-col p-6 gap-8">
+  <div class="flex flex-col gap-8 sm:gap-16 bg-[color:var(--brand-colour)]">
     <nav
-      class="sm:mx-[5%] text-[color:var(--big-text-colour)] select-none font-bold bg-[color:var(--brand-colour)] w-[calc(100%-1.5rem-var(--scrollbar-width))] p-2.5 flex flex-row items-center text-base justify-between gap-6 max-w-full"
+      class="sm:px-[calc(5%+2rem)] text-[color:var(--big-text-colour)] select-none font-bold p-8 flex flex-col sm:flex-row items-center text-base justify-between gap-6 max-w-full border-b border-b-slate-800"
     >
       <NuxtLink
         class="font-[500] italic text-lg flex items-center flex-row gap-4 tracking-wider"
@@ -17,20 +17,22 @@
         {{ $t("layout.nav.alternatives") }}
       </NuxtLink>
     </nav>
-
-    <main class="pb-8 sm:mb-0 sm:m-[5%] gap-8 flex-col flex">
+    <main
+      class="flex justify-center flex-col mx-[5%] sm:mx-[calc(5%+2rem)] max-w-full"
+    >
       <slot />
     </main>
-  </div>
 
-  <LogoScroll />
+    <LogoScroll />
 
-  <div class="flex justify-center flex-col gap-8 mt-8">
-    <footer class="flex flex-col gap-0 items-center pb-8">
-      <div
-        class="flex flex-col sm:flex-row items-center sm:items-start sm:justify-center py-6 gap-8"
+    <div class="flex justify-center flex-col gap-8">
+      <footer
+        class="flex flex-col gap-0 items-center pb-8 border-t border-t-slate-800 bg-gradient-to-b from-blue-950 to-black"
       >
-        <!--  <span class="font-[500] text-[var(--text-colour)] text-xs text-center">
+        <div
+          class="flex flex-col sm:flex-row items-center sm:items-start sm:justify-center py-6 gap-8"
+        >
+          <!--  <span class="font-[500] text-[var(--text-colour)] text-xs text-center">
         {{ $t("layout.thank_you") }} &bull; ORIGINALLY CREATED BY BLURRYFACE
         &bull; DESIGNED BY WORLDWIDEPIXEL &bull;
         <ExternalLink to="https://github.com/blryface/notessential">{{
@@ -40,69 +42,72 @@
       <span class="font-[500] italic text-slate-400 text-xs text-center">
         {{ $t("layout.disclaimer") }}
       </span>-->
-        <div class="flex flex-col gap-4 pt-2">
-          <ClientOnly>
-            <ColourableLogo :color="easterEggColour" />
-          </ClientOnly>
-          <div
-            class="flex flex-col gap-1 font-[500] text-[var(--text-colour)] text-sm"
-          >
-            <span>
-              {{ $t("layout.footer.open_source_1") }}
-              <ExternalLink to="https://github.com/blryface/notessential">{{
-                $t("layout.footer.open_source_2")
-              }}</ExternalLink
-              >.</span
+          <div class="flex flex-col items-center sm:items-start gap-4 pt-2">
+            <ClientOnly>
+              <ColourableLogo :color="easterEggColour" />
+            </ClientOnly>
+            <div
+              class="flex flex-col gap-1 font-[500] text-[var(--text-colour)] text-sm"
             >
+              <span>
+                {{ $t("layout.footer.open_source_1") }}
+                <ExternalLink to="https://github.com/blryface/notessential">{{
+                  $t("layout.footer.open_source_2")
+                }}</ExternalLink
+                >.</span
+              >
+            </div>
           </div>
-        </div>
-        <div class="flex flex-row gap-6 sm:gap-8">
-          <div
-            class="flex flex-col gap-2 font-[500] text-[var(--text-colour)] text-sm"
-          >
-            <span class="font-bold text-base">{{
-              $t("layout.footer.about")
-            }}</span>
-            <span
-              >{{ $t("layout.footer.credit_creator") }}
-              <ExternalLink to="https://blurryface.xyz"
-                >Blurryface</ExternalLink
-              ></span
+          <div class="flex flex-row gap-6 sm:gap-8">
+            <div
+              class="flex flex-col gap-2 font-[500] text-[var(--text-colour)] text-sm"
             >
-            <span
-              >{{ $t("layout.footer.credit_designed") }}
-              <ExternalLink to="https://worldwidepixel.ca"
-                >WorldWidePixel</ExternalLink
-              ></span
+              <span class="font-bold text-base">{{
+                $t("layout.footer.about")
+              }}</span>
+              <span
+                >{{ $t("layout.footer.credit_creator") }}
+                <ExternalLink to="https://blurryface.xyz"
+                  >Blurryface</ExternalLink
+                ></span
+              >
+              <span
+                >{{ $t("layout.footer.credit_designed") }}
+                <ExternalLink to="https://worldwidepixel.ca"
+                  >WorldWidePixel</ExternalLink
+                ></span
+              >
+            </div>
+            <div
+              class="flex flex-col gap-2 font-[500] text-[var(--text-colour)] text-sm"
             >
-          </div>
-          <div
-            class="flex flex-col gap-2 font-[500] text-[var(--text-colour)] text-sm"
-          >
-            <span class="font-bold text-base">{{
-              $t("layout.footer.interact")
-            }}</span>
-            <ExternalLink to="https://crowdin.com/project/notessential"
-              >Crowdin <LucideGlobe class="h-5"
-            /></ExternalLink>
-            <ExternalLink to="https://discord.gg/wncdz7e8jy"
-              >Discord <LucideMessageCircle class="h-5"
-            /></ExternalLink>
+              <span class="font-bold text-base">{{
+                $t("layout.footer.interact")
+              }}</span>
+              <ExternalLink to="https://crowdin.com/project/notessential"
+                >Crowdin <LucideGlobe class="h-5"
+              /></ExternalLink>
+              <ExternalLink to="https://discord.gg/wncdz7e8jy"
+                >Discord <LucideMessageCircle class="h-5"
+              /></ExternalLink>
+            </div>
           </div>
         </div>
-      </div>
-      <span class="font-[500] italic text-slate-400 text-xs text-center">
-        {{ $t("layout.footer.disclaimer") }}
-      </span>
-      <span class="font-[500] italic text-slate-400 text-xs text-center">
-        {{ $t("layout.footer.disclaimer_2") }}
-      </span>
-    </footer>
+        <span class="font-[500] text-slate-400 text-xs text-center">
+          {{ $t("layout.footer.disclaimer") }}
+        </span>
+        <span class="font-[500] text-slate-400 text-xs text-center">
+          {{ $t("layout.footer.disclaimer_2") }}
+        </span>
+      </footer>
+    </div>
   </div>
 </template>
 
 <style>
 @import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900);
+@import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css");
+@import url("https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css");
 
 @font-face {
   font-family: "Internal";
@@ -125,7 +130,7 @@
 }
 
 :root {
-  font-family: Inter, Helvetica, sans-serif;
+  font-family: Geist, Inter, Helvetica, sans-serif;
   --brand-colour: rgb(0, 0, 0);
   --brand-background: rgb(0, 0, 0);
   --brand-background-old: rgb(0, 86, 234);

diff --git a/pages/alternatives.vue b/pages/alternatives.vue
@@ -8,7 +8,7 @@
     <span class="text-lg">{{ $t("alternatives.reason") }}</span>
   </span>
 
-  <!-- Need to add a project? It's now data driven. Scroll down to the JSON to add them! -->
+  <!-- Need to add a project? It's now data driven (and localised!). Go to the English lang file (~/i18n/lang/en-US.json) -->
 
   <ProjectSection
     v-if="showAlternatives"
@@ -32,20 +32,6 @@ if (process.client) {
   })
 }
 
-/*
-
-TEMPLATE:
-
-    Name: {
-      description: ["Para1", "Para2", "Para3", "Para4"],
-      icon: "iconUrl",
-      links: {
-        Modrinth: "ModrinthURL",
-      },
-    },
-
-*/
-
 const locale = useI18n().locale.value
 const altMessages = JSON.parse(
   JSON.stringify(useI18n().messages.value[locale].alternatives),

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,19 +1,15 @@
 <template>
-  <div
-    class="flex flex-col gap-2 bg-[color:var(--brand-colour)] p-4 rounded-2xl gap-8"
-  >
-    <ProjectTitleBar>
-      <span
-        class="text-[1.5rem] sm:text-[2rem] md:text-[3rem] lg:text-[4rem] internalFont flex flex-row flex-wrap gap-3"
+  <div class="flex flex-col gap-8">
+    <span
+      class="text-[1.5rem] sm:text-[2rem] md:text-[3rem] lg:text-[4rem] internalFont flex flex-row flex-wrap gap-3"
+    >
+      <span class="font-bold">
+        {{ $t("landing.hero") }}
+        <span class="brand-gradient">{{ minecraftText }}</span
+        >.</span
       >
-        <span class="font-bold">
-          {{ $t("landing.hero") }}
-          <span class="brand-gradient">{{ minecraftText }}</span
-          >.</span
-        >
-      </span>
-      <!-- THE WORD 'MINECRAFT' AND THE 'NOTESSENTIAL' NAME SHOULD NOT BE LOCALISED. -->
-    </ProjectTitleBar>
+    </span>
+    <!-- THE WORD 'MINECRAFT' AND THE 'NOTESSENTIAL' NAME SHOULD NOT BE LOCALISED. -->
 
     <p class="text-2xl">
       {{ $t("landing.reason") }}