Skip to content

Commit

Permalink
updated layout styling. tweaked additional styles to match branding
Browse files Browse the repository at this point in the history
  • Loading branch information
@RedRocksWebDevelopment
RedRocksWebDevelopment committed Jan 20, 2025
1 parent ac19723 commit 7488604
Show file tree
Hide file tree
Showing 9 changed files with 79 additions and 92 deletions.
14 changes: 6 additions & 8 deletions src/components/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ interface Props {
title: string;
description: string;
canonical: string;
ogImage: string;
noIndex: boolean;
ogImage?: string;
noIndex?: boolean;
}
import { isProduction, siteUrl } from "@lib/store.js";
Expand Down Expand Up @@ -94,15 +94,13 @@ const { title, description, canonical, ogImage, noIndex } = Astro.props;
style="display:none;visibility:hidden"></iframe></noscript
>
<!-- End Google Tag Manager (noscript) -->
<div class="m-0 h-screen w-full overflow-x-hidden bg-white p-0">
<div class="m-0 h-screen w-full overflow-x-hidden bg-offwhite-500 p-0">
<Header />
<div class="flex min-h-full flex-col text-gray-500 lg:py-6">
<main class="flex min-h-full flex-col text-dark-gray-500">
<div id="page-fade-wrapper">
<main>
<slot />
</main>
<slot />
</div>
</div>
</main>
<Footer />
</div>
</body>
Expand Down
15 changes: 4 additions & 11 deletions src/pages/about/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,27 +14,20 @@ const pageData = allWordPressPages.find((page) => page.slug === "about");
<div class="mb-14 w-full px-4">
<div class="flex flex-wrap items-center justify-between">
<div class="mb-10 w-full lg:mb-0 lg:w-1/2">
<h3 class="mb-4 font-roboto text-3xl font-bold tracking-tighter text-gray-900 md:text-4xl">
About Andrew Kepson
</h3>
<p class="font-roboto text-2xl font-medium leading-8 text-gray-700 md:text-2xl">
<h3 class="heading-one mb-4">About Andrew Kepson</h3>
<p class="body-text font-semibold">
Working at the intersection of web development &amp; marketing
</p>
</div>
<div class="w-full lg:w-auto">
<div class="-mb-2 flex flex-wrap items-center lg:justify-center">
<a
class="mb-2 inline-block w-full rounded-sm bg-purple-600 px-6 py-3 text-center font-roboto font-medium leading-7 text-white shadow-sm hover:bg-purple-500 focus:ring-2 focus:ring-violet-500 focus:ring-opacity-50 md:mr-5 md:w-auto"
href="/contact/"
>
Contact Me
</a>
<a class="button-purple mb-2" href="/contact/"> Contact Me </a>
</div>
</div>
</div>
</div>
<article
class="mb-5 w-full px-4 prose-h2:mb-4 prose-h2:font-roboto prose-h2:text-2xl prose-h2:font-semibold prose-h2:text-gray-800 prose-p:mb-6 prose-p:font-garamond prose-p:text-lg prose-p:font-medium prose-p:leading-7 prose-p:text-gray-700 prose-a:text-purple-600 prose-a:hover:text-purple-500 prose-p:md:text-2xl lg:mb-0 lg:w-1/2 prose-h2:lg:text-3xl"
class="prose-p:body-text mb-5 w-full px-4 prose-h2:mb-4 prose-h2:font-roboto prose-h2:text-2xl prose-h2:font-semibold prose-h2:text-gray-800 prose-a:text-purple-600 prose-a:hover:text-purple-500 prose-p:md:text-2xl lg:mb-0 lg:w-1/2 prose-h2:lg:text-3xl"
set:html={pageData?.content}
/>
<div class="w-full px-4 lg:w-1/2">
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/_components/BlogArchive.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface Props {
const { posts, category } = Astro.props;
---

<div class="px-4 lg:px-12">
<div class="px-4 lg:px-12 pt-6">
<div class="-mx-4 flex flex-wrap justify-center">
<Sidebar selectedCategory={category} searchInput="" />
<div class="w-full p-4 lg:w-7/12 xl:w-8/12">
Expand Down
112 changes: 57 additions & 55 deletions src/pages/contact/_components/Form.astro
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,60 @@
<form name="Contact" method="POST" action="/contact/thank-you/" netlify>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700" for="fullNameInput"> Your Name: </label>
<input
class="block w-full appearance-none rounded border border-gray-200 bg-gray-50 px-4 py-3 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
type="text"
name="fullName"
id="fullNameInput"
placeholder="Name"
/>
</div>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700" for="emailInput"> Email Address: </label>
<input
class="block w-full appearance-none rounded border border-gray-200 bg-gray-50 px-4 py-3 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
type="email"
name="email"
id="emailInput"
placeholder="[email protected]"
/>
</div>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700" for="servicesDropdown"> I Need Help With: </label>
<div class="relative">
<select
<div id="block-contact-form">
<form name="Contact" method="POST" action="/contact/thank-you/" netlify>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700" for="fullNameInput"> Your Name: </label>
<input
class="block w-full appearance-none rounded border border-gray-200 bg-gray-50 px-4 py-3 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
name="service-needed"
id="servicesDropdown"
>
<option>Web Design or Development</option>
<option>RevOps Automation</option>
<option>Headless WordPress</option>
<option>Technical Writing</option>
<option>Other</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
</svg>
type="text"
name="fullName"
id="fullNameInput"
placeholder="Name"
/>
</div>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700" for="emailInput"> Email Address: </label>
<input
class="block w-full appearance-none rounded border border-gray-200 bg-gray-50 px-4 py-3 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
type="email"
name="email"
id="emailInput"
placeholder="[email protected]"
/>
</div>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700" for="servicesDropdown"> I Need Help With: </label>
<div class="relative">
<select
class="block w-full appearance-none rounded border border-gray-200 bg-gray-50 px-4 py-3 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
name="service-needed"
id="servicesDropdown"
>
<option>Web Design or Development</option>
<option>RevOps Automation</option>
<option>Headless WordPress</option>
<option>Technical Writing</option>
<option>Other</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
</svg>
</div>
</div>
</div>
</div>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700" for="messageInput"> Your Message: </label>
<textarea
class="block w-full appearance-none rounded border border-gray-200 bg-gray-50 px-4 py-3 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
name="message"
id="messageInput"
rows="5"
placeholder="How can I help you?"></textarea>
</div>
<button
class="inline-block w-full rounded bg-deep-purple-500 px-8 py-4 font-work-sans font-semibold leading-none text-white shadow kepson-transition hover:bg-deep-purple-400"
type="submit"
>
Submit
</button>
</form>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700" for="messageInput"> Your Message: </label>
<textarea
class="block w-full appearance-none rounded border border-gray-200 bg-gray-50 px-4 py-3 leading-tight text-gray-700 focus:border-gray-500 focus:bg-white focus:outline-none"
name="message"
id="messageInput"
rows="5"
placeholder="How can I help you?"></textarea>
</div>
<button
class="inline-block w-full rounded bg-deep-purple-500 px-8 py-4 font-work-sans font-semibold leading-none text-white shadow kepson-transition hover:bg-deep-purple-400"
type="submit"
>
Submit
</button>
</form>
</div>
2 changes: 1 addition & 1 deletion src/pages/contact/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const pageData = allWordPressPages.find((page) => page.slug === "contact");
---

<Layout title={pageData?.seo?.title} description={pageData?.seo?.description} canonical="/contact/">
<div class="mx-w-2xl px-4 lg:px-12">
<div class="mx-w-2xl px-4 lg:px-12 pt-6">
<section>
<div>
<h1 class="mb-4 animate-fadeInLeft font-roboto text-3xl text-gray-800 md:text-6xl">Contact Me</h1>
Expand Down
17 changes: 4 additions & 13 deletions src/pages/headless-wordpress-developer/_components/Hero.astro
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,11 @@
<section class="py-5">
<section id="block-headless-wordpress-developer-hero" class="py-5 pt-6">
<div class="container mx-auto px-4">
<h1 class="font-roboto mb-6 text-3xl font-semibold leading-tight text-gray-800 md:text-6xl lg:text-5xl">
Headless WordPress Developer Andrew Kepson
</h1>
<h1 class="heading-one mb-6">Headless WordPress Developer Andrew Kepson</h1>
<div class="flex flex-wrap items-center">
<div class="mb-6 inline-block max-w-xl md:mb-0">
<p class="font-work-sans text-xl text-gray-800">
Blast past your competitors with a headless WordPress website.
</p>
<p class="body-text">Blast past your competitors with a headless WordPress website.</p>
</div>
<a
class="ml-auto inline-block w-full rounded bg-purple-600 px-12 py-4 text-center text-sm font-medium leading-normal text-white hover:bg-purple-500 md:w-auto"
href="/contact/"
>
Contact Me
</a>
<a class="button-purple ml-auto" href="/contact/"> Contact Me </a>
</div>
</div>
</section>
4 changes: 2 additions & 2 deletions src/pages/headless-wordpress-developer/_components/Marketing.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
<h2 class="font-roboto text-4xl tracking-tight text-gray-800 sm:text-5xl">
A Headless WordPress Developer <wbr /> Your Marketing Team Will Love
</h2>
<p class="font-work-sans mt-6 max-w-3xl text-xl text-gray-900">
<p class="body-text mt-6 max-w-3xl">
Many business owners invest in high-quality websites, realizing the importance of having a website for
building a business in the twenty-first century. However, most developers do not think like marketers,
prioritizing the wrong things that keep you from making the most money as quickly as possible.
</p>
<p class="font-work-sans mt-6 max-w-3xl text-xl text-gray-900">
<p class="body-text mt-6 max-w-3xl">
With years of experience working in digital marketing, I think like a marketer and build SEO-ready headless
WordPress websites that are marketing platforms ready to be managed by your marketing team or content
manager seamlessly from day one. Marketers love working with me because I understand their needs and set
Expand Down
2 changes: 1 addition & 1 deletion src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const pageData = await getPageBySlug("home");
---

<Layout title={pageData?.seo?.title} description={pageData?.seo?.description} canonical="/">
<div class="-mb-4 flex flex-wrap items-center text-gray-500 md:mb-0">
<div class="-mb-4 flex flex-wrap items-center text-dark-gray-500 md:mb-0">
<Hero {...getHeroContent(pageData?.content)} />
<LatestBlogPosts />
</div>
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -543,6 +543,9 @@ export default {
".button-amber": {
"@apply button-base bg-amber-500 text-dark-gray-500 hover:bg-amber-400": {},
},
".body-text": {
"@apply font-work-sans leading-relaxed mb-6 text-2xl text-dark-gray-500": {},
},
});
}),
],
Expand Down

0 comments on commit 7488604

Please sign in to comment.