Polishing redesign blog post.

blog/_posts/2021-07-01-refreshing-newsblur-design.md

@@ -8,7 +8,7 @@ This past year we've focused on maintenance and improving quality behind the sce
 
 To start, let's take a look below at the redesigned NewsBlur.
 
-<img src="/assets/redesign-web.jpg" style="width: 750px;">
+<img src="/assets/redesign-web.png" style="width: 750px;">
 
 Loads of new features:
 
@@ -24,17 +24,21 @@ Loads of new features:
 Below you can see the design in action. Notice how easy it is to change where the image preview is located as well as adjust the number of lines of story text to show.
 
 <p>
-    <video autoplay loop playsinline width="500" style="width: 500px;margin: 0 auto;display: block; border: 2px solid rgba(0,0,0,0.1)">
+    <video autoplay loop playsinline width="500" style="width: 500px;border: 2px solid rgba(0,0,0,0.1)">
         <source src="/assets/redesign-content-preview.mp4" type="video/mp4">
     </video>
 </p>
 
 The reading experience itself has also seen improvement. Full bleed images have been ported over from iOS to both Android and the web. This means that images will now run edge-to-edge. And the controls at the top and bottom of the web app have been restyled to be easier to understand at a quick glance.
 
-<img src="/assets/redesign-full-bleed.jpg" style="margin: 0 auto; border: 2px solid rgba(0,0,0,0.1);">
+<img src="/assets/redesign-full-bleed.jpg" style="border: 2px solid rgba(0,0,0,0.1);">
 
-And on mobile:
+There's many ways to adjust story titles to fit. Pack them in dense or offer titles room to breathe.
 
-<img src="/assets/redesign-ios-android.jpg" style="width: 750px;">
+<img src="/assets/redesign-bottom.jpg" style="border: 2px solid rgba(0,0,0,0.1);">
 
