Bugfix: Spelling mistakes and styling problems.

The screen is expanding in a bad way.
This seems to be caused by a few different problems:
1) Images end up being too large.
2) The display flex is used incorrectly in some places.
3) The pre tag is just useless, it breaks everything.

Tweak the images to have a max width that results in it being no larger than the screen.
Fix the display flex structure.
Replace pre tags with sample tags and assign better formatting using white-space "pre-line".
The use of the samp tag (sample tag) is more accurate because this is a sample terminal.
Replace the existing code tag that is for terminal output with samp tag.

diff --git a/css/kevux-screen-desktop.css b/css/kevux-screen-desktop.css
index c35d30a907f8e378ac8033a2920831c9fde9f40a..7b07ff5a3b7e10d74cc122caa04f2a8216f5c0ec 100644 (file)
--- a/css/kevux-screen-desktop.css
+++ b/css/kevux-screen-desktop.css
@@ -4,9 +4,13 @@
 
 .kevux > .content-block {
   display: flex;
+  flex-direction: row;
+
+  max-width: 100%;
 }
 
 .kevux > .content-block > .nav-block {
+  flex-shrink: 1;
   word-break: normal;
 
   min-height: calc(var(--height_screen) - var(--height_header_site));

diff --git a/css/kevux-screen.css b/css/kevux-screen.css
index ede558e432eef8ba8ef55ce39af251a63da3dfc4..e2df270f70cfb6bed4d330390ba2d8e2604b3c65 100644 (file)
--- a/css/kevux-screen.css
+++ b/css/kevux-screen.css
@@ -91,8 +91,8 @@
 }
 
 .kevux > .content-block > .main-block {
-  display: flex;
   position: relative;
+  box-sizing: border-box;
 
   padding: 8px;
 
@@ -100,7 +100,7 @@
 }
 
 .kevux > .content-block > .main-block > .main {
-  flex: auto;
+  max-width: 100%;
 }
 
 .kevux > .content-block > .main-block > .main .header > .h1 {
@@ -128,3 +128,7 @@
 .kevux > .content-block .section:not(:last-of-type) {
   margin-bottom: 1rem;
 }
+
+.kevux > .content-block .image.content {
+  max-width: 100%;
+}

diff --git a/css/kevux.css b/css/kevux.css
index 6ca2047adf743631c5299c06dbb947e6c96c09d6..c90bea0b3106c3d6918f56ac2531e16531e2735e 100644 (file)
--- a/css/kevux.css
+++ b/css/kevux.css
@@ -244,6 +244,8 @@
   margin: 0.5rem;
   padding: 0.75rem;
 
+  white-space: pre-line;
+  unicode-bidi: embed;
   background-color: #404040;
   color: #ffffff;
 }

diff --git a/news/2022_06_04-librem_to_freedom.html b/news/2022_06_04-librem_to_freedom.html
index d3df99db81759e80adf490fd198317ac057f708d..3e4757dff73a4834beaa50086c829a61f71d5b00 100644 (file)
--- a/news/2022_06_04-librem_to_freedom.html
+++ b/news/2022_06_04-librem_to_freedom.html
@@ -123,9 +123,7 @@
                 </p>
                 <div class="tip">
                   I recommend backing up your <code class="code">contacts.db</code> file. This file should appear after you first start and configure the <em>Contacts</em> program. The <code class="code">contacts.db</code> file can be located by using the following command on the command line from your home directory:
-                  <code class="code terminal">
-                    # find -name contacts.db
-                  </code>
+                  <samp class="code terminal"># find -name contacts.db</samp>
                 </div>
                 <p>
                   I open up the command line and I cannot login as root. Really? What a pain. The solution is to use <code class="code">sudo -s passwd</code> to change the root password and then login. I then had to change several other files so that the normal user can use sudo properly as well. The appropriate credentials can now be established.
@@ -145,10 +143,9 @@
                 <div class="tip">
                   I recommend always using <code class="code">noatime</code> on all mounted filesystems. The security offered by access times is weak. More importantly, access time increases the amount of input and output to the disk and wears down the drive faster. This is a bad idea for something like a phone that uses flash. These devices have a limited number of writes. Reducing writing to the disk on every read (even if it is a cached write) should also save battery life.
                   This is an example of what an <code class="code">/etc/fstab</code> might look like:
-                  <pre class="code terminal">
-UUID=00000000-0000-0000-0000-000000000000 /boot ext2 errors=remount-ro,noatime 0 2
-UUID=00000000-0000-0000-0000-000000000001 / ext4 errors=remount-ro,noatime 0 1
-</pre>
+                  <samp class="code terminal">UUID=00000000-0000-0000-0000-000000000000 /boot ext2 errors=remount-ro,noatime 0 2
+                    UUID=00000000-0000-0000-0000-000000000001 / ext4 errors=remount-ro,noatime 0 1
+                  </samp>
                 </div>
                 <p>
                   I also edited the <code class="code">/etc/fstab</code> file to ensure that the <code class="code">/tmp</code> directory is mounted as a temporary file-system utilizing <abbr title="Random Access Memory">RAM</abbr>.
@@ -160,11 +157,10 @@ UUID=00000000-0000-0000-0000-000000000001 / ext4 errors=remount-ro,noatime 0 1
                   An important parameter for <code class="code">tmpfs</code> is the <code class="code">size=</code> parameter.
                   The <code class="code">size=</code> allows specifying the upper limit to prevent it from utilizing too much <abbr title="Random Access Memory">RAM</abbr>. If this is too low, then files cannot be written. If this is too large, then the possibility of using too much <abbr title="Random Access Memory">RAM</abbr> exists.
                   This is an example of what an <code class="code">/etc/fstab</code> might look like:
