feat: add a new more descriptive footer #46

35C4n0r · 2023-11-04T11:14:32Z

The footer data and links are stored in hugo.toml
styling has been added to _content_projects.scss.
Breakpoints have been added.

Notes for Reviewers

This PR fixes #15 and #44

Yes, I signed my commits.

- The footer data and links are stored in hugo.toml - css has been added to _content_projects.scss. - Breakpoints have been added. Signed-off-by: Jay <[email protected]>

netlify · 2023-11-04T11:14:37Z

✅ Deploy Preview for bejewelled-pegasus-b0ce81 ready!

Name	Link
🔨 Latest commit	`6635655`
🔍 Latest deploy log	https://app.netlify.com/sites/bejewelled-pegasus-b0ce81/deploys/6553881c3059bf0008690845
😎 Deploy Preview	https://deploy-preview-46--bejewelled-pegasus-b0ce81.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

- made the subscribe section more responsive. - centered all the items. Signed-off-by: Jay <[email protected]>

35C4n0r · 2023-11-04T11:48:51Z

@leecalcote the PR is up for review.

35C4n0r · 2023-11-04T11:51:20Z

@leecalcote ps: not a part of the issue #15, but should I add the code for the scrollbar too?

iArchitSharma

@35C4n0r can you please change the logo svg to the one that is being used in header

Signed-off-by: Jay <[email protected]>

35C4n0r · 2023-11-04T19:07:42Z

@35C4n0r can you please change the logo svg to the one that is being used in header

@iArchitSharma updated the logo

leecalcote · 2023-11-05T03:49:51Z

@35C4n0r can you please change the logo svg to the one that is being used in header

@iArchitSharma updated the logo

@ritiksaxena124 to confirm.

leecalcote · 2023-11-05T03:50:15Z

@leecalcote ps: not a part of the issue #15, but should I add the code for the scrollbar too?

Sounds great. Yes.

Signed-off-by: Jay <[email protected]>

35C4n0r · 2023-11-05T04:19:58Z

@leecalcote added the scrollbar :)

ritiksaxena124 · 2023-11-05T05:09:12Z

@35C4n0r can you please change the logo svg to the one that is being used in header

@iArchitSharma updated the logo

@35C4n0r you are referencing the logo we have in the header, which is good. Could you please update the Twitter logo to "X"
Repetition of subscribe icon as it is layer5 docs that have all projects docs so maybe we can link that icon with layer5 subscribe page only

35C4n0r · 2023-11-05T05:53:51Z

Ok @ritiksaxena124 , keeping only the https://layer5.io/subscribe
But to include the X logo we would need to update to font awesome package to v6.4.2
Can you please guide me how to update this version.
I've tried running go get github.com/FortAwesome/Font-Awesome@latest, but i'm getting some error after that.

ritiksaxena124 · 2023-11-05T07:06:40Z

Ok @ritiksaxena124 , keeping only the https://layer5.io/subscribe But to include the X logo we would need to update to font awesome package to v6.4.2 Can you please guide me how to update this version. I've tried running go get github.com/FortAwesome/Font-Awesome@latest, but i'm getting some error after that.

Instead of using FontAwesome icons you can use the SVG

leecalcote · 2023-11-05T15:15:43Z

Ok @ritiksaxena124 , keeping only the https://layer5.io/subscribe But to include the X logo we would need to update to font awesome package to v6.4.2 Can you please guide me how to update this version. I've tried running go get github.com/FortAwesome/Font-Awesome@latest, but i'm getting some error after that.

Instead of using FontAwesome icons you can use the SVG

Yes, please.

- The SVGs are stored in hugo.toml in URI base64 format. Signed-off-by: Jay <[email protected]>

35C4n0r · 2023-11-06T02:32:38Z

@ritiksaxena124 replaced fa with the SVGs

iArchitSharma

@35C4n0r well done with the logo
also add space b/w 2023 Copyright and shift Privacy and Terms in right side just as it is in layer5.io

saurabh100ni · 2023-11-06T12:07:53Z

Please add this as your agenda in Doc to present it in the Website Meet today at 6:30 pm IST/7:00 am CT

Signed-off-by: Jay <[email protected]>

35C4n0r · 2023-11-06T12:53:02Z

layer5.io

@35C4n0r well done with the logo also add space b/w 2023 Copyright and shift Privacy and Terms in right side just as it is in layer5.io

@iArchitSharma fixed this.

iArchitSharma · 2023-11-06T15:12:30Z

add space b/w 2023 Copyright

