fix: make article metadata fill container width first
All checks were successful
Docker / build-and-push-image (push) Successful in 1m12s
All checks were successful
Docker / build-and-push-image (push) Successful in 1m12s
This commit is contained in:
parent
9d86db033f
commit
24da21aa6f
GPG key ID:
DFC06C02ED3B4711
9 changed files with 69 additions and 71 deletions
|
|
@ -51,7 +51,7 @@ if (article.data.extraAuthors && article.data.extraAuthors.length !== 0) {
|
|||
<div
|
||||
class="animate-reveal text-tertiary flex flex-row flex-wrap items-start gap-2 font-medium opacity-0 [animation-delay:0.1s]"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Icon name="mdi:calendar" />
|
||||
{
|
||||
!article.data.updated ? (
|
||||
|
|
@ -70,38 +70,38 @@ if (article.data.extraAuthors && article.data.extraAuthors.length !== 0) {
|
|||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
isPost ? (
|
||||
<>
|
||||
<Icon name="mdi:timer" />
|
||||
<p>{readingTime(article.body)}</p>
|
||||
</>
|
||||
) : null
|
||||
}
|
||||
{
|
||||
article.data.extraAuthors ? (
|
||||
<>
|
||||
<Icon name="mdi:account-plus" />
|
||||
<p set:html={formattedList} />
|
||||
</>
|
||||
) : null
|
||||
}
|
||||
{
|
||||
article.data.tags ? (
|
||||
<>
|
||||
<Icon name="mdi:tag" />
|
||||
{article.data.tags.map((tag: string) => (
|
||||
<a
|
||||
href={`/tags/${createSlug(tag)}`}
|
||||
class="underline hover:no-underline"
|
||||
>
|
||||
{tag}
|
||||
</a>
|
||||
))}
|
||||
</>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
{
|
||||
isPost ? (
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:timer" />
|
||||
<p>{readingTime(article.body)}</p>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
{
|
||||
article.data.extraAuthors ? (
|
||||
<div class="flex items-center gap-2">
|
||||
<Icon name="mdi:account-plus" />
|
||||
<p set:html={formattedList} />
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
{
|
||||
article.data.tags ? (
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Icon name="mdi:tag" />
|
||||
{article.data.tags.map((tag: string) => (
|
||||
<a
|
||||
href={`/tags/${createSlug(tag)}`}
|
||||
class="underline hover:no-underline"
|
||||
>
|
||||
{tag}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
<div
|
||||
class="animate-reveal mx-auto max-w-full opacity-0 [animation-delay:0.2s]"
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@ As of 2024-12-05 the [YouTube channel](https://www.youtube.com/@camouflagestoreu
|
|||
Most recently I completed modernising the website which included moving it to [Shopify](https://camouflagestore.uk) from its previous CMS platform. This has resulted in the owner gaining more control over his business as he can now make changes to the site that would have previously required hiring a developer to do. Additionally, the new site is far more modern introducing benefits such as being mobile friendly, fast, and much more secure which will improve the experience for everyone.
|
||||
|
||||
|
||||
_New design as of 2022_
|
||||
|
||||
The default border-radius of buttons was also unable to be changed within the theme so I used Shopify's custom CSS feature to override the default styling on all affected elements. This instantly makes the site look more unique compared to others using the same theme. Additionally, keywords have been added into the HTML head for better SEO using Liquid and a custom product metafeild.
|
||||
|
||||
|
|
@ -41,7 +40,6 @@ Whilst making these modifications to the theme, I found two bugs. Initially with
|
|||
Here's a look at the prior site as it was the day we switched over to using the new redesign.
|
||||
|
||||
|
||||
_Previous design_
|
||||
|
||||
## Branding
|
||||
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
|
|||
</h1>
|
||||
<p class="text-secondary/70 max-w-md text-pretty">
|
||||
<Link
|
||||
class="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline"
|
||||
class="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline hover:decoration-2 hover:underline-offset-2"
|
||||
href="https://www.google.com/maps/place/Devon"
|
||||
>
|
||||
<Icon name="mdi:earth" class="h-3 w-3" />
|
||||
|
|
@ -155,7 +155,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
|
|||
aria-label="Website"
|
||||
class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-full p-2 text-center text-sm text-nowrap capitalize transition-colors duration-300"
|
||||
>
|
||||
<Icon name="mdi:link-variant" class="h-4 w-4" />
|
||||
<Icon name="mdi:web" class="h-4 w-4" />
|
||||
</Link>
|
||||
<Link
|
||||
href={`mailto:${SITE.EMAIL}`}
|
||||
|
|
@ -183,7 +183,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
|
|||
class="text-secondary/70 hidden max-w-md items-center text-pretty print:flex"
|
||||
>
|
||||
<Link
|
||||
class="inline-flex gap-x-1.5 align-baseline leading-none hover:underline"
|
||||
class="inline-flex items-center gap-x-1.5 align-baseline leading-none hover:underline"
|
||||
href={`mailto:${SITE.EMAIL}`}
|
||||
>
|
||||
<Icon name="mdi:email" class="h-3 w-3" />
|
||||
|
|
@ -212,11 +212,9 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
|
|||
of 3D environments. Using either real-time or offline rendering techniques
|
||||
in software packages such as Blender, Unreal Engine, and more recently: Godot.
|
||||
In addition to this I also have an interest in web development, graphic design,
|
||||
and cyber security which all make up a large part of my hobbies not including
|
||||
motorbikes. If you're reading this offline, my portfolio of work can be found
|
||||
on my website at <a
|
||||
href="/projects"
|
||||
class="text-secondary underline hover:no-underline"
|
||||
and cyber security which partially make up my hobbies excluding riding motorbikes.
|
||||
If you're reading this offline, my portfolio of work can be found on my website
|
||||
at <a href="/projects" class="text-secondary underline hover:no-underline"
|
||||
>troylusty.com/projects</a
|
||||
>.
|
||||
</p>
|
||||
|
|
@ -233,7 +231,7 @@ const sortedEducation = [...education].sort((a, b) => a.id - b.id);
|
|||
<p class="text-secondary/70">
|
||||
Do you think I'd be a good fit to help out on a project you're working
|
||||
on, or maybe just want to chat? <Link
|
||||
href="mailto:hello@troylusty.com"
|
||||
href={`mailto:${SITE.EMAIL}`}
|
||||
class="underline hover:no-underline"
|
||||
>
|
||||
Send me an email!</Link
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { getCollection } from "astro:content";
|
|||
import { SITE, POSTS } from "@consts";
|
||||
import ShowcasePost from "@components/ShowcasePost.astro";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import Link from "@components/Link.astro";
|
||||
|
||||
const posts = (await getCollection("posts"))
|
||||
.filter((post) => !post.data.draft)
|
||||
|
|
@ -23,11 +22,11 @@ const posts = (await getCollection("posts"))
|
|||
posts.map((article: any) => <ShowcasePost collection={article} />)
|
||||
}
|
||||
</ol>
|
||||
<div class="flex justify-end">
|
||||
<Link
|
||||
<div class="animate-reveal flex justify-end opacity-0 [animation-delay:0.2s]">
|
||||
<a
|
||||
href="/posts.xml"
|
||||
class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
|
||||
>View posts feed</Link
|
||||
>View posts feed</a
|
||||
>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { getCollection } from "astro:content";
|
|||
import { PROJECTS, SITE } from "@consts";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
import ShowcaseProject from "@components/ShowcaseProject.astro";
|
||||
import Link from "@components/Link.astro";
|
||||
|
||||
const projects = (await getCollection("projects"))
|
||||
.filter((project) => !project.data.draft)
|
||||
|
|
@ -19,11 +18,11 @@ const projects = (await getCollection("projects"))
|
|||
>
|
||||
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
|
||||
</ol>
|
||||
<div class="flex justify-end">
|
||||
<Link
|
||||
<div class="animate-reveal flex justify-end opacity-0 [animation-delay:0.2s]">
|
||||
<a
|
||||
href="/projects.xml"
|
||||
class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
|
||||
>View projects feed</Link
|
||||
>View projects feed</a
|
||||
>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -62,9 +62,11 @@ const allArticlesWithTag = [...blogPostsWithTag, ...projectsWithTag]
|
|||
>
|
||||
{allArticlesWithTag.map((article) => <ShowcasePost collection={article} />)}
|
||||
</ul>
|
||||
<a
|
||||
href="/tags"
|
||||
class="animate-reveal w-fit underline opacity-0 [animation-delay:0.2s] hover:no-underline"
|
||||
>See all tags</a
|
||||
>
|
||||
<div class="animate-reveal flex justify-end opacity-0 [animation-delay:0.2s]">
|
||||
<a
|
||||
href="/tags"
|
||||
class="text-tertiary hover:text-secondary text-xs transition-colors duration-300"
|
||||
>See all tags</a
|
||||
>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -41,12 +41,14 @@ const allTagsSorted = freqSort(allTags);
|
|||
>
|
||||
{
|
||||
allTagsSorted.map((tag: string) => (
|
||||
<a
|
||||
href={`/tags/${createSlug(tag)}`}
|
||||
class="underline hover:no-underline"
|
||||
>
|
||||
{tag}
|
||||
</a>
|
||||
<li>
|
||||
<a
|
||||
href={`/tags/${createSlug(tag)}`}
|
||||
class="bg-button text-secondary hover:bg-button-active flex w-fit flex-row items-center gap-1 justify-self-center rounded-sm px-2 py-1 text-center font-sans text-sm font-light text-nowrap capitalize no-underline transition-colors duration-300"
|
||||
>
|
||||
{tag}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ol>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue