Skip to content

Complete styling done #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
onkar69483 merged 7 commits into from
Oct 31, 2024
Merged

Complete styling done #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1f1c1c0
Complete styling done
SachinMhetre678 Oct 31, 2024
c334936
Complete link working
SachinMhetre678 Oct 31, 2024
3cd7978
Merge branch 'onkar69483:main' into main
SachinMhetre678 Oct 31, 2024
c465611
copy link remove
SachinMhetre678 Oct 31, 2024
1cf09d3
copy link remove
SachinMhetre678 Oct 31, 2024
6079f2c
complete done
SachinMhetre678 Oct 31, 2024
76f6d2c
complete done
SachinMhetre678 Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"express": "^4.19.2",
"install": "^0.13.0",
"jspdf": "^2.5.1",
"lucide-svelte": "^0.454.0",
"node-schedule": "^2.1.1",
"pdf-lib": "^1.17.1",
"prisma": "^5.16.1",
Expand Down
143 changes: 88 additions & 55 deletions src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,36 @@
// @ts-nocheck
import { page } from '$app/stores';
import '../app.pcss';
// import HeaderBanner from './HeaderBanner.svelte';
import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Button } from 'flowbite-svelte';
// import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from 'flowbite-svelte';
import { DarkMode } from 'flowbite-svelte';

import Footer from './components/Footer.svelte';
import Header from './components/Header.svelte';
import { Avatar } from 'flowbite-svelte';

// Import the Analytics package, and the SvelteKit dev variable.
import { dev } from '$app/environment';
import { dev } from '$app/environment';
import { inject } from '@vercel/analytics';

// Inject the Analytics functionality
inject({ mode: dev ? 'development' : 'production' });

const data = {
"contributors": [
{
"name": "Onkar Mendhapurkar",
"githubId": "onkar69483"
},
{
"name": "Sachin Mhetre",
"githubId": "sachinmhetre678"
},
{
"name": "Garv Kalra",
"githubId": "garvkalra"
},
{
"name": "Atharva Sawant",
"githubId": "atharvasawant09"
}
]
}
contributors: [
{
name: "Onkar Mendhapurkar",
githubId: "onkar69483"
},
{
name: "Sachin Mhetre",
githubId: "sachinmhetre678"
},
{
name: "Garv Kalra",
githubId: "garvkalra"
},
{
name: "Atharva Sawant",
githubId: "atharvasawant09"
}
]
};
</script>

<svelte:head>
Expand All @@ -49,40 +43,79 @@
/>
<meta name="keywords" content="CodeDrop, code sharing, code snippets, paste code, share code, temporary code sharing, secure code sharing, quick collaborations" />
<meta property="og:image" content="https://raw.githubusercontent.com/onkar69483/CodeDrop/main/static/thumbnail.png" />
<!-- Consider replacing "https://example.com/codedrop-thumbnail.jpg" with the actual URL of your project's thumbnail image -->
<!-- Meta tags for google and bing se verification -->
<meta name="msvalidate.01" content="F08D096601151AB3C3750560588DF846" />
<meta name="google-site-verification" content="NMPuB4hQ0zdn4BHUE1VCLXUghfnICKisubXfYqcqR3U" />
<meta name="google-site-verification" content="mWv4cDb2ZnB3SzBkAkn2lhTRwLEEvQrIAJkPjOyFmwQ" />
<!-- Importing Google Fonts -->
<meta name="msvalidate.01" content="F08D096601151AB3C3750560588DF846" />
<meta name="google-site-verification" content="NMPuB4hQ0zdn4BHUE1VCLXUghfnICKisubXfYqcqR3U" />
<meta name="google-site-verification" content="mWv4cDb2ZnB3SzBkAkn2lhTRwLEEvQrIAJkPjOyFmwQ" />
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap" rel="stylesheet">
</svelte:head>

<Header />
<div class="flex flex-col min-h-screen bg-gradient-to-b from-gray-900 to-gray-800">
<Header />

<main class="flex-grow px-4 py-8 md:px-6 lg:px-8" style="min-height: calc(100vh - 145px);">
<slot></slot>
</main>

<main class="bg-gray-900 dark:bg-gray-900" style="min-height: calc(100vh - 145px);">
<slot></slot>
</main>
<section class="container mx-auto px-4 py-12 bg-gray-900/50 backdrop-blur-sm rounded-t-3xl shadow-2xl">
<h2 class="text-3xl font-bold text-center text-white mb-8 relative">
<span class="relative inline-block">
Contributors
<div class="absolute -bottom-2 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"></div>
</span>
</h2>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
{#each data.contributors as contributor}
<a
href="https://github.com/{contributor.githubId}"
target="_blank"
rel="noopener noreferrer"
class="group flex items-center space-x-4 p-4 bg-gray-800/80 hover:bg-gray-700/80
border border-gray-700 rounded-xl transition-all duration-300
hover:shadow-lg hover:shadow-blue-500/20 hover:-translate-y-1"
>
<div class="relative">
<Avatar
src="https://github.com/{contributor.githubId}.png"
class="ring-2 ring-blue-500/50 group-hover:ring-blue-500 transition-all duration-300"
size="md"
/>
<div class="absolute inset-0 bg-blue-500/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>

<div class="flex flex-col">
<span class="text-sm font-semibold text-white group-hover:text-blue-400 transition-colors duration-300">
{contributor.name}
</span>
<span class="text-xs text-gray-400 group-hover:text-gray-300 transition-colors duration-300">
@{contributor.githubId}
</span>
</div>
</a>
{/each}
</div>
</section>

<div class="flex flex-col items-center mt-8 px-4">
<h2 class="mb-4 text-2xl font-extrabold tracking-tight leading-none text-white dark:text-white">
Contributors
</h2>
<div class="flex flex-wrap justify-center gap-4">
{#each data.contributors as contributor}
<a
href="https://github.com/{contributor.githubId}"
target="_blank"
class="flex items-center space-x-3 px-3 py-2 text-sm text-gray-900 bg-gray-100 dark:bg-gray-800 border-primary-400 rounded-lg shadow-lg transform transition-transform hover:scale-105 w-full sm:w-auto"
>
<Avatar src="https://github.com/{contributor.githubId}.png" size="md"/>
<div class="text-sm font-medium text-gray-800 dark:text-white">
{contributor.name}
</div>
</a>
{/each}
</div>
<Footer />
</div>

<style>
:global(body) {
@apply bg-gray-900;
scroll-behavior: smooth;
}

main {
backdrop-filter: blur(8px);
}

.container {
max-width: 1440px;
}

<Footer />
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
Loading