content/get-haiku/installation-guide.html

@@ -26,66 +26,66 @@ <h3>Let's Start the Installation!</h3>
 
 <p>Insert the Haiku Installer CD into your CD-ROM drive and power up your system.</p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-1" name="step-1"></a>
 	<img src="/files/images/installation_guide/1-boot-splash.png" alt="Haiku boot splash screen" />
 <figcaption><p class="step">1</p><p class="caption">After a few seconds, you should see the Haiku boot splash screen.</p>
 </figcaption></figure></p>
 
 <div class="alert alert-info">If any of the screens below fail to appear, try the fail safe mode options which can be enabled by holding <span class="key">SHIFT</span> before the CD starts to load. See <a href="/docs/userguide/en/bootloader.html">Boot Loader</a> for details. Please also consider reporting the issue at <a href="https://dev.haiku-os.org/">the bug tracker</a>.</div>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-2" name="step-2"></a>
 	<img src="/files/images/installation_guide/2-mode-selection.png" alt="Choose the Installer option">
 <figcaption><p class="step">2</p><p class="caption">This panel (depending on your hardware it can take a while to appear) lets you set the system language and keymap.<br />
 Then you decide to either install Haiku on a partition by clicking <span class="button">Run Installer</span> or try out Haiku by booting to the desktop directly from CD by choosing <span class="button">Desktop (Live-CD)</span>. Run the Installer.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-3" name="step-3"></a>
 	<img src="/files/images/installation_guide/3-installer-notice.png" alt="Some pre-install information">
 <figcaption><p class="step">3</p><p class="caption">Before the Haiku Installer starts, a notice is displayed. It contains information regarding prior partition setup (as described above) and GRUB setup (as described further down in this guide). Click on <span class="button">Continue</span> to proceed to the Installer.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-4" name="step-4"></a>
 	<img src="/files/images/installation_guide/4-no-bfs-alert.png" alt="No BFS partitions were found">
 <figcaption><p class="step">4</p><p class="caption">If the following alert pops up, it just means that no partitions with the Be File System (BFS) have been found. Acknowledge with <span class="button">OK</span>.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-5" name="step-5"></a>
 	<img src="/files/images/installation_guide/5-launch-drivesetup.png" alt="Start DriveSetup" />
 <figcaption><p class="step">5</p><p class="caption">When there is no BFS partition available, or if you want to use a differently formatted partition, you use the DriveSetup partitioning application. Click on <span class="button">Setup&nbsp;partitions&hellip;</span> to start DriveSetup.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-6" name="step-6"></a>
 	<img src="/files/images/installation_guide/6-drivesetup-initial.png" alt="The initial DriveSetup view" />
 <figcaption><p class="step">6</p><p class="caption">Haiku's partition manager DriveSetup shows the disks and partitions that have been identified.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-7" name="step-7"></a>
 	<img src="/files/images/installation_guide/7-partition-select.png" alt="Select the target partition" />
 <figcaption><p class="step">7</p><p class="caption">In this example, there already are two primary partitions. One of about 9 GiB using an Ext2 File System, and another one of 2 GiB with a FAT32 File System. There are also two extended partitions that are still empty. These partitions have been previously prepared using a partitioning tool.<br />
 Now selecting the partition you want to install Haiku on. As soon as you click on a disk, its partition layout will be graphically represented. You can then also choose the partition by clicking on it in the layout graphic. The currently selected partition is marked by a blue border in the layout graphic.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-8" name="step-8"></a>
 	<img src="/files/images/installation_guide/8-initialize.png" alt="Select the Be File System for initialization" />
 <figcaption><p class="step">8</p><p class="caption">To initialize a partition to the Be File System, make sure the right partition is selected, then use the menu <span class="menu">Partition | Format | Be File System&hellip;</span>.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-9" name="step-9"></a>
 	<img src="/files/images/installation_guide/9-initialize-warning.png" alt="Continue from the alert" />
 <figcaption><p class="step">9</p><p class="caption">An alert will pop up to ask if the initialization should be started. If you are still sure you have the right partition selected, click  <span class="button">Continue</span>, otherwise <span class="button">Cancel</span> the initialization.<br />
 As the alert says, you can still abort initialization before writing any changes to disk later.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-10" name="step-10"></a>
 	<img src="/files/images/installation_guide/10-filesystem-name.png" alt="Fill in the file system name" />
 <figcaption><p class="step">10</p><p class="caption">Now you enter the name for the new partition, or simply leave the suggested "Haiku". You can also select another blocksize; the default of 2048 should be fine for most uses, though.<br />
