add form

Author: lamontacrook

blocks/form/form.css

@@ -0,0 +1,44 @@
+.form-container .form-wrapper {
+  max-width: unset;
+  padding: 0;
+  width: 100vw;
+  height: calc(100vh - 3px);
+}
+
+.form {
+  position: relative;
+  padding: 40px 24px;
+  min-height: 300px;
+
+}
+
+.form > .form-overlay {
+  display: flex;
+  width: 943px;
+  padding: 40px 56px;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+
+  border-radius: 10px;
+  border: 1px solid #DEDEDE;
+
+  background: #FFF;
+
+  /* Drop shadow/elevated */
+  box-shadow: 0 0 2px 0 var(--Alias-drop-shadow-elevated-key, rgba(0, 0, 0, 0.12)), 0 2px 6px 0 var(--Alias-drop-shadow-transition, rgba(0, 0, 0, 0.04)), 0 4px 12px 0 var(--Alias-drop-shadow-ambient, rgba(0, 0, 0, 0.08));
+}
+
+.form picture {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  object-fit: cover;
+  box-sizing: border-box;
+}
+
+.form picture img {
+  flex-shrink: 0;
+  width: 100%;
+  /* aspect-ratio: 190/127; */
+}

blocks/form/form.js

@@ -0,0 +1,13 @@
+export default async function decorate(block) {
+  const overlay = document.createElement('div');
+  overlay.className = 'form-overlay';
+  [...block.children].forEach((row, index) => {
+    if(row.querySelector('picture')) {
+      row.className = 'form-background';
+    }
+    else {
+      overlay.append(row)
+    }
+  });
+  block.append(overlay);
+}

blocks/header/header.css

@@ -1,4 +1,5 @@
 /* header and nav layout */
+
 header .nav-wrapper {
   background-color: var(--background-color);
   width: 100%;

scripts/aem.js

@@ -600,6 +600,7 @@ function decorateBlocks(main) {
  * @returns {Promise}
  */
 async function loadHeader(header) {
+  return;
   const headerBlock = buildBlock('header', '');
   header.append(headerBlock);
   decorateBlock(headerBlock);

styles/styles.css

@@ -15,7 +15,7 @@
   --background-color: white;
   --light-color: #f8f8f8;
   --dark-color: #505050;
-  --text-color: #131313;
+  --text-color: #2c2c2c;
   --link-color: #3b63fb;
   --link-hover-color: #1d3ecf;
 
@@ -53,7 +53,7 @@
   src: local('Arial');
 }
 
-@media (width >= 900px) {
+@media (width >=900px) {
   :root {
     /* body sizes */
     --body-font-size-m: 18px;
@@ -78,6 +78,7 @@ body {
   font-family: var(--body-font-family);
   font-size: var(--body-font-size-m);
   line-height: 1.6;
+  overflow: hidden;
 }
 
 body.appear {
@@ -98,6 +99,10 @@ footer .footer[data-block-status="loaded"] {
   visibility: visible;
 }
 
+header {
+  display: none;
+}
+
 h1,
 h2,
 h3,
@@ -112,12 +117,29 @@ h6 {
   scroll-margin: 40px;
 }
 
-h1 { font-size: var(--heading-font-size-xxl); }
-h2 { font-size: var(--heading-font-size-xl); }
-h3 { font-size: var(--heading-font-size-l); }
-h4 { font-size: var(--heading-font-size-m); }
-h5 { font-size: var(--heading-font-size-s); }
-h6 { font-size: var(--heading-font-size-xs); }
+h1 {
+  font-size: var(--heading-font-size-xxl);
+}
+
+h2 {
+  font-size: var(--heading-font-size-xl);
+}
+
+h3 {
+  font-size: var(--heading-font-size-l);
+}
+
+h4 {
+  font-size: var(--heading-font-size-m);
+}
+
+h5 {
+  font-size: var(--heading-font-size-s);
+}
+
+h6 {
+  font-size: var(--heading-font-size-xs);
+}
 
 p,
 dl,
@@ -142,7 +164,7 @@ pre {
   white-space: pre;
 }
 
-main > div {
+main>div {
   margin: 40px 16px;
 }
 
@@ -228,22 +250,22 @@ main img {
 }
 
 /* sections */
-main > .section {
+main>.section {
   margin: 40px 0;
 }
 
-main > .section > div {
+main>.section>div {
   max-width: 1200px;
   margin: auto;
   padding: 0 24px;
 }
 
-main > .section:first-of-type {
+main>.section:first-of-type {
   margin-top: 0;
 }
 
-@media (width >= 900px) {
-  main > .section > div {
+@media (width >=900px) {
+  main>.section>div {
     padding: 0 32px;
   }
 }
@@ -254,4 +276,4 @@ main .section.highlight {
   background-color: var(--light-color);
   margin: 0;
   padding: 40px 0;
-}
+}