Feature/template styles (#1)

* Template styles, cleanup of boilerplate. Adding fonts and images

Author: mbel-nc

blocks/fixed-background/fixed-background.css

@@ -0,0 +1,11 @@
+.fixed-background {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: max(100%, 100vh, 100dvh);
+    background: linear-gradient(60deg, #3574B9, #83B581, #3574B9, #AF8CD3, #3574B9, #3185DB);
+    background-size: 500% 100%;
+    animation: gradient 30s linear infinite;
+    animation-direction: alternate;
+    background-attachment: fixed;
+}

blocks/fixed-background/fixed-background.js

@@ -1,20 +1,129 @@
 footer {
-  background-color: var(--light-color);
-  font-size: var(--body-font-size-xs);
-}
+    --font-paragraph: 1rem;
 
-footer .footer > div {
-  margin: auto;
-  max-width: 1200px;
-  padding: 40px 24px 24px;
-}
+    p+p {
+        margin-top: .8rem;
+    }
 
-footer .footer p {
-  margin: 0;
-}
+    .footer-content {
+        padding-block: 60px;
+        background-color: var(--clr-css-blue);
+        color: var(--clr-white);
+
+        > div {
+            width: min(var(--page-max-width), 100% - 2* var(--page-padding));
+            margin-inline: auto;
+        }
+
+        .columns > div {
+            align-items: start;
+            gap: 30px;
+        }
+
+        h5 {
+            color: var(--clr-white);
+            font-size: 1.25rem;
+            font-weight: 500;
+            margin-top: 0;
+            margin-bottom: 16px;
+        }
+
+        p a {
+            text-decoration: underline;
+        }
+
+        ul li {
+            a {
+                position: relative;
+                transition: opacity .2s;
+                display: flex;
+                gap: 8px;
+                align-items: center;
+
+                &:hover {
+                    text-decoration: underline;
+                    opacity: .7;
+                }
+
+                &::before {
+                    content: "";
+                    display: block;
+                    background: url("data:image/svg+xml,%3Csvg xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' data-search-ignore='yes' class='c-icon c-icon-arrow-right-circle c-icon--24' width='64' height='64'%3E%3Cdefs%3E%3Csymbol id='sprite-arrow-right-circle' viewBox='0 0 64 64'%3E%3Ctitle%3Earrow-right-circle%3C/title%3E%3Cpath d='M32 62c16.569 0 30-13.431 30-30C62 15.431 48.569 2 32 2 15.431 2 2 15.431 2 32c0 16.569 13.431 30 30 30Zm15-30H17'/%3E%3Cpath d='m35 20 12 12-12 12'/%3E%3C/symbol%3E%3C/defs%3E%3Cuse xlink:href='%23sprite-arrow-right-circle' stroke='%23FFFFFF' fill='none' stroke-width='4px'/%3E%3C/svg%3E") no-repeat center center/100% 100%;
+                    width: 25px;
+                    height: 25px;
+                }
+            }
+
+            & + li {
+                margin-top: .8rem;
+            }
+
+            &::marker {
+                content: "";
+                display: none;
+            }
+        }
+    }
+
+    .footer-menu {
+        padding-block: 40px;
+        background: var(--clr-white);
+        color: var(--clr-css-blue);
+
+        /* stylelint-disable-next-line no-descending-specificity */
+        > div {
+            width: min(var(--page-max-width), 100% - 2* var(--page-padding));
+            margin-inline: auto;
+            display: flex;
+            justify-content: space-between;
+            gap: 32px;
+
+            @media (width <= 667px) {
+                flex-direction: column;
+                align-items: center;
+            }
+        }
+
+        ul {
+            display: flex;
+            gap: 24px;
+            align-items: center;
+
+            @media (width <= 667px) {
+                &:nth-child(2) {
+                    flex-direction: column;
+                    gap: 12px;
+                }
+            }
+
+            &:nth-child(1) img {
+                width: 24px;
+                height: 24px;
+                aspect-ratio: auto 1 / 1;
+            }
+
+            /* stylelint-disable-next-line no-descending-specificity */
+            &:nth-child(2) a {
+                color: var(--clr-css-blue);
+            }
+
+            /* stylelint-disable-next-line no-descending-specificity */
+            li {
+                list-style: none;
+            }
+        }
+
+    }
+
+    a.button:any-link {
+        font-size: var(--font-xs);
+        color: var(--clr-css-blue);
+        text-transform: uppercase;
+        text-decoration: none;
+
+        &:hover {
+            color: var(--clr-white);
+        }
+    }
 
-@media (width >= 900px) {
-  footer .footer > div {
-    padding: 40px 32px 24px;
-  }
 }

blocks/footer/footer.css

@@ -16,5 +16,11 @@ export default async function decorate(block) {
   const footer = document.createElement('div');
   while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
 
+  const classes = ['content', 'menu'];
+  classes.forEach((c, i) => {
+    const section = footer.children[i];
+    if (section) section.classList.add(`footer-${c}`);
+  });
+
   block.append(footer);
 }