From baf17339fbce7f3932df93ffdc1f63acb55dc7f6 Mon Sep 17 00:00:00 2001 From: DeshDeepakKant Date: Sun, 23 Feb 2025 00:00:40 +0530 Subject: [PATCH 1/2] Improve UI for community page in Harbor website Signed-off-by: DeshDeepakKant --- layouts/shortcodes/community-info.html | 311 ++++++++++++++++++------- 1 file changed, 231 insertions(+), 80 deletions(-) diff --git a/layouts/shortcodes/community-info.html b/layouts/shortcodes/community-info.html index d2e881069..c4195bb91 100644 --- a/layouts/shortcodes/community-info.html +++ b/layouts/shortcodes/community-info.html @@ -1,93 +1,244 @@ -
- -
-

- Join the Harbor community! -

- -

- Harbor is developed in the open, and is constantly being improved by our users, contributors, and maintainers. - It is because of you that we can bring great software to the community. -
-
- Come join us! -

-

- -
- - - - - Follow us on Twitter @project_harbor - -
- -
- -
-

- Community Meetings -

- -

- We have a recurring bi-weekly Harbor community meeting at 9PM UTC+8 time zone. We will use this meeting to communicate updates to the project, listen to feedback from the Harbor community, and also collect requirements/use cases for new features. -

- -
-
-
-

- - +
+ +
+ +
+

Join the Harbor community!

+
+

+ Harbor is developed in the open, and is constantly being improved by our + users, contributors, and maintainers. + It is because of you that we can bring great software to the community. +

+

- -

- Read, comment, or add agenda items on the meeting notes and add our calendar and subscribe at our mailing list to get the latest Harbor news, what we're working on, and provide suggestions and feedback. -

+
+

+
+
-
-

- - - - - Catch up with past meetings on YouTube - -

- -

- All Harbor community meetings are recorded and added to our YouTube playlist. -

-
+ +
+

+ + + + Meeting information +

+
+

+ See all the meeting information and add our planned calendar over at + + our meeting notes and agenda + . + All meetings will be recorded and upload to + + YouTube + . +

-
- -
-
-
-

- - - - - Meeting information - -

+ +
+
+
+

Community Meetings

+ 9PM UTC+8 time zone +
+
+

+ We have a recurring bi-weekly Harbor community meeting. We will use this meeting + to communicate updates to the project, listen to feedback from the Harbor community, + and also collect requirements/use cases for new features. +

+
+
+
-

- See all the meeting information and add our planned calendar over at our meeting notes and agenda. All meetings will be recorded and upload to YouTube. -

-
+ + + +
+
+

+ + + + Bi-weekly public community meetings +

+
+

+ Read, comment, or add agenda items on the + meeting notes + and add our calendar and subscribe at + our mailing list + to get the latest Harbor news, what we're working on, and provide suggestions and feedback. +

+ +
+

+ + + + Catch up with past meetings on YouTube +

+
+

+ All Harbor community meetings are recorded and added to our + + YouTube playlist + . +

