beta

public/assets/css/animations.css

@@ -213,15 +213,103 @@
     animation: bounceOutRight .5s ease-out;
 }
 
+@keyframes swipeUp {
+    from {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.anim--swipeUp {
+    animation: swipeUp .2s ease-out;
+}
+
+@keyframes swipeDown {
+    from {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.anim--swipeDown {
+    animation: swipeDown .2s ease-out;
+}
+
+@keyframes askFocus {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(5px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.anim--askFocus {
+    animation: askFocus 2s ease-in-out infinite;
+}
+
+@keyframes backGlow {
+    0% {
+        box-shadow: 0 40px 100px 15px var(--accent-yellow-bg-color-vivid);
+    }
+
+    50% {
+        box-shadow: 0 60px 100px 0 var(--accent-yellow-bg-color-vivid);
+    }
+
+    100% {
+        box-shadow: 0 40px 100px 15px var(--accent-yellow-bg-color-vivid);
+    }
+}
+
+.anim--backGlow {
+    animation: backGlow 2s ease-in-out infinite;
+}
+
+@keyframes backCardGlow {
+    0% {
+        box-shadow: var(--base-shadow), 0 40px 100px 15px var(--accent-yellow-bg-color-vivid);
+    }
+
+    50% {
+        box-shadow: var(--base-shadow), 0 60px 100px 0 var(--accent-yellow-bg-color-vivid);
+    }
+
+    100% {
+        box-shadow: var(--base-shadow), 0 40px 100px 15px var(--accent-yellow-bg-color-vivid);
+    }
+}
+
+.anim--backCardGlow {
+    animation: backCardGlow 2s ease-in-out infinite;
+}
+
+
 /* Remove all animations and transitions
 for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
+
     *,
     *::before,
     *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
     }
 }

public/assets/css/components/card.css

@@ -42,6 +42,7 @@
     gap: 20px;
     overflow: hidden;
     color: var(--card-color);
+    text-align: left;
 }
 
 .card.card--dark {

public/assets/css/components/contributors.css

@@ -9,19 +9,19 @@
   text-decoration: none;
 }
 
-@media screen and (max-width: 906px){
+@media screen and (max-width: 906px) {
   .contributors {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 5px 5px;
-      margin: 0px;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 5px 5px;
+    margin: 0px;
   }
 
   .contributors-card-name:focus {
     font-size: 15px;
   }
 }
 
-@media screen and (max-width: 478px){
+@media screen and (max-width: 478px) {
   .contributors {
     grid-template-columns: repeat(1, minmax(0, 1fr))
   }
@@ -86,4 +86,4 @@
   font-weight: 500;
   font-size: 14px;
   margin: 0;
-}
+}

public/assets/css/components/flexGrid.css

@@ -29,6 +29,10 @@
     grid-column: span 4;
 }
 
+.flexGrid--fluid {
+    width: initial;
+}
+
 @media screen and (max-width: 745px) {
     .flexGrid {
         display: flex;

public/assets/css/components/floatNotice.css

@@ -0,0 +1,49 @@
+.floatNotice {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    z-index: 2;
+}
+
+.floatNotice-header {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    justify-content: space-between;
+}
+
+.floatNotice-header h3 {
+    font-size: 20px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.floatNotice-heaer-icon {
+    font-size: 34px;
+}
+
+.floatNotice-wrapper.card {
+    padding: 20px;
+    max-width: 60vw;
+    min-width: 600px;
+}
+
+@media screen and (max-width: 745px) {
+    .floatNotice-wrapper.card {
+        min-width: initial;
+        max-width: initial;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .floatNotice-header {
+        gap: 10px;
+    }
+
+    .floatNotice-header h3 {
+        font-size: 18px;
+    }
+}

public/assets/css/components/hero.css

@@ -51,7 +51,13 @@
     align-items: center;
 }
 
-.hero--bg-center {
+.hero.hero--vertical {
+    flex-direction: column;
+    gap: 20px;
+}
+
+.hero--bg-center,
+.hero--allow-scroll {
     overflow: initial;
 }
 
@@ -139,6 +145,10 @@
     opacity: .2;
 }
 
+.hero--clipped {
+    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
+}
+
 .hero--no-margin {
     padding: 0;
 }
@@ -183,6 +193,7 @@
 
     .hero-content .text {
         text-align: center;
+        margin: 0 10px;
     }
 
     .hero:not(.hero--no-margin).hero--extra-margin {

public/assets/css/components/img.css

@@ -44,6 +44,10 @@
     max-width: 100%;
 }
 
+.img.img--fluid {
+    width: 100%;
+}
+
 .img.card {
     background-color: var(--img-bg-color);
 }

public/assets/css/components/navigationBar.css

@@ -66,13 +66,14 @@
     border-radius: 30px;
 }
 
-.navigationBar ul li.active {
-    background-color: var(--navbar-active-background-color);
-}
+/*.navigationBar ul li.active {
+    background-color: var(--navbar-active-background-color); 
+}*/
 
 .navigationBar ul li.active a,
 .navigationBar ul li.active button {
-    color: var(--navbar-active-link-color);
+    /* color: var(--navbar-active-link-color); */
+    font-weight: 800;
 }
 
 .navigationBar ul li:not(.active):hover {

public/assets/css/components/siteFooter.css

@@ -55,6 +55,10 @@ small a,
     font-weight: 600;
 }
 
+.siteFooter.siteFooter--has-floatNotice {
+    padding-bottom: 100px;
+}
+
 @media screen and (max-width: 745px) {
     .siteFooter-sitemap {
         display: flex;

public/assets/css/components/text.css

@@ -16,6 +16,7 @@
 
 .text.text--spaced p {
     margin: 0 0 50px 0;
+    line-height: 1.44;
 }
 
 .text--rich p,

public/assets/css/index.css

@@ -11,6 +11,7 @@
 @import url('components/divider.css');
 @import url('components/flexGrid.css');
 @import url('components/flexList.css');
+@import url('components/floatNotice.css');
 @import url('components/font.css');
 @import url('components/form.css');
 @import url('components/hero.css');