diff options
Diffstat (limited to 'design/sass/_content.scss')
| -rw-r--r-- | design/sass/_content.scss | 266 |
1 files changed, 52 insertions, 214 deletions
diff --git a/design/sass/_content.scss b/design/sass/_content.scss index 9a81b64..598d63e 100644 --- a/design/sass/_content.scss +++ b/design/sass/_content.scss @@ -1,236 +1,74 @@ -.hero-wrapper { - @include fancy_sans; - padding: 5rem 0 0; - &:after { - @include faded_line_after; - margin-top: 4rem; - margin-bottom: 4rem; - padding: 0; - } -} -.circle-pic { - border-radius: 50%; - border: 5px solid #000; -} -.btn { - @include fontsize(14); - display: inline-block; - border-radius: 4px; - @include fancy_sans; - @include smcaps; - -webkit-appearance: none; - text-decoration: none; - cursor: pointer; - background: $link_color; - color: #fff !important; - border: 1px solid $link_color; - padding: 7px 9px; - white-space: nowrap; - &:hover { - background: $link_hover_color; - border: 1px solid $link_hover_color; - } +.content-narrow { + margin-top: 3rem; + @include constrain_narrow; } -.btn-small { - @include fontsize(10); - @include smcaps; -} -.btn-hollow { - @include fontsize(17); - padding: 6px 8px; - border: none; //1px solid $body_font_light; - color: $link_color !important; - outline: $link_color !important; - background: white; - border: 1px solid $link_color; - &:hover { - background: $link_color !important; - color: white !important; - } -} -.hed-alpha { - @include fancy_serif; - line-height: 1.2; - font-weight: 600; -} -.hed-beta { - line-height: 1.4; -} -.hed-gamma { - line-height: 1.4; - @include fontsize(20); - @include fancy_sans; - text-align: center; - letter-spacing: 1px; - margin: 0 auto; -} -.hed-delta { - @include fancy_sans; - @include fontsize(22); - font-weight: bold; - margin-bottom: .5em; -} -.hed-epsilon { - @include fontsize(14); - @include fancy_sans; - text-transform: uppercase; - letter-spacing: 1px; - font-weight: bold; - color: $body_font_light; - line-height: 1.2; - text-align: center; - margin: 0; +.post-header { + @extend %clearfix; + padding-bottom: 2.6rem; + border-bottom: 1px solid #efefef; } .hed-border { display: inline-block; border-bottom: 3px solid #efefef; width: auto; } -.hero { - .hero-pic { - max-width: 50%; - margin: 1.5rem auto; - } - h3.hed-alpha { - @include fontsize(24); - } - .hed-beta { - @include fancy_sans; - @include fontsize(22); - margin: .5rem auto; - text-align: center; - &:last-of-type:after { - @include faded_line_after; - margin-top: 2rem; - margin-bottom: 2rem; - } - } - @include breakpoint(beta) { - display: flex; - align-items: flex-start; - align-content: flex-start; - .hero-text { - margin-left: 5rem; - & > * { - text-align: left; - } - } - p { - width: 90%; - @include fontsize(20); - } - .btn { - margin-top: 1.5rem; - } - } -} -.home { - h4 { - @include fancy_sans; - text-align: center; - letter-spacing: 1px; - } - hr { - border-top: 3px solid #efefef; - margin: 5em auto; - width: 40%; - } -} -.border-wrapper { - margin: 2rem auto 0; -} -.home-logos { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - width: 100%; - li { - margin: 0 .5rem; - } - img { - max-width: 80px; - } +.flex { @include breakpoint(gamma) { - @include constrain_wide; - margin: 0 auto; - img { - max-width: 120px; - } + display: flex; + justify-content: center ; } } - -.home-border-wrapper { - @include breakpoint(beta) { - margin-top: 4rem; - .btn { - margin-bottom: 4rem; - } - } - &:before { - @include faded_line_after; - margin-top: 0; - margin-bottom: 5rem; +article ul { + list-style-type: none; + @include fontsize(22); + li:before { + content: ""; + border: 2px #000 solid !important; + border-radius: 50px; + margin-top: 16px; + margin-left: -12px; + position: absolute; } } -.card-image { - max-height: 10rem; - overflow: hidden; - border: 4px $body_font_color solid; - img { - width: 100%; - margin-top: -14%; +.archive-list { + @include constrain_narrow; + text-align: left; + ul { + padding: 0; + list-style-type: none; } -} -.home-card-wrapper { - @include breakpoint(beta) { - margin-top: 4rem; - .btn { - margin-bottom: 4rem; + a { + text-decoration: none; + color: lighten($body_font_color, 20); + &:hover { + color: $link_color; } } - &:after { - @include faded_line_after; - margin-top: 0; - margin-bottom: 5rem; - } -} -.card { - margin: 4rem auto; p { - margin-top: .5rem; - @include fontsize(18); - } - h5 { - @include fontsize(24); - text-align: center; - margin: 1rem 0 0 0; - } - &:after { - @include faded_line_after; - } - &:last-of-type:after { - display: none; - } - @include breakpoint(beta) { - flex-grow: 1; - flex-shrink: 1; - flex-basis: 0; - margin-top: 0; - margin-right: 2rem; - &:last-of-type { - margin-right: 0; - } - &:after { - display: none; - } + margin: 0; + @include fontsize(20); + font-style: italic; } } -.flex { - @include breakpoint(gamma) { - display: flex; - justify-content: center ; +.post-linewrapper { + margin-top: 1rem; + padding-top: 1rem; + display: inline-block; + margin-left: 0; + border-top: 2px solid darken($body_color, 8); + float: left; +} + +.star { + color: transparent; + text-shadow: 0 0 0 lighten($body_font_color, 50); + text-decoration: none; + @include fontsize(22); + padding: 0 6px 3px 6px; + font-family: "Hiragino Kaku Gothic Pro", "Osaka", "Zapf Dingbats"; + &:hover { + background: darken(#fff, 10); } } |