Replace starter image with book image (#407)

This takes the new starter activity image from the book and adds it to
the starter activity chapter. This further introduces some changes to
the layout of the website to make reading a bit easier.

book/sourdough-starter/sourdough-starter.tex

@@ -84,7 +84,8 @@ \section{Baker's math}%
 \section{The process of making a starter}
 
 \begin{figure}[!htb]
-  \includegraphics[width=\textwidth]{sourdough-starter.jpg}
+  \centering
+  \includegraphics[width=\textwidth]{sourdough-starter-activity-indicators}
   \caption[Very active sourdough]{A very active sourdough starter shown by the
       bubbles in the dough.}%
   \label{fig:sourdough-starter}

book/style.css

@@ -15,6 +15,8 @@
   --padding-hamburger: 5px;
   --c-beige: #F3EDE6;
   --border-radius: 7px;
+  --image-padding: 14px;
+  --image-background: #ffffff;
 }
 
 @media (min-width: 1200px){
@@ -385,11 +387,6 @@ h4 {
   margin-top: 1em;
 }
 
-img[alt~="PIC"], iframe, a img {
-  border-radius: var(--border-radius);
-  border: 2px solid var(--c-black);
-}
-
 main.main-content, div.footnotes, main.titlepage {
   background-color: var(--c-beige);
 }
@@ -478,10 +475,6 @@ nav.TOC span:hover, nav.TOC span:hover *, nav.TOC span.chapterToc.selected, nav.
 }
 
 p.flowchart-image-wrapper {
-  background: white;
-  padding: 20px;
-  border-radius: var(--border-radius);
-  border: 2px solid var(--c-black);
   display: flex;
   justify-content: center;
 }
@@ -528,6 +521,19 @@ blockquote {
   display: none;
 }
 
+figure.float, div.figure, figure.figure {
+  padding: var(--image-padding);
+  background: var(--image-background);
+}
+
+figure.figure p.noindent {
+  text-align: center;
+}
+
+.flowchart-image-wrapper {
+  text-align: center;
+}
+
 @media (max-width: 768px) {
   .header {
     display: none;
@@ -572,10 +578,6 @@ blockquote {
     background: var(--c-black-background);
   }
 
-  p.flowchart-image-wrapper {
-    padding: 5px;
-  }
-
   .menu-entry:hover {
     background-color: transparent;
   }
@@ -593,4 +595,8 @@ blockquote {
     border: none;
     border-radius: 0px;
   }
-}
+
+  figure.float, div.figure, figure.figure {
+    padding: calc(var(--image-padding) / 2);
+  }
+}