more specific image widths

assets/_/styles.scss

@@ -1,6 +1,12 @@
 $bodyText: #333;
 $border: #999;
 $headerHover: #f80;
+$bodyWidth: 940px;
+$contentWidth: $bodyWidth - 220px;
+
+// image widths:
+// half: 324px
+// full: 648px
 
 * {
     -webkit-box-sizing: border-box;
@@ -20,7 +26,7 @@ table {
 
 body {
     margin: 0 auto;
-    max-width: 960px;
+    max-width: $bodyWidth;
     padding: 10px;
     color: $bodyText;
 }
@@ -84,16 +90,16 @@ figure.left {
     float: left;
 }
 
+figure.half {
+    width: 50%;
+}
+
 img, figcaption {
     width: 90%;
     margin: 0 auto;
     display: block;
 }
 
-figure.half {
-    width: 50%;
-}
-
 @media (max-width:600px) {
     img,figcaption, figure.half {
         width: 100%;
@@ -258,7 +264,7 @@ nav#TableOfContents ul {
 }
 
 .content-with-toc {
-    width: calc(100% - 220px);
+    width: $contentWidth;
     margin: 0;
 }
 

layouts/shortcodes/img.html

@@ -2,20 +2,20 @@
 
 # Responsive images and resizing
 
-Our picture width is 700 css pixels. "Retina" screens have 2 device pixel ratio
+Our picture width is 648 css pixels. "Retina" screens have 2 device pixel ratio
 (dpr), crazy folks have 4. So the maximum width of the picture we can possibly
-care about is 700*4=2800px.
+care about is 648*4=2592px.
 -->
 
 <!-- image -->
 {{ $src := resources.GetMatch (.Get "src") | resources.Fingerprint }}
 {{ $jmax := $src | resources.Fingerprint }}
-{{ $j350 := $src.Resize "350x" }}
+{{ $j324 := $src.Resize "324x" }}
-{{ $j700 := $src.Resize "700x" }}
+{{ $j648 := $src.Resize "648x" }}
-{{ $j1400 := $src.Resize "1400x" }}
+{{ $j1296 := $src.Resize "1296x" }}
-{{ $j2800 := $src.Resize "2800x" }}
+{{ $j2592 := $src.Resize "2592x" }}
 
-{{ $width := cond (eq (.Get "half") "true") "350px" "700px" }}
+{{ $width := cond (eq (.Get "half") "true") "324px" "648px" }}
 
 {{ with .Get "hint" }}
 {{ else }}
@@ -23,46 +23,50 @@ care about is 700*4=2800px.
 {{ end }}
 {{ $hint := .Get "hint" }}
 {{ $wmax := $src.Resize (printf "%dx%d webp" $src.Width $src.Height) }}
-{{ $w350 := $src.Resize (print "350x webp " $hint ) }}
+{{ $w324 := $src.Resize (print "324x webp " $hint ) }}
-{{ $w700 := $src.Resize (print "700x webp " $hint ) }}
+{{ $w648 := $src.Resize (print "648x webp " $hint ) }}
-{{ $w1400 := $src.Resize (print "1400x webp " $hint ) }}
+{{ $w1296 := $src.Resize (print "1296x webp " $hint ) }}
-{{ $w2800 := $src.Resize (print "2800x webp " $hint ) }}
+{{ $w2592 := $src.Resize (print "2592x webp " $hint ) }}
 
 <figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
   <a href="{{ $jmax.RelPermalink }}">
     <picture>
       <source type="image/webp"
-          sizes="(max-width: 600px) 350px, {{ $width }}"
+          sizes="(max-width: 600px) 324px, {{ $width }}"
             srcset='
-            {{- if ge $src.Width "350" }}
+            {{- if ge $src.Width "324" }}
-              {{ with $w350.RelPermalink }}{{.}} 350w{{ end }}
+              {{ with $w324.RelPermalink }}{{.}} 324w{{ end }}
             {{- end }}
-            {{- if ge $src.Width "700" }}
+            {{- if ge $src.Width "648" }}
-              {{ with $w700.RelPermalink }}, {{.}} 700w{{ end }}
+              {{ with $w648.RelPermalink }}, {{.}} 648w{{ end }}
             {{- end }}
-            {{- if ge $src.Width "1400" }}
+            {{- if ge $src.Width "1296" }}
-              {{ with $w1400.RelPermalink }}, {{.}} 1400w{{ end }}
+              {{ with $w1296.RelPermalink }}, {{.}} 1296w{{ end }}
             {{- end }}
-            {{- if ge $src.Width "2800" }}
+            {{- if ge $src.Width "2592" }}
-              {{ with $w2800.RelPermalink }}, {{.}} 2800w{{ end }}
+              {{ with $w2592.RelPermalink }}, {{.}} 2592w{{ end }}
+            {{- end }}
+            {{ with $wmax.RelPermalink }}, {{.}} {{ $src.Width }}w
             {{- end }}'
       />
       <img
-        sizes="(max-width: 600px) 350px, 700px"
+        sizes="(max-width: 600px) 324px, 648px"
           srcset='
-          {{- if ge $src.Width "350" }}
+          {{- if ge $src.Width "324" }}
-            {{ with $j350.RelPermalink }}{{.}} 350w{{ end }}
+            {{ with $j324.RelPermalink }}{{.}} 324w{{ end }}
           {{- end }}
-          {{- if ge $src.Width "700" }}
+          {{- if ge $src.Width "648" }}
-            {{ with $j700.RelPermalink }}, {{.}} 700w{{ end }}
+            {{ with $j648.RelPermalink }}, {{.}} 648w{{ end }}
           {{- end }}
-          {{- if ge $src.Width "1400" }}
+          {{- if ge $src.Width "1296" }}
-            {{ with $j1400.RelPermalink }}, {{.}} 1400w{{ end }}
+            {{ with $j1296.RelPermalink }}, {{.}} 1296w{{ end }}
           {{- end }}
-          {{- if ge $src.Width "2800" }}
+          {{- if ge $src.Width "2592" }}
-            {{ with $j2800.RelPermalink }}, {{.}} 2800w{{ end }}
+            {{ with $j2592.RelPermalink }}, {{.}} 2592w{{ end }}
+          {{- end }}
+          {{ with $jmax.RelPermalink }}, {{.}} {{ $src.Width}}w
           {{- end }}'
-        src="{{ $j700.RelPermalink }}"
+        src="{{ $j648.RelPermalink }}"
         {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }}
       />
     </picture>