From ea2c8191920e6f8ec259e0077c9da049b7f68753 Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Tue, 15 Aug 2017 15:28:37 -0400 Subject: [PATCH] Adjust CSS to support wide content --- _assets/stylesheets/includes/layout.css.scss | 12 +++++++++--- _assets/stylesheets/includes/styles.css.scss | 7 ++----- _assets/stylesheets/parts/post.css.scss | 2 -- ...plete-guide-to-optimising-web-images.markdown | 16 ++++++++++------ 4 files changed, 21 insertions(+), 16 deletions(-) diff --git a/_assets/stylesheets/includes/layout.css.scss b/_assets/stylesheets/includes/layout.css.scss index 6522dc1..1c1f406 100644 --- a/_assets/stylesheets/includes/layout.css.scss +++ b/_assets/stylesheets/includes/layout.css.scss @@ -34,9 +34,15 @@ article img.right { margin-left: 1em; } -#content, .container, footer { - padding: 0 $pad-min; - margin: 0 auto; +#content header, +.entry-content > *, +.container, +footer, +.pagination { + padding-left: $pad-min; + padding-right: $pad-min; + margin-left: auto; + margin-right: auto; max-width: $max-width; } diff --git a/_assets/stylesheets/includes/styles.css.scss b/_assets/stylesheets/includes/styles.css.scss index 95834f1..980d1b4 100644 --- a/_assets/stylesheets/includes/styles.css.scss +++ b/_assets/stylesheets/includes/styles.css.scss @@ -87,7 +87,6 @@ blockquote { } #content div.pagination, #content div.navigation { - text-align: center; font-size: 0.95em; height: 1.5em; position: relative; @@ -129,12 +128,10 @@ blockquote { #content div.pagination { a { &.prev { - position: absolute; - left: 0; + float: left; } &.next { - position: absolute; - right: 0; + float: right; } } } diff --git a/_assets/stylesheets/parts/post.css.scss b/_assets/stylesheets/parts/post.css.scss index de83459..ae750ee 100644 --- a/_assets/stylesheets/parts/post.css.scss +++ b/_assets/stylesheets/parts/post.css.scss @@ -39,8 +39,6 @@ article { } } > footer { - padding-left: 0; - padding-right: 0; margin-top: 1.75em; p.meta { margin-bottom: 0.8em; diff --git a/_posts/2016-08-10-the-complete-guide-to-optimising-web-images.markdown b/_posts/2016-08-10-the-complete-guide-to-optimising-web-images.markdown index 9aacaab..0b51c5e 100644 --- a/_posts/2016-08-10-the-complete-guide-to-optimising-web-images.markdown +++ b/_posts/2016-08-10-the-complete-guide-to-optimising-web-images.markdown @@ -41,9 +41,11 @@ The PNG format was designed as a replacement for the then patent-encumbered GIF When saving your images for the web it is usually best to use the "Web Export..." feature of your image editor. I'll be using Photoshop in my examples, but most other similar apps have this feature. -
- {% image blog/the-complete-guide-to-optimising-web-images/web-export.png alt:"Photoshop's web export dialog box" class:"no-border" %} -
Photoshop's Web Export dialogue box
+
+
+ {% image blog/the-complete-guide-to-optimising-web-images/web-export.png alt:"Photoshop's web export dialog box" class:"no-border" %} +
+
Photoshop's Web Export dialogue box
The main control you need to worry about here is the "Quality" slider. This adjusts the amount of compression applied to the image and will affect the overall quality. Try playing with this control to get a feel for how it affects the final image. You will also see how it affects the file size of the image (shown at the bottom). 65-75% is generally a good starting point, but you may be able to get away with a lower value for certain kinds of image. Conversely you may have to set it higher to get a result you are happy with. Use your judgement here. @@ -56,9 +58,11 @@ The first thing you need to decide when creating your PNG file is the target col Most image editing applications will only let you export a PNG file with an 8-bit alpha layer if you select 24-bit colour. This is a limitation of the application and not the format. You can use [ImageAlpha](http://pngmini.com) (OS X) or [PNGoo](http://pngquant.org/PNGoo.0.1.1.zip) (Windows) to reduce a 32-bit RGBA image down to an 8-bit paletted image while retaining the alpha transparency. Both of these tools use [pngquant](http://pngquant.org) to do the conversion. Simple images can often be reduced to 32 or 16 distinct colours, offering further savings! -
- {% image blog/the-complete-guide-to-optimising-web-images/imagealpha.png alt:"ImageAlpha on OS X" class:"no-border" %} -
ImageAlpha on OS X
+
+
+ {% image blog/the-complete-guide-to-optimising-web-images/imagealpha.png alt:"ImageAlpha on OS X" class:"no-border" %} +
+
ImageAlpha on OS X
There are some useful tools to enable you to further compress PNG images: