site/_src/_assets/styles/_page-guides.scss

133 lines
2.3 KiB
SCSS

.content--guide {
.content--page--markdown {
h1,
h2,
h3,
h4 {
font-weight: $font-weight-normal;
}
h2,
h3,
h4 {
text-align: left;
border: 0;
padding: 0;
}
h1 {
font-size: $font-size-h3;
}
h2 {
font-size: $font-size-h4;
margin-bottom: ($spacer * 2);
margin-top: ($spacer * 2);
}
h3 {
font-size: $font-size-base;
font-weight: $font-weight-bold;
color: #fff;
margin-bottom: $spacer;
margin-top: ($spacer * 2);
}
}
}
.guide {
height: 100%;
a {
@include color-overlay;
background-size: cover;
background-position: center;
display: block;
box-shadow: none;
background-color: $brand-main-blue-dark;
padding: $spacer * 2;
height: 100%;
border-radius: $border-radius;
&:before {
opacity: .9;
}
&:hover,
&:focus {
background-size: cover;
background-position: center;
box-shadow: 0 2px 5px rgba($brand-main-blue-dark, .2);
transform: translateY(-1px);
}
}
p:last-child,
.guide__title:only-child {
margin-bottom: 0;
}
}
.guide__title,
.guide__tagline {
position: relative;
z-index: 1;
}
.guide__title,
h1.guide__title {
font-size: $font-size-h4;
font-weight: $font-weight-normal;
margin-bottom: $spacer;
margin-top: 0;
color: $brand-primary;
}
//
// TOC
//
.section-nav {
background: darken($brand-main-gray, 2%);
margin-bottom: $spacer * 2;
padding: $spacer;
border-radius: $border-radius;
}
li.toc-h1 {
// custom numbers
&:before {
font-size: $font-size-base;
opacity: .6;
color: $brand-primary;
}
a {
font-size: $font-size-base;
margin: 0;
box-shadow: none;
color: $brand-primary;
}
ul {
padding-left: $spacer * 2.6;
}
}
li.toc-h2 {
a {
font-size: $font-size-sm;
color: $text-color;
}
}
li.toc-h3 {
display: none;
}
.header--guide {
.header__content {
padding-top: ($spacer * 5);
padding-bottom: ($spacer * 5);
}
}