Newlayout

src/components/blog/Post.astro

@@ -1,5 +1,6 @@
 ---
-import {getAuthor} from '../../utils/api.astro'
+import {getAuthor} from '../../utils/api.astro';
+
 
 export interface Props {
 	title: string;
@@ -11,12 +12,15 @@ export interface Props {
 }
 
 const { title, writer, publishDate, alt, img, tags } = Astro.props;
-
 const { minutesRead } = Astro.props;
+const {author} = await getAuthor(writer);
+console.log(author);
+
 
 //gets the writers name and returns the author data from JSON. Then deconstructing the data into variables
 const author = await getAuthor(writer);
 const { name, twitter, twitterHandle, linkedin, linkedinHandle, github, githubHandle, photo, bio } = author;
+
 ---
 <div class="postContainer">
 	<article class="article">
@@ -26,6 +30,7 @@ const { name, twitter, twitterHandle, linkedin, linkedinHandle, github, githubHa
 			</div>
 			<div class="details">
 				<h1>{title}</h1>
+
 				<p>{name}</p>
 				<a href={twitter}><span>Twitter: {twitterHandle}</span></a>
 				<span>LinkedIn: <a href={linkedin}>{linkedinHandle}</a></span>
@@ -115,4 +120,5 @@ const { name, twitter, twitterHandle, linkedin, linkedinHandle, github, githubHa
     font-size: var(--size-5);
     color: var(--text3);
 }
+
 </style>

src/styles/search.css

@@ -0,0 +1,83 @@
+.searchContainer {
+    position: relative;
+    max-width: 450px;
+    margin: auto;
+}
+
+.search-input input {
+    max-width: auto;
+    height: 40px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    outline: none;
+    border: none;
+    border-radius: var(--radius-3);
+    padding: 0 40px 0 15px;
+    font-size: var(--font-size-3);
+    background: var(--surface2);
+    border: 1px solid var(--gray-1);
+    box-shadow: var(--surface-shadow);
+    transition: all 0.3s ease-in-out;
+}
+
+::placeholder{
+    color: var(--text2);
+    opacity: 1;
+ }
+
+.search-input input:focus{
+    background: var(--surface1);
+    box-shadow: var(--inner-shadow-3);
+    border: 1px solid var(--brand);
+    transition: all 0.3s ease-in-out;
+}
+
+.search-input .icon{
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: auto;
+    width: 50px;
+    line-height: 60px;
+    text-align: center;
+    font-size: var(--font-size-2);
+}
+
+.list{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+
+.searchResult{
+    width: 100%;
+    background-color: var(--surface2);
+    border-radius: 5px;
+    padding: var(--size-2);
+    margin-top: var(--size-1);
+    display: flex;
+    box-shadow: var(--shadow-3);
+    transition: all 0.3s ease-in-out;
+    list-style: none;
+    text-decoration: none;
+    justify-content: center;
+}
+
+.searchResult a{
+    color: var(--text3);
+    font-weight: var(--font-weight-7);
+    text-decoration: none;
+    transition: all 0.3s ease-in-out;
+}
+
+.searchResult:hover a{
+    padding: 10px;
+    transition: all 0.3s ease-in-out;
+}

src/styles/shiki.css

@@ -9,8 +9,12 @@ pre{
     flex-direction: column;
     justify-content: center;
     padding: var(--size-3);
-    border-radius: var(--size-2);
+    border-radius: var(--size-3);
+    box-shadow: var(--shadow-3);
     background: #36454F !important;
+
+	width: 60%;
+	min-width: 500px;
 }
 
 pre .language-id{

src/styles/theme.postcss

@@ -398,4 +398,27 @@ form {
 ::selection {
   background: var(--brand);
   color: var(--selection-text);
-}
+}
+
+
+blockquote {
+	position: relative;
+	width: 60%;
+	min-width: 500px;
+	padding: 1em;
+	margin: 2em 10px 4em;
+	background: var(--surface3);
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-4);
+}
+/* blockquote:before {
+	content: '';
+	position: absolute;
+	z-index: -2;
+	top: 0;
+	bottom: 0;
+	left: 15px;
+	right: 15px;
+	box-shadow: 0 0 20px rgba(0,0,0,.6);
+	border-radius: 250px/20px;
+} */

src/utils/api.astro

@@ -50,6 +50,7 @@ export async function getSearchData(){
 
 import JSON from '../data/author.json';
 
+
 // Data Fetch an single writer data
 export async function getAuthor(writer: string){
     let author = JSON[writer];