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;
 }
 
-img,figcaption {
+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;
 }