@@ -94,45 +94,45 @@ <h3>Let's Start the Installation!</h3>
 
 <div class="alert alert-warning">This is the last step before the initialization is executed! All data on the selected partition will be irrecoverably lost!</div>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-11" name="step-11"></a>
 	<img src="/files/images/installation_guide/11-write-to-disk.png" alt="Warning before writing back changes" />
 <figcaption><p class="step">11</p><p class="caption">If everything still looks fine, click <span class="button">Write changes</span>, otherwise abort with the <span class="button">Cancel</span> button.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-12" name="step-12"></a>
 	<img src="/files/images/installation_guide/12-initialized.png" alt="The partition has been initialized to the Be File System" />
 <figcaption><p class="step">12</p><p class="caption">The partition has been initialized with the <b>Be File System</b>. Click <span class="button">OK</span> to close this notification.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-13" name="step-13"></a>
 	<img src="/files/images/installation_guide/13-quit-drivesetup.png" alt="Quit DriveSetup" />
 <figcaption><p class="step">13</p><p class="caption">You can now see the file system type and name has been updated in the list. Also, the graphical representation should now bear the correct name. The partition setup is now complete.<br />
 Close <b>DriveSetup</b> by clicking on close widget on the left upper corner of the yellow window tab.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-14" name="step-14"></a>
 	<img src="/files/images/installation_guide/14-select-target.png" alt="Select target volume" />
 <figcaption><p class="step">14</p><p class="caption">The Installer window re-appears and should now show an updated list of target partitions under <span class="menu">Onto</span>. Now choose your freshly initialized partition (or a pre-existing one if you already had one) as the installation target.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-15" name="step-15"></a>
 	<img src="/files/images/installation_guide/15-begin-install.png" alt="Begin the installation" />
 <figcaption><p class="step">15</p><p class="caption">The volume with the name <b>Haiku</b> has been chosen as the target for installation. Click on <span class="button">Begin</span> to start the installation.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-16" name="step-16"></a>
 	<img src="/files/images/installation_guide/17-copying.png" alt="The Installer copies files" />
 <figcaption><p class="step">16</p><p class="caption">The installation process collects some information before starting to copy data. This can take a few seconds.<br />
 Soon after, packages start to be copied and a progress bar with a file count is displayed. While the copying is taking place, it is always possible to quit the process by clicking on the <span class="button">Stop</span> button.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<a id="step-17" name="step-17"></a>
 	<img src="/files/images/installation_guide/18-install-done.png" alt="Installation is complete" />
 <figcaption><p class="step">17</p><p class="caption">When the copying process is finished, you can quit the installer by clicking on <span class="button">Quit</span>. The install CD will be ejected, and the system will restart after a few seconds. Do not forget to remove the Haiku CD from your drive.</p>
@@ -227,19 +227,19 @@ <h3>Boot using the CD</h3>
 
 <p>You can also use the boot CD to boot into your Haiku installation without adding it to a boot manager. To do so, hold <span class="key">SHIFT</span> before the CD begins to load. This will bring up the Boot Loader Options.</p>
 
-<p><figure role="group" style="width:740px">
+<p><figure role="group">
 	<a id="step-2-1" name="step-2-1"></a>
 	<img src="/files/images/installation_guide/19-bootloader-menu.png" alt="The Boot Loader Menu" />
 <figcaption><p class="step">1</p><p class="caption">To choose the installation to boot from, press <span class="key">ENTER</span> to navigate to the boot volume selection. Your installation should be listed there.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:740px">
+<p><figure role="group">
 	<a id="step-2-2" name="step-2-3"></a>
 	<img src="/files/images/installation_guide/20-select-boot-volume.png" alt="Select the boot volume from the list" \>
 <figcaption><p class="step">2</p><p class="caption">Select the volume using the <span class="key">↑</span> / <span class="key">↓</span> keys and press <span class="key">ENTER</span> again to choose it as the boot volume and return to the main boot loader menu.</p>
 </figcaption></figure></p>
 
-<p><figure role="group" style="width:740px">
+<p><figure role="group">
 	<a id="step-2-3" name="step-2-3"></a>
 	<img src="/files/images/installation_guide/21-continue-booting.png" alt="Continue booting to boot Haiku" />
 <figcaption><p class="step">3</p><p class="caption">The selection will automatically jump to <span class="menu">Continue booting</span>. Press <span class="key">ENTER</span> again to start booting into your Haiku installation.</p>
@@ -251,7 +251,7 @@ <h3>First Boot</h3>
 
 <p>Once fully booted, you should be greeted by a screen like this:</p>
 
-<p><figure role="group" style="width:820px">
+<p><figure role="group">
 	<img src="/files/images/installation_guide/22-fully-booted.png" alt="The fully booted Haiku system" /></figure></p>
 
 <p>Some background processing will still take place the first time you boot Haiku, so don't be alarmed by the disk activity. After a little while, the system should settle down. Make sure to read our <b>Welcome</b> documentation; there is a link on the Desktop.</p>

themes/shijin4/static/css/shijin4.css

@@ -7,7 +7,7 @@
  **************************************************************
  *********** THE BOOTSTRAP THEME BASED ON "SHIJIN 3" **********
  **************************************************************
- ** Copyright 2015-2017 Augustin Cavalier <waddlesplash>
+ ** Copyright 2015-2018 Augustin Cavalier <waddlesplash>
  ** Colors & some basic styles copied from Shijin 3's "local.css"
  ** Released as MIT license; copyright assigned to Haiku, Inc.
  */
@@ -523,13 +523,21 @@ ul.pagination {
 
 figure {	/* Use for step-by-step guides consisting mainly of */
 			/* concacenated screenshots + captions */
-			/* Add style="width:[screenshotwidth+2*padding]" */
-			/* when used, e.g. style="width:820px" */
-	position: relative;
+	max-width: 100%;
 	padding: 10px;
 	border: 1px solid gainsboro;
 	background: white;
 }
+@media (min-width:768px) {
+	figure {
+		width: -webkit-min-content;
+		width: -moz-min-content;
+		width: min-content;
+	}
+	figure img {
+		max-width: unset !important; /* override max:100% directive */
+	}
+}
 figcaption p.step {
 	display: table-cell;
 	padding: 10px;