Refactor tailwind calsses with the headwind extension
All checks were successful
Build Site / Build-Site (18.x) (push) Successful in 49s

This commit is contained in:
Thomas Cole 2023-07-30 08:17:02 -04:00
parent 664fe17610
commit 8c7cec7e7c
12 changed files with 50 additions and 50 deletions

View File

@ -1,3 +1,3 @@
<footer class="p-4"> <footer class="p-4">
<p class="text-center text-sm">&copy; 2023 Thomas Cole.</p> <p class="text-sm text-center">&copy; 2023 Thomas Cole.</p>
</footer> </footer>

View File

@ -12,10 +12,10 @@ const { title, subtitle, image, link } = Astro.props;
<div class="rounded-lg "> <div class="rounded-lg ">
<a href={link}> <a href={link}>
<div class="my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-11/12 mx-auto"> <div class="flex flex-col w-11/12 mx-auto my-2 sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row">
<img class="h-44 lg:h-28 xl:h-28 my-2 aspect-video object-cover rounded-lg" src={image} alt="" loading="lazy"> <img class="object-cover my-2 rounded-lg h-44 lg:h-28 xl:h-28 aspect-video" src={image} alt="" loading="lazy">
<div class="lg:ml-4 xl:ml-4 2xl:ml-4 grow"> <div class="lg:ml-4 xl:ml-4 2xl:ml-4 grow">
<p class="mt-2 font-semibold text-2xl py-2 sm:text-2xl md:text-2xl lg:text-3xl xl:text-3xl 2xl:text-3xl">{title}</p> <p class="py-2 mt-2 text-2xl font-semibold sm:text-2xl md:text-2xl lg:text-3xl xl:text-3xl 2xl:text-3xl">{title}</p>
<p>{subtitle}</p> <p>{subtitle}</p>
</div> </div>
</div> </div>

View File

@ -7,13 +7,13 @@ For the 3 lines of javascript needed I think its okay to use a script tag -->
} }
</script> </script>
<label class="swap swap-rotate transition ease-in-out hover:scale-125"> <label class="transition ease-in-out swap swap-rotate hover:scale-125">
<!-- this hidden checkbox controls the state --> <!-- this hidden checkbox controls the state -->
<input id="themetoggle" type="checkbox" data-toggle-theme="business,corporate" /> <input id="themetoggle" type="checkbox" data-toggle-theme="business,corporate" />
<span class="swap-off material-symbols-outlined mx-2"> <span class="mx-2 swap-off material-symbols-outlined">
light_mode light_mode
</span> </span>
<span class="swap-on material-symbols-outlined mx-2"> <span class="mx-2 swap-on material-symbols-outlined">
dark_mode dark_mode
</span> </span>
</label> </label>

View File