-                  <pre class="code terminal">
-UUID=00000000-0000-0000-0000-000000000000 /boot ext2 errors=remount-ro,noatime 0 2
-UUID=00000000-0000-0000-0000-000000000001 / ext4 errors=remount-ro,noatime 0 1
-tmpfs /tmp tmpfs noatime,size=1024M 0 0
-</pre>
+                  <samp class="code terminal">UUID=00000000-0000-0000-0000-000000000000 /boot ext2 errors=remount-ro,noatime 0 2
+                    UUID=00000000-0000-0000-0000-000000000001 / ext4 errors=remount-ro,noatime 0 1
+                    tmpfs /tmp tmpfs noatime,size=1024M 0 0
+                  </samp>
                 </div>
                 <p>
                   I was able to boot my system and install my desired software. I installed quite a bit of software. Updates were performed. The details of different programs or problems I encountered are described in the sections following this.
@@ -250,27 +246,26 @@ tmpfs /tmp tmpfs noatime,size=1024M 0 0
                 </p>
                 <div class="tip">
                   The commands to perform the factory reset (thereby unbricking your card) from the terminal on the phone:
-                  <pre class="code terminal">
-# cat << EOF > reset.txt
-======
-/hex
-scd serialno
-scd apdu 00 20 00 81 08 40 40 40 40 40 40 40 40
-scd apdu 00 20 00 81 08 40 40 40 40 40 40 40 40
-scd apdu 00 20 00 81 08 40 40 40 40 40 40 40 40
-scd apdu 00 20 00 81 08 40 40 40 40 40 40 40 40
-scd apdu 00 20 00 83 08 40 40 40 40 40 40 40 40
-scd apdu 00 20 00 83 08 40 40 40 40 40 40 40 40
-scd apdu 00 20 00 83 08 40 40 40 40 40 40 40 40
-scd apdu 00 20 00 83 08 40 40 40 40 40 40 40 40
-scd apdu 00 e6 00 00
-scd apdu 00 44 00 00
-/echo card has been reset to factory defaults
-=====
-EOF
-
-# gpg-connect-agent < reset.txt
-</pre>
+                  <samp class="code terminal"># cat << EOF > reset.txt
+                    ======
+                    /hex
+                    scd serialno
+                    scd apdu 00 20 00 81 08 40 40 40 40 40 40 40 40
+                    scd apdu 00 20 00 81 08 40 40 40 40 40 40 40 40
+                    scd apdu 00 20 00 81 08 40 40 40 40 40 40 40 40
+                    scd apdu 00 20 00 81 08 40 40 40 40 40 40 40 40
+                    scd apdu 00 20 00 83 08 40 40 40 40 40 40 40 40
+                    scd apdu 00 20 00 83 08 40 40 40 40 40 40 40 40
+                    scd apdu 00 20 00 83 08 40 40 40 40 40 40 40 40
+                    scd apdu 00 20 00 83 08 40 40 40 40 40 40 40 40
+                    scd apdu 00 e6 00 00
+                    scd apdu 00 44 00 00
+                    /echo card has been reset to factory defaults
+                    =====
+                    EOF
+
+                    # gpg-connect-agent < reset.txt
+                  </samp>
                 </div>
               </div>
             </section>
@@ -336,7 +331,7 @@ EOF
 
               <div class="section-content">
                 <p>
-                  The keyboad on the <strong>Librem5</strong> is horrible. I get the impression that the programmers, owners, or managers behind the <strong>Librem5</strong> are more akin to the new age phone scroll users rather than the more old schoold keyboard users. The <strong>Pinephone</strong> uses the same software and has the same horrible keyboard.
+                  The keyboard on the <strong>Librem5</strong> is horrible. I get the impression that the programmers, owners, or managers behind the <strong>Librem5</strong> are more akin to the new age phone scroll users rather than the more old school keyboard users. The <strong>Pinephone</strong> uses the same software and has the same horrible keyboard.
                 </p>
               </div>
             </section>
@@ -366,7 +361,7 @@ EOF
                   The current day less-technical person compared to the traditional more-technical person have very different use cases. I have never owned one of these proprietary Android or Apple phones. Having said that, I believe that the interface is focused towards such an audience. I find such an interface tolerable but not very user-friendly.
                 </p>
                 <p>
-                  I believe what the <strong>Librem5</strong> provides achieves this with the exception of pictures. This exception is so big, that I might better word this as calling it the rule rather than the exception. Taking, sending, and receiving pictures is the bread and butter of the average user out in the wild. The <strong>Librem5</strong> (and also the <strong>Pinephone</strong> for that matter) drops the ball on this. This is a major downside and I would argue is a requirement that should be immediately address, two years ago.
+                  I believe what the <strong>Librem5</strong> provides achieves this with the exception of pictures. This exception is so big, that I might better word this as calling it the rule rather than the exception. Taking, sending, and receiving pictures is the bread and butter of the average user out in the wild. The <strong>Librem5</strong> (and also the <strong>Pinephone</strong> for that matter) drops the ball on this. This is a major downside and I would argue is a requirement that should be immediately addressed, two years ago.
                 </p>
               </div>
             </section>