# VuePress Tutorial 10 - Homepage Styling Part 2

By: J the Code Monkey

•Posted: Sep 2, 2022 •Updated: Apr 18, 2023

# 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 $accentColor, $textColor, and $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.

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 home, the header tag with a class of hero, and the div tag with a class of features.

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 home class:

padding: 8rem 0 0 adds a padding of 8rem to the top and a padding of 0 to 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 hover pseudo-class:

.hero:hover applies the hover pseudo-class to the .hero selector which will apply the styles defined inside of it when the user hovers their pointer over the header tag with a class of hero.
box-shadow: 0.125rem 0.5rem 1rem 0.125rem #0b0c0f changes the box shadow style defined in the hero class.
transform: scale(1.1) applies the scale() method to the transform property to increase the size of the img tag to be 1.1 times the original width and height.

If you have questions about the CSS discussed above, then check out these resources:

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.

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 properties:

transition: box-shadow 0.2s adds the transition effect to the box-shadow property with a specified duration of 0.2s.
transition: transform 0.2s adds the transition effect to the transform property used by the img tag with a specified duration of 0.2s.

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 hero:

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 #2c303a which transitions to the $backgroundColor variable that is defined in the palette.styl file.

If you want to learn more about CSS gradients, then check out these resources:

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 $backgroundColor.

# 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.