Slowly fleshing out content, initial imagery

5 files changed, 52 insertions, 12 deletions

diff --git a/public/fvwm.png b/public/fvwm.png
new file mode 100644
index 0000000..4b3b9fe
--- /dev/null
+++ b/public/fvwm.png
diff --git a/public/index.html b/public/index.html
index 89335cd..1a89d97 100644
--- a/public/index.html
+++ b/public/index.html
@@ -30,8 +30,10 @@
 </li>
 <li><a href="#loginmanager">Login Manager</a></li>
 <li><a href="#thefirstreallogin">The First <em>Real</em> Login</a></li>
+<li><a href="#additionalpackages">Additional Packages</a></li>
 <li><a href="#configs">Configs</a></li>
-<li><a href="#contribute">Contribute</a></li>
+<li><a href="#supportopenbsd">Support OpenBSD</a></li>
+<li><a href="#contributetoopenbased">Contribute to OpenBASED</a></li>
 </ul>
 </div>
 
@@ -93,18 +95,12 @@
 
 <pre><code>su -
 echo &quot;permit nopass :wheel&quot; &gt;&gt; /etc/doas.conf
+exit
 </code></pre>
 
-<p>Now you can logout or reboot the machine.</p>
-
-<pre><code>doas reboot
-</code></pre>
-
-<p>Running any of the commands might present you with a permissions error. If that happens, simply add <code>doas</code> to the start of every command.</p>
-
 <h3 id="firmware">Firmware</h3>
 
-<p>Once your machine reboots, login as your created user. The next steps will help you ensure you have the latest firmware.</p>
+<p>The next steps will help you ensure you have the latest firmware.</p>
 
 <p>Simply run the command: <code>fw_update</code></p>
 
@@ -141,18 +137,53 @@ rcctl start apmd
 <pre><code>doas rcctl enable xenodm
 </code></pre>
 
-<p>Now reboot your device again.</p>
+<p>Now reboot your device.</p>
 
 <pre><code>doas reboot
 </code></pre>
 
 <h2 id="thefirstreallogin">The First <em>Real</em> Login</h2>
 
+<p>Now you will be presented with the glorious <code>xenodm</code> login screen.</p>
+
+<figure>
+<img src="./xenodm-stock.png" alt="Default xenodm login screen">
+<figcaption>The beautiful, default xenodm login screen. Image taken from <a href="https://www.tumfatig.net/2019/customizing-openbsd-xenodm/">tumfatig.net</a> (who has some wonderful OpenBSD guides you should check out!)</figcaption>
+</figure>
+
+<p>Login with your created user details and you should see something like this:</p>
+
+<figure>
+<img src="./fvwm.png" alt="Default fvwm view once logged in">
+<figcaption>Taken from the main OpenBSD Wikipedia page. (Some applications will not be opened by default)</figcaption>
+</figure>
+
+<p>Absolutely glorious. You&#8217;ll also notice a 3x3 grid box in the bottom right corner:</p>
+
+<img src="./pager.png" alt="fvwm workspace pager">
+
+<p>This is called the &#8220;workspace pager&#8221; or &#8220;pager&#8221;. Each section represents an individual <em>desktop</em> (or workspace if your more familiar with MacOS terminology). You can click on any grid item to instantly move to that desktop.</p>
+
+<p>You can also navigate around using the <kbd>Ctl</kbd> + <kbd>&uarr;</kbd><kbd>&rarr;</kbd><kbd>&darr;</kbd><kbd>&larr;</kbd> keys.</p>
+
+<h2 id="additionalpackages">Additional Packages</h2>
+
+<ul>
+<li>aerc</li>
+<li>Firefox</li>
+<li>ffmpeg</li>
+<li>picom</li>
+</ul>
+
 <h2 id="configs">Configs</h2>
 
 <p>Okay, I <em>know</em> I said there wouldn&#8217;t be any configs included in this guide. Frankly, you should be having zero problems working with all those defaults now that you&#8217;ve run through this guide! BUT - I wanted to include some <em>very minor</em> configuration tweaks that might make things a little more intuitive for newcomers. Feel free to ignore these entirely!</p>
 
-<h2 id="contribute">Contribute</h2>
+<h2 id="supportopenbsd">Support OpenBSD</h2>
+
+<p>If you&#8217;ve found this guide helpful or even sparked an interest in OpenBSD, please consider <a href="https://www.openbsd.org/donations.html">donating directly to the OpenBSD Project</a>. A little goes a long way, and the OpenBSD Project is a volunteer-driven software group funded by donations!</p>
+
+<h2 id="contributetoopenbased">Contribute to OpenBASED</h2>
 
 <p>I&#8217;m far from an OpenBSD expert! Please <a href="https://git.sr.ht/~bt/openbased">help improve this project</a>!</p>
 <hr>
diff --git a/public/pager.png b/public/pager.png
new file mode 100644
index 0000000..13d0d61
--- /dev/null
+++ b/public/pager.png
diff --git a/public/style.css b/public/style.css
index 2814250..22fe4aa 100644
--- a/public/style.css
+++ b/public/style.css
@@ -33,7 +33,7 @@ header {
 
 img {
     margin: 0 auto;
-    max-width: 120px;
+    max-width: 100%;
 }
 
 h1 {
@@ -64,6 +64,15 @@ code {
     background: whitesmoke;
 }
 
+kbd {
+	border: 1px solid black;
+	border-radius: 4px;
+	box-shadow: 0 2px 4px rgba(0,0,0,0.7);
+	background: #eee;
+	color: black;
+	padding: 4px;
+}
+
 p code, li code, dl code {
     border: 1px solid;
     padding: 1px 2px;
diff --git a/public/xenodm-stock.png b/public/xenodm-stock.png
new file mode 100644
index 0000000..a6e4750
--- /dev/null
+++ b/public/xenodm-stock.png