-This whole redesign weighs in at a whopping 1,316 commits, which [you can view on GitHub](https://github.com/samuelclay/NewsBlur/compare/dashboard3).
+The redesign has also come to both of the official Android and iOS apps. Right now both are in beta testing, but you can join the [iOS TestFlight](https://testflight.apple.com/join/hYk9WU3f) or the [Android beta](https://play.google.com/store/apps/details?id=com.newsblur&hl=en_US&gl=US).
+
+<img src="/assets/redesign-ios-android.png" style="">
+
+This whole redesign weighs in at a whopping 1,316 commits, which [you can view on GitHub](https://github.com/samuelclay/NewsBlur/compare/dashboard3). If you've enjoyed using NewsBlur and are a fan of this grand redesign, please take a moment to share on social media that you read your news with the help of NewsBlur. 

blog/_sass/minima/_base.scss

@@ -58,7 +58,14 @@ img {
   max-width: 100%;
   vertical-align: middle;
 }
-
+.post {
+  img, video {
+    max-width: 650px;
+    vertical-align: middle;
+    display: block;
+    margin: 24px auto;
+  }
+}
 
 
 /**

blog/_site/2021/07/01/refreshing-newsblur-design/index.html

@@ -74,7 +74,7 @@
 
 <p>To start, let’s take a look below at the redesigned NewsBlur.</p>
 
-<p><img src="/assets/redesign-web.jpg" style="width: 750px;" /></p>
+<p><img src="/assets/redesign-web.png" style="width: 750px;" /></p>
 
 <p>Loads of new features:</p>
 
@@ -92,20 +92,24 @@
 <p>Below you can see the design in action. Notice how easy it is to change where the image preview is located as well as adjust the number of lines of story text to show.</p>
 
 <p>
-    <video autoplay="" loop="" playsinline="" width="500" style="width: 500px;margin: 0 auto;display: block; border: 2px solid rgba(0,0,0,0.1)">
+    <video autoplay="" loop="" playsinline="" width="500" style="width: 500px;border: 2px solid rgba(0,0,0,0.1)">
         <source src="/assets/redesign-content-preview.mp4" type="video/mp4" />
     </video>
 </p>
 
 <p>The reading experience itself has also seen improvement. Full bleed images have been ported over from iOS to both Android and the web. This means that images will now run edge-to-edge. And the controls at the top and bottom of the web app have been restyled to be easier to understand at a quick glance.</p>
 
-<p><img src="/assets/redesign-full-bleed.jpg" style="margin: 0 auto; border: 2px solid rgba(0,0,0,0.1);" /></p>
+<p><img src="/assets/redesign-full-bleed.jpg" style="border: 2px solid rgba(0,0,0,0.1);" /></p>
 
-<p>And on mobile:</p>
+<p>There’s many ways to adjust story titles to fit. Pack them in dense or offer titles room to breathe.</p>
 
-<p><img src="/assets/redesign-ios-android.jpg" style="width: 750px;" /></p>
+<p><img src="/assets/redesign-bottom.jpg" style="border: 2px solid rgba(0,0,0,0.1);" /></p>
 
-<p>This whole redesign weighs in at a whopping 1,316 commits, which <a href="https://github.com/samuelclay/NewsBlur/compare/dashboard3">you can view on GitHub</a>.</p>
+<p>The redesign has also come to both of the official Android and iOS apps. Right now both are in beta testing, but you can join the <a href="https://testflight.apple.com/join/hYk9WU3f">iOS TestFlight</a> or the <a href="https://play.google.com/store/apps/details?id=com.newsblur&amp;hl=en_US&amp;gl=US">Android beta</a>.</p>
+
+<p><img src="/assets/redesign-ios-android.png" style="" /></p>
+
+<p>This whole redesign weighs in at a whopping 1,316 commits, which <a href="https://github.com/samuelclay/NewsBlur/compare/dashboard3">you can view on GitHub</a>. If you’ve enjoyed using NewsBlur and are a fan of this grand redesign, please take a moment to share on social media that you read your news with the help of NewsBlur.</p>
 
   </div><a class="u-url" href="/2021/07/01/refreshing-newsblur-design/" hidden></a>
 </article>

blog/_site/assets/main.css

@@ -13,6 +13,8 @@ main { display: block; /* Default value of `display` of `main` element is 'inlin
 /** Images */
 img { max-width: 100%; vertical-align: middle; }
 
+.post img, .post video { max-width: 650px; vertical-align: middle; display: block; margin: 24px auto; }
+
 /** Figures */
 figure > img { display: block; }
 

blog/_site/feed.xml

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.2.0">Jekyll</generator><link href="https://blog.newsblur.com/feed.xml" rel="self" type="application/atom+xml" /><link href="https://blog.newsblur.com/" rel="alternate" type="text/html" /><updated>2021-07-01T15:01:00-04:00</updated><id>https://blog.newsblur.com/feed.xml</id><title type="html">The NewsBlur Blog</title><subtitle>NewsBlur is a personal news reader that brings people together to talk about the world.
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="4.2.0">Jekyll</generator><link href="https://blog.newsblur.com/feed.xml" rel="self" type="application/atom+xml" /><link href="https://blog.newsblur.com/" rel="alternate" type="text/html" /><updated>2021-07-01T16:24:02-04:00</updated><id>https://blog.newsblur.com/feed.xml</id><title type="html">The NewsBlur Blog</title><subtitle>NewsBlur is a personal news reader that brings people together to talk about the world.
 A new sound of an old instrument.
 </subtitle><entry><title type="html">How a Docker footgun led to a vandal deleting NewsBlur’s MongoDB database</title><link href="https://blog.newsblur.com/2021/06/28/story-of-a-hacking/" rel="alternate" type="text/html" title="How a Docker footgun led to a vandal deleting NewsBlur’s MongoDB database" /><published>2021-06-28T00:00:00-04:00</published><updated>2021-06-28T00:00:00-04:00</updated><id>https://blog.newsblur.com/2021/06/28/story-of-a-hacking</id><content type="html" xml:base="https://blog.newsblur.com/2021/06/28/story-of-a-hacking/">&lt;p&gt;&lt;em&gt;tl;dr: A vandal deleted NewsBlur’s MongoDB database during a migration. No data was stolen or lost.&lt;/em&gt;&lt;/p&gt;