CSS Elements
11/30/2024
My Global CSS File
To accurately style all pages, I opted into a global.css file. Although Astro can handle CSS in their separate .astro files that correspond with their page, it is much easier to style the main elements in the global.css file. It is way too big for me to showcase all of it here, but here are some key takeaways from this file:
- Mobile Friendliness: A big purpose of this project is to have amazing support for mobile friendliness, and I tried my best to do that with my CSS and the hamburger JS.
Picture of the primary CSS code for small screens
And for larger screens
-
The Theme: The theme is what makes it breaks a website in many cases, and I chose an open source theme that would put the eyes and mind as ease when viewing. Nord theme is a popular choice that includes light and dark elements and has amazing support across the board. The image was showcased as the primary image for this post, and rightfully so, it is a beautiful theme and it was a great choice for this website overall.
-
Responsive Images: Last but certainly not least is my CSS code to make images fit better in these very blog posts. When first applying them to the blog, they would have a very inconsistent sizing issue and this fixed that and added great style to the images.
Picture of the code for the responsive images element
