diff options
Diffstat (limited to 'design/sass')
| -rw-r--r-- | design/sass/_books.scss | 122 | ||||
| -rw-r--r-- | design/sass/_queries.scss | 10 |
2 files changed, 125 insertions, 7 deletions
diff --git a/design/sass/_books.scss b/design/sass/_books.scss index 3ed8e2e..ec81b7e 100644 --- a/design/sass/_books.scss +++ b/design/sass/_books.scss @@ -1,3 +1,80 @@ +.book-list { + @extend %clearfix; + @include constrain_wide; +} + +.book-list-item { + margin: 2em 0; + h2 { + text-align: left; + margin: .25rem 4px; + font-weight: normal; + @include fontsize(24); + line-height: 1.2; + a { + color: $body_font; + text-decoration: none; + font-style: italic; + } + @include breakpoint(gamma) { + @include fontsize(22); + margin: .1rem 4px; + } + } + h4, { + @include fontsize(12); + @include smcaps; + font-weight: normal; + margin-top: 0; + margin-bottom: 0; + &:before { + content: "by " + } + } + @include breakpoint(alpha-2) { + text-align: left; + width: 45%; + float: left; + margin-right: 30px; + margin-top: 1em; + min-height: 500px; + .img-wrapper { + min-height: 350px; + } + } + @include breakpoint(gamma) { + width: 31%; + height: 650px; + float: left; + margin-right: 30px; + .img-wrapper { + min-height: 400px; + } + } + @include breakpoint(delta) { + width: 22%; + height: 550px; + } +} +.book-list .even { + @include breakpoint(alpha-2) { + margin-right: 0; + } + @include breakpoint(gamma) { + margin-right: 30px; + } +} +.book-list .tres { + @include breakpoint(gamma) { + margin-right: 0; + } + @include breakpoint(delta) { + margin-right: 30px; + } +} +.book-stars { + display: block; +} .book { margin-top: 2em; @include breakpoint(gamma) { @@ -14,7 +91,6 @@ } } .book-metadata { - @extend %clearfix; text-align: left; dd { display: inline; @@ -30,27 +106,65 @@ dt:after { content: ":"; } + @include breakpoint(gamma) { + margin-left: 80px; + } } .book-title { - @include constrain_narrow; + @include constrain_wide; line-height: 1.3; + @include breakpoint(gamma) { + max-width: 660px; + text-align: left; + position: relative; + left: 150px; + } + @include breakpoint(delta) { + left: 165px; + max-width: 850px; + } } -.book-cover { +.book-cover-wrapper { + @include breakpoint(gamma) { + display: block; + @include constrain_wide; + img { + float: left; + width: 250px; + margin-right: 32px; + } + } + @include breakpoint(delta) { + img { + max-width: 250px; + } + } } .thoughts, .highlights, .meta-cover { @include constrain_narrow; text-align: left; p { max-width: 100%; + @include breakpoint(gamma) { + margin-left: 80px; + } } } -.thoughts h5, .highlights h4, .meta-cover h5 { +.meta-cover { +} +.thoughts h5, .highlights h4 { font-weight: 500; letter-spacing: 1px; margin: 3em 0 .5em 0; @include generic_sans; @include smcaps; @include fontsize(14); + @include breakpoint(gamma) { + margin-left: 80px; + } +} +.highlights article:first-of-type { + margin-top: 1em; } .highlights .foot { @include fontsize(14); diff --git a/design/sass/_queries.scss b/design/sass/_queries.scss index 1d7f3ef..8262c84 100644 --- a/design/sass/_queries.scss +++ b/design/sass/_queries.scss @@ -1,6 +1,7 @@ $breakpoint-alpha: 38em; +$breakpoint-alpha-2: 450px; $breakpoint-beta: 49em; -$breakpoint-book-beta: 620px; +$breakpoint-beta-2: 620px; $breakpoint-gamma: 56em; $breakpoint-delta: 73.125em; $breakpoint-epsilon: 79.625em; @@ -9,11 +10,14 @@ $breakpoint-epsilon: 79.625em; @if $point == "alpha" { @media screen and (min-width:$breakpoint-alpha ){ @content; } } + @if $point == "alpha-2" { + @media screen and (min-width:$breakpoint-alpha-2 ){ @content; } + } @else if $point == "beta" { @media screen and (min-width: $breakpoint-beta) { @content; } } - @else if $point == "book-beta" { - @media screen and (min-width: $breakpoint-book-beta) { @content; } + @else if $point == "beta-2" { + @media screen and (min-width: $breakpoint-beta-2) { @content; } } @else if $point == "gamma" { @media screen and (min-width: $breakpoint-gamma) { @content; } |