Fix 404 encoding (#61)

KenniMartinezM · KenniM · johnsmartco · web-flow · commit 06b8033dec9c · 2023-02-23T14:50:30.000-07:00
* Initial rebranding styles

Changed header and footer background color for both light and dark modes

* Initial rebranding styles

* Fixing styles

The headings should no longer be underlined and cards should now show have black as font color in dark mode

* Fixes in links

The links and titles should now show properly in cards for both dark and light modes

* Rebranding styles

This commit includes multiple changes for the rebranding styles, like changing some colors.
* The right content bar should now be sticky to the page, making it always available with no need to scroll to the top
* Collapse and Expand all buttons has been added for the left navbar
* The GCX code component should now take all the entire height from the body space on the  website.
* The code blocks should no longer have bold font

* New 404 docs design

This commit includes the new content and style applied to the antora 404 page.

* Update 404.hbs

This update includes the relative paths used on the live server

* Update 404.hbs

Changed location to /en/home

* 404 footer fix

The footer for the 404 page should now be fixed at the bottom of the device

* 404 Fixes

Fixed 404 design for mobile and error on console fixed

* Update 404.hbs

Testing permissions

* Update 404.hbs

Fixed relative paths on 404 page

* Updated 404.hbs

This should fix the encoding for this page.

* Change L88 to use single plain quote in the word can't

---------

Co-authored-by: Kenni Martínez &lt;57879404+KenniM@users.noreply.github.com&gt;
Co-authored-by: John Smart &lt;johnsmartnh@gmail.com&gt;
diff --git a/gcx/styles/src/layouts/404.hbs b/gcx/styles/src/layouts/404.hbs
@@ -7,13 +7,13 @@
   <link rel="stylesheet" href="/en/home/assets/css/site.css">
   <title>Oops! We can't find that page {{#with site.title}} :: {{this}}{{/with}}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 </head>
 
 <body class="article status-404">
   <header class="header">
     <nav class="navbar">
       <div class="navbar-brand">
-        <!-- <a href="{{{or site.url (or siteRootUrl siteRootPath)}}}"> -->
         <a href="https://docs.datastax.com">
           <img src="/en/home/assets/img/logo.svg" alt="">
         </a>
@@ -85,7 +85,7 @@
     margin-top: 6rem;
     margin-bottom: 6rem;
 ">
-      <h1 class="page" style="font-size: calc(2rem + 2px);">Oops! We can’t find that page. </h1>
+      <h1 class="page" style="font-size: calc(2rem + 2px);">Oops! We can't find that page. </h1>
       <div class="paragraph">
         <p style="font-size: calc(1rem + 2px); text-align: justify;">The page you're looking for doesn't exist. It might have been moved or
           maybe there was a typo in the URL. If you typed the URL of this page manually, please double check that you
@@ -210,22 +210,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
   }
 
   document.addEventListener('click', function (event) {
-    //No es un clic en el sidebar
-    //if (!event.target.matches('li[data-depth="1"]') && !event.target.matches('.switch')) return;
-    /*    if (event.target.closest('li.nav-item.toggler')) {
-                      console.log(event.target)
-                      event.target.closest('li.nav-item.toggler').classList.toggle('is-active')
-                    }
-                    /*if ((event.target.matches('span.nav-text') ||
-                                event.target.matches('button.nav-item-toggle')) &&
-                            (event.target.offsetParent.matches('li[data-depth="1"]') ||
-                                event.target.offsetParent.matches('li[data-depth="0"]'))) {
-                            event.target.offsetParent.classList.toggle('is-active');
-                        }
-                        if (event.target.matches('li[data-depth="1"]') ||
-                            event.target.matches('li[data-depth="0"]')) {
-                            event.target.classList.toggle('is-active');
-                        }*/
     if (event.target.matches('.switch')) {
       var root = document.getElementsByTagName('html')[0]
       if (event.target.checked) {
@@ -239,4 +223,4 @@ window.addEventListener('DOMContentLoaded', (event) => {
   }, false)
 })
   </script>
-</body>
+</body>
