/* Base */
html, body {
box-sizing: border-box; width: 100%; height: 100%; margin: 0; font-family: 'Open Sans', sans-serif;
}
*, *:before, *:after {
box-sizing: inherit;
}
p {
line-height: 1.6em;
}
li {
line-height: 2em;
}
img {
max-width: 100%;
}
.hidden{
display: none;
}
a {
border-bottom: 3px solid lighten($medium-gray, 20); color: darken($teal, 30); text-decoration: none; transition: all 0.5s; &:hover { border-color: $dark-gray; }
}
iframe {
border: 1px solid $medium-gray; margin-bottom: 1em;
}
blockquote {
margin-bottom: 1em; padding-left: 1em; border-left: 5px solid lighten($medium-gray, 20); p { font-size: 16px; font-style: italic; line-height: 1.8; margin-bottom: 0.5em; } footer { border: none; margin-top: 0; padding-top: 0; text-align: right; font-size: 1.5em; font-style: italic; &::before { content: '— '; } }
}
footer {
border-top: 1px dashed lighten($medium-gray, 10); margin-top: 5em; padding-top: 2em;
}
/* Layout */
.container {
display: flex; min-height: 100vh; @media (max-width: $tablet-width) { flex-direction: column; }
}
/* Header */
header {
margin-bottom: 2em; & > h1 { font-weight: 400; line-height: 1.2em; & > small { display: block; font-weight: 300; } }
}
// .content { // width: 80%; // }
@media (max-width: $tablet-width) {
.content: 100%;
}
.underline {
text-decoration: underline;
}