funky/_sass/_theme.scss
2018-01-01 21:48:08 +00:00

177 lines
2.5 KiB
SCSS

// 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;
}
}