Merge pull request #13 from basecamp/update-error-pages

Update error page styling and add SVGs
basecamp · Sep 12, 2024 · 57e9891 · 57e9891
2 parents 82477aa + ee1563f
commit 57e9891
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 119 deletions.
diff --git a/internal/pages/404.html b/internal/pages/404.html
@@ -31,10 +31,11 @@
         color: #FFF;
         display: grid;
         font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-        font-size: clamp(1.25rem, 2vw, 2rem);
+        font-size: clamp(1rem, 2.5vw, 2rem);
         -webkit-font-smoothing: antialiased;
         font-style: normal;
         font-weight: 400;
+        letter-spacing: -0.0025em;
         line-height: 1.4;
         min-height: 100vh;
         place-items: center;
@@ -59,42 +60,40 @@
 
       main {
         display: grid;
-        gap: 1.4em;
+        gap: 1em;
         padding: 2em;
         place-items: center;
         text-align: center;
-        width: min(100%, 36em);
       }
 
       main header {
-        position: relative;
-        width: 100%;
+        width: min(100%, 18em);
       }
 
-      main header h1 {
-        font-size: 675%;
-        font-weight: 700;
-        letter-spacing: -0.025em;
-        line-height: 1;
-        opacity: 0.1;
+      main header svg {
+        height: auto;
+        max-width: 100%;
+        width: 100%;
       }
 
-      main header h2 {
-        display: grid;
-        font-size: 135%;
-        font-weight: 700;
-        height: 100%;
-        left: 0;
-        place-content: center;
-        position: absolute;
-        top: 0;
-        width: 100%;
+      main article {
+        width: min(100%, 30em);
       }
 
       main article p {
         font-size: 75%;
       }
 
+      main article br {
+
+        display: none;
+
+        @media(min-width: 48em) {
+          display: inline;
+        }
+
+      }
+
     </style>
 
   </head>
@@ -104,8 +103,7 @@
     <main>
 
       <header>
-        <h1>404</h1>
-        <h2>Not Found</h2>
+        <svg fill="none" height="154" viewBox="0 0 618 154" width="618" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m170.31 3.49999h32.34l-40.74 91.14001h30.24v-29.61h32.76v29.61h17.85v26.88h-17.85v28.98h-32.76v-28.98h-64.89v-25.83zm138.429 149.94001c-34.44 0-57.54-21.21-57.54-52.5v-47.88c0-31.29 23.1-52.50001 57.54-52.50001s57.54 21.21001 57.54 52.50001v47.88c0 31.29-23.1 52.5-57.54 52.5zm21.84-100.38c0-16.17-8.61-23.31-21.84-23.31s-21.84 7.14-21.84 23.31v47.88c0 16.17 8.61 23.31 21.84 23.31s21.84-7.14 21.84-23.31zm89.787-49.56001h32.34l-40.74 91.14001h30.24v-29.61h32.76v29.61h17.85v26.88h-17.85v28.98h-32.76v-28.98h-64.89v-25.83z" opacity=".1"/><path d="m237.052 91.5h-6.888l-11.004-17.178v17.178h-7.056v-29.4h6.846l11.046 17.178v-17.178h7.056zm24.922-12.474v2.94c0 5.796-3.864 10.038-10.71 10.038s-10.71-4.242-10.71-10.038v-2.94c0-5.796 3.864-10.038 10.71-10.038s10.71 4.242 10.71 10.038zm-6.846-.378c0-2.226-1.176-4.074-3.864-4.074s-3.864 1.848-3.864 4.074v3.696c0 2.226 1.176 4.074 3.864 4.074s3.864-1.848 3.864-4.074zm11.008-15.078h7.056v5.922h4.242v5.46h-4.242v9.366c0 1.008.504 1.47 1.596 1.47h2.31v5.712h-4.662c-4.2 0-6.3-2.478-6.3-6.51v-10.038h-2.856v-5.46h2.856zm30.818 27.93h-7.224v-29.4h20.664v6.006h-13.44v6.342h12.18v6.006h-12.18zm36.534-12.474v2.94c0 5.796-3.864 10.038-10.71 10.038s-10.71-4.242-10.71-10.038v-2.94c0-5.796 3.864-10.038 10.71-10.038s10.71 4.242 10.71 10.038zm-6.846-.378c0-2.226-1.176-4.074-3.864-4.074s-3.864 1.848-3.864 4.074v3.696c0 2.226 1.176 4.074 3.864 4.074s3.864-1.848 3.864-4.074zm23.056-9.156h7.056v22.008h-6.762v-2.562c-1.134 2.016-3.318 3.066-6.132 3.066-4.914 0-7.518-3.234-7.518-8.316v-14.196h7.056v13.314c0 2.016 1.008 3.276 3.024 3.276 1.806 0 3.276-.84 3.276-3.36zm18.084 22.008h-7.056v-22.008h6.762v2.562c1.134-2.016 3.318-3.066 6.132-3.066 5.04 0 7.728 3.234 7.728 8.316v14.196h-7.056v-13.104c0-2.016-1.05-3.276-3.192-3.276-1.806 0-3.318.84-3.318 3.36zm38.533-30.66v30.66h-6.72v-2.31c-.672 1.218-3.024 2.814-6.048 2.814-6.216 0-9.324-4.704-9.324-9.702v-3.612c0-4.998 3.108-9.702 9.324-9.702 2.646 0 4.746 1.218 5.712 2.352v-10.5zm-7.056 21.21v-3.108c0-2.772-1.848-4.158-3.948-4.158-2.772 0-4.032 1.68-4.032 4.284v2.856c0 2.52 1.26 4.284 4.032 4.284 2.1 0 3.948-1.386 3.948-4.158z"/></g></svg>
       </header>
 
       <article>

diff --git a/internal/pages/413.html b/internal/pages/413.html
@@ -31,10 +31,11 @@
         color: #FFF;
         display: grid;
         font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-        font-size: clamp(1.25rem, 2vw, 2rem);
+        font-size: clamp(1rem, 2.5vw, 2rem);
         -webkit-font-smoothing: antialiased;
         font-style: normal;
         font-weight: 400;
+        letter-spacing: -0.0025em;
         line-height: 1.4;
         min-height: 100vh;
         place-items: center;
@@ -59,42 +60,40 @@
 
       main {
         display: grid;
-        gap: 1.4em;
+        gap: 1em;
         padding: 2em;
         place-items: center;
         text-align: center;
-        width: min(100%, 36em);
       }
 
       main header {
-        position: relative;
-        width: 100%;
+        width: min(100%, 18em);
       }
 
-      main header h1 {
-        font-size: 675%;
-        font-weight: 700;
-        letter-spacing: -0.025em;
-        line-height: 1;
-        opacity: 0.1;
+      main header svg {
+        height: auto;
+        max-width: 100%;
+        width: 100%;
       }
 
-      main header h2 {
-        display: grid;
-        font-size: 135%;
-        font-weight: 700;
-        height: 100%;
-        left: 0;
-        place-content: center;
-        position: absolute;
-        top: 0;
-        width: 100%;
+      main article {
+        width: min(100%, 30em);
       }
 
       main article p {
         font-size: 75%;
       }
 
+      main article br {
+
+        display: none;
+
+        @media(min-width: 48em) {
+          display: inline;
+        }
+
+      }
+
     </style>
 
   </head>
@@ -104,12 +103,11 @@
     <main>
 
       <header>
-        <h1>413</h1>
-        <h2>Content Too Large</h2>
+        <svg fill="none" height="154" viewBox="0 0 618 154" width="618" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m197.38 3.49999h32.34l-40.74 91.14001h30.24v-29.61h32.76v29.61h17.85v26.88h-17.85v28.98h-32.76v-28.98h-64.89v-25.83zm136.497 147.00001h-35.7v-111.09l-31.71 10.29v-31.5l37.8-14.70001h29.61zm25.598-118.44v-28.56001h95.97v28.77001l-32.55 30.45c20.16 3.15 39.06 15.33 39.06 43.05s-25.2 47.67-56.28 47.67c-30.03 0-54.18-15.96-54.6-47.67h33.39c.63 11.55 8.61 19.11 21.42 19.11 13.02 0 20.79-7.98 20.79-18.06 0-10.92-6.72-17.64-21-17.64h-22.26v-27.93l28.56-29.19z" opacity=".1"/><path d="m142.664 79.068c0 4.158 1.764 7.056 6.132 7.056 3.864 0 5.712-2.52 5.838-5.46h6.678c-.084 6.216-4.662 11.424-12.432 11.424-9.072 0-13.44-5.712-13.44-13.356v-3.864c0-7.644 4.368-13.356 13.44-13.356 7.77 0 12.348 5.208 12.432 11.424h-6.678c-.126-2.94-1.974-5.46-5.838-5.46-4.368 0-6.132 2.898-6.132 7.056zm42.463-.042v2.94c0 5.796-3.864 10.038-10.71 10.038s-10.71-4.242-10.71-10.038v-2.94c0-5.796 3.864-10.038 10.71-10.038s10.71 4.242 10.71 10.038zm-6.846-.378c0-2.226-1.176-4.074-3.864-4.074s-3.864 1.848-3.864 4.074v3.696c0 2.226 1.176 4.074 3.864 4.074s3.864-1.848 3.864-4.074zm16.965 12.852h-7.056v-22.008h6.762v2.562c1.134-2.016 3.318-3.066 6.132-3.066 5.04 0 7.728 3.234 7.728 8.316v14.196h-7.056v-13.104c0-2.016-1.05-3.276-3.192-3.276-1.806 0-3.318.84-3.318 3.36zm18.546-27.93h7.056v5.922h4.242v5.46h-4.242v9.366c0 1.008.504 1.47 1.596 1.47h2.31v5.712h-4.662c-4.2 0-6.3-2.478-6.3-6.51v-10.038h-2.856v-5.46h2.856zm33.706 19.152h-13.692v.504c0 2.184 1.302 3.822 3.78 3.822 1.974 0 3.108-1.008 3.57-2.1h6.216c-.756 4.074-4.788 7.056-9.786 7.056-6.342 0-10.584-3.654-10.584-9.954v-2.73c0-6.132 3.738-10.332 10.416-10.332s10.08 4.452 10.08 9.702zm-13.692-4.578v.462h7.224v-.798c0-2.184-1.092-3.822-3.57-3.822-2.562 0-3.654 1.638-3.654 4.158zm23.997 13.356h-7.056v-22.008h6.762v2.562c1.134-2.016 3.318-3.066 6.132-3.066 5.04 0 7.728 3.234 7.728 8.316v14.196h-7.056v-13.104c0-2.016-1.05-3.276-3.192-3.276-1.806 0-3.318.84-3.318 3.36zm18.546-27.93h7.056v5.922h4.242v5.46h-4.242v9.366c0 1.008.504 1.47 1.596 1.47h2.31v5.712h-4.662c-4.2 0-6.3-2.478-6.3-6.51v-10.038h-2.856v-5.46h2.856zm20.514-1.47h23.1v6.09h-7.938v23.31h-7.224v-23.31h-7.938zm42.532 16.926v2.94c0 5.796-3.864 10.038-10.71 10.038s-10.71-4.242-10.71-10.038v-2.94c0-5.796 3.864-10.038 10.71-10.038s10.71 4.242 10.71 10.038zm-6.846-.378c0-2.226-1.176-4.074-3.864-4.074s-3.864 1.848-3.864 4.074v3.696c0 2.226 1.176 4.074 3.864 4.074s3.864-1.848 3.864-4.074zm30.405.378v2.94c0 5.796-3.864 10.038-10.71 10.038s-10.71-4.242-10.71-10.038v-2.94c0-5.796 3.864-10.038 10.71-10.038s10.71 4.242 10.71 10.038zm-6.846-.378c0-2.226-1.176-4.074-3.864-4.074s-3.864 1.848-3.864 4.074v3.696c0 2.226 1.176 4.074 3.864 4.074s3.864-1.848 3.864-4.074zm19.369-16.548h7.224v23.394h12.978v6.006h-20.202zm43.72 29.4h-6.762v-1.848c-1.26 1.47-3.654 2.352-6.51 2.352-5.04 0-8.064-2.898-8.064-6.93 0-4.536 3.402-6.846 8.526-6.846 2.646 0 4.662.756 5.754 1.638v-2.562c0-1.638-1.092-2.856-3.066-2.856-1.47 0-2.604.504-3.192 1.596h-6.426c.924-4.41 4.662-7.056 9.828-7.056 6.258 0 9.912 3.402 9.912 8.82zm-10.92-3.99c2.142 0 3.864-1.092 3.864-2.562s-1.596-2.562-3.78-2.562c-2.394 0-3.906.84-3.906 2.562 0 1.68 1.596 2.562 3.822 2.562zm27.739-18.186v6.93h-.924c-3.276 0-5.04 1.344-5.04 5.166v10.08h-7.056v-22.008h6.678v3.864c.672-3.276 2.856-4.032 6.006-4.032zm23.213.168v21.336c0 4.788-4.494 8.484-11.004 8.484-5.376 0-9.912-2.646-10.668-7.056h6.846c.546 1.218 2.016 1.806 3.822 1.806 2.478 0 3.948-1.428 3.948-3.444v-2.604c-1.05 1.26-3.318 2.394-5.754 2.394-6.09 0-9.072-4.452-9.072-9.198v-3.024c0-4.872 3.024-9.198 9.114-9.198 3.024 0 5.376 1.596 6.048 2.814v-2.31zm-7.056 9.03c0-2.52-1.848-3.822-3.948-3.822-2.646 0-3.906 1.68-3.906 3.948v2.1c0 2.31 1.26 3.948 3.864 3.948 2.394 0 3.99-1.428 3.99-3.822zm30.623 4.2h-13.692v.504c0 2.184 1.302 3.822 3.78 3.822 1.974 0 3.108-1.008 3.57-2.1h6.216c-.756 4.074-4.788 7.056-9.786 7.056-6.342 0-10.584-3.654-10.584-9.954v-2.73c0-6.132 3.738-10.332 10.416-10.332s10.08 4.452 10.08 9.702zm-13.692-4.578v.462h7.224v-.798c0-2.184-1.092-3.822-3.57-3.822-2.562 0-3.654 1.638-3.654 4.158z"/></g></svg>
       </header>
 
       <article>
-        <p><strong>The file or data you are trying to upload exceeds the allowed size.</strong> Please try again with a smaller file. If you continue to see this error, contact the application owner.</p>
+        <p><strong>The file or data you are trying to upload exceeds the allowed size.</strong> Please try again<br> with a smaller file. If you continue to see this error, contact the application owner.</p>
       </article>
 
     </main>

diff --git a/internal/pages/502.html b/internal/pages/502.html
@@ -31,10 +31,11 @@
         color: #FFF;
         display: grid;
         font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-        font-size: clamp(1.25rem, 2vw, 2rem);
+        font-size: clamp(1rem, 2.5vw, 2rem);
         -webkit-font-smoothing: antialiased;
         font-style: normal;
         font-weight: 400;
+        letter-spacing: -0.0025em;
         line-height: 1.4;
         min-height: 100vh;
         place-items: center;
@@ -59,42 +60,40 @@
 
       main {
         display: grid;
-        gap: 1.4em;
+        gap: 1em;
         padding: 2em;
         place-items: center;
         text-align: center;
-        width: min(100%, 36em);
       }
 
       main header {
-        position: relative;
-        width: 100%;
+        width: min(100%, 18em);
       }
 
-      main header h1 {
-        font-size: 675%;
-        font-weight: 700;
-        letter-spacing: -0.025em;
-        line-height: 1;
-        opacity: 0.1;
+      main header svg {
+        height: auto;
+        max-width: 100%;
+        width: 100%;
       }
 
-      main header h2 {
-        display: grid;
-        font-size: 135%;
-        font-weight: 700;
-        height: 100%;
-        left: 0;
-        place-content: center;
-        position: absolute;
-        top: 0;
-        width: 100%;
+      main article {
+        width: min(100%, 30em);
       }
 
       main article p {
         font-size: 75%;
       }
 
+      main article br {
+
+        display: none;
+
+        @media(min-width: 48em) {
+          display: inline;
+        }
+
+      }
+
     </style>
 
   </head>
@@ -104,12 +103,11 @@
     <main>
 
       <header>
-        <h1>502</h1>
-        <h2>Bad Gateway</h2>
+        <svg fill="none" height="154" viewBox="0 0 618 154" width="618" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m241.397 100.94c0 28.98-23.73 52.5-57.96 52.5-26.46 0-50.82-13.86-54.18-43.68h34.02c1.47 8.82 9.24 14.7 20.16 14.7 14.28 0 22.68-9.66 22.68-22.47 0-12.39-7.98-22.05-22.26-22.05-9.87 0-16.8 3.99-19.74 10.5h-32.76l14.07-86.94001h82.32v28.35001h-54.18l-4.41 26.04c6.09-4.62 14.07-6.72 24.15-6.72 25.62 0 48.09 18.06 48.09 49.77zm69.29 52.5c-34.44 0-57.54-21.21-57.54-52.5v-47.88c0-31.29 23.1-52.50001 57.54-52.50001s57.54 21.21001 57.54 52.50001v47.88c0 31.29-23.1 52.5-57.54 52.5zm21.84-100.38c0-16.17-8.61-23.31-21.84-23.31s-21.84 7.14-21.84 23.31v47.88c0 16.17 8.61 23.31 21.84 23.31s21.84-7.14 21.84-23.31zm84.957-1.68h-34.23v-4.41c0-30.45 19.95-46.41001 51.45-46.41001 31.71 0 52.92 17.64001 52.92 44.94001 0 22.68-15.33 36.54-31.29 49.98l-30.45 25.83h60.27v29.19h-104.37v-27.09l57.96-55.44c7.56-7.35 12.18-13.86 12.18-22.26 0-10.29-7.14-15.96-17.01-15.96-11.97 0-17.43 7.14-17.43 18.9z" opacity=".1"/><path d="m209.029 83.268c0 5.04-4.326 8.232-10.122 8.232h-14.238v-29.4h14.07c5.544 0 8.484 3.36 8.484 7.518 0 3.108-1.26 5.292-3.864 6.678 3.192.882 5.67 2.856 5.67 6.972zm-7.14-.672c0-1.974-1.26-3.15-3.36-3.15h-6.804v6.384h6.93c2.058 0 3.234-1.344 3.234-3.234zm-10.164-8.778h5.376c1.89 0 2.94-1.218 2.94-3.15 0-1.806-1.134-2.898-3.024-2.898h-5.292zm40.518 17.682h-6.762v-1.848c-1.26 1.47-3.654 2.352-6.51 2.352-5.04 0-8.064-2.898-8.064-6.93 0-4.536 3.402-6.846 8.526-6.846 2.646 0 4.662.756 5.754 1.638v-2.562c0-1.638-1.092-2.856-3.066-2.856-1.47 0-2.604.504-3.192 1.596h-6.426c.924-4.41 4.662-7.056 9.828-7.056 6.258 0 9.912 3.402 9.912 8.82zm-10.92-3.99c2.142 0 3.864-1.092 3.864-2.562s-1.596-2.562-3.78-2.562c-2.394 0-3.906.84-3.906 2.562 0 1.68 1.596 2.562 3.822 2.562zm35.888-26.67v30.66h-6.72v-2.31c-.672 1.218-3.024 2.814-6.048 2.814-6.216 0-9.324-4.704-9.324-9.702v-3.612c0-4.998 3.108-9.702 9.324-9.702 2.646 0 4.746 1.218 5.712 2.352v-10.5zm-7.056 21.21v-3.108c0-2.772-1.848-4.158-3.948-4.158-2.772 0-4.032 1.68-4.032 4.284v2.856c0 2.52 1.26 4.284 4.032 4.284 2.1 0 3.948-1.386 3.948-4.158zm45.371-9.786h-6.888c-.126-2.478-2.058-4.788-5.586-4.788-4.032 0-6.09 2.226-6.09 6.888v4.62c0 4.242 1.68 7.308 6.09 7.308 3.402 0 5.544-1.932 5.67-4.662h-5.712v-5.838h12.81v4.158c0 7.35-5.376 12.138-12.936 12.138-8.736 0-13.146-5.88-13.146-13.272v-4.116c0-8.19 5.124-13.188 13.104-13.188 7.854 0 12.516 4.494 12.684 10.752zm24.228 19.236h-6.762v-1.848c-1.26 1.47-3.654 2.352-6.51 2.352-5.04 0-8.064-2.898-8.064-6.93 0-4.536 3.402-6.846 8.526-6.846 2.646 0 4.662.756 5.754 1.638v-2.562c0-1.638-1.092-2.856-3.066-2.856-1.47 0-2.604.504-3.192 1.596h-6.426c.924-4.41 4.662-7.056 9.828-7.056 6.258 0 9.912 3.402 9.912 8.82zm-10.92-3.99c2.142 0 3.864-1.092 3.864-2.562s-1.596-2.562-3.78-2.562c-2.394 0-3.906.84-3.906 2.562 0 1.68 1.596 2.562 3.822 2.562zm15.614-23.94h7.056v5.922h4.242v5.46h-4.242v9.366c0 1.008.504 1.47 1.596 1.47h2.31v5.712h-4.662c-4.2 0-6.3-2.478-6.3-6.51v-10.038h-2.856v-5.46h2.856zm33.706 19.152h-13.692v.504c0 2.184 1.302 3.822 3.78 3.822 1.974 0 3.108-1.008 3.57-2.1h6.216c-.756 4.074-4.788 7.056-9.786 7.056-6.342 0-10.584-3.654-10.584-9.954v-2.73c0-6.132 3.738-10.332 10.416-10.332s10.08 4.452 10.08 9.702zm-13.692-4.578v.462h7.224v-.798c0-2.184-1.092-3.822-3.57-3.822-2.562 0-3.654 1.638-3.654 4.158zm33.915-8.652 4.032 13.356 2.478-13.356h6.846l-5.67 22.008h-6.384l-4.326-13.314-4.326 13.314h-6.384l-5.67-22.008h6.846l2.478 13.356 4.032-13.356zm34.794 22.008h-6.762v-1.848c-1.26 1.47-3.654 2.352-6.51 2.352-5.04 0-8.064-2.898-8.064-6.93 0-4.536 3.402-6.846 8.526-6.846 2.646 0 4.662.756 5.754 1.638v-2.562c0-1.638-1.092-2.856-3.066-2.856-1.47 0-2.604.504-3.192 1.596h-6.426c.924-4.41 4.662-7.056 9.828-7.056 6.258 0 9.912 3.402 9.912 8.82zm-10.92-3.99c2.142 0 3.864-1.092 3.864-2.562s-1.596-2.562-3.78-2.562c-2.394 0-3.906.84-3.906 2.562 0 1.68 1.596 2.562 3.822 2.562zm24.642 11.298h-6.888l2.142-7.308-7.896-22.008h7.014l4.2 14.868 3.528-14.868h7.056z"/></g></svg>
       </header>
 
       <article>
-        <p><strong>The server received an invalid response.</strong> Please try again later. If you continue to see this error, please contact the application owner.</p>
+        <p><strong>The server received an invalid response.</strong> Please try again later.<br> If you continue to see this error, please contact the application owner.</p>
       </article>
 
     </main>