Moderate tidyings-up of the Web page

It's not nice, but it's not horrifying any more either.

diff --git a/bedstead.css b/bedstead.css
index a270988cd481e2b359af4e8367c5a5b3cc34bab9..77d2165c0fcd3464f5285ec4c3433a42316993f7 100644 (file)
--- a/bedstead.css
+++ b/bedstead.css
@@ -59,16 +59,10 @@ img {
  * from browsers without font support, and the image sample should
  * be used instead.
  */
-@media braille, embossed, speech, tty, (grid) {
-    .text-sample {
-       display: none;
-    }
-    .image-sample {
-       display: block;
-    }
-}
 .text-sample {
     font-size: 50px;
+    font-feature-settings: normal;
+    /* These may be overridden by the @media rule below. */
     display: block;
     speak: never;
 }
@@ -76,6 +70,15 @@ img {
     display: none;
 }
 
+@media braille, embossed, speech, tty, (grid) {
+    .text-sample {
+       display: none;
+    }
+    .image-sample {
+       display: block;
+    }
+}
+
 /* Colours that make Bedstead look better (imitating my green monitor) */
 body {
     background-color: #031109;

diff --git a/index.xhtml b/index.xhtml
index 7bc99b56a9951f3466a9dd7e308f11d17f67a200..a73344381af52a8f48050db4eff03e13569b3813 100644 (file)
--- a/index.xhtml
+++ b/index.xhtml
@@ -28,18 +28,19 @@
     <p class="image-sample">
       <img alt="[ A sample of Bedstead's characters ]" src="sample.png"/>
     </p>
-    <blockquote class="text-sample">
-      <pre>ABCDEFGHIJKLMNOPQRSTUVWXYZ
-abcdefghijklmnopqrstuvwxyz
-<span style="font-variant: small-caps">abcdefghijklmnopqrstuvwxyz</span>
-ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ
-αβγδεζηθικλμνξοπρςστυϕφχψω
-АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
-абвгдежзийклмнопрстуфхцчшщъыьэюя
-אבגדהוזחטיךכלםמןנסעףפץצקרשת
-0123456789¼½¾!?.,:;'"‘’“”()[]{}
--—+×÷&lt;=>/\|£$¥¢¤%&amp;*#@¶©®℗
-</pre>
+    <blockquote class="text-sample" style="text-align: center;">
+      ABCDEFGHIJKLMNOPQRSTUVWXYZ<br/>
+      abcdefghijklmnopqrstuvwxyz<br/>
+      <span style="font-variant: small-caps">
+       abcdefghijklmnopqrstuvwxyz
+      </span><br/>
+      ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ<br/>
+      αβγδεζηθικλμνξοπρςστυϕφχψω<br/>
+      АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br/>
+      абвгдежзийклмнопрстуфхцчшщъыьэюя<br/>
+      אבגדהוזחטיךכלםמןנסעףפץצקרשת<br/>
+      0123456789¼½¾!?.,:;'"‘’“”()[]{}<br/>
+      -—+×÷&lt;=>/\|£$¥¢¤%&amp;*#@¶©®℗<br/>
     </blockquote>
     <p>Bedstead is available in six widths.  The standard version of
       Bedstead is based on a square pixel grid.  This is good for
@@ -57,13 +58,17 @@ abcdefghijklmnopqrstuvwxyz
       <img alt="[ Various widths of Bedstead ]" src="extended.png"/>
     </p>
     <blockquote class="text-sample">
-      <div>
-       <code style="display: inline-block; width: 10em;">Bedstead</code>
-       <code style="font-stretch: expanded">Extended</code>
+      <div style="display: inline-block; width: 10em;">
+       <div style="font-stretch: normal;">Bedstead</div>
+       <div style="font-size: 2em; font-stretch: ultra-condensed;">
+         Ultra Condensed
+       </div>
       </div>
-      <div style="font-size: 2em; font-stretch: ultra-condensed;">
-       <code style="display: inline-block; width: 5em;">Ultra Condensed</code>
-       <code style="font-stretch: extra-condensed;">Extra Condensed</code>
+      <div style="display: inline-block;">
+       <div style="font-stretch: expanded;">Extended</div>
+       <div style="font-size: 2em; font-stretch: extra-condensed;">
+         Extra Condensed
+       </div>
       </div>
     </blockquote>
 
@@ -81,11 +86,13 @@ abcdefghijklmnopqrstuvwxyz
       Use area between U+EE00 and U+EE7F, in the same arrangement as
       is used by
       <a href="http://zapping.sourceforge.net/ZVBI/">ZVBI</a>.</p>
+    <blockquote>
 <pre>🬰🬰🬒🬰🬰🬒🬰🬰🬒🬰🬰🬒🬰🬰🬒🬰🬰🬒🬰🬰🬒🬰🬰🬒<span class="separated">🬰🬰🬒🬰🬰🬒🬰🬰🬒🬰🬰🬒🬰🬰🬒🬰🬰🬒🬰🬰🬒🬰🬰🬒</span>
 ▌🬚🬄▌🬚🬄▌🬚🬄▌🬚🬄▌🬚🬄▌🬚🬄▌🬚🬄▌🬚🬄<span class="separated">▌🬚🬄▌🬚🬄▌🬚🬄▌🬚🬄▌🬚🬄▌🬚🬄▌🬚🬄▌🬚🬄</span>
 🬮🬰🬰🬮🬰🬰🬮🬰🬰🬮🬰🬰🬮🬰🬰🬮🬰🬰🬮🬰🬰🬮🬰🬰<span class="separated">🬮🬰🬰🬮🬰🬰🬮🬰🬰🬮🬰🬰🬮🬰🬰🬮🬰🬰🬮🬰🬰🬮🬰🬰</span>
 </pre>
-    
+    </blockquote>
+
     <h2>Copyright</h2>
     <p>The program that generates Bedstead and all of the
       newly-designed glyphs have been released into the public domain.</p>