Add better formatting for <pre> tags in the template files.

spawnfest · Oct 29, 2023 · 7145a10 · 7145a10
1 parent 0c58d6b
commit 7145a10
Showing 1 changed file with 54 additions and 38 deletions.
diff --git a/priv/chapter1.html b/priv/chapter1.html
@@ -4,44 +4,60 @@
     <title>Tank Bison with lazer eyes.</title>
     <meta charset="UTF-8">
     <script src="https://unpkg.com/htmx.org@1.9.6"></script>
-    <style>
-      html {
-          max-width: 80ch;
-          padding: 3em 1em;
-          margin: auto;
-          line-height: 1.75;
-          font-size: 1.25em;
-          background-color: rgb( 0 70 67);
-          color: rgb(171 209 198);
-          font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-          line-height: 1.5;
-      }
-
-      button {
-          background-color: #f9bc60;
-          color: #001e1d;
-          border-radius: 9999px;
-          width: 10rem;
-          height: 4rem;
-          font-size: 1rem; /* 16px */
-      }
-
-      a {
-          color: #FFFFFF;
-      }
-
-      p {
-          padding-left: 1.25rem; /* 20px */
-          padding-right: 1.25rem; /* 20px */
-      }
-
-      div.reallybig {
-          font-size: 126px;
-          color: rgb(255,255,102);
-      }
-
-
-    </style>
+      <style>
+    html {
+        max-width: 80ch;
+        padding: 3em 1em;
+        margin: auto;
+        line-height: 1.75;
+        font-size: 1.25em;
+        background-color: rgb( 0 70 67);
+        color: rgb(171 209 198);
+        font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+        line-height: 1.5;
+    }
+
+    button {
+        background-color: #f9bc60;
+        color: #001e1d;
+        border-radius: 44px;
+        width: 10rem;
+        height: 4rem;
+        font-size: 1rem; /* 16px */
+        padding: 20px;
+    }
+
+    a {
+        color: #FFFFFF;
+    }
+
+    p {
+        padding-left: 1.25rem; /* 20px */
+        padding-right: 1.25rem; /* 20px */
+        padding-top: 1.25rem;
+    }
+
+    div {
+        padding-left: 1.25rem; /* 20px */
+        padding-right: 1.25rem; /* 20px */
+        padding-top: 1.25rem; /* 20px */
+    }
+
+    pre {
+        background-color: #BDB76B;
+        color: #001e1d;
+    }
+
+    /* Do this because otherwise i can't see the highlighting */
+    pre::selection {
+        /* Change highlight background color to black */
+        background: #000;
+        /* Change highlight text color to red */
+        color: #ff0000;
+    }
+
+  </style>
+
 </head>
 
 <body class="px-10">