From 7779ad77fc0ed162ef0ded5d709eb2fa0de21a62 Mon Sep 17 00:00:00 2001 From: Yaman Alhusein Alosman Date: Sun, 26 Jan 2025 22:30:17 +0200 Subject: [PATCH 1/7] Positioned items inside "aboutus" div to the center --- css/index.css | 12 ++++++++++++ index.html | 6 ++++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/css/index.css b/css/index.css index 2c9a3ce..84890cb 100644 --- a/css/index.css +++ b/css/index.css @@ -48,3 +48,15 @@ header{ } +#aboutus{ + background-color: aqua; + height: 90vh; +} + +#aboutus div{ + text-align: center; + width: 100%; + height: 50%; + margin: auto; + align-content: center; +} \ No newline at end of file diff --git a/index.html b/index.html index e6961bb..583c339 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,10 @@
-

Sourceware Lab

-

Learn by doing

+
+

Sourceware Lab +

Learn by doing

+

From b43ae70504e7c9d144aa7eae52f0d6108dc73cc0 Mon Sep 17 00:00:00 2001 From: Yaman Alhusein Alosman Date: Mon, 27 Jan 2025 20:33:58 +0100 Subject: [PATCH 2/7] design: code design --- css/index.css | 57 +++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 24 ++++++++++++++++++---- 2 files changed, 75 insertions(+), 6 deletions(-) diff --git a/css/index.css b/css/index.css index 84890cb..c395285 100644 --- a/css/index.css +++ b/css/index.css @@ -47,16 +47,69 @@ header{ list-style-type: none; } - #aboutus{ - background-color: aqua; height: 90vh; } +#projects { + height: 100vh; +} + #aboutus div{ text-align: center; width: 100%; height: 50%; margin: auto; align-content: center; +} + +#projects{ + background-color: red; +} + +#projects div{ + text-align: center; + width: 40%; + height: 100%; + align-content: center; + float: left; +} + +#projects .projectsPreview{ + width: 60%; +} + +#projects .projectsPreview img{ + width: 50%; + border-radius: 10px; +} + +#questionAnswer{ + background-color: orange; + height: 50vh; +} + +.questions{ + width: 95%; + height: 100%; + padding: 12px; +} + +.questions details{ + width: 90%; + margin: auto; + border: 1px solid white; + padding: 10px; + border-radius: 10px; + color: white; + margin-bottom: 10px; +} + +.questions summary{ + text-decoration: underline; +} + +.questions details[open]{ + background-color: white; + color: black; } \ No newline at end of file diff --git a/index.html b/index.html index 583c339..dd8b645 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -9,6 +10,7 @@ +
@@ -27,17 +29,31 @@
-

Sourceware Lab +

Sourceware Lab

Learn by doing

- +
+

Projects

+

Check out our open-source projects

+
+
+ +
-
- +
+
+
+ What is Sourceware Lab? +

Sourceware Lab is a community of developers who are passionate about open-source software. We + believe in the power of collaboration and sharing knowledge to create a better future for + everyone.

