Added Font-Size message to Development Toolbar.

config/development.cjs

@@ -2,4 +2,6 @@ module.exports = {
   mode: "development",
   cssUrl: "https://",
   blockName: "template",
+  baseView: "container",
+  remToPx: 16,
 }

layouts/partials/toolbar.hbs

@@ -1,5 +1,5 @@
 <header class="page_toolbar">
-  <div>
+  <div class="page_toolbar__data_options">
     <label for="data-options">Data Options: </label>
 
     <select name="data" id="data-options">
@@ -8,4 +8,8 @@
       {{/each}}
     </select>
   </div>
+
+  <div>
+    Sizes: <b>1rem = {{ config.remToPx }}px</b>
+  </div>
 </header>

layouts/styles/page--main.css

@@ -4,17 +4,44 @@ body {
 }
 
 header.page_toolbar {
+  --gap: 2.5rem;
+
   font-family: Arial, sans-serif;
   background-color: #ccc;
   padding: 1rem;
 
   display: flex;
   justify-content: center;
+  gap: var(--gap);
   align-items: center;
   margin-bottom: 2rem;
 }
 
+header.page_toolbar > div {
+  position: relative;
+}
+
+header.page_toolbar > div:not(:first-child):after {
+  content: '|';
+  position: absolute;
+  left: calc(var(--gap) / 2 * -1);
+  top: 40%;
+  font-size: 20px;
+  line-height: 1;
+  transform: translateY(-50%);
+}
+
 header.page_toolbar select {
   font-size: 0.85rem;
   padding: 0.25rem;
 }
+
+@media (max-width: 1024px) {
+  header.page_toolbar > div {
+    display: none;
+  }
+
+  header.page_toolbar .page_toolbar__data_options {
+    display: block;
+  }
+}

server.js

@@ -61,6 +61,7 @@ app.get('/', async (req, res) => {
           active: jsonFileName === name,
         };
       }),
+      remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
       cssUrl: config.get('cssUrl'),
       blockName: config.get('blockName')
     }