govarch-website/_sass/_base.scss
2018-10-24 19:50:48 -07:00

161 lines
2.1 KiB
SCSS

body {
color: $text-color;
font-family: $font-family;
font-size: 1.3125em;
line-height: 1.5;
}
h1 {
font-size: 3em;
margin: .5em auto;
}
h2 {
font-size: 2em;
margin: 1em auto;
text-align: center;
}
h3 {
font-size: 1.5em;
margin: 1.3333em auto;
text-align: center;
}
h4 {
font-size: 1.25em;
font-style: italic;
margin: 1.875em auto;
text-align: center;
}
h5 {
font-size: 1em;
font-style: italic;
margin: 2em auto;
text-align: center;
}
h6 {
font-size: .875em;
font-style: italic;
margin: 2.25em auto;
text-align: center;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
a {
color: $text-color;
}
a:focus {
outline: 1px dashed $text-color;
}
blockquote {
margin: 2em auto;
opacity: .8;
> * {
padding: 0 3em;
}
}
blockquote.epigraph {
font-style: italic;
}
small {
font-size: .75em;
}
p > cite {
display: block;
text-align: right;
}
hr {
border: 0;
height: 0;
@include divider;
margin: 4em 0;
}
img {
display: flex;
max-width: 100%;
height: auto;
margin: 2em auto;
}
figure img {
margin: 2em auto 1em;
}
figcaption {
font-size: .875em;
font-style: italic;
text-align: center;
margin-bottom: 2em;
opacity: .7;
}
.divided::after {
content: "";
@include divider;
}
.home {
max-width: 24em;
margin: auto;
padding: 4em 1em;
}
.content-title {
font-size: 2em;
margin-bottom: 2em;
text-align: center;
}
.post-date {
color: $muted-text-color;
display: block;
font-size: .825em;
white-space: nowrap;
text-transform: uppercase;
.post-link & {
padding: .5em 0;
}
}
.site-credits {
margin: 0 auto 2em;
padding: 0 2em;
text-align: center;
}
.skip-navigation {
background: $brand-color;
border: 1px dashed transparent;
display: block;
font-size: .875em;
font-weight: 700;
margin-top: -2.625rem;
padding: .5rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all .125s ease-in-out;
&:hover,
&:focus {
background: lighten($brand-color, 2.5%);
border-color: $text-color;
margin-top: 0;
}
}