Adding pics to BootMii page (#334)

* Adding pics to BootMii page

* Fixed the bootmii folder and the pic

* cleaned some things up

---------

Co-authored-by: Snare-Hawk <85657152+Snare-Hawk@users.noreply.github.com>

.gitignore

@@ -14,3 +14,4 @@ node_modules
 npm-debug.log*
 /vendor
 /.idea
+Gemfile.lock

_pages/en_US/bootmii.md

@@ -13,44 +13,57 @@ You need an **SD card** to create a NAND backup using BootMii.
 If you do not have one, you can skip this page, although it is highly recommended to make a NAND backup if you can.
 {: .notice--warning}
 
-BootMii as boot2 is recommended, but only available to install on early Wiis. Otherwise, it can only be installed as an IOS.
+BootMii as boot2 is recommended, but only available to install on early Wii consoles. Otherwise, it can only be installed as an IOS.
 {: .notice--info}
 
 One of BootMii's most important features is the ability to backup and restore your Wii's NAND storage. We will be going over how to perform a NAND backup. You can then restore from that backup for any reason. It's a good idea to make a NAND backup regularly or before doing something risky to your console (and if you know what you're doing, you won't have to do anything risky).
 
 #### Requirements
-* An SD card with at least 512MB of free space
+
+- An SD card with at least 512MB of free space
 
 #### Instructions
+
 If you have BootMii installed as boot2 you will need to launch BootMii by restarting the console. Skip steps 1 and 2 if this is the case.
 {: .notice--info}
+
 1. Launch the Homebrew Channel.
+
 2. Press the HOME Button, then select "Launch BootMii".
+   ![BootMii_Main](/images/BootMii/BootMii_Main.png)
 
-    Navigating BootMii is not possible using a Wii Remote. You must use the POWER and RESET buttons on your console, or a GameCube controller plugged into port 1.
+Navigating BootMii is not possible using a Wii Remote. You must use the POWER and RESET buttons on your console, or a GameCube controller plugged into port 1.
-    To navigate between options, press POWER on your Wii (or left/right on the +Control Pad on a GameCube controller).
+To navigate between options, press POWER on your Wii (or left/right on the +Control Pad on a GameCube controller).
-    To select an option, press RESET on your Wii or A on your GameCube controller.
+To select an option, press RESET on your Wii or A on your GameCube controller.
-    {: .notice--info}
+{: .notice--info}
 
-    
+If the screen stays black and the blue disc drive light is blinking, you are missing the BootMii files on your SD card.
-    If the screen stays black and the blue disc drive light is blinking, you are missing the BootMii files on your SD card.
+Download [this zip file](https://static.hackmii.com/bootmii_sd_files.zip) and extract it to the root of your SD card, then try again.
-    Download [this zip file](https://static.hackmii.com/bootmii_sd_files.zip) and extract it to the root of your SD card, then try again.
+{: .notice--warning}
-    {: .notice--warning}
 
 3. Select the Options button (the icon with the gears).
-4. Select the BackupMii button (the icon with the green arrow, aka the first icon on your left).
+   ![BootMii_Gears_Icon](/images/BootMii/BootMii_Gears_Icon.png)
-- A NAND backup will start. You can watch the progress on the screen.
-- "Bad Blocks" are normal. Don't worry when you see some on a NAND backup.
-- After this step, it will verify the backup. While it is recommended, it can be skipped by pressing the EJECT button on your Wii. Note that if you have a disc inserted in the disc drive, pressing EJECT will also eject the disc.
-5. When the backup is fully complete, exit the NAND backup screen by pressing any button.
-6. To exit BootMii, press the Back button (the one with the arrow) and then you can press either the Wii Menu button or the Homebrew Channel button to exit where you want to.
 
-To restore from a NAND backup on your SD card, you can follow these instructions using RestoreMii (the icon with the red arrow, aka the second icon on your left). This is useful in the unlikely case you brick your Wii.
+4. Select the BackupMii button.
+   ![BootMii_Green_Arrow](/images/BootMii/BootMii_Green_Arrow.png)
+
+   - A NAND backup will start. You can watch the progress on the screen.
+   - "Bad Blocks" are normal. Don't worry when you see some on a NAND backup.
+   - After this step, it will verify the backup. While it is recommended, it can be skipped by pressing the EJECT button on your Wii. Note that if you have a disc inserted in the disc drive, pressing EJECT will also eject the disc.
+
+5. When the backup is complete, exit the NAND backup screen by pressing any button.
+   ![BootMii_NAND_Backup](/images/BootMii/BootMii_NAND_Backup.png)
+
+6. To exit BootMii, press the Back button (the one with the arrow) and then you can press either the Wii Menu button or the Homebrew Channel button to exit where you want to.
+   ![BootMii_Return_Arrow](/images/BootMii/BootMii_Return_Arrow.png)
+
+To restore from a NAND backup on your SD card, you can follow these instructions using RestoreMii. This is useful in the unlikely case you brick your Wii.
+![BootMii_Red_Arrow](/images/BootMii/BootMii_Red_Arrow.png)
 {: .notice--info}
 
 To make sure you don’t lose the files, it's recommended to copy `nand.bin` and `keys.bin` from the root of your SD card to your computer.
 {: .notice--info}
 
 [Continue to Priiloader Installation](priiloader)<br>
-Priiloader adds a level of brick protection, and we recommend it, especially if you were only able to install BootMii as IOS.
+Priiloader adds a level of brick protection, and is highly recommended, especially if you were only able to install BootMii as IOS.
 {: .notice--info}

_sass/minimal-mistakes/_notices.scss

@@ -11,18 +11,18 @@
  */
 
 @mixin notice($notice-color) {
-  margin: 2em 0 !important;  /* override*/
+  margin: 2em 0 !important; /* override */
   padding: 1em;
   font-family: $global-font-family;
   font-size: $type-size-6 !important;
-  text-indent: initial; /* override*/
+  text-indent: initial; /* override */
   font-weight: bold;
   background-color: mix($background-color, $notice-color, 45%);
   border-radius: $border-radius;
   box-shadow: 0 1px 1px rgba($notice-color, 0.25);
 
   h4 {
-    margin-top: 0 !important; /* override*/
+    margin-top: 0 !important; /* override */
     margin-bottom: 0.75em;
   }
 
@@ -34,7 +34,7 @@
 
   p {
     &:last-child {
-      margin-bottom: 0 !important; /* override*/
+      margin-bottom: 0 !important; /* override */
     }
   }
 
@@ -55,9 +55,13 @@
 
   ul {
     &:last-child {
-      margin-bottom: 0; /* override*/
+      margin-bottom: 0; /* override */
     }
   }
+
+  img {
+    padding-top: 15px;
+  }
 }
 
 /* Default notice */

_sass/minimal-mistakes/_reset.scss

@@ -2,7 +2,9 @@
    STYLE RESETS
    ========================================================================== */
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}
 
 html {
   /* apply a natural box layout model to all elements */
@@ -28,7 +30,9 @@ html {
 
 /* Remove margin */
 
-body { margin: 0; }
+body {
+  margin: 0;
+}
 
 /* Selected elements */
 
@@ -113,15 +117,18 @@ sub {
 
 img {
   /* Responsive images (ensure images don't scale beyond their parents) */
-  max-width: 100%; /* part 1: Set a maximum relative to the parent*/
+  max-width: 100%; /* part 1: Set a maximum relative to the parent */
-  width: auto\9; /* IE7-8 need help adjusting responsive images*/
+  width: auto; /* IE7-8 need help adjusting responsive images */
-  height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching*/
+  height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching */
-
   vertical-align: middle;
-  border: 0;
   -ms-interpolation-mode: bicubic;
 }
 
+/* gives some room to images under list item elements */
+li img {
+  padding-top: 15px;
+}
+
 /* Prevent max-width from affecting Google Maps */
 
 #map_canvas img,
@@ -142,22 +149,24 @@ textarea {
 
 button,
 input {
-  *overflow: visible; /* inner spacing ie IE6/7*/
+  *overflow: visible; /* inner spacing ie IE6/7 */
-  line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/
+  line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet */
 }
 
 button::-moz-focus-inner,
-input::-moz-focus-inner { /* inner padding and border oddities in FF3/4*/
+input::-moz-focus-inner {
+  /* inner padding and border oddities in FF3/4 */
   padding: 0;
   border: 0;
 }
 
 button,
-html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls
+  html input[type="button"], /* avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls */
-input[type="reset"],
+  input[type="reset"],
-input[type="submit"] {
+  input[type="submit"] {
-    -webkit-appearance: button; /* corrects inability to style clickable `input` types in iOS*/
+  appearance: button;
-    cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/
+  -webkit-appearance: button; /* corrects inability to style clickable `input` types in iOS */
+  cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others */
 }
 
 label,
@@ -168,20 +177,22 @@ input[type="reset"],
 input[type="submit"],
 input[type="radio"],
 input[type="checkbox"] {
-    cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/
+  cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others */
 }
 
-input[type="search"] { /* Appearance in Safari/Chrome*/
+input[type="search"] {
+  /* Appearance in Safari/Chrome */
   box-sizing: content-box;
+  appearance: textfield;
   -webkit-appearance: textfield;
 }
 
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button {
-  -webkit-appearance: none; /* inner-padding issues in Chrome OSX, Safari 5*/
+  -webkit-appearance: none; /* inner-padding issues in Chrome OSX, Safari 5 */
 }
 
 textarea {
-  overflow: auto; /* remove vertical scrollbar in IE6-9*/
+  overflow: auto; /* remove vertical scrollbar in IE6-9 */
-  vertical-align: top; /* readability and alignment cross-browser*/
+  vertical-align: top; /* readability and alignment cross-browser */
 }