website/_site/assets/source-maps/_assets/stylesheets/_base.scss

264 lines
3.2 KiB
SCSS

/**
* Reset some basic elements
*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
hr,
dl,
dd,
ol,
ul,
figure {
margin: 0;
padding: 0;
}
/**
* Basic styling
*/
body {
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
color: $text-color;
}
/**
* Set `margin-bottom` to maintain vertical rhythm
*/
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
ul,
ol,
dl,
figure,
%vertical-rhythm {
margin-bottom: $spacing-unit / 2;
}
/**
* Articles
*/
article {
background: #faf9f5;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05);
margin-bottom: $spacing-unit;
padding: 3em 3em 1em;
@include media-query($on-palm) {
padding: 1em 1em 0.3em;
}
> .entry-content {
@include media-query($on-palm) {
font-size: 80%;
}
}
}
.post-header {
margin-bottom: 2rem;
text-align: center;
&:before {
background: #faf9f5;
border: 1px solid #d9d6d0;
border-radius: 50%;
box-shadow: 0 0 0 4px #faf9f5;
color: #a09a92;
display: inline-block;
font-family: libretto-icons;
font-size: 21px;
line-height: 21px;
margin: 1rem auto 2rem;
text-shadow: none;
padding: 4px 10px 10px 10px;
}
> div {
color: $grey-color;
font-size: $base-font-size;
font-style: italic;
@include media-query($on-palm) {
font-size: $small-font-size;
}
&:before {
color: #d9d6d0;
display: inline-block;
font-family: libretto-icons;
font-size: 24px;
margin: 0 0.25rem;
text-shadow: none;
vertical-align: -6px;
}
&:after {
color: #d9d6d0;
display: inline-block;
font-family: libretto-icons;
font-size: 24px;
margin: 0 0.25rem;
text-shadow: none;
vertical-align: -6px;
}
}
}
.post-list {
.post-header {
&:before {
background: #eae9e6;
border-color: #faf9f5;
box-shadow: 0 0 0 4px #eae9e6;
}
}
}
/**
* Images
*/
img {
max-width: 100%;
vertical-align: middle;
}
.cover {
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
}
/**
* Figures
*/
figure {
background: #fff;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.025);
padding: 0.5em;
}
figure > img {
display: block;
}
figcaption {
color: $grey-color;
font-size: 16px;
font-style: italic;
line-height: 1.2;
margin: 1em 0.5em 0.5em;
text-align: center;
}
/**
* Lists
*/
ul,
ol {
margin-left: $spacing-unit;
}
li {
> ul,
> ol {
margin-bottom: 0;
}
}
/**
* Headings
*/
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: initial;
font-weight: $base-font-weight;
}
h5 {
font-size: 1.25rem;
}
/**
* Links
*/
a {
color: $brand-color;
text-decoration: underline;
&:hover {
color: darken($brand-color, 5%);
text-decoration: none;
}
}
/**
* Blockquotes
*/
blockquote {
color: $grey-color;
border-left: 4px solid $grey-color-light;
padding-left: $spacing-unit / 2;
font-size: 18px;
letter-spacing: -1px;
font-style: italic;
> :last-child {
margin-bottom: 0;
}
}
/**
* Clearfix
*/
%clearfix {
&:after {
content: '';
display: table;
clear: both;
}
}
/**
* Icons
*/
.icon {
> svg {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
path {
fill: $grey-color;
}
}
}
/**
* Override
*/
@media screen and (max-width: 768px) {
.display-4 {
font-size: 3rem;
}
}