[FIX]

Header style

main/static/main/css/pattern-scaffolding.css

+/**
+ * This stylesheet is for styles you want to include only when displaying demo
+ * styles for grids, animations, color swatches, etc.
+ * These styles will not be your production CSS.
+ */
+#sg-patterns {
+  -webkit-box-sizing: border-box !important;
+          box-sizing: border-box !important;
+  max-width: 100%;
+  padding: 0 0.5em;
+}
+
+.demo-animate {
+  background: #ddd;
+  padding: 1em;
+  margin-bottom: 1em;
+  text-align: center;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.sg-colors {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  list-style: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.sg-colors li {
+  -webkit-box-flex: 1;
+      -ms-flex: auto;
+          flex: auto;
+  padding: 0.3em;
+  margin: 0 0.5em 0.5em 0;
+  min-width: 5em;
+  max-width: 14em;
+  border: 1px solid #ddd;
+  border-radius: 0;
+}
+
+.sg-swatch {
+  display: block;
+  height: 8rem;
+  margin-bottom: 0.5rem;
+  border-radius: 0;
+}
+
+.sg-label {
+  font-size: 1rem;
+}
+
+.sg-pattern-example {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+}
+
+.sg-pattern-head .sg-pattern-title a {
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif !important;
+  font-weight: bold !important;
+  font-size: 1.2rem !important;
+  color: #202020 !important;
+}
+
+.sg-pattern-category-title a {
+  font-family: "Bebas Neue", "Helvetica", "Arial", sans-serif !important;
+  font-weight: 400 !important;
+  font-size: 3.5rem !important;
+}

main/static/main/css/styles.css

@@ -2878,26 +2878,15 @@ p{
     flex-flow: row wrap;
     max-height: 540px;
     writing-mode: vertical-lr;
-    display: flex;
-    flex-flow: row wrap;
-    max-height: 320px;
-    writing-mode: vertical-lr;
   }
 
 /* workaround for long-living bug https://stackoverflow.com/a/39102894/7113416 */
 
 @media (min-width: 768px) {
-/* workaround for long-living bug https://stackoverflow.com/a/39102894/7113416 */
 
 .footer__main-links ul {
       max-height: 320px
   }
-.footer__main-links ul li {
-      display: block;
-      height: 40px;
-      line-height: 40px;
-      min-width: 150px;
-      writing-mode: initial; /* workaround revert from above */
     }
 
 .footer__main-links ul li {
@@ -3475,10 +3464,6 @@ p{
   max-height: 5rem;
 }
 
-.w-32{
-  width: 8rem;
-}
-
 .w-40{
   width: 10rem;
 }
@@ -3704,11 +3689,6 @@ p{
   background-color: rgb(125 51 127 / var(--tw-bg-opacity));
 }
 
-.bg-blue-300{
-  --tw-bg-opacity: 1;
-  background-color: rgb(2 125 168 / var(--tw-bg-opacity));
-}
-
 .bg-green-400{
   --tw-bg-opacity: 1;
   background-color: rgb(76 169 113 / var(--tw-bg-opacity));
@@ -3774,11 +3754,6 @@ p{
   padding: 0.75rem;
 }
 
-.py-32{
-  padding-top: 8rem;
-  padding-bottom: 8rem;
-}
-
 .px-1{
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -4287,13 +4262,6 @@ a.icon-link:hover span{
     flex-direction: column;
   }
 
-  @media (min-width: 576px){
-
-    .sm\:sm\:flex-col{
-      flex-direction: column;
-    }
-  }
-
   .sm\:pt-0{
     padding-top: 0px;
   }