@ -20,7 +20,7 @@
</style> </style>
<div id="menu" data-shown="" <div id="menu" data-shown=""
class="fixed top-0 left-0 w-72 h-screen p-4 flex flex-col bg-base-200 -translate-x-full lg:translate-x-0 xl:translate-x-0 transition-all duration-100 z-50"> class="fixed top-0 left-0 z-50 flex flex-col h-screen p-4 transition-all duration-100 -translate-x-full w-72 bg-base-200 lg:translate-x-0 xl:translate-x-0">
<button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden"> <button id="menu-close" class="absolute top-0 right-0 p-2 lg:hidden">
<span class="material-symbols-outlined"> <span class="material-symbols-outlined">
@ -29,8 +29,8 @@
</button> </button>
<a href="/"> <a href="/">
<div class="transition ease-in-out w-1/2 hover:scale-105 block mx-auto mt-2 mb-2"> <div class="block w-1/2 mx-auto mt-2 mb-2 transition ease-in-out hover:scale-105">
<img class="rounded-full aspect-square w-full object-cover" src="/img/profile.jpg" alt=""> <img class="object-cover w-full rounded-full aspect-square" src="/img/profile.jpg" alt="">
</div> </div>
</a> </a>
@ -39,22 +39,22 @@
<ul> <ul>
<li class="flex flex-col"> <li class="flex flex-col">
<a href="/" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200"> <a href="/" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
<button class="p-2">Home</button> <button class="p-2">Home</button>
</a> </a>
</li> </li>
<li class="flex"> <li class="flex">
<a href="/projects/1" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200"> <a href="/projects/1" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
<button class="p-2">Projects</button> <button class="p-2">Projects</button>
</a> </a>
</li> </li>
<li class="flex"> <li class="flex">
<a href="/resume" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200"> <a href="/resume" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
<button class="p-2">Resume/CV</button> <button class="p-2">Resume/CV</button>
</a> </a>
</li> </li>
<li class="flex"> <li class="flex">
<a href="/contact" class="w-full hover:bg-base-100 rounded transation ease-in-out duration-200"> <a href="/contact" class="w-full duration-200 ease-in-out rounded hover:bg-base-100 transation">
<button class="p-2">Contact</button> <button class="p-2">Contact</button>
</a> </a>
</li> </li>
@ -64,13 +64,13 @@
<div class="grow"></div> <div class="grow"></div>
</div> </div>
<div class="h-12 w-full flex lg:hidden xl:hidden bg-base-200 text-left transition-all duration-100"> <div class="flex w-full h-12 text-left transition-all duration-100 lg:hidden xl:hidden bg-base-200">
<button id="menubtn" class="w-12 h-12"> <button id="menubtn" class="w-12 h-12">
<span class="material-symbols-outlined mt-1"> <span class="mt-1 material-symbols-outlined">
menu menu
</span> </span>
</button> </button>
<p class="my-auto mx-auto -translate-x-1/2 font-semibold text-xl">{displayedName}</p> <p class="mx-auto my-auto text-xl font-semibold -translate-x-1/2">{displayedName}</p>
</div> </div>
<div id="draweroverlay" class="hidden fixed top-0 left-0 w-full h-[100vh] z-10 bg-black/50" /> <div id="draweroverlay" class="hidden fixed top-0 left-0 w-full h-[100vh] z-10 bg-black/50" />

View File

@ -2,9 +2,9 @@
import ThemeToggle from "../misc/ThemeToggle.astro"; import ThemeToggle from "../misc/ThemeToggle.astro";
--- ---
<div class="flex place-content-center mt-4"> <div class="flex mt-4 place-content-center">
<a class="mx-2" href="https://git.thomaspcole.com/thomascole"> <a class="mx-2" href="https://git.thomaspcole.com/thomascole">
<svg class="inline-block w-7 h-7 transition ease-in-out hover:scale-125" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg class="inline-block transition ease-in-out w-7 h-7 hover:scale-125" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" id="main_outline" viewBox="0 0 640 640" xml:space="preserve"> version="1.1" id="main_outline" viewBox="0 0 640 640" xml:space="preserve">
<g> <g>
<path id="teabag" class="fill-none" <path id="teabag" class="fill-none"
@ -21,13 +21,13 @@ import ThemeToggle from "../misc/ThemeToggle.astro";
</svg> </svg>
</a> </a>
<a class="mx-2" href="https://github.com/thomaspcole"> <a class="mx-2" href="https://github.com/thomaspcole">
<svg class="inline-block w-6 h-6 fill-current transition ease-in-out hover:scale-125" viewBox="0 0 96 98" xmlns="http://www.w3.org/2000/svg"> <svg class="inline-block w-6 h-6 transition ease-in-out fill-current hover:scale-125" viewBox="0 0 96 98" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" <path fill-rule="evenodd" clip-rule="evenodd"
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" /> d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
</svg> </svg>
</a> </a>
<a class="mx-2" href="https://www.linkedin.com/in/thomaspcole"> <a class="mx-2" href="https://www.linkedin.com/in/thomaspcole">
<svg class="inline-block w-6 h-6 fill-current transition ease-in-out hover:scale-125" xmlns="http://www.w3.org/2000/svg" <svg class="inline-block w-6 h-6 transition ease-in-out fill-current hover:scale-125" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 455 455" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 455 455"
style="enable-background:new 0 0 455 455;" xml:space="preserve"> style="enable-background:new 0 0 455 455;" xml:space="preserve">
<g> <g>

View File

@ -9,11 +9,11 @@ const { title, subtitle } = Astro.props;
<div class="flex"> <div class="flex">
<div> <div>
<span class="w-4 h-4 bg-primary block rounded-full mt-2"></span> <span class="block w-4 h-4 mt-2 rounded-full bg-primary"></span>
<span class="bg-primary block h-full w-[2px] translate-x-[7px]"></span> <span class="bg-primary block h-full w-[2px] translate-x-[7px]"></span>
</div> </div>
<div class="px-5"> <div class="px-5">
<p class="font-semibold text-xl">{title}</p> <p class="text-xl font-semibold">{title}</p>
<span class="text-sm font-light">{subtitle}</span> <span class="text-sm font-light">{subtitle}</span>
<slot></slot> <slot></slot>
</div> </div>

