Merge pull request #40 from reednel/develop

add background, refactor partials

src/layouts/Base.astro

@@ -1,8 +1,8 @@
 ---
 import config from "@/config/config.json";
 import { plainify } from "@/lib/utils/textConverter";
-import Footer from "@/partials/Footer.astro";
-import Header from "@/partials/Header.astro";
+import Footer from "@/components/Footer.astro";
+import Header from "@/components/Header.astro";
 import "@/styles/main.scss";
 
 // types for frontmatters

src/layouts/components/Background.astro

@@ -0,0 +1,35 @@
+
+<div class="">
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+  <div class="dark:light-particle"></div>
+</div>

src/pages/about.astro

@@ -1,6 +1,6 @@
 ---
 import Base from "@/layouts/Base.astro";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 import { markdownify } from "@/lib/utils/textConverter";
 import { Image } from "@astrojs/image/components";
 import { getEntryBySlug } from "astro:content";

src/pages/blog/categories/[category].astro

@@ -5,7 +5,7 @@ import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { getTaxonomy } from "@/lib/taxonomyParser.astro";
 import taxonomyFilter from "@/lib/utils/taxonomyFilter";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 
 export async function getStaticPaths() {
   const categories = await getTaxonomy(

src/pages/blog/categories/index.astro

@@ -3,7 +3,7 @@ import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
 import { humanize } from "@/lib/utils/textConverter";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 
 const { blog_folder }: { blog_folder: string } = config.settings;
 const categories = await getTaxonomy(blog_folder, "categories");

src/pages/blog/index.astro

@@ -6,8 +6,8 @@ import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
 import { sortByDate } from "@/lib/utils/sortFunctions";
-import PageHeader from "@/partials/PageHeader.astro";
-import BlogSidebar from "@/partials/BlogSidebar.astro";
+import PageHeader from "@/components/PageHeader.astro";
+import BlogSidebar from "@/components/BlogSidebar.astro";
 import { getEntryBySlug } from "astro:content";
 
 const { blog_folder } = config.settings;

src/pages/blog/page/[slug].astro

@@ -6,8 +6,8 @@ import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
 import { sortByDate } from "@/lib/utils/sortFunctions";
-import PageHeader from "@/partials/PageHeader.astro";
-import BlogSidebar from "@/partials/BlogSidebar.astro";
+import PageHeader from "@/components/PageHeader.astro";
+import BlogSidebar from "@/components/BlogSidebar.astro";
 import { getEntryBySlug } from "astro:content";
 
 const { blog_folder } = config.settings;

src/pages/blog/tags/[tag].astro

@@ -5,7 +5,7 @@ import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { getTaxonomy } from "@/lib/taxonomyParser.astro";
 import taxonomyFilter from "@/lib/utils/taxonomyFilter";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 
 export async function getStaticPaths() {
   const tags = await getTaxonomy(config.settings.blog_folder, "tags");

src/pages/blog/tags/index.astro

@@ -3,7 +3,7 @@ import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
 import { humanize } from "@/lib/utils/textConverter";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 
 const { blog_folder }: { blog_folder: string } = config.settings;
 const tags = await getTaxonomy(blog_folder, "tags");

src/pages/drink/bottles/[bottle].astro

@@ -5,7 +5,7 @@ import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { getTaxonomy } from "@/lib/taxonomyParser.astro";
 import taxonomyFilter from "@/lib/utils/taxonomyFilter";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 
 export async function getStaticPaths() {
   const bottles = await getTaxonomy(

src/pages/drink/bottles/index.astro

@@ -2,7 +2,7 @@
 import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 
 const { drink_folder }: { drink_folder: string } = config.settings;
 const bottles = await getTaxonomy(drink_folder, "bottles");

src/pages/drink/index.astro

@@ -5,8 +5,8 @@ import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
-import PageHeader from "@/partials/PageHeader.astro";
-import DrinkSidebar from "@/partials/DrinkSidebar.astro";
+import PageHeader from "@/components/PageHeader.astro";
+import DrinkSidebar from "@/components/DrinkSidebar.astro";
 import { getEntryBySlug } from "astro:content";
 
 const { drink_folder } = config.settings;

src/pages/drink/page/[slug].astro

@@ -6,8 +6,8 @@ import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
 import { sortByDate } from "@/lib/utils/sortFunctions";
-import PageHeader from "@/partials/PageHeader.astro";
-import DrinkSidebar from "@/partials/DrinkSidebar.astro";
+import PageHeader from "@/components/PageHeader.astro";
+import DrinkSidebar from "@/components/DrinkSidebar.astro";
 import { getEntryBySlug } from "astro:content";
 
 const { drink_folder } = config.settings;

src/pages/drink/spirits/[spirit].astro

@@ -5,7 +5,7 @@ import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { getTaxonomy } from "@/lib/taxonomyParser.astro";
 import taxonomyFilter from "@/lib/utils/taxonomyFilter";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 
 export async function getStaticPaths() {
   const spirits = await getTaxonomy(

src/pages/drink/spirits/index.astro

@@ -2,7 +2,7 @@
 import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 
 const { drink_folder }: { drink_folder: string } = config.settings;
 const spirits = await getTaxonomy(drink_folder, "spirits");

src/pages/drink/tags/[tag].astro

@@ -5,7 +5,7 @@ import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 import { getTaxonomy } from "@/lib/taxonomyParser.astro";
 import taxonomyFilter from "@/lib/utils/taxonomyFilter";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 
 export async function getStaticPaths() {
   const tags = await getTaxonomy(config.settings.drink_folder, "tags");

src/pages/drink/tags/index.astro

@@ -2,7 +2,7 @@
 import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 
 const { drink_folder }: { drink_folder: string } = config.settings;
 const tags = await getTaxonomy(drink_folder, "tags");

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import Base from "@/layouts/Base.astro";
+import Background from "@/components/Background.astro";
 import { markdownify } from "@/lib/utils/textConverter";
 import type { Button, Feature } from "@/types";
 import { getEntryBySlug } from "astro:content";
@@ -22,13 +23,15 @@ const { title, meta_title, banner }: Homepage = homepage.data;
   title={title}
   meta_title={meta_title}
 >
+  <Background />
   <!-- Banner -->
-  <section class="section pt-14">
+  <section class="section pt-14 background-area">
     <div class="container">
       <div class="row justify-center">
         <div class="mb-16 text-center lg:col-7">
           <h1 set:html={markdownify(banner.title)} class="mb-4" />
           <p set:html={markdownify(banner.content)} class="mb-8" />
+
         </div>
       </div>
     </div>

src/pages/projects.astro

@@ -1,6 +1,6 @@
 ---
 import Base from "@/layouts/Base.astro";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 import { getEntryBySlug } from "astro:content";
 
 const projects = await getEntryBySlug("projects", "-index");

src/pages/puzzle/index.astro

@@ -3,7 +3,7 @@ import PuzzleCard from "@/components/PuzzleCard.astro";
 import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 import { getEntryBySlug } from "astro:content";
 
 const { puzzle_folder } = config.settings;

src/pages/terms.astro

@@ -1,6 +1,6 @@
 ---
 import Base from "@/layouts/Base.astro";
-import PageHeader from "@/partials/PageHeader.astro";
+import PageHeader from "@/components/PageHeader.astro";
 import { getEntryBySlug } from "astro:content";
 
 const terms = await getEntryBySlug("terms", "-index");

src/styles/background.scss

@@ -0,0 +1,84 @@
+$quantity: 32;
+
+.light-particle {
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	width: 0.4vw;
+	height: 0.4vw;
+	margin: -0.2vw 0 0 9.8vw;
+	animation: ease 200s alternate infinite;
+	pointer-events: none;
+
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		transform-origin: -10vw;
+	}
+
+	&::before {
+		background: black;
+		opacity: 0;
+		animation: drift ease alternate infinite;
+	}
+
+	&::after {
+		background: white;
+		opacity: 0;
+		box-shadow: 0 0 0vw 0vw yellow;
+		animation: drift ease alternate infinite, flash ease infinite;
+	}
+}
+
+// Randomize Motion
+@for $i from 1 through $quantity {
+	$steps: random(12) + 16;
+	$rotationSpeed: random(10) + 8s;
+
+	.light-particle:nth-child(#{$i}){
+		animation-name: move#{$i};
+
+		&::before {
+			animation-duration: #{$rotationSpeed};
+		}
+
+		&::after {
+			animation-duration: #{$rotationSpeed}, random(6000) + 5000ms;
+			animation-delay: 0ms, random(8000) + 500ms;
+		}
+	}
+
+	@keyframes move#{$i} {
+		@for $step from 0 through $steps {
+			#{$step * calc(100 / $steps)}% {
+				transform: translateX(random(100) - 50vw) translateY(random(100) - 50vh) scale(calc(random(75) / 100) + .25);
+			}	
+		}	
+	}
+
+}
+
+@keyframes drift {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes flash {
+	0%, 30%, 100% {
+		opacity: 0;
+		box-shadow: 0 0 0vw 0vw yellow;
+	}
+	5% {
+		opacity: 1;
+		box-shadow: 0 0 2vw 0.4vw yellow;
+	}
+}
+

src/styles/base.scss

@@ -105,4 +105,4 @@ a:hover {
 
 hr {
   @apply dark:border-light;
-}
+}

src/styles/main.scss

@@ -10,6 +10,7 @@
   @import "components";
   @import "navigation";
   @import "buttons";
+  @import "background";
 }
 
 @layer utilities {