diff --git a/README.md b/README.md index ee53ace..dbad182 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,7 @@ Types: feat: A new feature or functionality added to the project. fix: A bug fix. + design: Changes related to the design of the project. docs: Documentation changes. style: Code style changes (e.g., formatting, missing semicolons). refactor: Code changes that neither fix a bug nor add a feature, but improve the structure. @@ -40,6 +41,7 @@ Example Commit Messages: feat: add user authentication to the website fix: resolve issue with missing image on homepage + design: change color scheme of the homepage docs: update README.md with contribution guidelines style: format code according to ESLint rules test: add unit test for login function diff --git a/css/index.css b/css/index.css index 2c9a3ce..60e0902 100644 --- a/css/index.css +++ b/css/index.css @@ -1,50 +1,375 @@ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - transition: all 0.3s ease; +/* 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); } -html{ - --background: #19329e; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -body{ - font: inherit; - background: var(--background); +html { + scroll-behavior: smooth; } -header{ - background: yellow; - display: flex; - width: 100%; - max-height: 15vh; - padding: 10px; +body { + font-family: 'Orbitron', sans-serif; + background-color: var(--color-bg); + color: var(--color-text); + line-height: 1.5; } -.left{ - width: 50%; - display: flex; - align-items: center; - justify-content: flex-start; - gap: 20px; + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1rem; } -.left img{ - width: 70px; - border-radius: 50%; +/* 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); } -.right{ - width: 50%; - display: flex; - gap: 20px; - align-items: center; - justify-content: flex-end; +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; +} + +.logo-content{ + display: inherit; + cursor: pointer; +} + +.nav-links { + display: flex; + gap: 2rem; +} + +.nav-links a, +nav .icon-sm { + color: var(--color-text); + text-decoration: none; + transition: color 0.3s; + cursor: pointer; +} + +.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; +} + +.hero-content { + position: relative; + max-width: 48rem; + padding: 6rem 0; +} + +.hero h1 { + font-size: 3rem; + font-weight: bold; + margin-bottom: 1.5rem; + background: linear-gradient(to right, var(--color-accent), #3b82f6); + -webkit-background-clip: text; + color: transparent; +} + +.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; + align-items: center; + gap: 1.5rem; + margin-bottom: 3rem; +} + +.section-header h2 { + font-size: 1.875rem; + font-weight: bold; +} + +/* About Section */ +.about { + background-color: var(--color-bg-secondary); +} + +.about-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; +} + +.about-text { + display: flex; + flex-direction: column; + gap: 1.5rem; + color: var(--color-text-secondary); + text-wrap: wrap; +} + +.stats-card { + background-color: rgba(55, 65, 81, 0.5); + padding: 1.5rem; + border-radius: 0.5rem; + border: 1px solid var(--color-border); +} + +.stats-card h3 { + font-size: 1.25rem; + margin-bottom: 1rem; +} + +.stats-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; } -.right ul{ - display: contents; - list-style-type: none; +.stat { + background-color: rgba(17, 24, 39, 0.5); + padding: 1rem; + border-radius: 0.5rem; } +.stat-number { + font-size: 1.5rem; + font-weight: bold; + color: var(--color-accent); +} + +.stat-label { + color: var(--color-text-secondary); +} + +/* Projects Section */ +.projects-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} + +.project-card { + 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: 1.25rem; + margin: 1rem 0 0.5rem; +} + +.project-card p { + color: var(--color-text-secondary); + margin-bottom: 1rem; +} + +/* Q&A Section */ +.qa { + background-color: var(--color-bg-secondary); +} + +.qa-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; +} + +.qa-card { + background-color: rgba(17, 24, 39, 0.5); + padding: 1.5rem; + border-radius: 0.5rem; + border: 1px solid var(--color-border); +} + +.qa-card h3 { + font-size: 1.25rem; + margin-bottom: 0.75rem; +} + +.qa-card p { + color: var(--color-text-secondary); +} + +/* Footer */ +.footer { + background-color: var(--color-bg-secondary); + border-top: 1px solid var(--color-border); + padding: 3rem 0; +} + +.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 e6961bb..48b52d3 100644 --- a/index.html +++ b/index.html @@ -4,38 +4,214 @@ Sourceware Lab + + + + + + + + + + + + - - + -
-
- -

Sourceware Lab

-
-
- + +
+
+
-
-
-

Sourceware Lab

-

Learn by doing

+ +
+
+
+
+

Where Code Meets Community

+

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

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

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

+
+
+
+ +

Community Website

+

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.

+ +
+
+ +

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.

+ +
+
-
+ + + +
+
+
+ +

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?

+

You're welcome to share your project idea in the Project Hub on our Discord server! + If the community shows interest and support, we can help you bring it to life by providing guidance, resources, and a space for collaboration

+
+
+

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 promote my project? When will it appear on the website?

+

If your project is shared in the Project Hub, gains community support, and reaches MVP status, it will be featured on the website.

+
+
+

What are community projects on Sourceware Lab?

+

Community projects on Sourceware Lab are our most actively developed initiatives. We provide them with the highest level of support and ensure a smooth, + streamlined onboarding process so any member can easily join. These projects are also showcased on our website

+
+
+

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.

+
+
+
+
+ + +
+
+
+ +
+ GitHub +
+
+
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..2443218 --- /dev/null +++ b/script.js @@ -0,0 +1,25 @@ +// toggle hamburger menu (for mobile devices) +function toggleMenu() { + var navLinks = document.querySelector(".nav-links"); + var hamburgerIcon = document.getElementById("hamburger-icon"); + var xIcon = document.getElementById("x-icon"); + // add/remove class from navLinks + navLinks.classList.toggle("active"); + // specify the display of hamburgerIcon and xIcon + if(document.querySelector(".nav-links").classList.contains("active")){ + hamburgerIcon.style.display = "none"; + xIcon.style.display = "block"; + }else{ + hamburgerIcon.style.display = "block"; + xIcon.style.display = "none"; + } +} + +// scroll to top when clicking the logo +document.querySelector(".logo").addEventListener("click", () => { + window.scrollTo({ + top: 0, + behavior: "smooth" + }) + +}) \ No newline at end of file