nice but you didn't added space b/w 2023 and Copyright

35C4n0r · 2023-11-06T15:39:31Z

@iArchitSharma wierd bug, but it looks fine on my local

I'll see how i can fix this

Signed-off-by: Jay <[email protected]>

35C4n0r · 2023-11-07T03:52:37Z

@leecalcote done :)

layouts/partials/footer.html

assets/scss/footer.scss

Co-authored-by: Ritik Saxena <[email protected]> Signed-off-by: Jay Kumar <[email protected]>

Signed-off-by: Jay <[email protected]>

leecalcote

Excellent, @35C4n0r 🥇

leecalcote · 2023-11-08T17:21:13Z

Ideally, in all of our site's footers, we'll using SVGs with vectors inside (not SVGs with rasterized PNGs inside).

coder12git · 2023-11-09T02:43:24Z

assets/scss/footer.scss

+    background-color: $primary;
+
+    .custom-search-banner-wrap {
+      max-height: 250px;


Please use rem instead of px

Do i need to replace all the px with rems??

coder12git · 2023-11-09T02:50:42Z

hugo.toml

+	[[params.links.footer.icons]]
+		name = "Docker"
+		url = "https://hub.docker.com/u/layer5/"
+		icon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBpZD0iTGF5ZXJfMSIgeD0iMCIgeT0iMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNDYwIDMyMi4xIiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NjAgMzIyLjEiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+LnN0MHtmaWxsOiMwOTljZWN9PC9zdHlsZT48ZyBpZD0iX3gzOV83LWRvY2tlciI+PGc+PGc+PHJlY3Qgd2lkdGg9IjQ3LjUiIGhlaWdodD0iNDMuMiIgeD0iMjA0IiB5PSI1Mi4zIiBjbGFzcz0ic3QwIi8+PHJlY3Qgd2lkdGg9IjQ3LjUiIGhlaWdodD0iNDIuNyIgeD0iMjA0IiB5PSIxMDQuMSIgY2xhc3M9InN0MCIvPjxyZWN0IHdpZHRoPSI0Ny41IiBoZWlnaHQ9IjQzLjIiIHg9IjE0Ny45IiB5PSI1Mi4zIiBjbGFzcz0ic3QwIi8+PHJlY3Qgd2lkdGg9IjQ3LjUiIGhlaWdodD0iNDIuNyIgeD0iMjYwLjIiIHk9IjEwNC4xIiBjbGFzcz0ic3QwIi8+PHJlY3Qgd2lkdGg9IjQ3LjUiIGhlaWdodD0iNDMuNiIgeD0iMjA0IiBjbGFzcz0ic3QwIi8+PHJlY3Qgd2lkdGg9IjQ3LjUiIGhlaWdodD0iNDMuMiIgeD0iOTEuNyIgeT0iNTIuMyIgY2xhc3M9InN0MCIvPjxyZWN0IHdpZHRoPSI0Ny41IiBoZWlnaHQ9IjQyLjciIHg9IjE0Ny45IiB5PSIxMDQuMSIgY2xhc3M9InN0MCIvPjxwYXRoIGQ9Ik00NTAuNCwxMjQuMWMtMTAuNC03LTM0LjItOS41LTUyLjUtNmMtMi40LTE3LjItMTItMzIuMy0yOS41LTQ1LjhsLTEwLjEtNi43bC02LjcsMTAuMSBjLTEzLjIsMjAtMTYuOCw1Mi45LTIuNyw3NC42Yy02LjMsMy40LTE4LjUsOC0zNC44LDcuN0gxLjhjLTYuMywzNi41LDQuMiw4My45LDMxLjYsMTE2LjVDNjAsMzA2LDEwMCwzMjIuMSwxNTIuMywzMjIuMSBjMTEzLjEsMCwxOTYuOS01Mi4xLDIzNi0xNDYuOGMxNS40LDAuMyw0OC42LDAuMSw2NS42LTMyLjVjMS4xLTEuOCw0LjctOS41LDYuMS0xMi4zTDQ1MC40LDEyNC4xeiIgY2xhc3M9InN0MCIvPjxwb2x5Z29uIHBvaW50cz0iODMuMiAxMDQuMSA4My4xIDEwNC4xIDM1LjcgMTA0LjEgMzUuNyAxNDYuOCA4My4yIDE0Ni44IiBjbGFzcz0ic3QwIi8+PHJlY3Qgd2lkdGg9IjQ3LjUiIGhlaWdodD0iNDIuNyIgeD0iOTEuNyIgeT0iMTA0LjEiIGNsYXNzPSJzdDAiLz48L2c+PC9nPjwvZz48L3N2Zz4="


Use SVGs with vectors, you can directly import those icons SVGs in assets/images directory and can add a link here.

coder12git · 2023-11-09T02:59:54Z

@35C4n0r footer is not completely responsive. Also the description text and some other texts used here is 'open-sans' instead of 'Qanleas Soft`.

Ideally it should look same, in mobile view as we have for layer5.io sites, check below screenshots:

leecalcote · 2023-11-09T04:03:36Z

Hang in there, @35C4n0r. You're doing some good work.

35C4n0r · 2023-11-11T06:00:30Z

@35C4n0r footer is not completely responsive. Also the description text and some other texts used here is 'open-sans' instead of 'Qanleas Soft`.

Ideally it should look same, in mobile view as we have for layer5.io sites, check below screenshots:

@coder12git made the css more, responsive will be pushing the code soon.

- calibrated the breakpoints more. - we use svg instead of base64. Signed-off-by: Jay <[email protected]>

35C4n0r · 2023-11-11T11:41:01Z

Pushed the code, @coder12git kidly give a re-review

coder12git · 2023-11-11T14:26:21Z

assets/scss/_variables_project.scss

@@ -67,6 +67,7 @@ $web-font-path: "https://fonts.googleapis.com/css?family=#{$google_font_family}&
 $font-awesome-font-name: "Font Awesome 6 Free" !default;

 $td-fonts-serif: "Qanelas Soft", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-qanelas: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";


Suggested change

$font-qanelas: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

$font-qanelas: "Qanelas Soft", "Open Sans", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

coder12git · 2023-11-11T14:32:22Z

@35C4n0r great work you did. Everything looks good to me, just remove that extra spacing from bottom (in mobile view).

Signed-off-by: Jay <[email protected]>

35C4n0r · 2023-11-11T17:42:19Z

@coder12git apparently it wasn't a bug related to footer, maybe background overflow #33 ?? I've fixed it now.

iArchitSharma · 2023-11-11T20:17:54Z

@35C4n0r good work there, was the scrollbar supposed to be that way?

abhijeetgauravm · 2023-11-12T07:50:33Z

Hey @35C4n0r Let's discuss this on website call tomorrow at 6:30 PM IST / 7 AM Central time. Please add this as an agenda item in the meeting minutes.

coder12git · 2023-11-12T09:30:29Z

@35C4n0r thanks, please resolve the merge conflicts after that this PR will be good to merge 🚀.

// @leecalcote

35C4n0r · 2023-11-12T12:35:41Z

Nope, that is because of this #46 (comment)
will need to discuss a better way to resolve this, that overflow is because of background image.

Signed-off-by: Lee Calcote <[email protected]>

leecalcote · 2023-11-14T14:45:55Z

Thanks for sticking with this, @35C4n0r

feat: add a new footer which replaces the existing one

6d74cf2

- The footer data and links are stored in hugo.toml - css has been added to _content_projects.scss. - Breakpoints have been added. Signed-off-by: Jay <[email protected]>

35C4n0r changed the title ~~feat: add a new footer which replaces the existing one~~ feat: add a new more descriptive footer Nov 4, 2023

update: remove unnecessary div after footer

f5fbf5e

- made the subscribe section more responsive. - centered all the items. Signed-off-by: Jay <[email protected]>

iArchitSharma suggested changes Nov 4, 2023

View reviewed changes

update: update to new logo

5eba29d

Signed-off-by: Jay <[email protected]>

feat: add new scrollbar to match the theme

a51ba8d

Signed-off-by: Jay <[email protected]>

feat: replace font awesome icons with svg

f80b8da

- The SVGs are stored in hugo.toml in URI base64 format. Signed-off-by: Jay <[email protected]>

iArchitSharma suggested changes Nov 6, 2023

View reviewed changes

iArchitSharma mentioned this pull request Nov 6, 2023

Add Meshery Docs link in the footer #51

Closed

fix: fix the copyright positioning.

44c1105

Signed-off-by: Jay <[email protected]>

35C4n0r requested a review from iArchitSharma November 6, 2023 12:53

35C4n0r added 3 commits November 6, 2023 21:14

fix: space between 2023 and Copyright

aefefab

Signed-off-by: Jay <[email protected]>

fix: space between 2023 and Copyright using f-strings

e51336f

Signed-off-by: Jay <[email protected]>

fix: space between 2023 and Copyright using string concatenation

e5b1c82

Signed-off-by: Jay <[email protected]>

35C4n0r requested a review from leecalcote November 7, 2023 03:52

ritiksaxena124 suggested changes Nov 7, 2023

View reviewed changes

layouts/partials/footer.html Outdated Show resolved Hide resolved

layouts/partials/footer.html Show resolved Hide resolved

assets/scss/footer.scss Outdated Show resolved Hide resolved

35C4n0r and others added 3 commits November 7, 2023 21:10

refactor: spelling corrections

b220269

Co-authored-by: Ritik Saxena <[email protected]> Signed-off-by: Jay Kumar <[email protected]>

refactor: replace white to variable $white

f5b04e1

Signed-off-by: Jay <[email protected]>

Merge remote-tracking branch 'origin/fix-footer-ui' into fix-footer-ui

de04bc8

35C4n0r requested a review from ritiksaxena124 November 7, 2023 17:56

leecalcote approved these changes Nov 8, 2023

View reviewed changes

leecalcote requested a review from coder12git November 8, 2023 17:20

coder12git suggested changes Nov 9, 2023

View reviewed changes

feat: make footer more responsive

3e9e117

- calibrated the breakpoints more. - we use svg instead of base64. Signed-off-by: Jay <[email protected]>

35C4n0r requested a review from coder12git November 11, 2023 11:40

coder12git reviewed Nov 11, 2023

View reviewed changes

fix: overflow fix

9d3b7f1

Signed-off-by: Jay <[email protected]>

35C4n0r requested a review from coder12git November 11, 2023 17:42

coder12git approved these changes Nov 12, 2023

View reviewed changes

Merge branch 'master' into fix-footer-ui

6635655

Signed-off-by: Lee Calcote <[email protected]>

leecalcote merged commit ccba72b into layer5io:master Nov 14, 2023
4 of 5 checks passed

	$font-qanelas: "Qanelas Soft", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	$font-qanelas: "Qanelas Soft", "Open Sans", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

feat: add a new more descriptive footer #46

feat: add a new more descriptive footer #46

Conversation

35C4n0r commented Nov 4, 2023

netlify bot commented Nov 4, 2023 • edited Loading

✅ Deploy Preview for bejewelled-pegasus-b0ce81 ready!

35C4n0r commented Nov 4, 2023

35C4n0r commented Nov 4, 2023

iArchitSharma left a comment

Choose a reason for hiding this comment

35C4n0r commented Nov 4, 2023

leecalcote commented Nov 5, 2023

leecalcote commented Nov 5, 2023

35C4n0r commented Nov 5, 2023

ritiksaxena124 commented Nov 5, 2023 • edited Loading

35C4n0r commented Nov 5, 2023

ritiksaxena124 commented Nov 5, 2023

leecalcote commented Nov 5, 2023

35C4n0r commented Nov 6, 2023

iArchitSharma left a comment

Choose a reason for hiding this comment

saurabh100ni commented Nov 6, 2023

35C4n0r commented Nov 6, 2023

iArchitSharma commented Nov 6, 2023

35C4n0r commented Nov 6, 2023

35C4n0r commented Nov 7, 2023

leecalcote left a comment

Choose a reason for hiding this comment

leecalcote commented Nov 8, 2023

coder12git Nov 9, 2023

Choose a reason for hiding this comment

35C4n0r Nov 11, 2023

Choose a reason for hiding this comment

coder12git Nov 9, 2023

Choose a reason for hiding this comment

35C4n0r Nov 11, 2023

Choose a reason for hiding this comment

coder12git commented Nov 9, 2023 • edited Loading

leecalcote commented Nov 9, 2023

35C4n0r commented Nov 11, 2023

35C4n0r commented Nov 11, 2023

coder12git Nov 11, 2023

Choose a reason for hiding this comment

coder12git commented Nov 11, 2023

35C4n0r commented Nov 11, 2023 • edited Loading

iArchitSharma commented Nov 11, 2023

abhijeetgauravm commented Nov 12, 2023

coder12git commented Nov 12, 2023 • edited Loading

35C4n0r commented Nov 12, 2023 • edited Loading

leecalcote commented Nov 14, 2023

netlify bot commented Nov 4, 2023 •

edited

Loading

ritiksaxena124 commented Nov 5, 2023 •

edited

Loading

coder12git commented Nov 9, 2023 •

edited

Loading

35C4n0r commented Nov 11, 2023 •

edited

Loading

coder12git commented Nov 12, 2023 •

edited

Loading

35C4n0r commented Nov 12, 2023 •

edited

Loading