main: new statics

.isort.cfg

@@ -3,4 +3,4 @@
 line_length = 88
 multi_line_output = 3
 include_trailing_comma = true
-known_third_party = PyPDF2,arrow,bleach,bs4,captcha,celery,django,environ,faker,fastjsonschema,icalevnt,markdown,modelcluster,pirates,pytest,pytz,requests,sentry_sdk,taggit,tweepy,wagtail,wagtailmetadata,weasyprint,yaml
+known_third_party = PyPDF2,arrow,bleach,bs4,captcha,celery,django,environ,faker,fastjsonschema,icalevnt,markdown,modelcluster,pirates,pytest,pytz,requests,sentry_sdk,taggit,tweepy,wagtail,wagtailmetadata,weasyprint,yaml,zoneinfo

.pre-commit-config.yaml

 default_language_version:
-  python: python3.9
+  python: python3.8
 
 exclude: snapshots/
 repos:

main/static/main/css/styles.css

@@ -2265,6 +2265,21 @@ video {
   }
 }
 
+.head-9xl{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-size: 3rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: -0.025em;
+}
+
+@media (min-width: 1200px){
+
+  .head-9xl{
+    font-size: 6.25rem;
+  }
+}
+
 p{
   font-size: .875rem;
   line-height: 1.5rem;
@@ -2670,9 +2685,8 @@ p{
     }
 
 .switch{
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
 }
 
 .switch__item{
@@ -2681,8 +2695,8 @@ p{
   cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(236 236 236 / var(--tw-bg-opacity));
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   text-align: center;
@@ -2709,6 +2723,39 @@ p{
   background-color: rgb(146 210 219 / var(--tw-bg-opacity));
 }
 
+/* HORIZONTAL SCROLLABLE */
+
+.horizontal-scrolling {
+  display: block;
+  margin-left: -15px;
+  margin-right: -15px;
+  max-width: calc(100% + 30px);
+  overflow-x: scroll;
+  overflow-y: hidden;
+  padding: 0 15px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.horizontal-scrolling.draggable {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+.horizontal-scrolling.draggable.active, .horizontal-scrolling.draggable.active a {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+
+.no-scrollbars {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  scrollbar-width: none;
+}
+
+.no-scrollbars::-webkit-scrollbar {
+  display: none;
+}
+
 .article-timeline-grid{
   display: grid;
   gap: 0.5rem;
@@ -2792,38 +2839,30 @@ p{
   grid-area: main-links;
 }
 
-.footer__main-links .footer__main--link{
-  margin-top: 1.5rem;
-}
-
-.footer__main-links .footer__main--link{
-  width: -webkit-fit-content;
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-@media (min-width: 1200px){
-
-  .footer__main-links .footer__main--link{
-    margin-right: 0.5rem;
-  }
-}
-
 .footer__main-links ul {
-    display: grid;
-    grid-auto-columns: minmax(160px, auto);
-    grid-auto-flow: column;
-    grid-gap: 10px;
-    grid-template-rows: repeat(12, 40px);
+    display: flex;
+    flex-flow: row wrap;
+    max-height: 540px;
+    writing-mode: vertical-lr;
   }
 
-@media (min-width: 576px) {
+/* workaround for long-living bug https://stackoverflow.com/a/39102894/7113416 */
+
+@media (min-width: 768px) {
 
 .footer__main-links ul {
-      grid-template-rows: repeat(6, 40px)
+      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-collapsible__toggle{
   display: flex;
   cursor: pointer;
@@ -4100,13 +4139,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;
   }
@@ -4146,6 +4178,10 @@ a.icon-link:hover span{
     grid-column: span 2 / span 2;
   }
 
+  .md\:mt-20{
+    margin-top: 5rem;
+  }
+
   .md\:mt-0{
     margin-top: 0px;
   }