fix: uio contrast issues and rendering of the about page

src/_includes/layouts/about.njk

@@ -1,18 +1,10 @@
 {% extends "layouts/base.njk" %}
 
 {% block content %}
+{% for key, value in sections %}
 <section>
-    <h2>Making Standards Accessible</h2>
-    <p>
-        Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem.
-Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis.
-    </p>
-</section>
-<section>
-    <h2>What do we do?</h2>
-    <p>
-        Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem.
-        Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis.
-    </p>
+    <h2>{{ key }}</h2>
+    <p>{{ value }}</p>
 </section>
+{% endfor %}
 {% endblock %}

src/_includes/partials/components/card.njk

@@ -9,6 +9,7 @@
         </div>
         {% if cardType === "event" %}
             <div class="card__event-status">
+                {% include 'svg/eventTag.svg' %}
                 <p>Upcoming</p>
             </div>
         {% endif %}

src/assets/styles/components/card.css

@@ -35,21 +35,20 @@
 }
 
 .card__event-status {
-    background-color: var(--color-yellow);
-    padding-block: 0.625rem;
-    padding-inline: 1.25rem;
     position: relative;
-    width: fit-content;
+    display: flex;
+    align-items: center;
 }
 
-.card__event-status::before {
-    content: '';
+.card__event-status svg {
     position: absolute;
-    height: 100%;
-    top: 50%;
-    right: -2.5rem; /* 2x padding-inline of .card__event-status */
-    transform: translateY(-50%);
-    border-width: 1.25rem; /* same as padding-inline of .card__event-status */
-    border-style: solid;
-    border-color: transparent transparent transparent var(--color-yellow);
-}
+    width: 12ch;
+    fill: var(--fl-bgColor, var(--color-yellow));
+    stroke: var(--fl-fgColor, var(--color-yellow));
+}
+
+.card__event-status p {
+    position: relative;
+    padding-inline: 0.5rem;
+    border-left: 0.05rem solid var(--fl-fgColor, var(--color-yellow));
+}

src/assets/styles/components/navigation.css

@@ -1,5 +1,5 @@
 .navigation {
-    background-color: hsla(244, 93%, 22%, 1);
+    background-color: var(--color-indigo-700);
     border-bottom: 0.2rem solid transparent;
     border-top: 0.2rem solid transparent;
     color: white;
@@ -24,7 +24,7 @@
     display: flex;
     gap: 0.625rem;
     align-items: center;
-    background-color: hsla(244, 93%, 22%, 1);
+    background-color: var(--color-indigo-700);
     color: white;
     border: none;
     font-family: var(--family-sans-serif);
@@ -34,7 +34,7 @@
 
 .navigation__menu {
     width: 100%;
-    background-color: hsla(244, 93%, 22%, 1);
+    background-color: var(--color-indigo-700);
     padding-inline: var(--common-inline-padding);
 }
 

src/assets/styles/global/footer.css

@@ -28,11 +28,13 @@ footer .footer__container h4 {
     margin-bottom: 1rem;
 }
 
-.footer__social-media svg{
+.footer__social-media svg {
     stroke: white;
     stroke-width: 0.05rem;
     width: 1.375rem;
     margin-inline-end: 1rem;
+    fill: var(--fl-linkColor, white);
+    stroke: var(--fl-linkColor, black);
 }
 
 .footer__contact-us-item-title {
@@ -53,6 +55,10 @@ footer .footer__container h4 {
     margin-block: 2rem;
 }
 
+.footer__sponsors svg {
+    fill: var(--fl-linkColor, white);
+}
+
 @media (width >= 24.25rem) {
     .footer__container {
         margin: auto;

src/assets/styles/global/header.css

@@ -5,10 +5,13 @@
     justify-content: space-between;
     align-items: center;
     padding-inline-start: var(--common-inline-padding);
-    padding-inline-end: 2rem;
     min-height: 3.56rem;
 }
 
+.small-viewport {
+    padding-inline-end: var(--common-inline-padding);
+}
+
 .large-viewport {
     display: none;
 }
@@ -29,14 +32,15 @@
 
 .fl-prefsEditor-buttons {
     margin-right: var(--common-inline-padding) !important;
+    margin-left: 2rem !important;
 }
 
 .fl-prefsEditor-separatedPanel {
     background: inherit;
     border-block-end: none !important;
 }
 
-@media (width >= 46.625rem) {
+@media (width >= 40rem) {
     .small-viewport {
         display: none;
     }

src/collections/pages/en/about.md

@@ -6,6 +6,10 @@ eleventyNavigation:
   key: About
   order: 1
 layout: layouts/about
+sections: {
+  "Making Standards Accessible" : "Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem. Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis.",
+  "What do we do?" : "Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem. Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis."
+}
 displayProjects: true
 hasBanner: true
 bannerBGColor: dark-grey

src/collections/pages/fr/about.md

@@ -6,6 +6,10 @@ eleventyNavigation:
   key: À propos
   order: 1
 layout: layouts/about
+sections: {
+  "Making Standards Accessible" : "Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem. Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis.",
+  "What do we do?" : "Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem. Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis."
+}
 displayProjects: true
 hasBanner: true
 bannerBGColor: dark-grey