-
{ &, &:before, &:after {
box-sizing: border-box;
}
}
html {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
body {
padding: 0; margin: 0; min-height: 100%; display: block;
}
html, body {
height: 100%; background: $dark-grey; color: white;
}
button {
cursor: pointer;
}
.glyptotheque {
position: relative; padding: 40px; min-height: 100%; overflow: hidden; background: white; color: #343434; box-shadow: 0 0 20px black; -webkit-font-smoothing: antialiased;
}
.glypto-container {
max-width: 960px; margin-left: auto; margin-right: auto;
}
.glypto-section {
margin: 0 -10px 60px; padding: 0 10px 60px; &:after { @include position(absolute, null 0 null 0); content: ''; background: lighten($dark-grey, 55); height: 2px; margin-top: 60px; } &:last-child { margin-bottom: 0; &:after { content: none; } }
}
.glyptotheque, .glypto-section {
> h2, > h3, > h4 { margin: 1.1em 0 .5em; font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 24px; }
}
.glypto-title {
font-size: 48px; font-family: 'Helvetica Neue'; margin: 0 0 40px; letter-spacing: -.04em; a { color: #0070a8; text-decoration: none; &:hover { color: $hover-orange; } }
}
.glypto-header {
margin: -40px -40px 40px; padding: 36px 40px; background: lighten($dark-grey, 15); color: white; box-shadow: inset 0 -10px 0 rgba(black, .13); .glypto-title { margin: 0; line-height: 1; }
}
.glypto-breadcrumbs {
position: absolute; transition: 160ms; margin-top: -26px; font-weight: bold; font-size: em(12); line-height: 27px; opacity: .7; &:hover { opacity: 1; } a:link, a:hover, a:visited { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } .sep { opacity: .4; margin: 0 em(4); }
}
.glypto-section-list {
@include clearfix; background: #eee; padding: 5px; margin: 0; list-style: none;
}
.glypto-section-list-item {
padding: 5px; @include breakpoint(540px) { float: left; width: 50%; } a:link, a:hover, a:visited { display: block; padding: em(20); background: white; text-decoration: none; border: 1px solid transparent; color: inherit; min-height: 160px; &:hover { border-color: $dark-grey; } } &.m-folder a { border-color: rgba(black, .2); box-shadow: 1px 1px 2px rgba(black, .1); } .glypto-section-name { font-size: em(30); margin: 0; } .glypto-section-meta { color: #aaa; }
}