Setting up the Less variables

The process of setting up your Less variables should feel pretty familiar now. Let's go ahead and set up the Less variables for the social network. As in the previous project, we're going to use the colors included with the boilerplate.

Background colors

For the background color section, we only need to update the value of the inverse background variable:

@inverse-background: @navy1;

Text colors

The only text color that we are going to change is the heading text variable:

@heading-text: @navy1;

Link colors

Let's change both the link color variables to match the color scheme for our new project:

@primary-link-color: @aqua1;
@primary-link-color-hover: @aqua2;

Border colors

For the borders, everything will stay the same except for the focus color. This is the property that controls the border color of an input when it is in focus:

@border-focus: @aqua1;

Typography

Earlier, we imported Roboto from Google Web Fonts. Let's now set up our text variables to use the typeface:

@body...