View File

@ -7,14 +7,14 @@ const { frontmatter } = Astro.props;
<Layout> <Layout>
<main <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"> class="flex flex-col justify-center w-1/2 mx-auto mt-4 mb-6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<div class="relative mb-4"> <div class="relative mb-4">
<img class="aspect-video object-cover" src={frontmatter.image} alt="" loading="lazy"/> <img class="object-cover aspect-video" src={frontmatter.image} alt="" loading="lazy"/>
<a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]"> <a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
<span class="material-symbols-outlined opacity-25 mr-[4px]">link</span> <span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
</a> </a>
</div> </div>
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p> <p class="my-2 text-5xl font-bold">{frontmatter.title}</p>
<p>{frontmatter.date}</p> <p>{frontmatter.date}</p>
<Divider /> <Divider />
<slot /> <slot />

View File

@ -5,14 +5,14 @@
--- ---
<Layout> <Layout>
<main class="w-5/6 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"> <main class="flex flex-col justify-center w-5/6 mx-auto mt-4 mb-6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<div class="relative mb-4"> <div class="relative mb-4">
<img class="aspect-video object-cover rounded-xl" src={frontmatter.image} alt="" /> <img class="object-cover aspect-video rounded-xl" src={frontmatter.image} alt="" />
<a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]"> <a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
<span class="material-symbols-outlined opacity-25 mr-[4px]">link</span> <span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
</a> </a>
</div> </div>
<p class="my-2 font-bold text-5xl">{frontmatter.title}</p> <p class="my-2 text-5xl font-bold">{frontmatter.title}</p>
<p>{frontmatter.date}</p> <p>{frontmatter.date}</p>
<Divider /> <Divider />
<!-- Render our markdown with the normal header styling and some extra padding. --> <!-- Render our markdown with the normal header styling and some extra padding. -->

View File

@ -3,15 +3,15 @@
--- ---
<Layout title={" | Contact"}> <Layout title={" | Contact"}>
<div class="my-2 flex flex-col sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row w-5/6 mx-auto"> <div class="flex flex-col w-5/6 mx-auto my-2 sm:flex-col md:flex-col lg:flex-row xl:flex-row 2xl:flex-row">
<div class="w-full lg:w-1/2 text-center"> <div class="w-full text-center lg:w-1/2">
<p>Picture here</p> <p>Picture here</p>
</div> </div>
<div class="w-full lg:w-1/2 text-center flex flex-col gap-4"> <div class="flex flex-col w-full gap-4 text-center lg:w-1/2">
<input type="text" placeholder="Name" class="input input-bordered w-full" /> <input type="text" placeholder="Name" class="w-full input input-bordered" />
<input type="text" placeholder="Email" class="input input-bordered w-full" /> <input type="text" placeholder="Email" class="w-full input input-bordered" />
<textarea class="textarea textarea-bordered w-full" placeholder="Message" style="resize:none"></textarea> <textarea class="w-full textarea textarea-bordered" placeholder="Message" style="resize:none"></textarea>
<button class="btn w-full">Submit</button> <button class="w-full btn">Submit</button>
</div> </div>
</div> </div>
</Layout> </Layout>

View File

