Skip to content

Commit

Permalink
chore: formatting blog and index pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashfidable
ashfidable committed Oct 10, 2023
1 parent 17b33ca commit 5e3bec3
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 104 deletions.
58 changes: 29 additions & 29 deletions src/pages/blog.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,35 @@ const tags = ["All", "React", "Svelte", "Javascript", "Godot", "Unity", "C#"];
---

<Main title="Blog">
<div class="space-y-4">
<section class="bg-primary-light rounded-md px-5 py-5 space-y-3">
<h1 class="font-heading font-extrabold text-2xl">Blog 📘</h1>
<p>Personal journal... I guess.</p>
</section>
<div class="space-y-4">
<section class="bg-primary-light rounded-md px-5 py-5 space-y-3">
<h1 class="font-heading font-extrabold text-2xl">Blog 📘</h1>
<p>Personal journal... I guess.</p>
</section>

<section class="bg-primary-light rounded-md px-5 py-5 space-y-3">
<input
placeholder="🔍 Search all posts"
class="w-full rounded-md bg-primary-lighter p-2 placeholder:text-slate-400 focus:outline-none focus:outline-accent"
/>
<ul class="flex flex-wrap gap-2">
{
tags.map((tag) => (
<li class="p-2 bg-primary-lighter rounded-md">{tag}</li>
))
}
</ul>
</section>
<section class="bg-primary-light rounded-md px-5 py-5 space-y-3">
<input
placeholder="🔍 Search all posts"
class="w-full rounded-md bg-primary-lighter p-2 placeholder:text-slate-400 focus:outline-none focus:outline-accent"
/>
<ul class="flex flex-wrap gap-2">
{
tags.map((tag) => (
<li class="p-2 bg-primary-lighter rounded-md">{tag}</li>
))
}
</ul>
</section>

<section class="rounded-md flex gap-4">
<div class="flex-grow space-y-4">
<BlogCard />
<BlogCard />
<BlogCard />
<BlogCard />
<BlogCard />
<BlogCard />
</div>
</section>
</div>
<section class="rounded-md flex gap-4">
<div class="flex-grow space-y-4">
<BlogCard />
<BlogCard />
<BlogCard />
<BlogCard />
<BlogCard />
<BlogCard />
</div>
</section>
</div>
</Main>
143 changes: 68 additions & 75 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,33 @@ import { Icon } from "astro-icon";
import Main from "src/layouts/Main.astro";
const icons = [
"simple-icons:svelte",
"mdi:language-typescript",
"mdi:language-javascript",
"mdi:language-csharp",
"ri:reactjs-line",
"simple-icons:astro",
"mdi:language-python",
"simple-icons:svelte",
"mdi:language-typescript",
"mdi:language-javascript",
"mdi:language-csharp",
"ri:reactjs-line",
"simple-icons:astro",
"mdi:language-python",
];
---

<Main title="Ashfid">
<div class="space-y-4">
<!-- Header content -->
<section class="bg-primary-light rounded-md px-5 py-5 space-y-3">
<h1 class="font-extrabold text-2xl">
Hello All <span>&#128075;</span>
</h1>
<p>
Well, this site is for sharing what I studied all these years
related to software and web development. I really enjoy helping
every developer to simplify their experience and not everything
is about overengineering something.
</p>
</section>
<div class="space-y-4">
<!-- Header content -->
<section class="bg-primary-light rounded-md px-5 py-5 space-y-3">
<h1 class="font-extrabold text-2xl">
Hello All <span>&#128075;</span>
</h1>
<p>
Well, this site is for sharing what I studied all these years related to
software and web development. I really enjoy helping every developer to
simplify their experience and not everything is about overengineering
something.
</p>
</section>

<!-- Featured Posts -->
<!-- <section id="featured-posts" class="space-y-4">
<!-- Featured Posts -->
<!-- <section id="featured-posts" class="space-y-4">
<h1 class="text-2xl font-semibold">
<span class="text-accent text-4xl"
>Featured</span
Expand All @@ -48,59 +48,52 @@ const icons = [
>
</section> -->

<!-- Featured Posts (New!) -->
<section id="featured-posts" class="space-y-4">
<h1 class="text-2xl font-semibold">
<span class="text-accent"
>Featured</span
>
Posts
</h1>
<div class="grid grid-cols-1 gap-1">
<Card type="svelte" />
<Card type="react" />
<Card type="unity" />
</div>
<span class="text-primary-lighter">Read All Posts (24) &#8594;</span
>
</section>
<!-- Featured Posts (New!) -->
<section id="featured-posts" class="space-y-4">
<h1 class="text-2xl font-semibold">
<span class="text-accent">Featured</span>
Posts
</h1>
<div class="grid grid-cols-1 gap-1">
<Card type="svelte" />
<Card type="react" />
<Card type="unity" />
</div>
<span class="text-primary-lighter">Read All Posts (24) &#8594;</span>
</section>

<!-- Featured Snippets -->
<section id="featured-snippets" class="space-y-4">
<h1 class=" text-2xl font-semibold">
<span class="text-accent"
>Featured</span
>
Snippets
</h1>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-2 lg:gap-4">
<SnippetCard />
<SnippetCard />
<SnippetCard />
<SnippetCard />
</div>
</section>
<!-- Featured Snippets -->
<section id="featured-snippets" class="space-y-4">
<h1 class="text-2xl font-semibold">
<span class="text-accent">Featured</span>
Snippets
</h1>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-2 lg:gap-4">
<SnippetCard />
<SnippetCard />
<SnippetCard />
<SnippetCard />
</div>
</section>

<!-- Things I know. -->
<section id="things-i-know" class="space-y-4">
<h1 class=" text-2xl font-semibold">
<span class="text-accent"
>Things</span
>
I know
</h1>
<div class="flex flex-wrap gap-2">
{
icons.map((icon) => (
<div class="p-2 bg-primary-light group">
<Icon
name={icon}
class="opacity-50 w-12 h-12 group-hover:-translate-y-4 transition-transform duration-150 ease-linear group-hover:opacity-80"
/>
</div>
))
}
</div>
</section>
</div>
<!-- Things I know. -->
<section id="things-i-know" class="space-y-4">
<h1 class="text-2xl font-semibold">
<span class="text-accent">Things</span>
I know
</h1>
<div class="flex flex-wrap gap-2">
{
icons.map((icon) => (
<div class="p-2 bg-primary-light group">
<Icon
name={icon}
class="opacity-50 w-12 h-12 group-hover:-translate-y-4 transition-transform duration-150 ease-linear group-hover:opacity-80"
/>
</div>
))
}
</div>
</section>
</div>
</Main>

0 comments on commit 5e3bec3

Please sign in to comment.