From 4b838a5fcb9b95cee839325314c7b4dea0ba3bfd Mon Sep 17 00:00:00 2001
From: drewcassidy <drewcassidy@me.com>
Date: Thu, 28 Dec 2017 16:33:54 -0800
Subject: [PATCH] allow website to get wider, and change some things with how
 floats are handled

---
 _includes/float-clear.html      |  1 +
 _posts/2017-12-28-G4-Cube-CD.md |  5 +++--
 css/style.scss                  | 16 ++++++++++++++--
 3 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 _includes/float-clear.html

diff --git a/_includes/float-clear.html b/_includes/float-clear.html
new file mode 100644
index 0000000..7717c55
--- /dev/null
+++ b/_includes/float-clear.html
@@ -0,0 +1 @@
+<div style="clear:both;"></div>
diff --git a/_posts/2017-12-28-G4-Cube-CD.md b/_posts/2017-12-28-G4-Cube-CD.md
index 0ed2b1a..fcbdbf8 100644
--- a/_posts/2017-12-28-G4-Cube-CD.md
+++ b/_posts/2017-12-28-G4-Cube-CD.md
@@ -22,10 +22,9 @@ Since this drive is so old and replacement parts are so hard to come by, I wante
 
 
 {% include figure-gallery.html
-  src="inside-1-small.jpg"
+  src="inside-1.jpg"
   alt="inside the drive" %}
 
-
 After removing four screws on the outer case (two on the side and two on the back. Be careful: the ones on the side are JIS, not Phillips! I almost stripped one of them) the cover slides up and off the unit.
 
 {% include figure-image.html
@@ -43,6 +42,8 @@ A rubber belt along the side operates the rubber rollers mentioned before. I ima
 
 The front cover assembly which also helps pull the disk in the rest of the way can be removed by unhooking the two springs on either side, and then lifting it up and out. The spindle assembly can be removed the same way.
 
+{% include float-clear.html %}
+
 To fix the roller carrier, you first have to remove it by undoing its two springs. these hook onto stationary posts in the case, then loop under the roller carrier. The plastic bracket on the side can be unclipped to remove the whole axle.
 
 {% include figure-gallery.html
diff --git a/css/style.scss b/css/style.scss
index 984576f..e171d60 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -70,7 +70,7 @@ body {
     font-family: $body-font;
     color: $body-text;
 
-    max-width: 800px;
+    max-width: 1000px;
     z-index: 0;
     margin-left: auto;
     margin-right: auto;
@@ -161,6 +161,7 @@ small {
 }
 
 .figure-gallery {
+    clear: both;
 
     .gallery-grid {
         margin-left: -60px;
@@ -212,17 +213,28 @@ small {
         width: 100%;
         height: auto;
     }
+
+
 }
 
 .figure-float {
-    width: 50%;
+    width: 33%;
     margin: 10px;
+    clear: both;
 
     img {
         width: 100%;
         height: auto;
     }
+
 }
+@media screen and (max-width: 500px) {
+
+    .figure-float {
+        width: 50%;
+    }
+}
+
 
 figcaption {
     text-align: center;