@ -11,7 +11,7 @@ const projects = (await Astro.glob("./projects/**/*.{md,mdx}")).sort(
--- ---
<Layout> <Layout>
<main class="flex flex-col m-6 mx-auto w-5/6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2"> <main class="flex flex-col w-5/6 m-6 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2">
<section> <section>
<div class="flex flex-row"> <div class="flex flex-row">
<p class="text-5xl sm:text-5xl md:text-5xl lg:text-6xl py-1 font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-[#1f89db] to-[#f42a8b]">Hello World!</p> <p class="text-5xl sm:text-5xl md:text-5xl lg:text-6xl py-1 font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-[#1f89db] to-[#f42a8b]">Hello World!</p>
@ -21,7 +21,7 @@ const projects = (await Astro.glob("./projects/**/*.{md,mdx}")).sort(
</section> </section>
<div class="divider"/> <div class="divider"/>
<section> <section>
<p class="text-2xl font-bold py-2 sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl">Latest Projects</p> <p class="py-2 text-2xl font-bold sm:text-2xl md:text-2xl lg:text-4xl xl:text-4xl 2xl:text-4xl">Latest Projects</p>
{ {
projects.map((post) => ( projects.map((post) => (
<BlogProjectCard <BlogProjectCard

View File

@ -17,7 +17,7 @@
--- ---
<Layout title=" | Projects"> <Layout title=" | Projects">
<main class="w-full md:w-5/6 lg:w-4/5 xl:w-4/5 mx-auto mt-4"> <main class="w-full mx-auto mt-4 md:w-5/6 lg:w-4/5 xl:w-4/5">
<div class="flex flex-col"> <div class="flex flex-col">
{ {
page.data.map((post: any) => ( page.data.map((post: any) => (
@ -27,10 +27,10 @@
)) ))
} }
</div> </div>
<div class="w-1/2 mx-auto flex justify-between"> <div class="flex justify-between w-1/2 mx-auto">
{ {
page.url.prev ? ( page.url.prev ? (
<a class="w-40 flex" href={page.url.prev}> <a class="flex w-40" href={page.url.prev}>
<span class="material-symbols-outlined"> <span class="material-symbols-outlined">
chevron_left chevron_left
</span> </span>
@ -41,11 +41,11 @@
) )
} }
<p class="grow text-center whitespace-nowrap">Page {page.currentPage}</p> <p class="text-center grow whitespace-nowrap">Page {page.currentPage}</p>
{ {
page.url.next ? ( page.url.next ? (
<a class="w-40 flex" href={page.url.next}> <a class="flex w-40" href={page.url.next}>
<p class="grow text-right">Next Page</p> <p class="text-right grow">Next Page</p>
<span class="material-symbols-outlined"> <span class="material-symbols-outlined">
chevron_right chevron_right
</span> </span>

View File

@ -24,11 +24,11 @@
</style> </style>
<main class="w-5/6 mx-auto sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2"> <main class="w-5/6 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="py-6 text-2xl font-bold">About Me</p>
<p>{resume.basics.summary}</p> <p>{resume.basics.summary}</p>
<div class="divider"/> <div class="divider"/>
<p class="font-bold text-2xl pb-6">Work Experience</p> <p class="pb-6 text-2xl font-bold">Work Experience</p>
<div class="time-line-container"> <div class="time-line-container">
{resume.work.map((item:any)=> {resume.work.map((item:any)=>
<Timeline title={item.position} subtitle={item.name + " | " + parseDate(item.startDate) + " - " + parseDate(item.endDate)}> <Timeline title={item.position} subtitle={item.name + " | " + parseDate(item.startDate) + " - " + parseDate(item.endDate)}>
@ -41,24 +41,24 @@
)} )}
</div> </div>
<p class="font-bold text-2xl py-6">Education</p> <p class="py-6 text-2xl font-bold">Education</p>
<div class="time-line-container"> <div class="time-line-container">
{resume.education.map((item:any)=> {resume.education.map((item:any)=>
<Timeline title={item.institution} subtitle={item.area + " | " + parseDate(item.endDate)}/> <Timeline title={item.institution} subtitle={item.area + " | " + parseDate(item.endDate)}/>
)} )}
</div> </div>
<p class="font-bold text-2xl py-6">Professional Certificates</p> <p class="py-6 text-2xl font-bold">Professional Certificates</p>
<div class="time-line-container"> <div class="time-line-container">
{resume.certificates.map((item:any)=> {resume.certificates.map((item:any)=>
<Timeline title={item.name} subtitle={item.issuer + " | " + parseDate(item.date)}/> <Timeline title={item.name} subtitle={item.issuer + " | " + parseDate(item.date)}/>
)} )}
</div> </div>
<p class="font-bold text-2xl py-6">Skills</p> <p class="py-6 text-2xl font-bold">Skills</p>
{resume.skills.map((item:any)=> {resume.skills.map((item:any)=>
<div class="divider">{item.name}</div> <div class="divider">{item.name}</div>
<div class="flex flex-wrap gap-2 mx-auto my-2 pb-4"> <div class="flex flex-wrap gap-2 pb-4 mx-auto my-2">
{item.keywords.map((skill:any)=> {item.keywords.map((skill:any)=>
<div class="badge badge-lg">{skill}</div> <div class="badge badge-lg">{skill}</div>
)} )}