Fix image size

build/fic4.css

@@ -1,41 +1,41 @@
 /* ----- COLOURS ----- */
 
 body, details > summary::marker {
-    color: #222;
+  color: #222;
 }
 
 body {
-    background-color: white;
+  background-color: white;
 }
 
 a, a:link, a:hover, a:visited, a:active, h1, h2, h3, details > summary {
-    color: var(--colourone);
+  color: var(--colourone);
 }
 
 li:before {
-    color: #9e9e9e;
+  color: #9e9e9e;
 }
 
 details, blockquote {
-    border: 2px solid var(--colourone);
+  border: 2px solid var(--colourone);
-    box-shadow: 8px 8px 0px var(--colourone);
+  box-shadow: 8px 8px 0px var(--colourone);
 }
 
 body {
-    font-family: 'Lato', sans-serif;
+  font-family: 'Lato', sans-serif;
-    font-size: 13px; word-wrap: break-word;
+  font-size: 13px; word-wrap: break-word;
 }
 
 img {
-    max-width: 100%;
+  max-width: 100%;
 }
 
 a, a:link, a:hover, a:visited, a:active {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 a:hover {
-    border-bottom: 1px solid;
+  border-bottom: 1px solid;
 }
 
 /* ---- BOXES ---- */
@@ -46,110 +46,112 @@ details > summary {
 }
 
 details, blockquote {
-    padding: 20px;
+  padding: 20px;
-    margin-bottom: 15px !important;
+  margin-bottom: 15px !important;
 }
 
 blockquote {
-    max-width: 100%;
+  max-width: 100%;
-    min-width: 10%;
+  min-width: 10%;
-    display: inline-block;
+  display: inline-block;
 }
 
 blockquote p, details p {
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
 }
 
 blockquote ul {
-    margin-top: 0;
+  margin-top: 0;
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 blockquote > * + *, details > * + * {
-    margin-top: 20px !important;
+  margin-top: 20px !important;
 }
 
 /* ---- CONTENT ---- */
 
 @media only screen and (min-width: 900px) {
-    
+
-    div#site-wrapper {
+  div#site-wrapper {
-        width: 90%;
+    width: 90%;
-        margin: 1em auto;
+    margin: 1em auto;
-    }
+  }
 }
 
 @media only screen and (max-width: 900px) {
 
-    div#site-wrapper {
+  div#site-wrapper {
-        width: 99%; margin: 1em auto;
+    width: 99%; margin: 1em auto;
-    }
+  }
 }
 
 input, select {
-    background-color: white;
+  background-color: white;
-    font-family: 'Lato', sans-serif;
+  font-family: 'Lato', sans-serif;
 }
 
 textarea {
-    font-family: 'Inconsolata', monospace;
+  font-family: 'Inconsolata', monospace;
 }
 
 code, pre, .timestamp {
-    background: #f0f0f0;
+  background: #f0f0f0;
-    font-family: 'Inconsolata', monospace !important;
+  font-family: 'Inconsolata', monospace !important;
 }
 
 pre {
-    display: inline-block;
+  display: inline-block;
-    padding: 2px;
+  padding: 2px;
-    max-width: 100%;
+  max-width: 100%;
-    overflow: auto;
+  overflow: auto;
 }
 
 
 ul {
-    list-style: none;
+  list-style: none;
 }
 
 ul li:before {
-    content: "+ ";
+  content: "+ ";
-    font-weight: bold;
+  font-weight: bold;
 }
 
 ol {
-    list-style: none;
+  list-style: none;
-    counter-reset: li
+  counter-reset: li
 }
 
 ol li:before {
-    content: counter(li)". ";
+  content: counter(li)". ";
-    font-weight: bold;
+  font-weight: bold;
 }
 
 ol li {
-    counter-increment: li;
+  counter-increment: li;
 }
 
 /* ----- GIFSETS ----- */
 
 div.figure {
-    text-align: center;
+  text-align: center;
-    padding: 0;
+  padding: 0;
 }
 
 div.figure img {
-    display: inline;
+  display: inline;
-    margin: 5px;
+  margin: 5px;
 }
 
 div.figure.oneup img {
-    width: 90%;
+  width: auto;
+  height: auto;
+  max-width: 90%;
 }
 
 div.figure.twoup img {
-    width: 40%;
+  width: 40%;
 }
 
 div.figure.threeup img {