+
+
+ \ No newline at end of file From 72e836a4dd7de2f9e7cf46d7405042541f52105f Mon Sep 17 00:00:00 2001 From: Yaman Alhusein Alosman Date: Mon, 27 Jan 2025 20:36:06 +0100 Subject: [PATCH 3/7] docs: update README.md with contribution guidelines --- README.md | 2 ++ 1 file changed, 2 insertions(+) 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 From e54fc41dbcf81e48c46ed14e40042d3d5bbf05a2 Mon Sep 17 00:00:00 2001 From: Yaman Alhusein Alosman Date: Mon, 3 Feb 2025 17:51:20 +0100 Subject: [PATCH 4/7] design: a complete design to the web page. --- css/index.css | 195 ++++++++++++++++++++++++++++++-------------------- index.html | 111 +++++++++++++++++++--------- 2 files changed, 195 insertions(+), 111 deletions(-) diff --git a/css/index.css b/css/index.css index c395285..8434d34 100644 --- a/css/index.css +++ b/css/index.css @@ -1,115 +1,158 @@ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - transition: all 0.3s ease; +/* General Styles */ +body { + font-family: 'Roboto', sans-serif; + background-color: #0A0A0A; + color: #FFFFFF; + margin: 0; + padding: 0; + line-height: 1.6; } -html{ - --background: #19329e; +h1, h2, h3 { + font-family: 'Orbitron', sans-serif; } -body{ - font: inherit; - background: var(--background); +a { + color: #00FF88; + text-decoration: none; } -header{ - background: yellow; - display: flex; - width: 100%; - max-height: 15vh; - padding: 10px; +a:hover { + color: #00CC66; } -.left{ - width: 50%; - display: flex; - align-items: center; - justify-content: flex-start; - gap: 20px; + +::-webkit-scrollbar-thumb { + background: #00CC66; + border-radius: 12px; + +} +::-webkit-scrollbar { + width: 8px; } -.left img{ - width: 70px; - border-radius: 50%; +.container { + width: 90%; + max-width: 1200px; + margin: 0 auto; +} + +/* Header */ +header { + background-color: #0A0A0A; + padding: 5px 0; + border-bottom: 2px solid #00FF88; + position: fixed; + width: 100%; +} + + +header .logo { + font-size: 24px; + font-weight: bold; + color: #00FF88; } -.right{ - width: 50%; +header nav ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; +} + +.headerRight{ display: flex; - gap: 20px; - align-items: center; - justify-content: flex-end; + column-gap: 40px; +} + +header nav ul li { + display: inline; + +} + +/* Hero Section */ +.hero { + background-color: #1A1A1A; + padding: 100px 0; + text-align: center; +} + +.hero h2 { + font-size: 36px; + margin-bottom: 20px; } -.right ul{ - display: contents; - list-style-type: none; +.hero p { + font-size: 18px; + color: #A0A0A0; } -#aboutus{ - height: 90vh; +/* Sections */ +.section { + padding: 60px 0; } -#projects { - height: 100vh; +.section h2 { + font-size: 28px; + margin-bottom: 30px; + color: #00FF88; } -#aboutus div{ - text-align: center; - width: 100%; - height: 50%; - margin: auto; - align-content: center; +/* Projects Section */ +.project-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; } -#projects{ - background-color: red; +.project-card { + background-color: #1A1A1A; + padding: 20px; + border-radius: 8px; + border: 1px solid #333333; } -#projects div{ - text-align: center; - width: 40%; - height: 100%; - align-content: center; - float: left; +.project-card h3 { + font-size: 20px; + margin-bottom: 10px; } -#projects .projectsPreview{ - width: 60%; +.project-card p { + color: #A0A0A0; } -#projects .projectsPreview img{ - width: 50%; - border-radius: 10px; +/* Q&A Section */ +.qa-list { + display: grid; + gap: 20px; } -#questionAnswer{ - background-color: orange; - height: 50vh; +.qa-item { + background-color: #1A1A1A; + padding: 20px; + border-radius: 8px; + border: 1px solid #333333; } -.questions{ - width: 95%; - height: 100%; - padding: 12px; +.qa-item h3 { + font-size: 20px; + margin-bottom: 10px; } -.questions details{ - width: 90%; - margin: auto; - border: 1px solid white; - padding: 10px; - border-radius: 10px; - color: white; - margin-bottom: 10px; +.qa-item p { + color: #A0A0A0; } -.questions summary{ - text-decoration: underline; +/* Footer */ +footer { + background-color: #1A1A1A; + padding: 20px 0; + text-align: center; + border-top: 2px solid #00FF88; } -.questions details[open]{ - background-color: white; - color: black; +footer p { + margin: 0; + color: #A0A0A0; } \ No newline at end of file diff --git a/index.html b/index.html index dd8b645..4564404 100644 --- a/index.html +++ b/index.html @@ -6,54 +6,95 @@ Sourceware Lab - - + +
-
- -

Sourceware Lab

-
-
-
    -
  • About us
    • -
  • Projects
    • -
  • Socials
    • -
+
+
-
-
-
-

Sourceware Lab

-

Learn by doing

-
+ +
+
+

Code, Collaborate, Create.

+

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

-
-
-

Projects

-

Check out our open-source projects

-
-
- +
+ Join the community + +
+
+ + +
+
+

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.

+
+
+ + +
+
+

Projects

+
+
+

Community Website

+

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

+
+
+

Glados Discord BOT

+

A Discord bot for managing server and community.

+
-
-
-
- What is Sourceware Lab? -

Sourceware Lab is a community of developers who are passionate about open-source software. We - believe in the power of collaboration and sharing knowledge to create a better future for - everyone.

-
+
+ + +
+
+

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.-.

+
+
+

Can I contribute to projects?

+

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

+
+
+

Where can I ask questions?

+

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

+
-
+ + +
+
+

Made with love by Sourceware Lab.

+
+
\ No newline at end of file From efaebcfeeb658c4b32524bb3bb46625fde22146a Mon Sep 17 00:00:00 2001 From: ArabPixel Date: Sun, 16 Feb 2025 10:37:17 +0100 Subject: [PATCH 5/7] 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.

-