# VuePress Tutorial 10 - Homepage Styling Part 2
# Homepage Styling Recap
In the previous tutorial we began the process of styling the homepage. By the end of the tutorial we overrode the global styling variables for the
$borderColor in the
palette.styl file. The colors of these variables then get applied instead of the colors originally set by the default theme (opens new window). These variables can also be used to style other elements of the blog as well.
We also added our own global styling variables to the
palette.styl file which included the
$backgroundColor and the
$darkBorderColor. These variables were then used in the
index.styl file we used some of the global styling variables along with overriding and adding our own global styling to style the
background-color of the blog, the
main tag with a class of
header tag with a class of
hero, and the
div tag with a class of
After overriding and adding these styles to the blog, the main card on the homepage was being covered by the navbar, so in this tutorial we'll be fixing this issue. Then we'll be adding some hover effects to the main card logo and to the box shadow around the main card. Finally, we'll be adding a radial gradient background to the main card.
# Homepage Styling Updates
Make sure you start the local development server which should be running at http://localhost:8080/ (opens new window) to see the changes we'll be making to the site. If the changes aren't appearing after you save them, then try restarting your local development server.
When adding the styling updates be sure to add each block of code below one at a time to your project then view the changes in the browser to get a better understanding of what each block is responsible for.
You can view all of the code in this tutorial by going to the
tutorial-10 branch of the code-monkeys-blog-tutorials (opens new window) repository.
# Fixing the Main Card Placement
We'll start by fixing the issue of the main card being covered by the navbar. To fix this issue we just need to update the
padding in the
padding: 8rem 0 0adds a padding of
8remto the top and a padding of
0to the left, right, and bottom of the main card. This pushes the main card down, so it is no longer being covered by the navbar.
Why not Start with this Padding?
In the previous tutorial we used
padding: 0 to style the
home class since that code was based off of a more complicated way of styling the
Footer component which has now been simplified. We'll be going over this simplified
Footer component styling in the next tutorial.
Now that we've fixed the placement of the main card, let's add the hover effects to the main card logo and to the box shadow around the main card.
# Adding Hover Effects
To implement the hover effects we'll be adding a CSS pseudo-class of
hover to the
header tag with a class of
hero which we'll use along with the
transition property to smoothly apply the hover effects to the main card logo and to the box shadow around the main card.
First, let's add the
hoverpseudo-class to the
.heroselector which will apply the styles defined inside of it when the user hovers their pointer over the
headertag with a class of
box-shadow: 0.125rem 0.5rem 1rem 0.125rem #0b0c0fchanges the box shadow style defined in the
transform: scale(1.1)applies the
scale()method to the
transformproperty to increase the size of the
imgtag to be
1.1times the original width and height.
If you have questions about the CSS discussed above, then check out these resources:
- Pseudo-classes (opens new window)
- :hover (opens new window)
- CSS 2D Transforms (opens new window)
- CSS box-shadow Property (opens new window)
When you hover your pointer over the main card, you should see the logo increase in width and height and the box shadow around the main card should now be more prevalent.
The hover effects are working, but they aren't that smooth. To make them smoother we're going to use the
transition property allows you to change CSS property values smoothly over a specified duration. To create a transition you need to specify two values:
- The CSS property you want to add the transition to
- The duration of the transition
Here's what the
index.styl file looks like after adding our
transition: box-shadow 0.2sadds the transition effect to the
box-shadowproperty with a specified duration of
transition: transform 0.2sadds the transition effect to the
transformproperty used by the
imgtag with a specified duration of
When you hover your pointer over the main card, the hover effects should look much smoother.
If you want to learn more about the
transition property, then check out CSS Transitions (opens new window).
Now that we have added our hover effects, let's add the radial gradient background to the main card.
# Adding Gradient Background
CSS gradients allow you to display smooth transitions between two or more specified colors. You can control numerous aspects of the transitions between the colors including the direction, shape, number of colors, etc.
We'll be adding a circular radial gradient background to the center of the
header tag with a class of
background-image: radial-gradient(circle at center center, #2c303a, $backgroundColor)adds a radial gradient with a circular shape to the center of the element starting with a color of
#2c303awhich transitions to the
$backgroundColorvariable that is defined in the
If you want to learn more about CSS gradients, then check out these resources:
- CSS Gradients (opens new window)
- A Complete Guide to CSS Gradients (opens new window)
- radial-gradient() (opens new window)
- A Practical Guide on Radial Gradient - CSS (opens new window)
You can also check out Gradient Magic (opens new window) which is a gallery of CSS gradients that you can freely use in your own projects.
The background of the main card should now be a radial gradient that starts at the center of the card with a color of
#2c303a that circularly transitions to the
# Next Steps
In the next tutorial we'll add styling to make the
Footer component stick to the bottom of the page, and we'll add a highlight effect to the SVG icons.