Improve user font options

classes/env.class.php

@@ -139,10 +139,14 @@ class ENV
             error('$ENV->fromJson() expects a string.');
         }
 
-        # Decode to array and construct RAO
-        return $RAO = new RecursiveArrayObject(
-            json_decode($str, true)
-        );
+        $json = json_decode($str, true);
+        
+        if (json_last_error() === JSON_ERROR_NONE) {
+            # Decode to array and construct RAO
+            return new RecursiveArrayObject($json);
+        } else {
+            error('Unable to parse JSON in $ENV->fromJson().');
+        }
     }
 
 
@@ -159,7 +163,7 @@ class ENV
             $obj = (array) $obj;
         }
 
-        return $RAO = new RecursiveArrayObject(
+        return new RecursiveArrayObject(
             array_unique($this->toArray($obj))
         );
     }
@@ -227,7 +231,7 @@ class ENV
 
         # Map the sanitized function name
         # to a mapped array conversion
-        return $RAO = new RecursiveArrayObject(
+        return new RecursiveArrayObject(
             array_map(
                 $fn,
                 array_map(

classes/security.class.php

@@ -21,7 +21,7 @@ class Security
     {
         foreach ($IDs as $ID) {
             if (!ID || !is_int($ID) || $ID < 1) {
-                error(400);
+                error("Expected an integer > 1, got $ID in Security::checkInt.");
             }
         }
 

design/publicheader.php

@@ -52,7 +52,7 @@ foreach ($Styles as $Style) {
 # Fonts
 echo View::pushAsset(
 # Only Noto Sans available on public pages
-"$ENV->STATIC_SERVER/styles/assets/fonts/noto/woff2/NotoSans-SemiCondensed.woff2",
+"$ENV->STATIC_SERVER/styles/assets/fonts/noto/NotoSans-SemiCondensed.woff2",
     'font'
 );
 

gazelle.sql

@@ -1858,12 +1858,12 @@ INSERT INTO `permissions` (`ID`, `Level`, `Name`, `Values`, `DisplayStaff`) VALU
 
 
 INSERT INTO `stylesheets` (`ID`, `Name`, `Description`, `Default`, `Additions`, `Color`) VALUES
-  (1, 'matcha', 'BioTorrents.de Stylesheet', '0', 'radio=noto_sans;radio=noto_serif;radio=opendyslexic;radio=comic_neue', '#000000'),
-  (2, 'bookish', 'Template Stylesheet', '1', 'radio=noto_sans;radio=noto_serif;radio=opendyslexic;radio=comic_neue', '#000000'),
-  (3, 'oppai', 'Oppaitime Stylesheet', '0', 'radio=noto_sans;radio=noto_serif;radio=opendyslexic;radio=comic_neue', '#fbc2e5'),
-  (4, 'beluga', 'Beluga Stylesheet', '0', 'radio=noto_sans;radio=noto_serif;radio=opendyslexic;radio=comic_neue;checkbox=pink;checkbox=haze', '#23252a'),
-  (5, 'genaviv', 'Genaviv Stylesheet', '0', 'radio=noto_sans;radio=noto_serif;radio=opendyslexic;radio=comic_neue;checkbox=fixed_header', '#0a0a0a'),
-  (6, 'postmod', 'What.cd Stylesheet', '0', 'radio=noto_sans;radio=noto_serif;radio=opendyslexic;radio=comic_neue', '#000000');
+  (1, 'matcha', 'BioTorrents.de Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue', '#000000'),
+  (2, 'bookish', 'Template Stylesheet', '1', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue', '#000000'),
+  (3, 'oppai', 'Oppaitime Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue', '#fbc2e5'),
+  (4, 'beluga', 'Beluga Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue;checkbox=pink;checkbox=haze', '#23252a'),
+  (5, 'genaviv', 'Genaviv Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue;checkbox=fixed_header', '#0a0a0a'),
+  (6, 'postmod', 'What.cd Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue;', '#000000');
 
 
 INSERT INTO `wiki_articles` (`ID`, `Revision`, `Title`, `Body`, `MinClassRead`, `MinClassEdit`, `Date`, `Author`) VALUES

sections/user/edit.php

@@ -2,11 +2,8 @@
 #declare(strict_types = 1);
 
 require_once SERVER_ROOT.'/classes/twofa.class.php';
-$UserID = $_REQUEST['userid'];
-
-if (!is_number($UserID)) {
-    error(404);
-}
+$UserID = (int) $_REQUEST['userid'];
+Security::checkInt($UserID);
 
 $DB->query("
   SELECT
@@ -223,6 +220,7 @@ $ProfileRewards = Donations::get_profile_rewards($UserID);
         <!-- Stylesheet additions -->
         <tr id="style_additions_tr"
           class="<?=($Stylesheets[$LoggedUser['StyleID']]['Additions'][0] ?? false)?'':'hidden'?>">
+
           <td class="label">
             <strong>Stylesheet additions</strong>
           </td>
@@ -230,64 +228,66 @@ $ProfileRewards = Donations::get_profile_rewards($UserID);
           <td>
             <?php
           foreach ($Stylesheets as $Style) {
-              $StyleAdditions = explode(';', $Style['Additions']);
 
-              # Main ul
-              echo '<ul class="nobullet style_addition'; # open quote
+              # Main section
+              echo '<section class="style_additions'; # open quote
               echo ($Style['ID'] === $Stylesheets[$LoggedUser['StyleID']]['ID'])
-                ? '"'
-                : ' hidden"';
-              echo ' id="style_addition_' . $Style['Name'] . '">';
+                ? '"' # close quote
+                : ' hidden"'; # hide
+              echo ' id="style_additions_' . $Style['Name'] . '">';
  
-              $Checked = (in_array('default_font', $SiteOptions['StyleAdditions'] ?? [])
-              ? 'checked'
-              : '');
-
-              echo <<<HTML
-              <li>
-                <input type="radio" name="style_additions[]" value="default_font"
-                  id="default_font" $Checked />
-                <label for="default_font">default_font</label>
-              </li>
-HTML;
-
               # For each style addition
+              $StyleAdditions = explode(';', $Style['Additions']);
+              $Select = ['default_font'];
+              $Checkbox = [];
+
               foreach ($StyleAdditions as $i => $Addition) {
-                  # Radio options, e.g., fonts
-                  if (preg_match('/radio/', $Addition)) {
-                      $Addition = explode('=', $Addition)[1];
-                      $Checked = (in_array($Addition, $SiteOptions['StyleAdditions'] ?? [])
-                          ? 'checked'
-                          : '');
-
-                      echo <<<HTML
-                      <li>
-                        <input type="radio" name="style_additions[]" value="$Addition"
-                          id="addition_$Addition" $Checked />
-                        <label for="addition_$Addition">$Addition</label>
-                      </li>
-HTML;
-                  }
+                  $Types = explode('=', $Addition);
+             
+                  switch ($Types[0]) {
+                  case 'select':
+                      array_push($Select, $Types[1]);
+                      break;
 
-                  # Checkbox options, e.g., pink and haze
-                  if (preg_match('/checkbox/', $Addition)) {
-                      $Addition = explode('=', $Addition)[1];
-                      $Checked = (in_array($Addition, $SiteOptions['StyleAdditions'] ?? [])
-                          ? 'checked'
-                          : '');
-
-                      echo <<<HTML
-                      <li>
-                        <input type="checkbox" name="style_additions[]" value="$Addition"
-                          id="addition_$Addition" $Checked />
-                        <label for="addition_$Addition">$Addition</label>
-                      </li>
-HTML;
+                  case 'checkbox':
+                      array_push($Checkbox, $Types[1]);
+                      break;
+
+                  default:
+                      break;
+
+                  }
+              } # foreach $Addition
+
+              # Fix to prevent multiple font entries
+              if ($Style['ID'] === $Stylesheets[$LoggedUser['StyleID']]['ID']) {
+                  # Select options, e.g., fonts
+                  echo "<select class='style_additions' name='style_additions[]'>";
+  
+                  foreach ($Select as $Option) {
+                      $Selected = (in_array($Option, $SiteOptions['StyleAdditions'])
+                        ? 'selected'
+                        : '');
+                      echo "<option value='$Option' id='addition_$Option' $Selected>$Option</option>";
                   }
+                  echo '</select>';
               }
 
-              echo '</ul>';
-          } ?>
+              # Checkbox options, e.g., pink and haze
+              foreach ($Checkbox as $Option) {
+                  $Checked = (in_array($Option, $SiteOptions['StyleAdditions'])
+                  ? 'checked'
+                  : '');
+
+                  echo <<<HTML
+                  <input type="checkbox" name="style_additions[]" value="$Option"
+                    id="addition_$Option" $Checked />
+                  <label for="addition_$Option">$Option</label>
+HTML;
+              }
+              echo '</section>';
+          } # foreach $Style
+          ?>
           </td>
         </tr>
 

sections/user/take_edit.php

@@ -1,12 +1,13 @@
 <?php
 #declare(strict_types=1);
 
-authorize();
-$UserID = $_REQUEST['userid'];
+/**
+ * START CHECKS
+ */
 
-if (!is_number($UserID)) {
-    error(404);
-}
+authorize();
+$UserID = (int) $_REQUEST['userid'];
+Security::checkInt($UserID);
 
 // For this entire page, we should generally be using $UserID not $LoggedUser['ID'] and $U[] not $LoggedUser[]
 $U = Users::user_info($UserID);
@@ -51,6 +52,10 @@ if (!apcu_exists('DBKEY')) {
     error("Cannot edit profile until database fully decrypted");
 }
 
+/**
+ * END CHECKS
+ */
+
 // Begin building $Paranoia
 // Reduce the user's input paranoia until it becomes consistent
 if (isset($_POST['p_uniquegroups_l'])) {

static/styles/assets/scss/fonts.scss

@@ -34,17 +34,17 @@ $NotoSansItalic: "NotoSans-SemiCondensedItalic";
 
 @font-face {
     font-family: "NotoSans-SemiCondensed";
-    src: url($font-path + "noto/woff2/NotoSans-SemiCondensed.woff2");
+    src: url($font-path + "noto/NotoSans-SemiCondensed.woff2");
 }
 
 @font-face {
     font-family: "NotoSans-SemiCondensedBold";
-    src: url($font-path + "noto/woff2/NotoSans-SemiCondensedBold.woff2");
+    src: url($font-path + "noto/NotoSans-SemiCondensedBold.woff2");
 }
 
 @font-face {
     font-family: "NotoSans-SemiCondensedItalic";
-    src: url($font-path + "noto/woff2/NotoSans-SemiCondensedItalic.woff2");
+    src: url($font-path + "noto/NotoSans-SemiCondensedItalic.woff2");
 }
 
 /**
@@ -56,18 +56,18 @@ $NotoSerifBold: "NotoSerif-SemiCondensedBold";
 $NotoSerifItalic: "NotoSerif-SemiCondensedItalic";
 
 @font-face {
-    font-family: "NotoSerif-SemiCondensedBold";
-    src: url($font-path + "noto/woff2/NotoSerif-SemiCondensedBold.woff2");
+    font-family: "NotoSerif-SemiCondensed";
+    src: url($font-path + "noto/NotoSerif-SemiCondensed.woff2");
 }
 
 @font-face {
-    font-family: "NotoSerif-SemiCondensed";
-    src: url($font-path + "noto/woff2/NotoSerif-SemiCondensed.woff2");
+    font-family: "NotoSerif-SemiCondensedBold";
+    src: url($font-path + "noto/NotoSerif-SemiCondensedBold.woff2");
 }
 
 @font-face {
     font-family: "NotoSerif-SemiCondensedItalic";
-    src: url($font-path + "noto/woff2/NotoSerif-SemiCondensedItalic.woff2");
+    src: url($font-path + "noto/NotoSerif-SemiCondensedItalic.woff2");
 }
 
 /**
@@ -75,16 +75,154 @@ $NotoSerifItalic: "NotoSerif-SemiCondensedItalic";
  */
 
 $NotoMono: "NotoSansMono-SemiCondensed";
-$NotoMonoBold: "NotoSansMono-SemiCondensed";
+$NotoMonoBold: "NotoSansMono-SemiCondensedBold";
 
 @font-face {
     font-family: "NotoSansMono-SemiCondensed";
-    src: url($font-path + "noto/woff2/NotoSansMono-SemiCondensed.woff2");
+    src: url($font-path + "noto/NotoSansMono-SemiCondensed.woff2");
 }
 
 @font-face {
     font-family: "NotoSansMono-SemiCondensedBold";
-    src: url($font-path + "noto/woff2/NotoSansMono-SemiCondensedBold.woff2");
+    src: url($font-path + "noto/NotoSansMono-SemiCondensedBold.woff2");
+}
+
+/**
+ * Luxi Sans
+ */
+
+$LuxiSans: "LuxiSans";
+$LuxiSansBold: "LuxiSans-Bold";
+$LuxiSansItalic: "LuxiSans-Italic";
+
+@font-face {
+    font-family: "LuxiSans";
+    src: url($font-path + "luxi/LuxiSans.woff2");
+}
+
+@font-face {
+    font-family: "LuxiSans-Bold";
+    src: url($font-path + "luxi/LuxiSans-Bold.woff2");
+}
+
+@font-face {
+    font-family: "LuxiSans-Italic";
+    src: url($font-path + "luxi/LuxiSans-Italic.woff2");
+}
+
+/**
+ * Luxi Serif
+ */
+
+$LuxiSerif: "LuxiSerif";
+$LuxiSerifBold: "LuxiSerif-Bold";
+$LuxiSerifItalic: "LuxiSerif-Italic";
+
+@font-face {
+    font-family: "LuxiSerif";
+    src: url($font-path + "luxi/LuxiSerif.woff2");
+}
+
+@font-face {
+    font-family: "LuxiSerif-Bold";
+    src: url($font-path + "luxi/LuxiSerif-Bold.woff2");
+}
+
+@font-face {
+    font-family: "LuxiSerif-Italic";
+    src: url($font-path + "luxi/LuxiSerif-Italic.woff2");
+}
+
+/**
+ * Luxi Mono
+ */
+
+$LuxiMono: "LuxiMono";
+$LuxiMonoBold: "LuxiMono-Bold";
+$LuxiMonoItalic: "LuxiMono-Italic";
+
+@font-face {
+    font-family: "LuxiMono";
+    src: url($font-path + "luxi/LuxiMono.woff2");
+}
+
+@font-face {
+    font-family: "LuxiMono-Bold";
+    src: url($font-path + "luxi/LuxiMono-Bold.woff2");
+}
+
+@font-face {
+    font-family: "LuxiMono-Italic";
+    src: url($font-path + "luxi/LuxiMono-Italic.woff2");
+}
+
+/**
+ * Computer Modern Sans
+ */
+
+$CModernSans: "CMUSansSerif";
+$CModernSansBold: "CMUSansSerif-Bold";
+$CModernSansItalic: "CMUSansSerif-Oblique";
+
+@font-face {
+    font-family: "CMUSansSerif";
+    src: url($font-path + "cmodern/CMUSansSerif.woff2");
+}
+
+@font-face {
+    font-family: "CMUSansSerif-Bold";
+    src: url($font-path + "cmodern/CMUSansSerif-Bold.woff2");
+}
+
+@font-face {
+    font-family: "CMUSansSerif-Oblique";
+    src: url($font-path + "cmodern/CMUSansSerif-Oblique.woff2");
+}
+
+/**
+ * Computer Modern Serif
+ */
+
+$CModernSerif: "CMUSerif-Roman";
+$CModernSerifBold: "CMUSerif-Bold";
+$CModernSerifItalic: "CMUSerif-Italic";
+
+@font-face {
+    font-family: "CMUSerif-Roman";
+    src: url($font-path + "cmodern/CMUSerif-Roman.woff2");
+}
+
+@font-face {
+    font-family: "CMUSerif-Bold";
+    src: url($font-path + "cmodern/CMUSerif-Bold.woff2");
+}
+
+@font-face {
+    font-family: "CMUSerif-Italic";
+    src: url($font-path + "cmodern/CMUSerif-Italic.woff2");
+}
+
+/**
+ * Computer Modern Mono
+ */
+
+$CModernMono: "CMUTypewriter-Regular";
+$CModernMonoBold: "CMUTypewriter-Bold";
+$CModernMonoItalic: "CMUTypewriter-Italic";
+
+@font-face {
+    font-family: "CMUTypewriter-Regular";
+    src: url($font-path + "cmodern/CMUTypewriter-Regular.woff2");
+}
+
+@font-face {
+    font-family: "CMUTypewriter-Bold";
+    src: url($font-path + "cmodern/CMUTypewriter-Bold.woff2");
+}
+
+@font-face {
+    font-family: "CMUTypewriter-Italic";
+    src: url($font-path + "cmodern/CMUTypewriter-Italic.woff2");
 }
 
 /**
@@ -120,24 +258,24 @@ $OpenDyslexicItalic: "OpenDyslexic-Italic";
 
 @font-face {
     font-family: "OpenDyslexic-Regular";
-    src: url($font-path + "dyslex/OpenDyslexic-Regular.woff");
+    src: url($font-path + "dyslex/OpenDyslexic-Regular.woff2");
 }
 
 @font-face {
     font-family: "OpenDyslexic-Bold";
-    src: url($font-path + "dyslex/OpenDyslexic-Bold.woff");
+    src: url($font-path + "dyslex/OpenDyslexic-Bold.woff2");
 }
 
 @font-face {
     font-family: "OpenDyslexic-Italic";
-    src: url($font-path + "dyslex/OpenDyslexic-Italic.woff");
+    src: url($font-path + "dyslex/OpenDyslexic-Italic.woff2");
 }
 
 /*
  * Theme Options
  */
 
-@mixin font-styles($b, $i) {
+@mixin font-styles($b, $i, $m, $mb, $mi: null) {
     b,
     strong {
         font-family: $b;
@@ -150,26 +288,78 @@ $OpenDyslexicItalic: "OpenDyslexic-Italic";
         font-family: $i;
         font-style: normal;
     }
+
+    code,
+    pre,
+    tt {
+        font-family: $m;
+        margin-bottom: 1rem;
+        word-wrap: break-word;
+        /* word-wrap: pre; */
+
+        b,
+        strong {
+            font-family: $mb;
+            font-weight: normal;
+        }
+
+        i,
+        em {
+            /* Noto Mono workaround: no italics */
+            @if ($mi) {
+                font-family: $mi;
+                font-style: normal;
+            }
+        }
+    }
 }
 
+/* Noto Sans */
 body.style_noto_sans {
     font-family: $NotoSans, sans-serif;
-    @include font-styles($NotoSansBold, $NotoSansItalic);
+    @include font-styles($NotoSansBold, $NotoSansItalic, $NotoMono, $NotoMonoBold);
 }
 
+/* Noto Serif */
 body.style_noto_serif {
     font-family: $NotoSerif, serif;
-    @include font-styles($NotoSerifBold, $NotoSerifItalic);
+    @include font-styles($NotoSerifBold, $NotoSerifItalic, $NotoMono, $NotoMonoBold);
+}
+
+/* Luxi Sans */
+body.style_luxi_sans {
+    font-family: $LuxiSans, sans-serif;
+    @include font-styles($LuxiSansBold, $LuxiSansItalic, $LuxiMono, $LuxiMonoBold, $LuxiMonoItalic);
+}
+
+/* Luxi Serif */
+body.style_luxi_serif {
+    font-family: $LuxiSerif, serif;
+    @include font-styles($LuxiSerifBold, $LuxiSerifItalic, $LuxiMono, $LuxiMonoBold, $LuxiMonoItalic);
+}
+
+/* Computer Modern Sans */
+body.style_cmodern_sans {
+    font-family: $CModernSans, sans-serif;
+    @include font-styles($CModernSansBold, $CModernSansItalic, $CModernMono, $CModernMonoBold, $CModernMonoItalic);
+}
+
+/* Computer Modern Serif */
+body.style_cmodern_serif {
+    font-family: $CModernSerif, serif;
+    @include font-styles($CModernSerifBold, $CModernSerifItalic, $CModernMono, $CModernMonoBold, $CModernMonoItalic);
 }
 
+/* OpenDyslexic */
 body.style_opendyslexic {
     font-family: $OpenDyslexic, sans-serif;
-    @include font-styles($OpenDyslexicBold, $OpenDyslexicItalic);
+    @include font-styles($OpenDyslexicBold, $OpenDyslexicItalic, $NotoMono, $NotoMonoBold);
 }
 
+/* Comic Neue */
 body.style_comic_neue {
     font-family: $ComicNeue, sans-serif;
-    @include font-styles($ComicNeueBold, $ComicNeueItalic);
+    @include font-styles($ComicNeueBold, $ComicNeueItalic, $NotoMono, $NotoMonoBold);
 }
 
 /**
@@ -181,7 +371,7 @@ body.style_comic_neue {
     font-family: "Open Sans";
     font-style: normal;
     font-weight: 400;
-    src: url($font-path + "misc/woff2/OpenSans-Regular.woff2");
+    src: url($font-path + "misc/OpenSans-Regular.woff2");
 }
 
 /* latin */
@@ -189,7 +379,7 @@ body.style_comic_neue {
     font-family: "Open Sans";
     font-style: normal;
     font-weight: 600;
-    src: url($font-path + "misc/woff2/OpenSans-SemiBold.woff2");
+    src: url($font-path + "misc/OpenSans-SemiBold.woff2");
 }
 
 /**
@@ -201,7 +391,7 @@ body.style_comic_neue {
     font-family: "Source Sans Pro";
     font-style: normal;
     font-weight: 400;
-    src: url($font-path + "misc/woff2/SourceSansPro-Regular.woff2");
+    src: url($font-path + "misc/SourceSansPro-Regular.woff2");
     unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 
@@ -210,7 +400,7 @@ body.style_comic_neue {
     font-family: "Source Sans Pro";
     font-style: normal;
     font-weight: 400;
-    src: url($font-path + "misc/woff2/SourceSansPro-Regular.woff2");
+    src: url($font-path + "misc/SourceSansPro-Regular.woff2");
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215,
         U+E0FF, U+EFFD, U+F000;
 }

static/styles/global/scss/layout.scss

@@ -26,6 +26,13 @@
     width: 50%;
 }
 
+/**
+ * Section elements
+ */
+.style_addition input {
+    margin-left: 0.5rem;
+}
+
 /**
  * Aside elements
  */