-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Styling and responsiveness improvements
- Loading branch information
1 parent
fae0016
commit 9449dfb
Showing
9 changed files
with
62 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <link rel="icon" href="%sveltekit.assets%/favicon.png" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| %sveltekit.head% | ||
| </head> | ||
| <body data-sveltekit-preload-data="hover" class="text-gray-700"> | ||
| <div style="display: contents">%sveltekit.body%</div> | ||
| </body> | ||
| <head> | ||
| <meta charset="utf-8"/> | ||
| <link rel="icon" href="%sveltekit.assets%/favicon.png"/> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | ||
| %sveltekit.head% | ||
| </head> | ||
| <body data-sveltekit-preload-data="hover"> | ||
| <div style="display: contents">%sveltekit.body%</div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,34 @@ | ||
| <script lang="ts"> | ||
| import type { BlogPost } from '$lib/types/types'; | ||
| import { getDateString } from '$lib/functions/functions'; | ||
| import { MoveRight } from 'lucide-svelte'; | ||
| import Button from '$lib/components/buttons/button.svelte'; | ||
| export let data: BlogPost; | ||
| </script> | ||
|
|
||
| <div class="flex flex-col gap-1 rounded bg-gray-100 px-4 py-3.5"> | ||
| <p class="text-sm font-medium">{getDateString(data.metadata.date)}</p> | ||
| <!-- TODO: Hover effects on links --> | ||
| <Button href="/blog/{data.metadata.slug}" classes="flex"> | ||
| <span class="font-bold">{data.metadata.title}</span> | ||
| </Button> | ||
| <p class="">{data.intro}</p> | ||
| <!-- | ||
| <div class="mb-8 flex gap-2"> | ||
| {#each data.metadata.categories as category} | ||
| <Button onClick={() => {}} classes="bg-gray-100"> | ||
| <p class="font-semibold">{category.name}</p> | ||
| </Button> | ||
| {/each} | ||
| </div> | ||
| <div class="flex"> | ||
| <Button href="/blog/{data.metadata.slug}"> | ||
| <span class="flex font-bold"> | ||
| Read more   | ||
| <Icon icon="arrow_forward" /> | ||
| </span> | ||
| </Button> | ||
| </div> | ||
| --> | ||
| </div> | ||
| <Button | ||
| href="/blog/{data.metadata.slug}" | ||
| classes="group flex gap-3 rounded bg-gray-100 px-4 py-3.5 sm:px-5 sm:py-4 md:px-6 md:py-5" | ||
| > | ||
| <span class="flex-1"> | ||
| <span class="mb-1 block text-sm text-gray-500 sm:text-base" | ||
| >{getDateString(data.metadata.date)}</span | ||
| > | ||
| <span class="mb-2.5 block font-bold sm:text-2xl">{data.metadata.title}</span> | ||
| <span class="block"> | ||
| {data.intro.substring(0, 100)} | ||
| <span class="bg-gradient-to-r from-gray-700 to-white bg-clip-text text-transparent" | ||
| >{data.intro.substring(100, 110)}</span | ||
| > | ||
| </span> | ||
| </span> | ||
|
|
||
| <span | ||
| class="mr-3 hidden items-center text-gray-400 transition-all duration-300 group-hover:mr-1.5 group-hover:text-gray-600 sm:flex" | ||
| > | ||
| <MoveRight /> | ||
| </span> | ||
| </Button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters