CSS improvements

[froggleston]

This PR aims to do a number of things:

• Improve general CSS styling:
  • Fix font sizes, container widths, layout etc for mobile and desktop
• Add better sticky sidebar:
  • Use Sticky Sidebar to provide a better performing navigation bar
  • This is a full JS solution that scrolls earlier, in order to fix January 12, 2022: index sidebar not useful #465
• Fix logos:
  • Resize parrot so the top bar isn't so large
  • Fix the github logo box on the right hand side to address [2024-09-18]: [View project in GitHub link looks funny] #749

[Imran-imtiaz48]

The code provides responsive design adjustments for the img.logo and .row classes based on screen width, which is great for mobile responsiveness. Below are some suggestions and observations:

Positive Aspects:

1. Responsive Design Considerations:

   • You've correctly included media queries to adjust the size of the .logo class for screens smaller than 768px.
   • The .row class also adapts well with updated margins for smaller screens.

2. Consistent Styling:

   • The overall structure is clean and follows good practices, such as the use of float and specific width settings for the .logo and .right-rtl classes.

Suggestions for Improvement:

1. Use Flexbox Instead of Float:

   • Since you are focusing on responsiveness, consider using flexbox instead of float for alignment, especially for .logo and .right-rtl. Flexbox will give you better control over alignment and spacing, and it's more modern.
   • Example:

     .row {
       display: flex;
       justify-content: space-between;
     }

2. Consider Padding for .row:

   • The .row class in the media query has margin-left: .5cm and margin-right: 1cm. It would be better to use padding instead of margins, as padding is internal and helps maintain the width of elements more consistently across different screen sizes.

3. Improve Naming Convention:

   • The class name .right-rtl could be more descriptive. Since rtl refers to "right-to-left", consider clarifying whether this class is only for RTL layouts or if it has a broader purpose. It will make future maintenance easier.

4. Browser Compatibility:

   • Keep in mind that using physical units like cm can behave unpredictably across different devices and browsers. It might be better to use em, rem, or % for more consistency.

5. Add More Breakpoints:

   • The media query is only targeting screens below 768px. For even better responsiveness, consider adding more breakpoints for tablets and large screens (e.g., @media screen and (max-width: 1024px)).

Code Example (With Flexbox and Padding):

.row {
    display: flex;
    justify-content: space-between;
    background: grey;
    padding: 10px 20px;
}

@media screen and (max-width: 768px) {
    img.logo {
        width: 120px;
    }

    .row {
        background: grey;
        padding: 0 10px;
    }
}

Conclusion:

Great work on the responsive elements! Addressing the points above, such as the use of flexbox and improving class names, will enhance both readability and responsiveness of your code.