Merge Next into Master #1

Merged
thomascole merged 20 commits from next into master 2023-04-13 12:21:08 -04:00
9 changed files with 62 additions and 15 deletions
Showing only changes of commit f3d8a46795 - Show all commits

View File

@ -4,7 +4,20 @@
import ThemeToggle from "../misc/ThemeToggle.astro"; import ThemeToggle from "../misc/ThemeToggle.astro";
--- ---
<div class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200"> <style>
[data-shown="true"] {
transform: translateX(0);
}
</style>
<div id="menu" data-shown=""
class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 sm:-translate-x-full md:-translate-x-full lg:translate-x-0 xl:translate-x-0 2xl: translate-x-0 transition-all duration-100 z-50">
<button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden 2xl:hidden">
<span class="material-symbols-outlined">
close
</span>
</button>
<a href="/"> <a href="/">
<div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-3 mb-6"> <div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-3 mb-6">
@ -40,7 +53,8 @@
</a> </a>
</li> </li>
<li class="flex"> <li class="flex">
<a href="mailto:thomas.patrick.cole@gmail.com" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200"> <a href="mailto:thomas.patrick.cole@gmail.com"
class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200">
<button class="p-2">Contact</button> <button class="p-2">Contact</button>
</a> </a>
</li> </li>
@ -49,3 +63,28 @@
<Divider /> <Divider />
<ThemeToggle /> <ThemeToggle />
</div> </div>
<div
class="hidden h-12 w-full sm:block md:block lg:hidden xl:hidden 2xl:hidden bg-base-200 text-left transition-all duration-100">
<button id="menubtn" class="w-12 h-12 m-auto">
<span class="material-symbols-outlined mt-1">
menu
</span>
</button>
</div>
<script is:inline>
const btn = document.getElementById("menubtn");
const menu = document.getElementById("menu");
const closebtn = document.getElementById("menu-close")
btn.addEventListener('click', () => {
menu.dataset.shown = "true";
});
closebtn.addEventListener('click', () => {
menu.dataset.shown = "false";
})
</script>

View File

@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
--- ---
<Layout> <Layout>
<main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center"> <main class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
<img class="aspect-video object-cover mb-4" src={frontmatter.image} alt=""> <img class="aspect-video object-cover mb-4" src={frontmatter.image} alt="">
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p> <p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
<p>{frontmatter.date}</p> <p>{frontmatter.date}</p>

View File

@ -6,7 +6,7 @@ const { frontmatter } = Astro.props;
--- ---
<Layout> <Layout>
<main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center"> <main class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4 mb-6 flex flex-col justify-center">
<img class="aspect-video object-cover mb-4" src={frontmatter.image} alt=""> <img class="aspect-video object-cover mb-4" src={frontmatter.image} alt="">
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p> <p class="my-2 font-bold text-5xl">{frontmatter.title}</p>
<p>{frontmatter.date}</p> <p>{frontmatter.date}</p>

View File

@ -50,7 +50,7 @@
<body class=""> <body class="">
<Nav /> <Nav />
<div class="ml-72"> <div class="ml-72 sm:ml-0 md:ml-0 lg:ml-72 xl:ml-72 2xl:ml-72">
<slot /> <slot />
<Footer/> <Footer/>
</div> </div>

View File

@ -17,7 +17,7 @@
--- ---
<Layout title=" | Blog"> <Layout title=" | Blog">
<main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4"> <main class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4">
<div class="flex flex-col"> <div class="flex flex-col">
{ {
page.data.map((post: any) => ( page.data.map((post: any) => (

View File

@ -18,7 +18,7 @@ const projects = (await Astro.glob("./projects/*.{md,mdx}")).sort(
--- ---
<Layout> <Layout>
<main class="flex flex-col m-6 w-1/2 mx-auto md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2"> <main class="flex flex-col m-6 w-1/2 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<section> <section>
<p class="text-xl py-1">Hello World 👋</p> <p class="text-xl py-1">Hello World 👋</p>
<p>I'm glad you are here!</p> <p>I'm glad you are here!</p>

View File

@ -17,7 +17,7 @@
--- ---
<Layout title=" | Blog"> <Layout title=" | Blog">
<main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4"> <main class="w-1/2 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4">
<div class="flex flex-col"> <div class="flex flex-col">
{ {
page.data.map((post: any) => ( page.data.map((post: any) => (

View File

@ -22,7 +22,15 @@
p5.shuffle(data, true) p5.shuffle(data, true)
quicksort(data, 0, data.length-1); quicksort(data, 0, data.length-1);
animArray.push(new arrayFrame(data.toString(), null, null, null)); animArray.push(new arrayFrame(data.toString(), null, null, null));
p5.createCanvas(850,400)
//setup the canvas
let div = p5.createDiv('');
div.addClass('w-full');
div.addClass('mx-auto');
div.addClass('flex');
div.addClass('place-content-center');
let canvas = p5.createCanvas(600,400);
canvas.parent(div);
p5.frameRate(30); p5.frameRate(30);
} }
@ -143,7 +151,7 @@
</script> </script>
<P5 {sketch}/> <P5 {sketch}/>
<div class="flex justify-evenly"> <div class="flex justify-evenly mt-6">
<button on:click={prevFrame}>Prev Frame</button> <button on:click={prevFrame}>Prev Frame</button>
<button on:click={()=>(playpause = !playpause)}> <button on:click={()=>(playpause = !playpause)}>
{#if playpause} {#if playpause}

View File

@ -12,7 +12,7 @@
} }
</style> </style>
<main class="w-1/2 mx-auto md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2"> <main class="w-1/2 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<p class="font-bold text-2xl py-6">About Me</p> <p class="font-bold text-2xl py-6">About Me</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus esse inventore iusto earum asperiores necessitatibus, dolores id cumque nesciunt libero eligendi vel reprehenderit eius officia. Veritatis dolorum illum exercitationem suscipit.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus esse inventore iusto earum asperiores necessitatibus, dolores id cumque nesciunt libero eligendi vel reprehenderit eius officia. Veritatis dolorum illum exercitationem suscipit.</p>