// Structural elements body {
background: $backgroundColour; color: $bodyColour; height: 100%; display: flex; @include flex-direction(column); overflow-x: hidden;
}
.container {
width: 90%; max-width: 900px; margin: 0 auto;
}
// Header, feature and footer .header, .footer {
.container { padding: 1rem 0; @include flexbox; @include flex-direction(column); @include align-items(center); text-align: center; } @include breakpoint(break-1) { .container { @include flex-direction(row); @include justify-content(space-between); text-align: inherit; } }
}
.header {
@include flex(0, 0, auto); background: darken($backgroundColour, 10%);
}
.logo {
display: inline-block; line-height: 0; border-radius: 100%; overflow: hidden; img { width: 4rem; height: 4rem; }
}
.small {
padding-top: .6rem; color: $captionColour; display: inline-block;
}
.footer {
border-top: 1px solid darken($backgroundColour, 15%);
}
// Nav and copyright .nav {
&--paginator { @include flexbox; @include justify-content(center); color: $captionColour; text-align: center; }
}
.pagination {
margin: 0 1rem;
}
// Main content .main {
@include flexbox; @include flex-direction(column); @include flex(1, 0, auto); margin-bottom: 1.6rem; @include breakpoint(break-1) { @include flex-direction(row); }
}
// Lists .list {
&--posts { list-style: none; } &--nav { list-style: none; } .item--post { margin-left: 0; }
}
.item {
&--nav { display: inline-block; margin-left: 1rem; &:first-of-type { margin-left: 0; } } &--current { a { color: desaturate($linkColour, 100%); } }
}
// Images and media elements img {
max-width: 100%; height: auto;
}
audio, video {
width: 100%;
}
// Text selection ::selection {
background: $headingColour; color: $white; text-shadow: none;
}
// Sassline overrides .typeset {
a > code { text-shadow: none; } .button, button { background-image: none; text-shadow: none; color: $backgroundColour; &:hover, &:active, &:focus { background-image: none; color: $backgroundColour; } } hr { width: 100%; } li { > p { padding: 0; margin: 0; } } .nav a { padding-left: 0; padding-right: 0; margin-left: .2rem; margin-right: .2rem; } pre { white-space: pre; overflow-x: scroll; }
}