Creating Base Styles
In this video course we'll create some base styles:
/*============================
= BASE =
============================*/
body {
background: @body-background;
.base-font;
color: @base;
font-size: 17px;
@media @tablet-down {
font-size: 15px;
}
}
a {
.default-transition;
color: @link;
&:focus,
&:hover {
color: @link-hover;
}
&:active {
color: darken(@link-hover, 25%);
}
}
p {
margin-bottom: 25px;
a { font-weight: 700; }
}
h1, .h1 {
.heading-font;
font-weight: 700;
text-transform: uppercase;
color: @heading-color;
letter-spacing: -0.025em;
font-size: 70px;
line-height: 1.1;
font-style: normal;
opacity: 1;
@media @desktop-down { font-size: 50px; }
@media @tablet-down { font-size: 40px; }
}
h2, .h2 {
.h1;
font-size: 60px;
color: @heading-color-alt;
@media @desktop-down { font-size: 40px; }
@media @tablet-down { font-size: 30px; }
}
h3, .h3 {
.h2;
font-size: 40px;
color: @heading-color;
@media @desktop-down { font-size: 30px; }
@media @tablet-down { font-size: 20px; }
}
h4, .h4 {
.h3;
font-size: 30px;
color: @heading-color-alt;
@media @desktop-down { font-size: 20px; }
@media @tablet-down { font-size: 15px; }
}
h5, .h5 {
.h4;
font-size: 20px;
@media @desktop-down { font-size: 18px; }
@media @tablet-down { font-size: 14px; }
}
h6, .h6 {
.h5;
font-size: 14px;
@media @tablet-down { font-size: 12px; }
}
hr {
border: none;
width: 100%;
max-width: 194px;
height: 7px;
margin: 0 auto;
border-radius: 4px;
background: lighten(@link, 25%);
}
blockquote, .blockquote {
.box-me(@body-background);
font-style: italic;
footer {
.h6;
margin-top: 25px;
}
}
::selection {
background: @link;
color: #fff;
}