Skip to content

Commit 4e3a043

Browse files
CarloBuCarloBu
committed
fixes
1 parent e956ab1 commit 4e3a043

File tree

9 files changed

+604
-31
lines changed

9 files changed

+604
-31
lines changed

‎astro.config.mjs

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { defineConfig } from 'astro/config';
2-
32
import tailwind from '@astrojs/tailwind';
43

4+
import icon from "astro-icon";
5+
56
// https://astro.build/config
67
export default defineConfig({
7-
site: 'https://animationhub.site',
8-
integrations: [tailwind()],
9-
});
8+
site: 'https://animationhub.site',
9+
integrations: [tailwind(), icon()]
10+
});

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@astrojs/check": "^0.8.3",
1414
"@astrojs/tailwind": "^5.1.0",
1515
"astro": "^4.12.2",
16+
"astro-icon": "^1.1.0",
1617
"axios": "^1.7.2",
1718
"fluent-ffmpeg": "^2.1.3",
1819
"googleapis": "^140.0.1",

‎pnpm-lock.yaml

Lines changed: 555 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/favicon.svg

Lines changed: 5 additions & 8 deletions
Loading

‎src/components/ColorThemeToggle.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
>
55
<input type="checkbox" value="" class="peer sr-only" />
66
<div
7-
class="h-6 w-11 rounded-full border-2 border-black bg-gray-400 after:absolute after:left-[4px] after:top-[4px] after:h-4 after:w-4 after:rounded-full after:border-2 after:border-black after:bg-white after:transition-all after:content-[''] peer-checked:bg-pink-300 peer-checked:shadow-[2px_2px_0px_rgba(0,0,0,1)] peer-checked:after:translate-x-5"
7+
class="h-6 w-11 rounded-full border-2 border-black bg-gray-400 transition duration-300 ease-in-out after:absolute after:left-[4px] after:top-[4px] after:h-4 after:w-4 after:rounded-full after:border-2 after:border-black after:bg-white after:transition-all after:content-[''] hover:bg-pink-200 peer-checked:bg-pink-300 peer-checked:shadow-[2px_2px_0px_rgba(0,0,0,1)] peer-checked:after:translate-x-5"
88
>
99
</div>
10-
<span class="text-md ms-3 font-medium">Dark mode</span>
10+
<!--<span class="text-md ms-3 font-medium">Dark mode</span>-->
1111
</label>
1212

1313
<script>

‎src/components/YouTubeClipsGrid.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function getBadgeColors(library: string) {
4848
tutorials.map((tut) => {
4949
return (
5050
<div
51-
class={`bg-lightBg group flex flex-col justify-between overflow-hidden rounded-base border-2 border-black transition duration-300 ease-in-out hover:shadow-cardLight focus:shadow-cardLight dark:bg-bg ${getBackgroundColors(tut.library)}`}
51+
class={`group flex flex-col justify-between overflow-hidden rounded-base border-2 border-black bg-lightBg transition duration-300 ease-in-out hover:shadow-cardLight focus:shadow-cardLight dark:bg-bg ${getBackgroundColors(tut.library)}`}
5252
>
5353
<div class="aspect-video overflow-hidden">
5454
<video
@@ -71,7 +71,7 @@ function getBadgeColors(library: string) {
7171
>
7272
{tut.library}
7373
</span>
74-
<span class="rounded-base border-2 border-border bg-gray-100 px-3 py-1 text-sm font-base text-gray-800">
74+
<span class="xsm:max-w-[300px] inline-block max-w-[105px] truncate rounded-base border-2 border-border bg-gray-100 px-3 py-1 text-sm font-base text-gray-800">
7575
{tut.channelTitle}
7676
</span>
7777
</div>

‎src/icons/github.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/layouts/DefaultPage.astro

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import ColorThemeToggle from '@components/ColorThemeToggle.astro';
33
import { ViewTransitions } from 'astro:transitions';
4+
import { Icon } from 'astro-icon/components';
45
---
56

67
<html lang="en">
@@ -16,7 +17,7 @@ import { ViewTransitions } from 'astro:transitions';
1617
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap"
1718
rel="stylesheet"
1819
/>
19-
<title>Astro</title>
20+
<title>Animation Tutorials Hub</title>
2021
</head>
2122
<body
2223
class="bg-bg bg-[radial-gradient(#80808080_1px,transparent_1px)] transition duration-300 ease-in-out [background-size:16px_16px] dark:bg-darkBg"
@@ -26,12 +27,30 @@ import { ViewTransitions } from 'astro:transitions';
2627
</div>
2728
<div class="px-2 sm:px-8">
2829
<nav
29-
class="bg-navColor mb-8 mt-12 flex items-center justify-between rounded-base border-4 border-b-4 border-black px-8 py-4 text-text shadow-cardLight dark:bg-[#d8a93c] dark:text-white"
30+
class="mb-8 mt-12 flex items-center justify-between rounded-base border-4 border-b-4 border-black bg-navColor px-8 py-4 text-text shadow-cardLight dark:bg-[#d8a93c] dark:text-white"
3031
>
31-
<div class="text-2xl font-bold">Animation Tutorial Hub</div>
32+
<div class="text-2xl font-bold">Animation Tutorials Hub</div>
33+
<div class="flex items-center">
34+
<div class="group relative">
35+
<a
36+
href="https://github.com/CarloBu/web-animation-tutotials-hub"
37+
target="_blank"
38+
rel="noopener noreferrer"
39+
aria-label="Interested in viewing the code?"
40+
>
41+
<Icon
42+
name="github"
43+
class="h-6 w-6 text-black transition duration-300 ease-in-out hover:text-pink-400 dark:text-white dark:hover:text-pink-400"
44+
/>
45+
</a>
3246

33-
<!--<a href="/about" class="ddark:text-white text-black">About</a>-->
34-
<ColorThemeToggle />
47+
<span class="sr-only"
48+
>The collection of web animation tutorials in one place open-source repository</span
49+
>
50+
</div>
51+
<!--<a href="/about" class="dark:text-white text-black">About</a>-->
52+
<ColorThemeToggle />
53+
</div>
3554
</nav>
3655
<slot />
3756
</div>

‎tailwind.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,15 @@ export default {
44
darkMode: 'class',
55
theme: {
66
extend: {
7+
screens: {
8+
xsm: '450px',
9+
sm: '640px',
10+
md: '768px',
11+
lg: '1024px',
12+
xl: '1280px',
13+
'2xl': '1536px',
14+
'3xl': '1920px',
15+
},
716
colors: {
817
main: '#A6FAFF',
918
mainHover: '#79F7FF',

0 commit comments

Comments
 (0)