diff options
| -rw-r--r-- | design/sass/_details.scss | 4 | ||||
| -rw-r--r-- | design/sass/_footer.scss | 4 | ||||
| -rw-r--r-- | design/sass/_global.scss | 8 | ||||
| -rw-r--r-- | design/sass/_images.scss | 9 | ||||
| -rw-r--r-- | design/sass/_src.scss | 179 | ||||
| -rw-r--r-- | design/sass/screenv9.scss | 1 | ||||
| -rw-r--r-- | design/sass/v8/_src.scss | 3 | ||||
| -rw-r--r-- | design/templates/archives/src_home.html | 2 |
8 files changed, 197 insertions, 13 deletions
diff --git a/design/sass/_details.scss b/design/sass/_details.scss index 7209060..f4d30f7 100644 --- a/design/sass/_details.scss +++ b/design/sass/_details.scss @@ -2,6 +2,10 @@ article { @include constrain_narrow; margin-top: 4rem; + ul { + text-align: left; + @include fontsize(18); + } } .map { width: 100vw; diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss index 9bfe4b7..05c1490 100644 --- a/design/sass/_footer.scss +++ b/design/sass/_footer.scss @@ -52,4 +52,6 @@ footer[role="contentinfo"] { color: $body_font_light; } } - +.donate-btn { + display: inline-block; +} diff --git a/design/sass/_global.scss b/design/sass/_global.scss index 965fe17..6ea900f 100644 --- a/design/sass/_global.scss +++ b/design/sass/_global.scss @@ -55,17 +55,15 @@ abbr { cursor: help; } pre { - @include constrain_narrow(); text-align: left; @include breakpoint(alpha){ @include fontsize(18); line-height: 1.5; - margin-top: 2em; - margin-bottom: 2em; } } object, embed, video { max-width: 100%; + width: 100%; height: auto; } blockquote { @@ -73,10 +71,10 @@ blockquote { display: block; border-top: 4px solid lighten($body_font_light, 20); border-bottom: 4px solid lighten($body_font_light, 20); - padding: 1.5em 0 0.5em; - margin: 1.5em 0; + margin: 3rem 0; position: relative; text-align: left; + font-style: italic; cite { display: block; text-align: right; diff --git a/design/sass/_images.scss b/design/sass/_images.scss index dca9710..298171e 100644 --- a/design/sass/_images.scss +++ b/design/sass/_images.scss @@ -55,13 +55,16 @@ p + .picwide { width: 49.7%; float: left; margin-left: 0; + margin-right: .3%; } &:after { @extend %clearfix; margin-bottom: .5rem; } + figure:first-of-type img, figure:last-of-type img { + width: 100%; + } } - .banner .post-image { // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/ // I tweaked it slightly to add a bit of margin @@ -72,8 +75,6 @@ p + .picwide { margin-left: -50vw; margin-right: -50vw; } - - .embed-wrapper { @include constrain_wide; @include breakpoint(gamma) { @@ -87,7 +88,7 @@ p + .picwide { height: 0; overflow: hidden; max-width: 100%; - height: auto; + margin-bottom: 1rem; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; diff --git a/design/sass/_src.scss b/design/sass/_src.scss new file mode 100644 index 0000000..2c72313 --- /dev/null +++ b/design/sass/_src.scss @@ -0,0 +1,179 @@ +pre{ + white-space: pre-wrap; +} +.latest { + @include constrain_narrow; + @include fontsize(12); + @include smcaps; + font-weight: 400; +} +.src-archive { + .topic-hed { + @include fontsize(20); + @include constrain_narrow; + margin-top: 1.5em; + margin-bottom: 1.5em; + @include breakpoint(beta) { + @include fontsize(28); + margin-top: 1em; + } + } + article { + margin-bottom: 3em; + p { + color: lighten($body_font_color, 15); + } + } + h2 { + @include constrain_narrow; + @include fontsize(22); + font-weight: 400; + margin-bottom: .25em; + a { + color: $body_font_color; + color: lighten($body_font_color, 15); + text-decoration: none; + } + } + + p { + text-align: left; + @include fontsize(16); + } + + @include breakpoint(beta) { + text-align: left; + } +} +.src-topics { + @include smcaps; + @include fontsize(11); +} +.src article { + ul { + @include constrain_narrow; + margin-top: 2em; + margin-bottom: 2em; + } + ul li { + text-align: left; + list-style-type: disc; + margin-left: 1em; + padding-left: .5em; + } + ol { + text-align: left; + @include constrain_narrow; + padding-left: 1em; + @include fontsize(18); + @include breakpoint(beta) { + max-width: 580px; + @include fontsize(17); + } + li { + margin-top: .75em; + } + } + .footnote ol { + list-style-position: outside; + @include breakpoint(beta) { + max-width: 680px; + } + } + p code { + @include fontsize(20); + padding: 3px; + background: #eaeaea; + } + h3 { + @include fontsize(22); + margin: 3.5rem 0 0; + letter-spacing: 1px; + border-bottom: 1px #a19d9d dotted; + text-transform: uppercase; + } + h4 { + @include fancy_sans; + @include fontsize(20); + text-align: left; + margin: 3.5rem 0 0; + } + +} + +.highlight { + padding: 1rem; + margin-bottom: 1em; + // this clever bit comes from https://css-tricks.com/full-width-containers-limited-width-parents/ + // I tweaked it slightly to add a bit of margin + width: 50vw; + position: relative; + left: 33%; + right: 33%; + margin-left: -20vw; + margin-right: -20vw; + pre { + } +} +.go:before { + content: "$ "; +} +code > .comment::after { + display:none; +} +#book-page .book-list { + @include constrain_narrow; + @include breakpoint(beta) { + .book-list-item { + width: 45%; + } + } +} +#book-page section { + @include constrain_narrow; + max-width: 100%; + @include breakpoint(gamma) { + margin-left: 80px; + p { + margin-left: 0; + } + } +} +.paypal-form-wrapper { + @include constrain_narrow; + text-align: left; + @include breakpoint(gamma) { + form { + margin: 2em 5em; + } + } +} + +@include breakpoint(beta) { + .btn-top { + margin-left: 1.2em + } + .btn-bottom { + margin-left: 5em; + } +} + +.dotted { + list-style-type: disc; + li { + margin-top: .5em; + margin-bottom: .5em; + } + @include breakpoint(gamma) { + font-size: 1.25rem; + line-height: 1.6; + } +} + +#essay-archive h1 { + @include constrain_narrow; +} +#essay-archive h4 { + margin-bottom: 3em; + margin-top: -.85em; +} diff --git a/design/sass/screenv9.scss b/design/sass/screenv9.scss index 71bafa4..5054281 100644 --- a/design/sass/screenv9.scss +++ b/design/sass/screenv9.scss @@ -11,3 +11,4 @@ @import "_comments.scss"; @import "_leaflet.scss"; @import "_map.scss"; +@import "_src.scss"; diff --git a/design/sass/v8/_src.scss b/design/sass/v8/_src.scss index 309a8b8..2be4ef3 100644 --- a/design/sass/v8/_src.scss +++ b/design/sass/v8/_src.scss @@ -18,7 +18,7 @@ article { margin-bottom: 3em; p { - color: lighten($body_font, 15); + color: lighten($body_font_color, 15); } } h2 { @@ -82,7 +82,6 @@ margin: 1em auto !important; } .highlight { - @include constrain_narrow; padding: .5em; margin-bottom: 1em; } diff --git a/design/templates/archives/src_home.html b/design/templates/archives/src_home.html index 0f676b5..519c186 100644 --- a/design/templates/archives/src_home.html +++ b/design/templates/archives/src_home.html @@ -11,7 +11,7 @@ <li>{{topic}}</li>{%else%} <li><code>src</code></li>{%endif%} </ul> - <main role="main" id="src-archive" class="src-archive"> + <main role="main" id="src-archive" class="src-archive archive"> <h1 class="topic-hed"><code>src:</code> {% if topic %}Articles about {{topic.pluralized_name}}{%else%}Archive{%endif%}</h1> <h3 class="latest">Latest Posts</h3> {% for object in object_list %}{% if object.slug != 'about' %} |