From efaebcfeeb658c4b32524bb3bb46625fde22146a Mon Sep 17 00:00:00 2001 From: ArabPixel Date: Sun, 16 Feb 2025 10:37:17 +0100 Subject: [PATCH 1/3] design: a design remake --- css/index.css | 390 ++++++++++++++++++++++++++++++++++++++------------ index.html | 216 ++++++++++++++++++++++------ script.js | 16 +++ 3 files changed, 486 insertions(+), 136 deletions(-) create mode 100644 script.js diff --git a/css/index.css b/css/index.css index 8434d34..52942dd 100644 --- a/css/index.css +++ b/css/index.css @@ -1,158 +1,370 @@ -/* General Styles */ -body { - font-family: 'Roboto', sans-serif; - background-color: #0A0A0A; - color: #FFFFFF; +/* Base styles */ +:root { + --color-bg: #111827; + --color-bg-secondary: rgba(31, 41, 55, 0.5); + --color-text: #f3f4f6; + --color-text-secondary: #9ca3af; + --color-accent: #22d3ee; + --color-accent-hover: #06b6d4; + --color-border: rgba(34, 211, 238, 0.1); +} + +* { margin: 0; padding: 0; - line-height: 1.6; + box-sizing: border-box; } -h1, h2, h3 { +html { + scroll-behavior: smooth; +} + +body { font-family: 'Orbitron', sans-serif; + background-color: var(--color-bg); + color: var(--color-text); + line-height: 1.5; } -a { - color: #00FF88; - text-decoration: none; +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; } -a:hover { - color: #00CC66; +/* Header */ +.header { + position: sticky; + top: 0; + z-index: 50; + background-color: var(--color-bg-secondary); + backdrop-filter: blur(8px); + border-bottom: 1px solid var(--color-border); } -::-webkit-scrollbar-thumb { - background: #00CC66; - border-radius: 12px; +nav { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 0; +} +.logo { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: bold; + font-size: 1.25rem; + background: linear-gradient(to right, var(--color-accent), #3b82f6); + -webkit-background-clip: text; + color: transparent; } -::-webkit-scrollbar { - width: 8px; + +.nav-links { + display: flex; + gap: 2rem; } -.container { - width: 90%; - max-width: 1200px; - margin: 0 auto; +.nav-links a, +nav .icon-sm { + color: var(--color-text); + text-decoration: none; + transition: color 0.3s; + cursor: pointer; } -/* Header */ -header { - background-color: #0A0A0A; - padding: 5px 0; - border-bottom: 2px solid #00FF88; - position: fixed; - width: 100%; +.nav-links a:hover, +nav .icon-sm:hover { + color: var(--color-accent); } +/* Hero Section */ +.hero { + position: relative; + overflow: hidden; +} + +.hero-bg { + position: absolute; + inset: 0; + background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80'); + background-size: cover; + background-position: center; + opacity: 0.1; +} -header .logo { - font-size: 24px; +.hero-content { + position: relative; + max-width: 48rem; + padding: 6rem 0; +} + +.hero h1 { + font-size: 3rem; font-weight: bold; - color: #00FF88; + margin-bottom: 1.5rem; + background: linear-gradient(to right, var(--color-accent), #3b82f6); + -webkit-background-clip: text; + color: transparent; } -header nav ul { - list-style: none; - padding: 0; - margin: 0; +.hero p { + font-size: 1.25rem; + color: var(--color-text-secondary); + margin-bottom: 2rem; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background-color: var(--color-accent); + color: var(--color-bg); + padding: 0.75rem 2rem; + border: none; + border-radius: 0.5rem; + font-family: 'Orbitron', sans-serif; + font-weight: 500; + cursor: pointer; + transition: background-color 0.3s; + text-decoration: none; +} + +.btn:hover { + background-color: var(--color-accent-hover); +} + +.link-btn { + background: none; + border: none; + color: var(--color-accent); + font-family: 'Orbitron', sans-serif; + cursor: pointer; + transition: color 0.3s; +} + +.link-btn:hover { + color: var(--color-accent-hover); +} + +/* Section styles */ +section { + padding: 6rem 0; +} + +.section-header { display: flex; - justify-content: space-between; align-items: center; + gap: 1.5rem; + margin-bottom: 3rem; } -.headerRight{ - display: flex; - column-gap: 40px; +.section-header h2 { + font-size: 1.875rem; + font-weight: bold; } -header nav ul li { - display: inline; +/* About Section */ +.about { + background-color: var(--color-bg-secondary); +} +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; } -/* Hero Section */ -.hero { - background-color: #1A1A1A; - padding: 100px 0; - text-align: center; +.about-text { + display: flex; + flex-direction: column; + gap: 1.5rem; + color: var(--color-text-secondary); + text-wrap: wrap; } -.hero h2 { - font-size: 36px; - margin-bottom: 20px; +.stats-card { + background-color: rgba(55, 65, 81, 0.5); + padding: 1.5rem; + border-radius: 0.5rem; + border: 1px solid var(--color-border); } -.hero p { - font-size: 18px; - color: #A0A0A0; +.stats-card h3 { + font-size: 1.25rem; + margin-bottom: 1rem; +} + +.stats-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; } -/* Sections */ -.section { - padding: 60px 0; +.stat { + background-color: rgba(17, 24, 39, 0.5); + padding: 1rem; + border-radius: 0.5rem; } -.section h2 { - font-size: 28px; - margin-bottom: 30px; - color: #00FF88; +.stat-number { + font-size: 1.5rem; + font-weight: bold; + color: var(--color-accent); +} + +.stat-label { + color: var(--color-text-secondary); } /* Projects Section */ -.project-grid { +.projects-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 20px; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; } .project-card { - background-color: #1A1A1A; - padding: 20px; - border-radius: 8px; - border: 1px solid #333333; + background-color: var(--color-bg-secondary); + padding: 1.5rem; + border-radius: 0.5rem; + border: 1px solid var(--color-border); + transition: border-color 0.3s; +} + +.project-card:hover { + border-color: rgba(34, 211, 238, 0.3); } .project-card h3 { - font-size: 20px; - margin-bottom: 10px; + font-size: 1.25rem; + margin: 1rem 0 0.5rem; } .project-card p { - color: #A0A0A0; + color: var(--color-text-secondary); + margin-bottom: 1rem; } /* Q&A Section */ -.qa-list { +.qa { + background-color: var(--color-bg-secondary); +} + +.qa-grid { display: grid; - gap: 20px; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; } -.qa-item { - background-color: #1A1A1A; - padding: 20px; - border-radius: 8px; - border: 1px solid #333333; +.qa-card { + background-color: rgba(17, 24, 39, 0.5); + padding: 1.5rem; + border-radius: 0.5rem; + border: 1px solid var(--color-border); } -.qa-item h3 { - font-size: 20px; - margin-bottom: 10px; +.qa-card h3 { + font-size: 1.25rem; + margin-bottom: 0.75rem; } -.qa-item p { - color: #A0A0A0; +.qa-card p { + color: var(--color-text-secondary); } /* Footer */ -footer { - background-color: #1A1A1A; - padding: 20px 0; - text-align: center; - border-top: 2px solid #00FF88; +.footer { + background-color: var(--color-bg-secondary); + border-top: 1px solid var(--color-border); + padding: 3rem 0; } -footer p { - margin: 0; - color: #A0A0A0; +.footer-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; +} + +.footer-logo { + display: flex; + align-items: center; + gap: 0.5rem; + font-weight: bold; +} + +.footer-copyright a { + color: var(--color-text-secondary); + text-decoration: none; +} + +/* Icons */ +.icon { + width: 2rem; + height: 2rem; + color: var(--color-accent); +} + +.icon-sm { + width: 1rem; + height: 1rem; +} + +/* Responsive Design */ +@media (min-width: 768px) { + .footer-content { + flex-direction: row; + justify-content: space-between; + } +} + +@media (max-width: 768px) { + + .about-grid, + .projects-grid, + .qa-grid { + grid-template-columns: 1fr; + } + + .hero h1 { + font-size: 2.5rem; + } + + .nav-links { + gap: 1rem; + } +} + +@media screen and (min-width: 541px) { + .icon-sm { + display: none !important; + } +} + +@media screen and (max-width: 540px) { + .logo { + width: 100%; + justify-content: space-between; + } + + nav:has(.nav-links.active) { + flex-direction: column; + } + + .nav-links:not(.active) { + display: none; + } + + .nav-links.active { + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 1rem; + } + + #x-icon { + display: none; + } } \ No newline at end of file diff --git a/index.html b/index.html index 4564404..c979db7 100644 --- a/index.html +++ b/index.html @@ -1,100 +1,222 @@ - Sourceware Lab + + + + + + + + + + + + - + - -
+
+ +
+ About Us + Projects + Q&A +
+
-

Code, Collaborate, Create.

-

Contribute your skills, learn from others, and leave your mark on open source

-
-
- Join the community - +
+

Where Code Meets Community

+

Join our thriving ecosystem of developers, innovators, and problem solvers.

+ + Get Started + + +
- -
+ +
-

About Us

-

Sourceware Lab is a community-driven platform dedicated to fostering innovation in open-source software. - Our mission is to provide a space for developers, designers, and enthusiasts to collaborate and create - impactful projects.

+
+ +

About Us

+
+
+
+

SourcewareLab is a community-driven Discord server where developers of all skill levels come + together to + learn, share, and collaborate on open-source projects together.

+

Whether you're just starting out or you're a seasoned coder, our goal is to create a welcoming + space where + everyone can grow, connect, and build cool stuff together.

+

Join us to be part of a global community that's passionate about developing and helping each + other succeed. +

+
+
+

Community Stats

+
+
+
290+
+
Members
+
+
+
3+
+
Projects
+
+
+
+
-
+
-

Projects

-
+
+ +

Projects

+
+
+

Community Website

-

A centralized hub for showcasing open-source projects made by the community.

+

The Community Website is a centralized hub for showcasing open-source projects, connecting + contributors, + and fostering collaboration.

+ +
+
+ +

GladOS Discord Bot

+

GladOS is an administration bot initially focused on core admin tasks such as moderation, role + management, + and activity logging, the bot is built to expand over time with additional features like event + scheduling, + project tracking, and automated server tasks.

+
-

Glados Discord BOT

-

A Discord bot for managing server and community.

+ +

Open Source Arena

+

Open Source Arena is an extremely ambitions project to build multi-tiered arena experience for + developers + of all skills to learn, practice, grow, and compete in events to hone their skills.

+
- -
+ +
-

Question & Answer

-
-
-

What is this community for?

-

Sourceware Lab from it's inception was designed with one goal in mind - to be a place for people to come together and learn to build with each other.-.

+
+ +

Questions & Answers

+
+
+
+

Why should I join?

+

We learn together and grow by doing. You'll gain experience, knowledge and new friendships. + Everyone is welcome, regardless of skill level. We're all here to learn and grow together.

+
+
+

Can I share my own project and ask others to contribute on the server?

+

Yes of course, everyone is free to share their own projects, + just post the github link and the description in the designated chat room.

+
+
+

Do I need to register somewhere to join and work on projects by others?

+

All you need is a discord and a github account to join.

+
+
+

Will you advertise my project, when would my project show up on the website?

+

We have some guidelines that your project has to follow in order to show up on the website, + if the project is actively being worked on by multiple members of the community, you can request + the + project to qualify as a community project.

-
-

Can I contribute to projects?

-

Yes! All our projects are open-source, and we welcome contributions from everyone.

+
+

What are community projects on SourcewareLab?

+

These are projects that we work on the most, we give these projects the most support and make + sure that any member can join them easily by making the onboarding proccess simple and + streamlined. + These are also the projects that show up on our website.

-
-

Where can I ask questions?

-

Join the Sourceware Lab Discord Server to ask questions and get help, you are welcome!

+
+

Do I need some kind of prior experience in programming to be able to join?

+

We recommend that you already know the basics of at least one programming language, + other than that no prior experience is needed, anyone can join, doesn't matter the experience, + we're all here to learn and grow.

-