chore: initial sync

blocks/cards/cards.css

@@ -1,31 +1,53 @@
-.cards > ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    grid-gap: 16px;
+main .section.cards-horizontal-container {
+    background-color: #00386b;
+    color: white;
+    padding: 16px;
 }
 
-.cards > ul > li {
-    border: 1px solid var(--highlight-background-color);
-    background-color: var(--background-color)
+.cards > div {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--body-font-size-s);
+    margin: 16px 0;
+    background-color: white;
+    padding: 16px;
+    color: var(--text-color);
 }
 
-.cards .cards-card-body {
-    margin: 16px;
+.cards h2 {
+    font-size: var(--heading-font-size-m);
 }
 
-.cards .cards-card-image {
-    line-height: 0;
+.cards h3 {
+    font-size: var(--heading-font-size-s);
 }
 
-.cards .cards-card-body > *:first-child {
-    margin-top: 0;
+main .section.cards-horizontal-container h3 {
+    font-size: var(--heading-font-size-s);
+    margin-bottom: 64px;
 }
 
-.cards > ul > li img {
-    width: 100%;
-    aspect-ratio: 4 / 3;
+
+.cards img {
+    width: 150px;
+    height: 150px;
+    border-radius: 75px;
     object-fit: cover;
+}
+
+@media (min-width: 600px) {
+    .cards > div {
+        flex-direction: unset;
+    }
+
+    .cards > div > div {
+        flex: 0 0 1fr;
+    }
+
+    .cards > div > div.cards-contains-image {
+        flex: 0 0 150px;
+        margin-right: 32px;
+        display: flex;
+        align-items: center;
+    }
 }

blocks/cards/cards.js

@@ -1,18 +1,5 @@
-import { createOptimizedPicture } from '../../scripts/scripts.js';
-
 export default function decorate(block) {
-  /* change to ul, li */
-  const ul = document.createElement('ul');
-  [...block.children].forEach((row) => {
-    const li = document.createElement('li');
-    li.innerHTML = row.innerHTML;
-    [...li.children].forEach((div) => {
-      if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image';
-      else div.className = 'cards-card-body';
-    });
-    ul.append(li);
+  block.querySelectorAll('img').forEach((img) => {
+    img.closest('div').classList.add('cards-contains-image');
   });
-  ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
-  block.textContent = '';
-  block.append(ul);
 }

blocks/columns/columns.css

@@ -1,25 +1,32 @@
-.columns > div {
-    display: flex;
-    flex-direction: column;
+.columns {
+    font-size: var(--body-font-size-s);
 }
 
-.columns img {
-    width: 100%;
+.columns > div > div {
+    background-color: white;
 }
 
-@media (min-width: 900px) {
+.columns h2 {
+    font-size: var(--heading-font-size-m);
+    text-transform: uppercase;
+}
+
+.columns div div > * {
+    margin-left: 32px;
+    margin-right: 32px;
+}
+
+.columns div div > p.columns-contains-image {
+    margin: 0;
+}
+
+@media (min-width: 600px) {
     .columns > div {
         display: flex;
-        align-items: center;
-        flex-direction: unset;
     }
 
     .columns > div > div {
         flex: 1;
-        margin-left: 32px;
-    }
-
-    .columns > div > div:first-of-type {
-        margin-left: unset;
+        margin: 16px;
     }
 }

blocks/columns/columns.js

@@ -1,4 +1,5 @@
 export default function decorate(block) {
-  const cols = [...block.firstElementChild.children];
-  block.classList.add(`columns-${cols.length}-cols`);
+  block.querySelectorAll('img').forEach((img) => {
+    img.closest('p').classList.add('columns-contains-image');
+  });
 }

blocks/example/example.css

@@ -0,0 +1,5 @@
+/* block specific CSS goes here */
+main .example {
+  background-color: var(--overlay-background-color);
+  padding: 1em;
+}

blocks/example/example.js

@@ -0,0 +1,13 @@
+export default function decorate(block) {
+  // turn links into buttons
+  block.querySelectorAll(':scope a').forEach((a) => {
+    const button = document.createElement('button');
+    button.title = a.title || a.textContent;
+    button.textContent = a.textContent;
+    button.addEventListener('click', () => {
+      block.dataset.buttonClicked = a.href;
+      window.open(a.href);
+    });
+    a.replaceWith(button);
+  });
+}

blocks/footer/footer.css

@@ -1,14 +1,24 @@
 footer {
   padding: 2rem;
-  background-color: var(--overlay-background-color);
+  background-color: white;
   font-size: var(--body-font-size-s);
 }
 
 footer .footer {
-  max-width: 1200px;
+  max-width: 768px;
   margin: auto;
 }
 
+footer .footer .footer-logos > div {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+footer .footer .footer-logos img {
+  height: 45px;
+}
+
 footer .footer p {
   margin: 0;
 }

blocks/footer/footer.js

@@ -1,4 +1,4 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/scripts.js';
+import { readBlockConfig, decorateIcons, decorateLinkedPictures } from '../../scripts/scripts.js';
 
 /**
  * loads and decorates the footer
@@ -15,5 +15,10 @@ export default async function decorate(block) {
   const footer = document.createElement('div');
   footer.innerHTML = html;
   await decorateIcons(footer);
+  decorateLinkedPictures(footer);
   block.append(footer);
+  const styles = ['logos', 'legal'];
+  styles.forEach((style, i) => {
+    if (block.children[i]) block.children[i].classList.add(`footer-${style}`);
+  });
 }

blocks/header/header.css

@@ -8,11 +8,12 @@ header nav {
   padding: 0 2rem;
   position: fixed;
   z-index: 1;
-  background-color: var(--background-color);
+  background-color: #999;
   width: 100vw;
   height: var(--nav-height);
   box-sizing: border-box;
   font-family: var(--body-font-family);
+  color: white;
 }
 
 header nav a:any-link {
@@ -33,14 +34,18 @@ header .nav-brand {
   font-size: 22px;
   font-weight: 700;
   line-height: 1em;
+  background-color: #777;
+  padding: 0 20px;
+  width: 100px;
+  height: 100%;
 }
 
 header nav .nav-brand p {
   margin: 0;
 }
 
 header nav .nav-brand img {
-  width: 128px;
+  height: 51px;
 }
 
 /* hamburger */
@@ -191,15 +196,25 @@ header nav[aria-expanded='true'] .nav-tools li {
   }
 
   header nav .nav-brand {
-    flex: 0 0 150px;
+    flex: 0 0 200px;
+    box-shadow: 0 0 10px 5px rgb(0 0 0 / 30%);
+    height: auto;
   }
 
+  header nav .nav-brand img {
+    padding-top: 10px;
+    width: 200px;
+    height: auto;
+  }
+
+
   header nav .nav-sections ul {
     display: flex;
     flex-direction: row;
     background-color: unset;
     width: unset;
     margin: 0;
+    justify-content: space-around;
   }
 
   header nav[aria-expanded='true'] .nav-sections ol {
@@ -214,6 +229,7 @@ header nav[aria-expanded='true'] .nav-tools li {
     margin: 0;
     cursor: pointer;
     padding-top: 0;
+    height: 100%;
   }
 
   header nav .nav-sections > ul > li > p {
@@ -237,12 +253,11 @@ header nav[aria-expanded='true'] .nav-tools li {
     position: absolute;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;    
-    border-bottom: 15px solid var(--highlight-background-color);
+    border-bottom: 15px solid #888;
     top: -15px;
-    left: 20px;
+    left: 30px;
   }
 
-
   header nav .nav-sections > ul > li > ul > li {
     font-size: 18px;
     padding: 8px 16px;
@@ -251,10 +266,11 @@ header nav[aria-expanded='true'] .nav-tools li {
   header nav .nav-sections > ul > li[aria-expanded='true'] ul {
     display: block;
     position: absolute;
-    background-color: var(--highlight-background-color);
+    background-color: #888;
     width: 300px;
     left: 0;
+    top: 24px;
     padding: 16px;
-    box-shadow: 0 0 5px var(text-color);
+    box-shadow: 0 10px 10px 5px #00000040;
   }
 }

blocks/hero/hero.css

@@ -1,7 +1,7 @@
 /* block specific CSS goes here */
 
 main .hero-container > div {
-    max-width: unset;
+    max-width: 1500px;
 }
 
 main .hero-container {
@@ -10,15 +10,16 @@ main .hero-container {
 
 main .hero {
     position: relative;
-    padding: 32px;
+    padding: 2rem;
     min-height: 300px;
 }
 
 main .hero h1 {
-    max-width: 1200px;
+    max-width: 768px;
     margin-left: auto;
     margin-right: auto;
     color: white;
+    text-shadow: 0 0 10px #0008;
 }
 
 

fstab.yaml

@@ -1,2 +1,2 @@
 mountpoints:
-  /: https://drive.google.com/drive/u/0/folders/1MGzOt7ubUh3gu7zhZIPb7R7dyRzG371j
+  /: https://adobe.sharepoint.com/:f:/r/sites/HelixProjects/Shared%20Documents/sites/pga-tour/theplayers-com