Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement style guide #20

Merged
merged 38 commits into from
Mar 24, 2024
Merged

Implement style guide #20

merged 38 commits into from
Mar 24, 2024

Conversation

manuel-pross
Copy link

@manuel-pross manuel-pross commented Mar 21, 2024 •
edited
Loading

This PR implements the main parts of the provided styleguide:

  • Font Family
  • Text Sizes
  • Colors
  • Button Styles
  • Navbar Styles
  • Footer Styles
  • Overall Spacing
  • Hyperlink Styles
  • Icon Sizes

Screenshots of the design of the button, navbar and footer:

image

image

image

Furthermore the main layout is now built with css grid.

@manuel-pross manuel-pross added the enhancement New feature or request label Mar 21, 2024
@manuel-pross manuel-pross self-assigned this Mar 21, 2024
@manuel-pross manuel-pross marked this pull request as draft March 21, 2024 12:53
Manuel Proß added 16 commits March 21, 2024 17:40
feat(web): make html element fit whole screen to show correct bg colo…
627a0ec 
…r at any time
fix(web): remove weights from font because it is a variable font
3778922
feat(web): change sidenav style according to design
a6257d5
fix(web): remove double tailwind class, add static margin to headings
528a413
feat(web): add correct colors to sidenav, add correct distance to sid…
8407940 
…enav
fix(web): adjust font size responsivness
b28067c
fix(web): remove class extractions
67a8e02
feat(web): add styling for hyperlinks
801fd17
fix(web): add font family to paragraph tag, only apply p style when p…
b81ee69 
…aragraph class is set
feat(web): add different string prefix for h2
98d6c27
wip(web): add some example tags to observe behaviour of styling
12b7d78
refactor(web): remove padding bottom from footer
49aa916
feat(web): add more height to footer divider
06bf2fb
refactor(web): build nav and main content with css grid, adjust navba…
4f4e8e6 
…r and main section according to styleguide
fix(web): order of imports
d741a55
fix(web): order of imports
e85c63e
@manuel-pross manuel-pross marked this pull request as ready for review March 23, 2024 10:40
@manuel-pross manuel-pross requested a review from jomunker March 23, 2024 10:40
@jomunker
Copy link
Collaborator

jomunker commented Mar 23, 2024 •
edited
Loading

Can you provide screenshots for the button, navbar and footer styling + the according design?

Ah yeah and you changed the layout to grid. Can you provide a screen recording for that showing the responsive behaviour etc? That would be great 🙌🏻

@manuel-pross
Copy link
Author

manuel-pross commented Mar 23, 2024 •
edited
Loading

Can you provide screenshots for the button, navbar and footer styling + the according design?
Due to missing access to the Adobe XD Wireframes I can only provide the style guide as a PDF (Attachment). The button is defined there.
Regarding the design, I can currently only provide this link to the Miro board
Vim_Styleguide (2).pdf

Screencast is attached. You can see the styled elements there.

Vim.Landing.Page.-.Google.Chrome.2024-03-23.17-48-02.mp4

Unfortunately we currently have no design for the movile navbar.

jomunker
jomunker requested changes Mar 23, 2024
View reviewed changes
Copy link
Collaborator

@jomunker jomunker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work! Thanks for taking the task to streamline the styling, colors, spacings etc 👍🏻

web/src/components/Layout/Navigation/Navigation.tsx Outdated Show resolved Hide resolved
web/src/styles/_btns.scss Outdated Show resolved Hide resolved
web/src/styles/_text.scss Outdated Show resolved Hide resolved
web/src/styles/_text.scss Show resolved Hide resolved
web/src/styles/_text.scss Show resolved Hide resolved
web/src/styles/_text.scss Outdated Show resolved Hide resolved
web/src/styles/globals.scss Outdated Show resolved Hide resolved
web/tailwind.config.ts Outdated Show resolved Hide resolved
web/tailwind.config.ts Show resolved Hide resolved
@jomunker
Copy link
Collaborator

Thanks for providing such detailed screenshots 🙏🏻

jomunker
jomunker previously approved these changes Mar 23, 2024
View reviewed changes
jomunker
jomunker previously approved these changes Mar 23, 2024
View reviewed changes
web/tailwind.config.ts Outdated Show resolved Hide resolved
web/tailwind.config.ts Outdated Show resolved Hide resolved
@manuel-pross manuel-pross merged commit b1bfbbd into development Mar 24, 2024
1 check passed
@manuel-pross manuel-pross deleted the implement-style-guide branch March 24, 2024 12:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jomunker jomunker jomunker approved these changes

Assignees

@manuel-pross manuel-pross

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@manuel-pross @jomunker