Varkopat/enhancement/644/update site footer to match figma designs#654
Varkopat/enhancement/644/update site footer to match figma designs#654Varkopat wants to merge 13 commits into
Conversation
…styles - Implemented FooterContact component for displaying contact information with email links and a "Work With Us" section. - Created FooterInfo component to present additional information with links to relevant pages. - Developed FooterLinks component to manage navigation links in the footer. - Added corresponding SCSS styles for each component to ensure proper layout and design.
Varkopat
requested review from
Rutjake,
Skoivumaki,
leolabdev and
patinen
as code owners
…dimensions and styles
…nt-family adjustments and background color changes
…, including logo integration and layout adjustments
Skoivumaki
left a comment
Skoivumaki
left a comment
There was a problem hiding this comment.
Routing, i18n, UI/layout changes have been done as requested. However there are still some small styles fixes needed. Comments are much better this time. Overall you have improved since last issue, good work 👍
Todo:
- Incorrect dimensions: In Figma there are 3 clear columns with
64pxpadding for each column that their content fills centered on all directions. Instead of using pixels to set sizes, apply responsive units instead that match the64pxof padding etc. (If needed create style cases for desktop and mobile, sinceflexcan differ alot) - Logo is incorrect size on desktop and not center aligned.
- You applied
max-widthfor mobile, which causes feedback component to break because of the shrinking. (let feedback component ignoremax-widthfor now, since it will eventually need updating too) - Fonts are not loading or are missing.
- On desktop footer has unnecessary
topproperty, that causes alot of spacing. - Footer has set width of
1920pxthat denies it expanding past FullHD screens, breaking footer for 2k and 4k devices.
See comments.
| flex-direction: column; | ||
| position: relative; | ||
| z-index: 20; | ||
| width: 1920; |
There was a problem hiding this comment.
Depending on the browser, these properties are invalid and do nothing.
| width: 1920; | ||
| height: 482; | ||
| gap: 30px; | ||
| opacity: 1; |
There was a problem hiding this comment.
You added alot of opacity properties that do nothing. Default is always 1 anyway: https://www.w3schools.com/cssref/css3_pr_opacity.php
What changed: - Added wide-screen variables at min-width: 1920px. - Footer inner layout can now expand from 120rem up to 160rem on very wide screens. - Column padding scales from the normal 4rem up to 8rem. - Logo scales beyond the standard 275 x 270 proportion on 4k, capped at 24rem x 23.5rem. - Social bar height, social icon size, icon gap, footer text blocks, and copyright size also scale gently for 4k. - Kept standard desktop sizing intact at normal desktop widths. Other changes: - Removed max-width from mobile. - Fixed fonts. Fonts are now loading hopefully. - Removed unnecessary properties and opacities. Tests passed: - Focused footer tests - npm.cmd run lint passed with only existing unrelated warnings.
Rutjake
left a comment
Rutjake
left a comment
There was a problem hiding this comment.
Great work!
Just one small thing: the link fonts should be DM Sans.
Also, regarding the mobile footer, there should be a button for feedback. However, since we don't know yet what it's supposed to open, let's leave that change for the next issue.
…th us section to match Figma designs
| color: #faf9f6; | ||
| text-decoration: none; | ||
| font-family: var(--font-dm-s); | ||
| font-family: 'DM Sans'; |
There was a problem hiding this comment.
Fonts are set like so: font: var(--font-dm-s);
S size, since its nearest to 0.9em which is set in AppLink. Meaning your font-size: clamp(0.875rem, 0.75vw, 1.25rem); is being overridden.
See: https://github.com/Alt-Org/Altzone-WebPages/wiki/9.-Css-rules#fonts
…y with Figma designs
3 participants
📄 Pull Request Overview
Closes #644
🔧 Changes Made
Implemented FooterContact component for displaying contact information with email links and a "Work With Us" section.
Created FooterInfo component to present additional information with links to relevant pages.
Developed FooterLinks component to manage navigation links in the footer.
Added corresponding SCSS styles for each component to ensure proper layout and design.
Embedded FeedbackCard to FooterMobile and made it responsive in FooterMobile.module.scss.
✅ Checklist Before Submission
console.log()or other debugging statements are left.📝 Additional Information
Provide any additional context or information that reviewers may need to know: