html {
display: flex; //IE 11 Fix for sticky footer but doesn't work.. flex-direction: column; overflow-x: hidden;
} body {
font-family: $font; font-size: 1.2rem; color: $textColor; background: $base; @media screen and (max-width: $break) { font-size: 1.2rem; } // sticky footer display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden;
}
main {
flex: 1;
}
.flex {
display: flex; justify-content: space-between; @media screen and (max-width: $break) { flex-wrap: wrap-reverse; }
}
//Structure .container {
max-width: 800px; margin: 0 auto; padding: 5rem 20px; @media screen and (max-width: $break) { padding: 1.5rem 20px; }
}
hr {
border: none; background: rgba($textColor, .2); height: 3px; margin: 30px 0;
}
img {
border-radius: 5px;
}
// Crumbs
.crumbs {
padding: 0; margin-top: 2rem; @media screen and (max-width: $break) { font-size: .9rem; } li { display: inline-block; list-style: none; }
}
.tag-cloud {
margin-right: 50px; margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; a { display: inline-block; border: solid $accent 1px; border-radius: 3px; padding: 3px 6px; margin-top: 6px; text-decoration: none; &:hover { background: $accent; color: $base; } } h3 { font-size: 1.5rem; }
}
._404 {
display: flex; justify-content: flex-start;
}
.post-list {
@extend .tag-cloud;
}