Changed landing background & removed dark mode

lodinesoftware · Dec 14, 2023 · 587ecd4 · 587ecd4
1 parent 862926d
commit 587ecd4
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 53 deletions.
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -8,10 +8,3 @@
   --bs-link-hover-color: #ff3da4;
   --bs-link-hover-color-rgb: 255, 61, 164;
 }
-
-[data-bs-theme="dark"] {
-  --bs-body-bg: #0f0f0f;
-  --bs-body-bg-rgb: 15, 15, 15;
-  --bs-tertiary-bg: #161616;
-  --bs-tertiary-bg-rgb: 22, 22, 22;
-}
diff --git a/assets/images/brand/wordmark_light.svg b/assets/images/brand/wordmark_light.svg
diff --git a/assets/images/landing/landing-bg.webp b/assets/images/landing/landing-bg.webp
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -8,14 +8,6 @@
             alt="Lodine"
             width="120"
             class="d-inline-block align-text-top"
-            v-if="colorMode.value == 'light'"
-          />
-          <img
-            src="~/assets/images/brand/wordmark_light.svg"
-            alt="Lodine"
-            width="120"
-            class="d-inline-block align-text-top"
-            v-if="colorMode.value == 'dark'"
           />
         </NuxtLink>
         <button
@@ -80,11 +72,6 @@
             </ul>
           </div>
         </div>
-        <select class="w-auto form-select" v-model="colorMode.preference">
-          <option value="system">System</option>
-          <option value="light">Light</option>
-          <option value="dark">Dark</option>
-        </select>
       </div>
     </footer>
   </div>
@@ -107,7 +94,3 @@ main {
   }
 }
 </style>
-
-<script setup>
-const colorMode = useColorMode()
-</script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -34,10 +34,6 @@ export default defineNuxtConfig({
       ],
     },
   },
-  modules: ["nuxt-icons", "@nuxtjs/color-mode"],
-  colorMode: {
-    preference: "light",
-    dataValue: "bs-theme",
-  },
+  modules: ["nuxt-icons"],
   css: ["~/assets/css/custom.css"],
 })
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,34 +1,48 @@
 <template>
   <div
-    class="d-flex align-items-center text-center text-white bg-primary w-100 h-100"
+    class="banner d-flex align-items-center text-center text-white w-100 h-100"
   >
-    <div class="container">
-      <h1 class="fw-bold">We're Lodine Software!</h1>
-      <h4>A self-funded software company</h4>
-      <div class="d-inline-flex gap-2 mt-2">
-        <a
-          href="https://go.lodine.xyz/twitter"
-          target="_blank"
-          class="btn btn-light"
-          >Twitter</a
-        >
-        <a
-          href="https://go.lodine.xyz/instagram"
-          target="_blank"
-          class="btn btn-light"
-          >Instagram</a
-        >
-        <a
-          href="https://go.lodine.xyz/itch"
-          target="_blank"
-          class="btn btn-light"
-          >Itch.io</a
-        >
+    <div class="inner w-100 py-3">
+      <div class="container">
+        <h1 class="fw-bold">We're Lodine Software!</h1>
+        <h4>A self-funded software company</h4>
+        <div class="d-inline-flex gap-2 mt-2">
+          <a
+            href="https://go.lodine.xyz/twitter"
+            target="_blank"
+            class="btn btn-light"
+            >Twitter</a
+          >
+          <a
+            href="https://go.lodine.xyz/instagram"
+            target="_blank"
+            class="btn btn-light"
+            >Instagram</a
+          >
+          <a
+            href="https://go.lodine.xyz/itch"
+            target="_blank"
+            class="btn btn-light"
+            >Itch.io</a
+          >
+        </div>
       </div>
     </div>
   </div>
 </template>
 
+<style lang="scss" scoped>
+.banner {
+  background: url("assets/images/landing/landing-bg.webp");
+  background-size: cover;
+
+  .inner {
+    background: rgba($color: #000000, $alpha: 0.8);
+    backdrop-filter: blur(3px);
+  }
+}
+</style>
+
 <script setup>
 useHead({
   title: "Home",