feat: Introduce smoother animations & improve reading/navigating experience

[sssoz]

Is your feature request related to a problem? Please describe.

Transitions between pages or parts of the pages, and interactions with certain UI elements can be slightly jarring. The typeface, which looks quite harsh in its contrast, can be made to look nicer and smoother as well. An example of a nice-looking animation/transition is the hover effect in the top navigation menu.

These are nice-to-haves but easy cosmetic changes.

Describe the solution you'd like

We could make use of CSS animations and transitions to create smoother, more inviting interactions with the page. There are plenty of 'easy wins' here:

• Smooth scrolling down a page when clicking an anchor link from anywhere (property: scroll-behavior: smooth;)
• Transitioning of CSS properties (using timing functions) when hovering or when buttons are active, for all elements carrying the class .btn, for example (property could be: transition: all 200ms ease;) — anywhere between 150 to 300ms tends to look better for small page elements
  • Could be done on larger elements such as the homepage’s programme 'button-like' links (in that case a slightly slower transition might be appropriate)
• Improve typography’s look and contrast by adding antialiasing via the properties -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; — it’s an extremely subtle change but adds a nice visual nuance to long text, creating a more pleasant reading experience

Describe alternatives you've considered

--

Additional context

--

[lilyndk]

Hi @sssoz, thanks for suggesting this. Let's break this up into three separate issues :)

1. Anchor smooth scrolling
2. Button transition (it would good if you include some visuals and/or link examples of the desired 'transition' effect). Note that we are using Google's Material Design as our design system reference.
3. Typography: make a note that this is blocked by this typography refactoring task: https://github.com/WomenCodingCommunity/WomenCodingCommunity.github.io/issues/38 We need these reusable font variables before working on fine tuning the typography.

[lilyndk]

Hi @sssoz, fyi the typography size variables have been added to the custom/_variables.scss file. So if you were planning on working on these styling improvements, feel free to do so. :)