diff options
Diffstat (limited to 'design/sass/_details.scss')
-rw-r--r-- | design/sass/_details.scss | 521 |
1 files changed, 0 insertions, 521 deletions
diff --git a/design/sass/_details.scss b/design/sass/_details.scss deleted file mode 100644 index 74965fd..0000000 --- a/design/sass/_details.scss +++ /dev/null @@ -1,521 +0,0 @@ -.content { - margin-top: 3rem; -} -//************** archive grids **********************************{{{ -.archive-grid { - margin-top: 2rem; - list-style-type: none; - padding: 0; - @include constrain_wide; - @include breakpoint(alpha) { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-gap: 20px; - row-gap: 1rem; - } -} -.archive-grid-quad { - //used for books and related posts in detail pages - list-style-type: none; - padding: 0; - @include breakpoint(alpha) { - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 15px; - } - @include breakpoint(beta) { - grid-template-columns: 1fr 1fr 1fr; - } - @include breakpoint(epsilon) { - grid-template-columns: 1fr 1fr 1fr 1fr; - } -} -.related .archive-grid-quad { - //there's only 4 related items so override the - //3-grid at breakpoint beta - @include breakpoint(beta) { - grid-template-columns: 1fr 1fr; - } -} -.archive-grid-double { - // homepage recent - @include breakpoint(alpha) { - grid-template-columns: 1fr 1fr; - row-gap: 1rem; - grid-gap: 16px; - } -} -.archive-grid-single { - // homepage popular - @include breakpoint(alpha) { - grid-template-columns: 1fr; - row-gap: 1rem; - grid-gap: 16px; - } -} -.recent-popular { - // get popular and recent lined up - // side by side on the hompage - @include constrain_wide; - @include breakpoint(alpha) { - display: flex; - flex-direction: row; - width: calc(100% + 30px); - .popular { - margin-left: 30px; - } - } -} -.archive-grid-card { - //container object for cards (usually an article tag) - a { - text-decoration: none; - } -} -.archive-grid-card-simple { - //container object for cards with no dek - line-height: 1; - margin-bottom: 1.4rem; -} -.related { - //special rules for related post grid - //on detail pages in jrnl and src - ul { - list-style-type: none; - padding: 0; - } - .card-hed { - text-align: center; - @include fancy_sans; - @include fontsize(20); - margin: 1rem auto .25rem; - } - .card-smcap { - text-align: center; - } -} -//}}} -//************** archive cards **********************************{{{ -.card-smcaps, .post-smcaps { - // formats date and location lines as small caps - @include smcaps; - @include fontsize(13); - font-weight: bold; - margin: 0; - color: $body_font_light; -} -.card-hed { - // main headline of the card - @include fontsize(32); - color: darken($body_font_light,15); - margin: 0; - line-height: 1; -} -.card-hed-it { - // italic variant of card hed - // used on jrnl archives - @include fontsize(26); - line-height: 1.3; - font-style: italic; - margin: .25rem 0 .5rem; - -} -.card-hed-smit { - // smaller italic variant of card hed - // used on homepage - @include fontsize(22); - line-height: 1.3; - font-style: italic; - margin: .25rem 0 .5rem; - -} -.card-hed-btm { - // hed with a little bottom margin - // used in book list - margin-bottom: .5rem; -} -.card-image-sm { - // smaller card image - // used on homepage - max-height: 180px; - overflow: hidden; - margin-bottom: .5rem; - img { - margin-top: -20%; - } -} -.card-image-tiny { - // even smaller card image used for - // related posts on detail pages - max-height: 120px; - overflow: hidden; - margin-bottom: .5rem; - img { - width: 100%; - margin-top: -20%; - } -} -.card-lede { - // subtitle or lede - @include fontsize(20); - color: darken($body_font_light,5); - font-style: italic; - line-height: 1.6; - margin: 0; -} -.card-dek { - // used for p test on jrnl page and elsewhere - @include fontsize(16); - line-height: 1.6; - margin: 0 0 .5rem; -} -.card-stars { - // ratings on books - @include fontsize(16); - display: block; -} -.read-in { - // makes read in date in books look good - display: block; -} -.circle-img-wrapper { - // small images next to archive lists - border-radius: 50%; - width: 106px; - height: 106px; - overflow: hidden; - float: left; - border: 3px solid #666; - img { - width: 160px; - max-width: 160px; - } - @include breakpoint(beta) { - margin-left: -128px; - margin-top: -2px; - } -} -//}}} -//************** header, dateline and expanding map **************{{{ -.post-header { - @include constrain_narrow; - color: #555; - padding-bottom: 2.6rem; - margin-bottom: 2.6rem; - border-bottom: 1px solid #efefef; - text-align: center; - @include breakpoint(beta) { - text-align: left; - } -} -.post-linewrapper { - border-top: 1px solid #efefef; -} -.post-linewrapper, .post-linewrapper h3 { - color: lighten($secondary-link-color, 15); - margin-top: 1rem; - padding-top: 1rem; - display: inline-block; - @include smcaps; - @include fancy_sans; - @include fontsize(14); - font-weight: 600; - text-align: center; - a { - color: lighten($secondary-link-color, 15); - } - time { - color: $secondary-link-color - } - @include breakpoint(beta) { - text-align: left; - } -} -.post-linewrapper h3 { - display: inline; -} -.post-source { - @include smcaps; - @include fancy_sans; - @include fontsize(14); - font-weight: 600; - margin: 0; -} -.map { - width: 100vw; - position: relative; - left: 50%; - right: 50%; - margin-left: -50vw; - margin-right: -50vw; -} -#detail-map-canvas { - height: 400px; - width: 98vw; - position: relative; - left: 49%; - right: 49%; - margin-left: -48vw; - margin-right: -49vw; -} -.lttr .post-header, .lttr .post-linewrapper, .lttr .post-linewrapper h3 { - text-align: center; -} -.post-title { - letter-spacing: -1px; - margin-bottom: .25rem; -} -.post-subtitle { - @include fontsize(22); - font-style: italic; - line-height: 1.25; - margin-top: 0; - margin-bottom: 0; - text-align: center; - @include breakpoint(beta) { - text-align: left; - } -} -//}}} -//************** post detail *************************************{{{ -.post-body > *:not(.picwide):not(.cluster), .post-article > *:not(.picwide):not(.cluster):not(.highlight) { - @include constrain_narrow; -} -.post-body .picwide, .post-body .cluster { - @include constrain_wide; -} -.post-article { - h3 { - @include fancy_sans; - @include fontsize(26); - font-weight: bold; - } - h4, h3 { - margin: 3rem 0 0 0; - line-height: 1.4; - } - h4+p, h3+p { - margin-top: .125rem; - } - h5 { - @include fancy_sans; - @include fontsize(20); - } - ul { - @include fontsize(22); - list-style: circle; - margin-left: 2.5em; - list-style-position: outside; - margin-bottom: 2.4em; - } -} -.picwide { - @include breakpoint(alpha) { - } -} -.picwide img { - max-width: 98%; - @include breakpoint(alpha) { - max-width: 100%; - } -} -p + .picwide { - margin-top: 1.75rem; - @include breakpoint(alpha) { - margin-top: 2.6rem; - } -} -.row-2 { - display: flex; - flex-direction: row; - gap: .5rem; - * > { - margin-left: 5px; - } -} -//}}} -//************** post footer *************************************{{{ -.entry-footer { - @include constrain_narrow; - border-top: 3px double #efefef; - border-bottom: 3px double #efefef; - margin-top: 3rem; - padding: 2rem; - h3 { - font-weight: 600; - @include smcaps; - @include fontsize(16); - } - ul { - padding: 0; - font-size: 96%; - list-style-type: none; - ul { - list-style-type: disc; - padding-left: 2rem; - li { - color: $secondary-link-color; - } - } - } - @include breakpoint(gamma) { - display: flex; - flex-direction: row; - ul { - display: flex; - flex-direction: column; - font-size: 92%; - } - } -} -//}}} -//************** next/previous / you might also / footnotes ******{{{ -//}}} -//************** homepage banner and other special elements*******{{{ -.homepage-section-header { - @include fontsize(28); - @include fancy_sans; -} -.banner { - .post-image { - position: relative; - max-height: 900px; - overflow: hidden; - } - - @include breakpoint(beta) { - figcaption { - position: absolute; - margin: 0; - bottom: 0; - width: 100%; - z-index: 100; - background: rgba(0,0,0,0.6); - } - } - .large-top-image { - position: relative; - max-height: 900px; - overflow: hidden; - max-width: 100%; - img { - margin: 0; - } - @include breakpoint(beta) { - img { - margin-top: -120px; - } - } - } -} -.hero-text-wrapper { - text-align: center; - margin-bottom: 1rem; - .post-title { - @include fontsize(36); - } - @include breakpoint(beta) { - color: white; - .post-title { - @include fontsize(42); - margin-bottom: .5rem; - } - .post-subtitle, .post-date, .post-location { - text-align: center; - a { - text-decoration: none; - @include fontsize(14); - padding: 0; - border: none; - } - } - } - .post-date { - display: none; - } - .post-linewrapper { - border-color: #6a6a6a; - text-align: center; - margin-top: .25rem; - padding-top: .25rem; - } - .btn { - color: white; - text-align: center; - margin: .5rem auto; - } -} -.homepage-bio { - margin: 3rem auto; - @include constrain_wide; - @include breakpoint(alpha) { - margin: 6rem auto; - } -} -.homepage-map-img { - @include breakpoint(alpha) { - float: left; - width: 350px; - margin-right: 2rem; - } -} -.homepage-next { - margin-top: 3rem; - @include constrain_wide; - h5 { - text-align: center; - } - a { - @include fontsize(14); - @include fancy_sans; - @include smcaps; - font-weight: 500; - text-decoration: none; - padding: 12px 10px 12px; - border: $link_color 1px solid; - &:after { - content: "\21E2"; - margin-left: 4px; - } - &:hover { - background: $link_color; - color: white; - } - } -} -// About page -#about-luxagraf .circle-pic { - margin: 0 auto; - display: block; - @include breakpoint(gamma) { - float: left; - margin-left: -250px; - } -} -.circle-pic { - border-radius: 50%; - border: 3px solid #000; -} -//}}} -//A few Mailing list specific styles -.large-top-image{ - background: #f7f7f7; - img { - max-width: 100%; - margin: 4rem 0; - } -} -.list-hed{ - @include fontsize(32); -} -.list-subhed { - @include fontsize(26); - font-style: italic; - margin-bottom: 0; - -} -// -.section { - margin-top: 6rem; -} - |