+
+
+
+ + \ No newline at end of file From ef03057d7e145268335bd5d037b5f0a1ec2d5ccd Mon Sep 17 00:00:00 2001 From: DeshDeepakKant Date: Tue, 25 Feb 2025 12:11:47 +0530 Subject: [PATCH 2/2] refactor: convert community page styles to sass module Signed-off-by: DeshDeepakKant --- assets/sass/community-info.sass | 72 ++++++ assets/sass/style.sass | 1 + layouts/shortcodes/community-info.html | 292 +++++-------------------- 3 files changed, 127 insertions(+), 238 deletions(-) create mode 100644 assets/sass/community-info.sass diff --git a/assets/sass/community-info.sass b/assets/sass/community-info.sass new file mode 100644 index 000000000..443492a10 --- /dev/null +++ b/assets/sass/community-info.sass @@ -0,0 +1,72 @@ +.meeting-time + font-size: 1rem + background: #f5f5f5 + padding: 0.5rem 1rem + border-radius: 4px + cursor: pointer + transition: all 0.3s ease + border: 1px solid transparent + display: inline-block + + &:hover + background: #ffffff + border-color: #e0e0e0 + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) + transform: translateY(-2px) + color: #2563eb + +.community-container + width: 100% + padding: 2rem + box-sizing: border-box + +.top-row + display: grid + grid-template-columns: 1fr 1fr + gap: 2rem + margin-bottom: 2rem + width: 100% + +.card + width: 100% + background: white + border-radius: 8px + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) + + h2 + padding: 1.5rem + margin: 0 + border-bottom: 1px solid #eee + +.card-content + padding: 1.5rem + width: 100% + + p + width: 100% + +.has-margin-right + margin-right: 0.75rem + +.button.is-twitter-blue + background-color: #000 + color: white + display: inline-flex + align-items: center + gap: 0.75rem + padding: 0.75rem 1.5rem + border-radius: 4px + text-decoration: none + +/* Responsive Design +@media (max-width: 768px) + .community-container + padding: 1rem + + .top-row + grid-template-columns: 1fr + + .card-content p .button.is-twitter-blue + float: none + margin-top: 1rem + display: block diff --git a/assets/sass/style.sass b/assets/sass/style.sass index 7f2b55a1b..714a9c418 100644 --- a/assets/sass/style.sass +++ b/assets/sass/style.sass @@ -121,3 +121,4 @@ $code-background: $light @import "admonition" @import "helpers" @import "toc" +@import "community-info" diff --git a/layouts/shortcodes/community-info.html b/layouts/shortcodes/community-info.html index c4195bb91..8fc88dc46 100644 --- a/layouts/shortcodes/community-info.html +++ b/layouts/shortcodes/community-info.html @@ -1,244 +1,60 @@
- -
- -
-

Join the Harbor community!

-
-

- Harbor is developed in the open, and is constantly being improved by our - users, contributors, and maintainers. - It is because of you that we can bring great software to the community. -

-

- Come join us! - - - - - - Follow us on X @project_harbor - - + +
+ +
+

Join the Harbor community!

+
+

+ Harbor is developed in the open, and is constantly being improved by our + users, contributors, and maintainers. + It is because of you that we can bring great software to the community. +

+

+

+
-

-
-
- - -
-

- - - - Meeting information -

-
-

- See all the meeting information and add our planned calendar over at - - our meeting notes and agenda - . - All meetings will be recorded and upload to - - YouTube - . -

-
-
-
- -
-
-
-

Community Meetings

- 9PM UTC+8 time zone -
-
-

- We have a recurring bi-weekly Harbor community meeting. We will use this meeting - to communicate updates to the project, listen to feedback from the Harbor community, - and also collect requirements/use cases for new features. -

-
-
-
- - - -
-
-

- - - - Bi-weekly public community meetings -

-
-

- Read, comment, or add agenda items on the - meeting notes - and add our calendar and subscribe at - our mailing list - to get the latest Harbor news, what we're working on, and provide suggestions and feedback. -

-
-
+ +
+

+ + + + Community Meetings +

+
+

+ We have a recurring bi-weekly Harbor community meeting at + 9PM UTC+8 time zone. + We will use this meeting to communicate updates to the project, listen to feedback from the Harbor community, and also collect requirements/use cases for new features. +

+

+ See all the meeting information and add our planned calendar over at + + our meeting notes and agenda + . + + Subscribe at + our mailing list + to get the latest Harbor news, what we're working on, and provide suggestions and feedback. + All meetings will be recorded and uploaded to + + YouTube + . +

+
+
-
-

- - - - Catch up with past meetings on YouTube -

-
-

- All Harbor community meetings are recorded and added to our - - YouTube playlist - . -

-
- -
-
- - \ No newline at end of file