Skip to content

Commit b0562fc

Browse files
SuhasDissaSuhasDissa
committed
update styles and layout
1 parent 0107992 commit b0562fc

File tree

9 files changed

+232
-52
lines changed

9 files changed

+232
-52
lines changed

‎src/components/DraggableCardDemo.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@ import {
33
DraggableCardContainer,
44
} from "./ui/draggable-card";
55

6-
import items from "./lib/photos";
6+
import items from "./lib/photos";
77

88
export function DraggableCardDemo() {
9-
9+
1010
return (
11-
<DraggableCardContainer className="relative flex min-h-screen w-full items-center justify-center overflow-clip bg-neutral-100 dark:bg-neutral-900">
12-
<p className="absolute top-1/2 mx-auto max-w-sm -translate-y-3/4 text-center text-2xl font-black text-neutral-400 md:text-4xl dark:text-neutral-800">
11+
<DraggableCardContainer className="relative flex min-h-screen w-full h-full items-center justify-center overflow-clip bg-neutral-100 dark:bg-neutral-900">
12+
<p className="absolute top-1/2 mx-auto max-w-sm -translate-y-3/4 text-center text-2xl font-black text-neutral-400 md:text-4xl dark:text-neutral-500">
1313
Bound by code, bonded for life. Not just classmates, A family that grew together.
1414
</p>
1515
{items.map((item) => (
1616
<DraggableCardBody className={item.className} key={item.title}>
17-
<img
18-
src={item.image}
19-
alt={item.title}
20-
className="pointer-events-none relative z-10 h-auto w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg object-cover"
21-
/>
17+
<img
18+
src={item.image}
19+
alt={item.title}
20+
className="pointer-events-none relative z-10 h-auto w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg object-cover"
21+
/>
2222
<h3 className="mt-4 text-center text-2xl font-bold text-neutral-700 dark:text-neutral-300">
2323
{item.title}
2424
</h3>

‎src/components/Footer.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const today = new Date();
2020
<h4 class="font-semibold text-gray-100">Sitemap</h4>
2121

2222
<div class="mt-3 grid space-y-3">
23-
<p><a class="inline-flex gap-x-2 text-gray-400 hover:text-gray-200 focus:outline-none focus:text-gray-200 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/event">Latest Events</a></p>
23+
<p><a class="inline-flex gap-x-2 text-gray-400 hover:text-gray-200 focus:outline-none focus:text-gray-200 dark:text-neutral-400 dark:hover:text-neutral-200 dark:focus:text-neutral-200" href="/event">Events</a></p>
2424
</div>
2525
</div>
2626
<!-- End Col -->

‎src/components/Header.astro‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
import HeaderLink from "./HeaderLink.astro";
3-
import { SITE_TITLE } from "../consts";
43
---
54

65
<header

‎src/content/event/matrix.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,5 +49,3 @@ Whether you’re into hardware, game dev, or just love cool tech experiments, th
4949

5050
> *Let’s light it up, one pixel at a time.* 💡✨
5151
> **#TheCSEHour** | **#LEDMatrixGaming** | **#CSEUoM**
52-
53-
```

‎src/layouts/BlogPost.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
3232
<div class="max-w-[85rem] w-full px-4 sm:px-6 lg:px-8 mx-auto">
3333
<div class="grid lg:grid-cols-3 gap-y-8 lg:gap-y-0 lg:gap-x-6">
3434
<!-- Content -->
35-
<div class="lg:col-span-2">
35+
<div class="lg:col-span-2 backdrop-blur-sm">
3636
<div class="py-8 lg:pe-8">
3737
<div class="space-y-5 lg:space-y-8">
3838
<a
@@ -98,7 +98,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
9898

9999
<!-- Sidebar -->
100100
<div
101-
class="lg:col-span-1 lg:w-full lg:h-full lg:bg-gradient-to-r lg:from-gray-50 lg:via-transparent lg:to-transparent dark:from-neutral-800"
101+
class="lg:col-span-1 lg:w-full lg:h-full lg:bg-gradient-to-r lg:from-gray-50 lg:via-transparent lg:to-transparent dark:from-neutral-800 backdrop-blur-lg"
102102
>
103103
<div class="sticky top-20 start-0 py-8 lg:ps-8">
104104
<h3 class="text-lg font-bold text-gray-800 dark:text-white">

‎src/pages/404.astro‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
import BaseHead from "../components/BaseHead.astro";
3+
import { DraggableCardDemo } from "../components/DraggableCardDemo";
4+
import Footer from "../components/Footer.astro";
5+
import Header from "../components/Header.astro";
6+
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
7+
---
8+
9+
<!doctype html>
10+
<html lang="en">
11+
<head>
12+
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
13+
</head>
14+
<body class="dark:bg-neutral-900 antialiased">
15+
<Header />
16+
<div class="max-w-3xl flex flex-col mx-auto min-h-screen align-center justify-center">
17+
<main id="content">
18+
<div class="text-center py-10 px-4 sm:px-6 lg:px-8">
19+
<h1
20+
class="block text-7xl font-bold text-gray-800 sm:text-9xl dark:text-white"
21+
>
22+
404
23+
</h1>
24+
<p class="mt-3 text-gray-600 dark:text-neutral-400">
25+
Oops, something went wrong.
26+
</p>
27+
<p class="text-gray-600 dark:text-neutral-400">
28+
Sorry, we couldn't find your page.
29+
</p>
30+
<div
31+
class="mt-5 flex flex-col justify-center items-center gap-2 sm:flex-row sm:gap-3"
32+
>
33+
<a
34+
class="w-full sm:w-auto py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-gradient-to-r from-indigo-500 to-pink-500 text-white focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
35+
href="/"
36+
>
37+
<svg
38+
class="shrink-0 size-4"
39+
xmlns="http://www.w3.org/2000/svg"
40+
width="24"
41+
height="24"
42+
viewBox="0 0 24 24"
43+
fill="none"
44+
stroke="currentColor"
45+
stroke-width="2"
46+
stroke-linecap="round"
47+
stroke-linejoin="round"
48+
><path d="m15 18-6-6 6-6"></path></svg
49+
>
50+
Back to CSE 23
51+
</a>
52+
</div>
53+
</div>
54+
</main>
55+
</div>
56+
<Footer />
57+
</body>
58+
</html>

‎src/pages/event/index.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ const posts = (await getCollection("event")).sort(
2828
<h2
2929
class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white"
3030
>
31-
Latest Events
31+
Events
3232
</h2>
3333
<p class="mt-1 text-gray-600 dark:text-neutral-400">
34-
Check out our latest contributions to the community.
34+
Check out our contributions to the community.
3535
</p>
3636
</div>
3737
<!-- End Title -->
@@ -41,7 +41,7 @@ const posts = (await getCollection("event")).sort(
4141
{
4242
posts.map((post) => (
4343
<a
44-
class="bg-white dark:bg-neutral-900 group flex flex-col h-full border border-gray-200 hover:-translate-y-1.5 hover:drop-shadow focus:drop-shadow duration-100 focus:outline-none focus:border-transparent rounded-xl dark:border-neutral-700 dark:hover:shadow-black/40 dark:focus:border-transparent dark:focus:shadow-black/40"
44+
class="group flex flex-col h-full border border-gray-200 hover:scale-105 transition-transform duration-500 ease-in-out backdrop-blur-sm focus:outline-none focus:border-transparent rounded-xl dark:border-gray-800 dark:focus:border-transparent bg-indigo-400 dark:bg-indigo-700 dark:bg-opacity-10 bg-clip-padding backdrop-filter bg-opacity-10"
4545
href={`/event/${post.id}/`}
4646
>
4747
<div class="aspect-w-16 aspect-h-11">

‎src/pages/gallery.astro‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
---
2-
import Layout from "../layouts/BlogPost.astro";
2+
import BaseHead from "../components/BaseHead.astro";
33
import { DraggableCardDemo } from "../components/DraggableCardDemo";
44
import Header from "../components/Header.astro";
5+
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
56
---
67

7-
<Header />
8-
<!-- Gallery section -->
9-
<div>
10-
<DraggableCardDemo client:only />
11-
</div>
8+
<!doctype html>
9+
<html lang="en">
10+
<head>
11+
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
12+
</head>
13+
<body class="dark:bg-neutral-900 antialiased">
14+
<Header />
15+
<div>
16+
<DraggableCardDemo client:only />
17+
</div>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)