add start of dark theme

package.json

@@ -13,7 +13,7 @@
     "@astrojs/preact": "^0.3.1",
     "@astrojs/solid-js": "^0.4.1",
     "@astrojs/vercel": "^0.4.0",
-    "astro": "^1.0.1",
+    "astro": "^1.0.2",
     "sass": "^1.54.3",
     "solid-js": "^1.4.8"
   },

src/components/Heading.astro

@@ -0,0 +1,9 @@
+<h1>
+	<slot />
+</h1>
+
+<style>
+	h1 {
+		color: red;
+	}
+</style>

src/components/MetaTags.astro

@@ -40,3 +40,6 @@ const { title, description, permalink } = Astro.props;
 
 <!-- "Boxicons CDN" Link -->
 <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+
+<!-- FontAwesome -->
+<script src="https://kit.fontawesome.com/e2fcf864fc.js" crossorigin="anonymous"></script>

src/components/Navbar.astro

@@ -10,15 +10,21 @@ const posts = await getSearchData();
         <h2><a href="/">&lt;BLACKSKIES &#47;&gt;</a></h2>
     </div>
     <Search client:load posts={posts} />
-    <div class="menu">   
+    <div class="menu">
         <ul class="hamburger">
             <li><a href="/">Home</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Hire Me</a></li>
-        </ul>  
+            <li>
+                <div id='toggle'>
+                    <i class='indicator'></i>
+                </div>
+            </li>
+        </ul>
     </div>
 </header>
 
+
 <style>
 /*-------------------Start Navbar-------------------*/
 header{
@@ -35,7 +41,7 @@ header{
     height: 60px;
     display: flex;
     justify-content: space-between;
-    align-items: center;    
+    align-items: center;
     z-index: 1;
 }
 

src/components/blog/Post.astro

@@ -3,31 +3,29 @@ import Aside from '../Aside.astro';
 
 export interface Props {
 	title: string;
-	writter: string;
+	writer: string;
 	publishDate: string;
 	heroImage: string;
 	alt: string;
 	img: string;
 	tags: string;
 }
 
-const { title, writter, publishDate, alt, img, tags } = Astro.props;
+const { title, writer, publishDate, alt, img, tags } = Astro.props;
 
 // tags is a string seported by comma return first tag
 
 ---
 <div class="page-container">
-	<Aside writter={writter} />
-	<article class="article">	
-
+	<Aside writter={writer} />
+	<article class="article">
 		<div>
 			<div class="coffee">
 				<img class="center-cropped" src={img} alt={alt} height="100%"/>
 			</div>
-
 			<div class="details">
 				<h1>{title}</h1>
-				<p>{writter}</p>
+				<p>{writer}</p>
 				<span>{publishDate}  |  {tags}</span>
 			</div>
 			</div>
@@ -45,7 +43,7 @@ const { title, writter, publishDate, alt, img, tags } = Astro.props;
 	flex-direction: row;
 	justify-content: center;
 }
-	
+
 .article {
 	display: flex;
 	flex-direction: column;
@@ -151,6 +149,6 @@ a:hover {
 }
 
 
-/*----------------------------------------*/
+/*----------------------------------------------------------------------------------------*/
 
 </style>