From 33e3667f0b616a0e9d39fd27d65da3a5b4ffddab Mon Sep 17 00:00:00 2001 From: Nic Chan Date: Fri, 21 Jun 2024 11:28:31 +0800 Subject: [PATCH 1/9] Delete legacy components --- src/assets/css/app.scss | 12 -- src/assets/css/components/_blog-cta.scss | 40 ---- .../css/components/_case-study-card.scss | 56 ------ src/assets/css/components/_contact-info.scss | 40 ---- src/assets/css/components/_expertise.scss | 25 --- src/assets/css/components/_featured-post.scss | 90 --------- src/assets/css/components/_image-stacked.scss | 53 ----- src/assets/css/components/_intro-text.scss | 8 - .../css/components/_mainmatter-team.scss | 10 +- src/assets/css/components/_nav-aside.scss | 71 ------- src/assets/css/components/_post-banner.scss | 189 ------------------ src/assets/css/components/_post.scss | 2 +- src/assets/css/components/_split-quote.scss | 110 ---------- .../css/components/_workshop-cards.scss | 80 -------- src/assets/css/components/_workshop-hero.scss | 7 - .../css/components/_workshop-topics.scss | 66 ------ src/author.njk | 4 +- src/components/case-study-card.njk | 31 --- src/components/contact-info.njk | 21 -- src/components/content/hero-book-workshop.njk | 13 -- src/components/content/hero-grow-with-us.njk | 13 -- src/components/featured-post.njk | 78 -------- src/components/featured-technologies.njk | 27 --- src/components/global/nav-aside.njk | 11 - src/components/layouts/case-study.njk | 1 - src/components/post-banner.njk | 78 -------- src/components/post-card.njk | 11 +- src/components/recent-posts.njk | 1 - src/components/split-quote.njk | 45 ----- 29 files changed, 16 insertions(+), 1177 deletions(-) delete mode 100644 src/assets/css/components/_blog-cta.scss delete mode 100644 src/assets/css/components/_case-study-card.scss delete mode 100644 src/assets/css/components/_contact-info.scss delete mode 100644 src/assets/css/components/_expertise.scss delete mode 100644 src/assets/css/components/_featured-post.scss delete mode 100644 src/assets/css/components/_image-stacked.scss delete mode 100644 src/assets/css/components/_intro-text.scss delete mode 100644 src/assets/css/components/_nav-aside.scss delete mode 100644 src/assets/css/components/_post-banner.scss delete mode 100644 src/assets/css/components/_split-quote.scss delete mode 100644 src/assets/css/components/_workshop-cards.scss delete mode 100644 src/assets/css/components/_workshop-hero.scss delete mode 100644 src/assets/css/components/_workshop-topics.scss delete mode 100644 src/components/case-study-card.njk delete mode 100644 src/components/contact-info.njk delete mode 100644 src/components/content/hero-book-workshop.njk delete mode 100644 src/components/content/hero-grow-with-us.njk delete mode 100644 src/components/featured-post.njk delete mode 100644 src/components/featured-technologies.njk delete mode 100644 src/components/global/nav-aside.njk delete mode 100644 src/components/post-banner.njk delete mode 100644 src/components/split-quote.njk diff --git a/src/assets/css/app.scss b/src/assets/css/app.scss index d668d67f8c..5d135fd908 100644 --- a/src/assets/css/app.scss +++ b/src/assets/css/app.scss @@ -13,7 +13,6 @@ @import "components/nav"; @import "components/nav-submenu"; @import "components/mobile-menu"; -@import "components/nav-aside"; @import "components/logo-list"; @import "components/color-hero"; @import "components/social"; @@ -21,42 +20,33 @@ @import "components/footer-menu"; @import "components/quote"; @import "components/client-card"; -@import "components/contact-info"; @import "components/contact-form"; @import "components/rte"; @import "components/author"; @import "components/author-header"; -@import "components/featured-post"; @import "components/post"; @import "components/collection-header"; @import "components/tag-filter"; @import "components/section"; @import "components/tags"; -@import "components/workshop-cards"; @import "components/post-cards"; @import "components/pagination"; @import "components/prev-next"; @import "components/event-cards"; @import "components/featured-case-studies"; @import "components/featured-case-study"; -@import "components/case-study-card"; @import "components/case-study"; @import "components/talks"; @import "components/text-section"; -@import "components/workshop-hero"; @import "components/workshop-authors"; @import "components/workshop-authors-big"; -@import "components/workshop-topics"; @import "components/secondary-feature"; -@import "components/split-quote"; @import "components/featured-services"; @import "components/image-banner-with-text"; @import "components/text-with-list"; @import "components/image-aspect-ratio"; @import "components/work"; -@import "components/expertise"; @import "components/recent-posts"; -@import "components/post-banner"; @import "components/split-content"; @import "components/twios-cards"; @import "components/loader"; @@ -67,8 +57,6 @@ @import "components/startups"; @import "components/scroll-slides"; @import "components/quotes-list"; -@import "components/blog-cta"; -@import "components/intro-text"; @import "components/tech-cards"; @import "components/case-cards"; @import "components/strategy-list"; diff --git a/src/assets/css/components/_blog-cta.scss b/src/assets/css/components/_blog-cta.scss deleted file mode 100644 index 0f33ce6eb4..0000000000 --- a/src/assets/css/components/_blog-cta.scss +++ /dev/null @@ -1,40 +0,0 @@ -.blog-cta { - background-color: var(--color-purple); - color: var(--color-white); - margin-bottom: 3.25rem; - padding: 3.25rem 1rem; - - @media (min-width: $breakpoint-s) { - & { - margin-bottom: 6.25rem; - padding: 3.5rem 5rem; - } - } - - p + & { - margin-top: 3.25rem; - - @media (min-width: $breakpoint-s) { - & { - margin-top: 6.25rem; - } - } - } - - a { - color: var(--color-aqua); - } - - .contact-us { - display: block; - color: var(--color-white); - } - - h4 { - margin-top: 0; - } - - .blog-cta_content { - margin-bottom: 1rem; - } -} diff --git a/src/assets/css/components/_case-study-card.scss b/src/assets/css/components/_case-study-card.scss deleted file mode 100644 index 649b4ef40b..0000000000 --- a/src/assets/css/components/_case-study-card.scss +++ /dev/null @@ -1,56 +0,0 @@ -.case-study-card { - grid-column: span 1 / span 1; - position: relative; - margin-top: rem-calc(80); -} - -.case-study-card__image-overlay { - position: relative; - min-width: 100%; - color: var(--color-white); - aspect-ratio: 9/8; -} - -.case-study-card__content-wrapper { - padding: 1.25rem; -} - -.case-study-card__client { - margin: 1rem 0; - color: var(--color-purple); - text-underline-offset: 0.125rem; - text-decoration-thickness: 0.0625rem; - text-decoration-line: underline; - transition: color 0.3s ease; -} - -.case-study-card__tags { - align-self: flex-end; - text-align: right; -} - -.case-study-card__cta { - display: block; - visibility: visible; -} - -.case-study-card__link { - &:hover, - &:focus { - & ~ .case-study-card__description .case-study-card__client { - color: var(--color-aqua); - } - } -} - -@media (min-width: $breakpoint-s) { - .case-study-card { - grid-column: span 1 / span 1; - margin-top: 0; - } - - .case-study-card__cta { - display: none; - visibility: hidden; - } -} diff --git a/src/assets/css/components/_contact-info.scss b/src/assets/css/components/_contact-info.scss deleted file mode 100644 index bca30fcf08..0000000000 --- a/src/assets/css/components/_contact-info.scss +++ /dev/null @@ -1,40 +0,0 @@ -.contact-info { - padding: 5rem 0 3rem; -} - -.contact-info__methods { - margin-top: 3.25rem; -} - -.contact-info__text { - margin-top: 2rem; - max-width: 23.75rem; -} - -.contact-info__method-text { - display: block; - margin: 2.5rem 0; -} - -.contact-info__social-wrapper { - margin-top: 4.5rem; - color: var(--color-aqua); -} - -.contact-info__socials { - gap: 1rem; -} - -@media (min-width: $breakpoint-s) { - .contact-info { - padding: 6.25rem 0 1rem; - } - - .contact-info__method-text { - margin: 1rem 0; - } - - .contact-info__social-wrapper { - margin-top: 2rem; - } -} diff --git a/src/assets/css/components/_expertise.scss b/src/assets/css/components/_expertise.scss deleted file mode 100644 index 69047016f3..0000000000 --- a/src/assets/css/components/_expertise.scss +++ /dev/null @@ -1,25 +0,0 @@ -.expertise__logo { - max-width: 8rem; - margin-bottom: 0.25rem; -} - -.expertise__image-row { - margin: 1.5rem 0 3.25rem; - display: flex; - align-items: center; - gap: 2rem; -} - -.expertise__image-ember-1 { - width: 8.25rem; -} - -.expertise__image-ember-2 { - width: 19rem; -} - -@media (min-width: $breakpoint-l) { - .expertise__logo { - max-width: 18rem; - } -} diff --git a/src/assets/css/components/_featured-post.scss b/src/assets/css/components/_featured-post.scss deleted file mode 100644 index be79578602..0000000000 --- a/src/assets/css/components/_featured-post.scss +++ /dev/null @@ -1,90 +0,0 @@ -.featured-post { - position: relative; - color: var(--color-white); - background-color: var(--color-purple); - padding: 3rem 0 0; -} - -.featured-post__title { - margin-bottom: 2rem; -} - -.featured-post__content { - margin-top: 1rem; - display: flex; - flex-direction: column; - align-items: start; - gap: 1.25rem; -} - -.featured-post__container { - padding: 4rem 0 3rem; -} - -.featured-post__meta-wrapper { - display: flex; - flex-direction: column; - align-items: start; - position: relative; - z-index: 100; -} - -.featured-post__post-title { - margin: 1rem 0 1.25rem; -} - -.featured-post__tagline { - margin-top: 2rem; -} - -.featured-post__author { - position: relative; - align-items: center; - z-index: 100; -} - -.featured-post__author-name { - color: var(--color-white); -} - -.featured-post__cta { - margin-top: 2rem; - color: currentColor; -} - -.featured-post__link { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-decoration: none; -} - -@media (min-width: $breakpoint-s) { - .featured-post { - padding: 10rem 0; - } - - .featured-post__title { - margin-bottom: 0; - } - - .featured-post__post-title { - margin: 1.5rem 0; - } - - .featured-post__cta { - margin-top: 1.25rem; - } - - .featured-post__meta-wrapper { - display: flex; - flex-direction: row; - align-items: center; - - span { - margin-right: 1.5rem; - } - } -} diff --git a/src/assets/css/components/_image-stacked.scss b/src/assets/css/components/_image-stacked.scss deleted file mode 100644 index d96db6c34d..0000000000 --- a/src/assets/css/components/_image-stacked.scss +++ /dev/null @@ -1,53 +0,0 @@ -.image-stacked { - margin: 3rem auto; - - [data-js-enabled="true"] & { - margin: -3rem auto; - } - - &--left { - .image-stacked__image-wrapper:nth-child(even) { - margin-left: auto; - } - } - - &--right { - .image-stacked__image-wrapper:nth-child(odd) { - margin-left: auto; - } - } -} - -.image-stacked__image-wrapper { - &:not(:first-child) { - margin-top: -2.5rem; - } -} - -.image-stacked__image-wrapper { - position: relative; - width: 80%; - z-index: 2; - - &--small { - width: 70%; - } -} - -.image-stacked__image { - display: block; -} - -@media (min-width: $breakpoint-s) { - .image-stacked__image-wrapper { - width: 40rem; - - &--small { - width: 24rem; - } - - &:not(:first-child) { - margin-top: -10rem; - } - } -} diff --git a/src/assets/css/components/_intro-text.scss b/src/assets/css/components/_intro-text.scss deleted file mode 100644 index 4ccfb577e8..0000000000 --- a/src/assets/css/components/_intro-text.scss +++ /dev/null @@ -1,8 +0,0 @@ -.intro-text { - max-width: 48rem; - - strong { - font-weight: 700; - color: var(--color-purple); - } -} diff --git a/src/assets/css/components/_mainmatter-team.scss b/src/assets/css/components/_mainmatter-team.scss index ff728455e2..940cd4d057 100644 --- a/src/assets/css/components/_mainmatter-team.scss +++ b/src/assets/css/components/_mainmatter-team.scss @@ -4,11 +4,11 @@ grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; - @media (min-width: 48em) { - grid-template-columns: 1fr 1fr 1fr 1fr; + @media (min-width: $breakpoint-s) { + grid-template-columns: repeat(4, 1fr); } - - @media (min-width: 72em) { - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; + + @media (min-width: $breakpoint-l) { + grid-template-columns: repeat(6, 1fr); } } diff --git a/src/assets/css/components/_nav-aside.scss b/src/assets/css/components/_nav-aside.scss deleted file mode 100644 index 7e4c5b7568..0000000000 --- a/src/assets/css/components/_nav-aside.scss +++ /dev/null @@ -1,71 +0,0 @@ -.nav-aside { - display: flex; - justify-content: space-between; - align-items: flex-end; - flex-wrap: wrap; - padding: 1rem 1rem 9rem; -} - -.nav-aside__brand { - max-width: rem-calc(320); - margin-bottom: 3.75rem; -} - -.nav-aside__brand svg { - color: var(--color-purple); -} - -.nav-aside__text { - margin: 1rem 0 2rem; -} - -.nav-aside__cta { - padding: 0.75rem 0.8rem; - line-height: 1; - background-color: var(--color-accent); - color: var(--color-white); - text-decoration: none; - font-weight: 700; - border-radius: 0.125rem; -} - -.nav-aside__socials { - height: 100%; - flex-basis: 100%; - gap: 1rem; -} - -@media (min-width: $breakpoint-m) { - .nav-aside { - padding-bottom: 2rem; - } - - .nav-aside__brand { - margin-bottom: 0.25rem; - } - - .nav-aside__socials { - flex-basis: auto; - gap: 0.75rem; - - svg { - width: 1.5rem; - height: 1.5rem; - } - - .social__item + .social__item { - margin-left: 0.75rem; - } - } -} - -@media (hover: hover) { - .nav-aside__cta { - transition: background-color ease 0.3s; - - &:hover, - &:focus { - background-color: var(--color-accent-hover); - } - } -} diff --git a/src/assets/css/components/_post-banner.scss b/src/assets/css/components/_post-banner.scss deleted file mode 100644 index 224e30b538..0000000000 --- a/src/assets/css/components/_post-banner.scss +++ /dev/null @@ -1,189 +0,0 @@ -.post-banner { - position: relative; - display: flex; - flex-direction: column; - align-self: flex-start; - height: 100%; - background-color: var(--color-bg); - color: var(--color-body-text); - --color-tag: var(--color-purple); - --spacing: 1rem; - - & + & { - margin-top: rem-calc(80); - } -} - -.post-banner__text { - &--desktop { - display: none; - } - - &--mobile { - display: block; - } -} - -.post-banner__link { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 2; -} - -.post-banner__image-overlay { - position: relative; - min-width: 100%; - color: var(--color-white); - aspect-ratio: 9/8; -} - -.post-banner__overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - mix-blend-mode: multiply; - - &--purple { - background-color: var(--color-purple); - opacity: 0.9; - } - - &--black { - background-color: var(--color-black); - opacity: 0.6; - } -} - -.post-banner__image-wrapper { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.post-banner__image { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; -} - -.post-banner__content-wrapper, -.post-banner__content { - display: flex; - flex-direction: column; - height: 100%; -} - -.post-banner__content-wrapper { - position: relative; - padding: 1.25rem; - text-align: right; - align-items: flex-end; -} - -.post-banner__content { - width: 100%; - justify-content: center; - text-align: left; -} - -.post-banner__internal-link { - position: relative; - z-index: 3; - text-decoration-line: underline; -} - -.post-banner__title { - font-size: 1.5rem; - margin-bottom: 1.5rem; -} - -.post-banner__date { - width: 100%; - text-align: right; -} - -.post-banner__cta { - color: currentColor; -} - -.post-banner__tags { - margin: 1.25rem 0 var(--spacing); -} - -@media (min-width: $breakpoint-m) { - .post-banner { - grid-column: span 3 / span 3; - --color-tag: var(--color-white); - - & + & { - margin-top: 0; - } - } - - .post-banner__text { - &--desktop { - display: block; - } - - &--mobile { - display: none; - } - } - - .post-banner__image-overlay { - position: relative; - min-width: 100%; - color: var(--color-white); - aspect-ratio: 21/9; - } - - .post-banner__content-wrapper { - padding: 1.5rem; - justify-content: space-between; - align-items: flex-start; - text-align: left; - } - - .post-banner__content { - margin-left: 2rem; - max-width: initial; - justify-content: flex-end; - } - - .post-banner__internal-link { - text-decoration-line: none; - } - - .post-banner__title { - margin-top: 0.75rem; - margin-bottom: 0.75rem; - } - - .post-banner__tags { - margin: 0; - } -} - -@media (min-width: $breakpoint-l) { - .post-banner__title { - font-size: 3.5rem; - margin-bottom: 0.5rem; - } - - .post-banner__content-wrapper { - padding: 1.5rem; - } - - .post-banner__content { - max-width: 48.75rem; - margin-left: 5rem; - } -} diff --git a/src/assets/css/components/_post.scss b/src/assets/css/components/_post.scss index 38e3e593d3..70bd816a7a 100644 --- a/src/assets/css/components/_post.scss +++ b/src/assets/css/components/_post.scss @@ -143,7 +143,7 @@ h2 { font-size: rem-calc(18); font-weight: 500; - margin: 6.25rem 0 3.25rem; + margin: 6.25rem 0 3rem; } } diff --git a/src/assets/css/components/_split-quote.scss b/src/assets/css/components/_split-quote.scss deleted file mode 100644 index aa575f696c..0000000000 --- a/src/assets/css/components/_split-quote.scss +++ /dev/null @@ -1,110 +0,0 @@ -.split-quote { - --spacing: 1.5rem; - display: flex; - flex-direction: column; - - &--purple { - --color-quote-icon: var(--color-blue); - background-color: var(--color-purple); - color: var(--color-white); - } - - &--blue { - --color-quote-icon: var(--color-yellow); - --color-source: var(--color-black); - background-color: var(--color-blue); - color: var(--color-white); - } - - &--aqua { - --color-quote-icon: var(--color-purple); - background-color: var(--color-aqua); - color: var(--color-black); - } - - &--yellow { - --color-quote-icon: var(--color-purple); - background-color: var(--color-yellow); - color: var(--color-black); - } -} - -.split-quote__image-wrapper { - position: relative; - order: -1; - aspect-ratio: 1; -} - -.split-quote__image { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; -} - -.split-quote__container { - display: flex; - flex-direction: column; - justify-content: center; - aspect-ratio: 100 / 85; - padding: rem-calc(60) 0; -} - -.split-quote__quote { - display: grid; - gap: 1.5rem; - margin: 0; -} - -.split-quote__text { - margin: 0; - font-size: 1.5rem; - line-height: 1.3; -} - -.split-quote__source { - color: var(--color-source); -} - -.split-quote__icon { - color: var(--color-quote-icon); -} - -@media (min-width: $breakpoint-s) { - .split-quote { - flex-direction: row; - } - - .split-quote__image-wrapper { - flex: 0 0 50%; - aspect-ratio: 1/1; - } - - .split-quote__main { - display: flex; - flex: 0 0 50%; - - &--left { - order: -2; - } - } - - .split-quote__container { - width: 80%; - max-width: rem-calc(500); - } -} - -@media (min-width: $breakpoint-m) { - .split-quote__quote { - grid-template-columns: 3rem auto; - } - - .split-quote__text { - margin: 0; - } - - .split-quote__source { - grid-column: 2; - } -} diff --git a/src/assets/css/components/_workshop-cards.scss b/src/assets/css/components/_workshop-cards.scss deleted file mode 100644 index 264b1f834a..0000000000 --- a/src/assets/css/components/_workshop-cards.scss +++ /dev/null @@ -1,80 +0,0 @@ -.workshop-cards { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(14.25rem, 1fr)); - gap: rem-calc(26); - margin: 0; - padding: 0; - list-style: none; -} - -.workshop-card { - position: relative; - display: flex; - flex-direction: column; - padding: 1rem; - border: rem-calc(1) solid var(--color-light-gray); -} - -.workshop-card__link { - display: block; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 2; - outline-offset: 0.25rem; - - &:hover, &:focus { - & ~ .workshop-card__cta:before { - transform: scaleX(1); - } - } -} - -.workshop-card__lead-image-wrapper { - display: inline-block; - margin-right: 0.5rem; - margin-bottom: 0.5rem; - font-size: 0; -} - -.workshop-card__lead-image { - display: inline-block; - margin-right: 0.5rem; - font-size: 0; - width: 5.438rem; - aspect-ratio: 1/1; - object-fit: cover; - border-radius: 50%; -} - -.workshop-card__title { - margin-top: 0.5rem; -} - -.workshop-card__lead-text { - margin-top: 0.5rem; - font-size: rem-calc(13); -} - -.workshop-card__meta { - display: flex; - margin: 0.5rem 0; - padding: 0.5rem 0; - gap: 2rem; - border-top: 0.125rem solid currentColor; - border-bottom: 0.125rem solid currentColor; - font-weight: 600; - font-size: rem-calc(13); -} - -.workshop-card__description { - margin: 0.5rem 0; - font-size: rem-calc(13); -} - -.workshop-card__cta { - align-self: flex-start; - margin-top: auto; -} diff --git a/src/assets/css/components/_workshop-hero.scss b/src/assets/css/components/_workshop-hero.scss deleted file mode 100644 index 313829f66f..0000000000 --- a/src/assets/css/components/_workshop-hero.scss +++ /dev/null @@ -1,7 +0,0 @@ -.workshop-hero__format { - font-weight: 500; -} - -.workshop-hero__title { - margin: 1.25rem 0 0; -} \ No newline at end of file diff --git a/src/assets/css/components/_workshop-topics.scss b/src/assets/css/components/_workshop-topics.scss deleted file mode 100644 index 9daa762952..0000000000 --- a/src/assets/css/components/_workshop-topics.scss +++ /dev/null @@ -1,66 +0,0 @@ -.workshop-topics__list { - margin-top: 3rem; - padding: 0; - list-style: none; - counter-reset: item; - max-width: rem-calc(520); -} - -.workshop-topics__item { - margin-top: 1.5rem; - counter-increment: item; - display: flex; - - & + & { - margin-top: 2rem; - } - - &::before { - height: 2rem; - min-width: 2.5rem; - content: counter(item) "."; - font-size: 1.5rem; - font-weight: 700; - color: var(--color-purple); - line-height: 1.5; - } - - &--optional::before { - content: "*"; - } -} - -.workshop-topics__icon-wrapper { - margin-bottom: 1rem; - margin-right: 1.5rem; - - img { - margin: 0; - width: 2rem; - height: 2rem; - } -} - -.workshop-topics__heading { - .rte & { - margin: 6.25rem 0 3rem; - } -} - -.workshop-topics__item-heading { - .rte & { - margin: 0 0 1rem; - } -} - -.workshop-topics__text { - margin-bottom: 1rem; -} - -@media (min-width: $breakpoint-m) { - .workshop-topics__item { - & + & { - margin-top: 2.75rem; - } - } -} diff --git a/src/author.njk b/src/author.njk index 7189164c45..828d1ea2f3 100644 --- a/src/author.njk +++ b/src/author.njk @@ -34,7 +34,7 @@ permalink: "/blog/author/{{ paged.author.fileSlug }}/{% if paged.number > 1 %}/p

All posts by {{ paged.author.data.name }}

-

{{ paged.author.data.bio }}

+

{{ paged.author.data.bio }}

{{ authorSocials(paged.author.fileSlug, 'author-header__socials') }}

@@ -50,7 +50,7 @@ permalink: "/blog/author/{{ paged.author.fileSlug }}/{% if paged.number > 1 %}/p

{%- for post in paged.posts -%} - {{ postCard(post) }} + {{ postCard(post, 'h2') }} {%- endfor -%}
{% if paged.first != true %} diff --git a/src/components/case-study-card.njk b/src/components/case-study-card.njk deleted file mode 100644 index 700518af57..0000000000 --- a/src/components/case-study-card.njk +++ /dev/null @@ -1,31 +0,0 @@ -{% macro caseStudyCard(clientHandle) %} - {% set caseStudy = clientHandle | findBySlug %} -
  • - - {{ caseStudy.data.displayTitle }} - -
    - {% if caseStudy.data.hero.image %} -
    - {% image caseStudy.data.hero.image, caseStudy.data.hero.imageAlt, '(min-width: 48em) 44rem, 90vw', "lazy", 'featured-case-study__image', [704, 1408] %} -
    -
    - {% endif %} -
    - {% set imagePath %}/assets/images/logos/{{ clientHandle }}.svg{% endset %} - -

    {{ caseStudy.data.hero.tags }}

    - -
    -
    -
    -

    {{ caseStudy.data.company }}

    -

    {{ caseStudy.data.displayTitle | stripHTML }}

    -
    -
    • -{%- endmacro -%} diff --git a/src/components/contact-info.njk b/src/components/contact-info.njk deleted file mode 100644 index b0f4107f4b..0000000000 --- a/src/components/contact-info.njk +++ /dev/null @@ -1,21 +0,0 @@ -{% from "social-list.njk" import socialList %} - -
    -
    -

    Contact Us

    -

    - Let's talk about the challenges you're facing. Our experts are ready to guide you through your - next big move. -

    -
    - {% for method in contact.contactMethods %} - {{ method.text | safe }} - {% endfor %} -
    - -
    -
    diff --git a/src/components/content/hero-book-workshop.njk b/src/components/content/hero-book-workshop.njk deleted file mode 100644 index 6f38609dcb..0000000000 --- a/src/components/content/hero-book-workshop.njk +++ /dev/null @@ -1,13 +0,0 @@ -{% from "color-hero.njk" import colorHero %} -{% - set content = { - "title": "Book this workshop", - "text": "Our mentors look forward to working with your team and unlocking new capabilities.", - "linkUrl": "/contact/", - "linkText": "Get in touch", - "image": "/assets/images/photos/mainmatter-team-collaboration.jpg", - "alt": "Three smiling team members looking at a laptop", - "loading": "lazy" - } -%} -{{ colorHero('center', 'small', 'purple', content, true) }} diff --git a/src/components/content/hero-grow-with-us.njk b/src/components/content/hero-grow-with-us.njk deleted file mode 100644 index d8bd3814c8..0000000000 --- a/src/components/content/hero-grow-with-us.njk +++ /dev/null @@ -1,13 +0,0 @@ -{% from "color-hero.njk" import colorHero %} -{% - set content = { - "title": "Grow your business with us", - "text": "Our experts are ready to guide you through your next big move. Let us know how we can help.", - "linkUrl": "/contact/", - "linkText": "Get in touch", - "image": "/assets/images/photos/mainmatter-team-collaboration.jpg", - "alt": "Three smiling team members looking at a laptop", - "loading": "lazy" - } -%} -{{ colorHero('center', 'small', 'purple', content, true) }} diff --git a/src/components/featured-post.njk b/src/components/featured-post.njk deleted file mode 100644 index 7453d0eb38..0000000000 --- a/src/components/featured-post.njk +++ /dev/null @@ -1,78 +0,0 @@ -{% from "btn-primary.njk" import btnPrimary %} - -{%- macro featuredPost(post) -%} - {% if post.data.tags %} - {% set tags %} -
      - {% for tag in post.data.tags %} -
    • - {{ tag }} -
      • - {% endfor %} -
    - {% endset %} - {% endif %} - - {% if post.data.authorHandle %} - {% set authorInfo %} - {% set author = post.data.authorHandle | findBySlug %} -
    -
    - {% set imageUrl = '/assets/images/authors/' + author.data.page.fileSlug + '.jpg' %} - {% - image imageUrl, - '', - '2.5rem', - 'eager', - 'author__image', - [60, 120] - %} - {% endset %} -
    -
    -
    - by - {{ author.data.name }} -
    -
    -
    - {% endset %} - {% endset %} - {% endif %} - -
    - -
    -

    {{ post.data.title | safe }}

    -
    -
    - - {% for item in post.data.tags %} - {% if loop.index != 1 %}/{% endif %} - {{ item }} - {% endfor %} - - {{ post.date | monthDayYear }} - {{ authorInfo | safe }} -
    - {% if post.data.tagline %} -
    {{ post.data.tagline | safe }}
    - {% endif %} - {% - set link = { - "label": "Read more", - "url": post.url } - %} - {{ btnPrimary( link, 'white', 'mt-2' ) }} -
    -
    -
    -{%- endmacro -%} diff --git a/src/components/featured-technologies.njk b/src/components/featured-technologies.njk deleted file mode 100644 index 25d3cf8d1f..0000000000 --- a/src/components/featured-technologies.njk +++ /dev/null @@ -1,27 +0,0 @@ -{# -List of case studies as cards - -Configuration Options: -list: An array where each item is the slug for the case study. -#} -{% from 'featured-case-study.njk' import featuredCaseStudy %} -{% from 'case-study-card.njk' import caseStudyCard %} -{%- macro featuredCaseStudies(technologies, heading) -%} -
    -
    -

    Technologies

    -

    - Our skillset is based on a core set of technologies that cover architecture, backend and - frontend development with: -

    -
    -
    -
      - {%- for technologyHandle in technologies -%} - - {{ caseStudyCard(technologyHandle) }} - {% endfor %} -
    -
    -
    -{%- endmacro -%} diff --git a/src/components/global/nav-aside.njk b/src/components/global/nav-aside.njk deleted file mode 100644 index 5827f6be4b..0000000000 --- a/src/components/global/nav-aside.njk +++ /dev/null @@ -1,11 +0,0 @@ - diff --git a/src/components/layouts/case-study.njk b/src/components/layouts/case-study.njk index 50fbbd5278..23ce909a13 100644 --- a/src/components/layouts/case-study.njk +++ b/src/components/layouts/case-study.njk @@ -3,7 +3,6 @@ layout: base --- {% from "color-hero.njk" import colorHero %} -{% from 'case-study-card.njk' import caseStudyCard %} {% from "cta-banner.njk" import ctaBanner %} {% from 'case-card.njk' import caseCard %} {%- block content -%} diff --git a/src/components/post-banner.njk b/src/components/post-banner.njk deleted file mode 100644 index 65c63ae0a2..0000000000 --- a/src/components/post-banner.njk +++ /dev/null @@ -1,78 +0,0 @@ -{%- macro postBanner(post) -%} - {% if post.data.authorHandle %} - {% set authorInfo %} - {% set author = post.data.authorHandle | findBySlug %} -
    -
    - {% - image '/assets/images/authors/' + author.data.page.fileSlug + '.jpg', - '', - '2.5rem', - 'eager', - 'author__image', - [80] - %} -
    -
    -
    - by - - {{ author.data.name }} - -
    -
    -
    - {% endset %} - {% endif %} - - {% if post.data.tags %} - {% set tags %} -
      - {% for tag in post.data.tags %} -
    • - #{{ tag }} -
      • - {% endfor %} -
    - {% endset %} - {% endif %} - -
    - - {{ post.data.title }} - -
    -
    - {% if post.image %} - {% - image post.image, post.imageAlt, '(min-width: 48em) 60rem, 90vw', "lazy", 'post-banner__image', [760, - 1440, 1920] - %} - {% endif %} -
    -
    -
    -
    {{ post.date | monthDayYear }}
    -
    -
    {{ tags | safe }}
    -

    {{ post.data.title }}

    -
    {{ authorInfo | safe }}
    - - - Read article - {% include 'svg/arrow.njk' %} - - -
    -
    -
    -
    - {{ tags | safe }} - {{ authorInfo | safe }} -
    -
    -{%- endmacro -%} diff --git a/src/components/post-card.njk b/src/components/post-card.njk index 03b60ba2f2..5445aad1a8 100644 --- a/src/components/post-card.njk +++ b/src/components/post-card.njk @@ -6,16 +6,21 @@ post: A post object {{ postCard(post) }} #} -{%- macro postCard(post) -%} +{%- macro postCard(post, tag = 'h3') -%} +
    - + + <{{tag}} class="screenreader"> + {{ post.data.title }} + +

    {{ post.date | monthDayYear }}

    -

    {{ post.data.title }}

    +

    {{ post.data.title }}

    {% if post.data.authorHandle %} {% set author = post.data.authorHandle | findBySlug %} diff --git a/src/components/recent-posts.njk b/src/components/recent-posts.njk index 3b88e83ebb..8ae54d6bc1 100644 --- a/src/components/recent-posts.njk +++ b/src/components/recent-posts.njk @@ -1,5 +1,4 @@ {% from "cta-link.njk" import ctaLink %} -{% from "post-banner.njk" import postBanner %} {% from "post-card.njk" import postCard %} {% from "btn-secondary.njk" import btnSecondary %} diff --git a/src/components/split-quote.njk b/src/components/split-quote.njk deleted file mode 100644 index 4281409048..0000000000 --- a/src/components/split-quote.njk +++ /dev/null @@ -1,45 +0,0 @@ -{# -Section where one half is an image and the other half is a colored quote - -Configuration Options: -desktopTextPosition: 'left' or 'right', -color: One of the core brand colors -content: A content block with the following options: - text: Block quote text - source: Quote source, a person or organization - image: Path to image in the file directory - alt: Image alt text - loading: Valid loading attribute for HTML img - -Example usage: -{% set content = { - "text": "Mainmatter is a digital product consultancy that designs and develops web applications. We realize projects with clients across the globe and teach them how along the way.", - "source": "CEO" - "image": "/assets/images/photos/collaboration@1200.jpg", - "alt": "Alt text", - "loading": "eager" -} %} -{{ splitQuote('left', 'purple', content) }} -#} - -{%- macro splitQuote(desktopTextPosition, color, content) -%} -
    -
    -
    -
    - {%- include 'svg/quote.njk' -%} -
    {{- content.text | safe -}}
    -
    {{- content.source -}}
    -
    -
    -
    -
    - {%- if content.image -%} - {%- image content.image, content.alt, '(min-width: 48em) 50vw, 100vw', content.loading, 'split-quote__image' -%} - {%- endif -%} -
    -
    -{%- endmacro -%} From 8e8bbb40ff1176ad6be71f2867f1abf3cf92a0e5 Mon Sep 17 00:00:00 2001 From: Nic Chan Date: Fri, 21 Jun 2024 12:11:04 +0800 Subject: [PATCH 2/9] Dry up team section --- src/_data/team.json | 88 ++++++ .../css/components/_mainmatter-team.scss | 1 - src/components/mainmatter-team.njk | 261 +++--------------- src/index.njk | 5 +- 4 files changed, 121 insertions(+), 234 deletions(-) create mode 100644 src/_data/team.json diff --git a/src/_data/team.json b/src/_data/team.json new file mode 100644 index 0000000000..fa58c26679 --- /dev/null +++ b/src/_data/team.json @@ -0,0 +1,88 @@ +{ + "team": [ + { + "name": "Florian Pichler", + "imgPath": "/assets/images/team/florian.jpg" + }, + { + "name": "Veronica Schucan", + "imgPath": "/assets/images/team/veronica.jpg" + }, + { + "name": "Daniel Beer", + "imgPath": "/assets/images/team/dan.jpg" + }, + { + "name": "Gábor Babicz", + "imgPath": "/assets/images/team/gabor.jpg" + }, + { + "name": "Nina Arndt", + "imgPath": "/assets/images/team/nina.jpg" + }, + { + "name": "Sarah Lorenz", + "imgPath": "/assets/images/team/sarah.jpg" + }, + { + "name": "Bartłomiej Dudzik", + "imgPath": "/assets/images/team/bart.jpg" + }, + { + "name": "Kevin Bongart", + "imgPath": "/assets/images/team/kevin.jpg" + }, + { + "name": "Marine Dunstettter", + "imgPath": "/assets/images/team/marine.jpg" + }, + { + "name": "Nora Burkhardt", + "imgPath": "/assets/images/team/nora.jpg" + }, + { + "name": "Paolo Ricciuti", + "imgPath": "/assets/images/team/paolo.jpg" + }, + { + "name": "Nick Schot", + "imgPath": "/assets/images/team/nick.jpg" + }, + { + "name": "Idelia Risella", + "imgPath": "/assets/images/team/idelia.jpg" + }, + { + "name": "Majd Bayassi", + "imgPath": "/assets/images/team/majd.jpg" + }, + { + "name": "Emma Sofia Dell'Acqua", + "imgPath": "/assets/images/team/emma.jpg" + }, + { + "name": "Marco Otte-Witte", + "imgPath": "/assets/images/team/marco.jpg" + }, + { + "name": "Chris Manson", + "imgPath": "/assets/images/team/chris.jpg" + }, + { + "name": "Inês Silva", + "imgPath": "/assets/images/team/ines.jpg" + }, + { + "name": "Óscar Domínguez Celada", + "imgPath": "/assets/images/team/oscar.png" + }, + { + "name": "Luca Palmieri", + "imgPath": "/assets/images/team/luca.jpg" + }, + { + "name": "Oliver Azevedo Barnes", + "imgPath": "/assets/images/team/oliver.jpg" + } + ] +} diff --git a/src/assets/css/components/_mainmatter-team.scss b/src/assets/css/components/_mainmatter-team.scss index 940cd4d057..134f98aef6 100644 --- a/src/assets/css/components/_mainmatter-team.scss +++ b/src/assets/css/components/_mainmatter-team.scss @@ -1,5 +1,4 @@ .mainmatter-team { - width: 100vw; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; diff --git a/src/components/mainmatter-team.njk b/src/components/mainmatter-team.njk index 9bb3e1b898..c608ea0d94 100644 --- a/src/components/mainmatter-team.njk +++ b/src/components/mainmatter-team.njk @@ -1,240 +1,41 @@ {% from "image-aspect-ratio.njk" import imageAspectRatio %} -{%- macro mainmatterTeam() -%} -
    -
    -

    Why Mainmatter

    -
    +
    +
    +

    Why Mainmatter

    +
    -
    - {% - set imageData = { - "imgPath": "/assets/images/team/florian.jpg", - "alt": "Portrail photo of Florian Pichler looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% +
    + {%- for teammate in team.team -%} + {% set alt %}{{ teammate.name }} looking straight into the camera{% endset %} + {%- set imageData = { - "imgPath": "/assets/images/team/veronica.jpg", - "alt": "Portrail photo of Veronica Schucan looking straight into the camera", - "sizes": "400px", + "imgPath": teammate.imgPath, + "alt": alt, + "sizes": "200px, 400px", "loading": "lazy", "sizesArray": [200, 400] } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/dan.jpg", - "alt": "Portrail photo of Daniel Beer looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/gabor.jpg", - "alt": "Portrail photo of Gábor Babicz looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/nina.jpg", - "alt": "Portrail photo of Nina Arndt looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/sarah.jpg", - "alt": "Portrail photo of Sarah Lorenz looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/bart.jpg", - "alt": "Portrail photo of Bartłomiej Dudzik looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/kevin.jpg", - "alt": "Portrail photo of Kevin Bongart looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/marine.jpg", - "alt": "Portrail photo of Marine Dunstetter looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/nora.jpg", - "alt": "Portrail photo of Nora Burkhardt looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/paolo.jpg", - "alt": "Portrail photo of Paolo Ricciuti looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/nick.jpg", - "alt": "Portrail photo of Nick Schot looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/idelia.jpg", - "alt": "Portrail photo of Idelia Risella looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/majd.jpg", - "alt": "Portrail photo of Majd Bayassi looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/emma.jpg", - "alt": "Portrail photo of Emma Sofia Dell'Acqua looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/marco.jpg", - "alt": "Portrail photo of Marco Otte-Witte looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/chris.jpg", - "alt": "Portrail photo of Chris Manson looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/ines.jpg", - "alt": "Portrail photo of Inês Silva looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/oscar.png", - "alt": "Portrail photo of Óscar Domínguez Celada looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/luca.jpg", - "alt": "Portrail photo of Luca Palmieri looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} - {% - set imageData = { - "imgPath": "/assets/images/team/oliver.jpg", - "alt": "Portrail photo of Oliver Azevedo Barnes looking straight into the camera", - "sizes": "400px", - "loading": "lazy", - "sizesArray": [200, 400] - } - %} - {{ imageAspectRatio(imageData, "40/32", "40/32") }} -
    + -%} + {{- imageAspectRatio(imageData, "40/32", "40/32") -}} + {%- endfor -%} +
    -
    -
    -

    - We are a team of developers, inventors, designers, strategists, artists and storytellers. - We work remotely from 10 countries in Europe and we believe in recruiting top talents from - any location. -

    -
    -

    - That said, we still value face time. We frequently come together for team events and - workshops, and invite our clients to join us as well. The team also frequently attends - and speaks at international conferences and we host a series of conferences and meetups - ourselves. -

    -
    +
    +
    +

    + We are a team of developers, inventors, designers, strategists, artists and storytellers. + We work remotely from 10 countries in Europe and we believe in recruiting top talents from + any location. +

    +
    +

    + That said, we still value face time. We frequently come together for team events and + workshops, and invite our clients to join us as well. The team also frequently attends + and speaks at international conferences and we host a series of conferences and meetups + ourselves. +

    -
    -{%- endmacro -%} +
    + diff --git a/src/index.njk b/src/index.njk index 3bd11498de..e906aeb01e 100644 --- a/src/index.njk +++ b/src/index.njk @@ -7,7 +7,6 @@ title: null {% from "featured-services.njk" import featuredServices %} {% from "logo-list.njk" import logoList %} {% from "featured-case-studies.njk" import featuredCaseStudies %} -{% from "mainmatter-team.njk" import mainmatterTeam %} {% from "tech-cards.njk" import techCards %} {% from "cta-banner.njk" import ctaBanner %} {% from "quote.njk" import quote %} @@ -91,7 +90,7 @@ title: null "logo": "elixir", "link": "expertise/elixir-phoenix" } -%} +%}` {% set 'tech_4' = { "title": "We're veteran Ruby and Ruby on Rails experts", @@ -118,7 +117,7 @@ title: null %} {{ ctaBanner('purple', 'default', content) }} -{{ mainmatterTeam() }} +{%- include 'mainmatter-team.njk' -%} {% if collections.calendar.length > 0 %}
    From 6e7f4126a59b218f97ec1de02c462b64a54f5b08 Mon Sep 17 00:00:00 2001 From: Nic Chan Date: Fri, 21 Jun 2024 15:43:48 +0800 Subject: [PATCH 3/9] Standardize and cleanup card layouts --- .eleventy.js | 7 +- src/assets/css/app.scss | 3 +- src/assets/css/components/_cards.scss | 102 ++++++++++++ src/assets/css/components/_case-cards.scss | 148 +++--------------- .../css/components/_featured-services.scss | 8 - .../css/components/_next-events-cards.scss | 76 --------- src/assets/css/components/_next-events.scss | 26 --- src/assets/css/components/_post-cards.scss | 115 -------------- src/assets/css/components/_tech-cards.scss | 106 ------------- src/author.njk | 4 +- src/blog.njk | 4 +- src/components/case-card.njk | 36 ++--- src/components/case-cards.njk | 47 ++---- src/components/color-hero.njk | 2 +- src/components/featured-services.njk | 2 +- src/components/global/tag-filter.njk | 2 +- src/components/layouts/case-study.njk | 17 +- src/components/post-card.njk | 25 ++- src/components/tech-cards.njk | 21 +-- src/components/twios-card.njk | 23 ++- src/index.njk | 23 +-- src/ruby-rails-consulting.njk | 14 +- src/tag.njk | 4 +- src/this-week-in-open-source.njk | 4 +- 24 files changed, 228 insertions(+), 591 deletions(-) create mode 100644 src/assets/css/components/_cards.scss delete mode 100644 src/assets/css/components/_next-events-cards.scss delete mode 100644 src/assets/css/components/_next-events.scss diff --git a/.eleventy.js b/.eleventy.js index 0d4567b7e6..1cdf908d54 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -22,6 +22,7 @@ const { findBySlug } = require("./utils/findBySlug"); */ const config = require("./src/_data/config.js"); const pathConfig = require("./src/_data/paths.json"); +const e = require("express"); module.exports = function (eleventyConfig) { /** @@ -106,7 +107,11 @@ module.exports = function (eleventyConfig) { }); eleventyConfig.addFilter("getMorePosts", function (array, post) { - return array.filter(element => element.inputPath !== post.inputPath); + return array + .filter(element => element.inputPath !== post.inputPath) + .map(el => { + return el.fileSlug; + }); }); eleventyConfig.addFilter("getCollectionKeys", function (collection) { diff --git a/src/assets/css/app.scss b/src/assets/css/app.scss index 5d135fd908..66557504ca 100644 --- a/src/assets/css/app.scss +++ b/src/assets/css/app.scss @@ -29,6 +29,7 @@ @import "components/tag-filter"; @import "components/section"; @import "components/tags"; +@import "components/cards"; @import "components/post-cards"; @import "components/pagination"; @import "components/prev-next"; @@ -64,8 +65,6 @@ @import "components/open-source-list"; @import "components/video"; @import "components/embroider-sponsors"; -@import "components/next-events"; -@import "components/next-events-cards"; @import "components/vite-upgrade-grid"; @import "animations/text-animation"; diff --git a/src/assets/css/components/_cards.scss b/src/assets/css/components/_cards.scss new file mode 100644 index 0000000000..348c64bc79 --- /dev/null +++ b/src/assets/css/components/_cards.scss @@ -0,0 +1,102 @@ +.cards__grid { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; + margin-top: 2.5rem; + padding: 0; + list-style: none; +} + +@media (min-width: $breakpoint-s) { + .cards__grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (min-width: $breakpoint-l) { + .cards__grid { + grid-template-columns: 1fr 1fr 1fr; + } +} + +.card__grid-element { + position: relative; + color: var(--color-white); + padding: 1.25rem 1.25rem 1.25rem 1.25rem; + min-height: 32rem; + background-repeat: no-repeat; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: start; + text-decoration: none; + overflow: hidden; + cursor: pointer; + + &:hover, + &:focus { + --icon-arrow-transform: translate3d(0.5rem, 0, 0); + } + + a:hover { + text-decoration: underline; + } + + &:nth-child(2n + 1) { + background-color: var(--color-purple); + } + + &:nth-child(2n) { + background-color: var(--color-black); + } + + &:nth-child(5n + 1) { + background-color: var(--color-aqua); + } +} + +.card__logo-wrapper { + align-self: end; + position: relative; +} + +.card__logo svg { + fill: white; +} + +.card__link-wrapper { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + text-decoration: none; + transition: color 0.3s ease; +} + +.card__content { + position: relative; + width: 100%; +} + +.card__link { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 50; + outline-offset: -0.25rem; +} + +.card__link-arrow { + --icon-arrow-size: 1.5rem; + position: relative; + margin-left: 0.25rem; + z-index: 1; + display: flex; +} + +.card__grid-element a:not(.card__link) { + position: relative; + z-index: 100; +} diff --git a/src/assets/css/components/_case-cards.scss b/src/assets/css/components/_case-cards.scss index 21d7daed6a..dfa9b149cf 100644 --- a/src/assets/css/components/_case-cards.scss +++ b/src/assets/css/components/_case-cards.scss @@ -1,70 +1,36 @@ -.case-cards__grid { - display: grid; - grid-template-columns: 1fr; - gap: 1.5rem; - margin-top: 2.5rem; -} - -@media (min-width: $breakpoint-s) { - .case-cards__grid { - grid-template-columns: 1fr 1fr; - } -} - -@media (min-width: $breakpoint-l) { - .case-cards__grid { - grid-template-columns: 1fr 1fr 1fr; - } -} - .case-cards__grid-element { - position: relative; - color: var(--color-white); - padding: 1.25rem 1.25rem 1.25rem 1.25rem; - min-height: 32rem; - background-repeat: no-repeat; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: stretch; - text-decoration: none; - overflow: hidden; - cursor: pointer; - - a:hover, - &:focus { - text-decoration: underline; + &:nth-child(n) { + background-color: var(--color-purple); } - .case-cards_headline { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr; - align-items: end; + &:nth-child(2n) { + background-color: var(--color-aqua); } - .problem { - transform: translate(0px); - grid-row: 1; - grid-column: 1; - transition: transform 1s ease; + &:nth-child(2n + 3) { + background-color: var(--color-black); } +} - .solution { - transform: translate(calc(100% + 10rem)); - grid-row: 1; - grid-column: 1; - transition: transform 1s ease; - } +.case-cards__headline { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + align-items: end; } -.case-cards--hover { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - overflow: hidden; +.case-cards__problem { + transform: translate(0px); + grid-row: 1; + grid-column: 1; + transition: transform 1s ease; +} + +.case-cards__solution { + transform: translate(calc(100% + 10rem)); + grid-row: 1; + grid-column: 1; + transition: transform 1s ease; } @media (hover: hover) { @@ -74,74 +40,12 @@ color: var(--color-white); cursor: pointer; - .problem { + .case-cards__problem { transform: translate(calc(-100% - 10rem)); } - .solution { + .case-cards__solution { transform: translate(0px); } } } - -.case-cards__content { - position: relative; - width: 100%; -} - -.case-cards__logo-wrapper { - align-self: end; - position: relative; -} - -.case-cards__logo svg { - fill: white; -} - -.case-cards__link { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - text-decoration: none; - background-repeat: no-repeat; - z-index: 50; - outline-offset: -0.5rem; -} - -.case-cards__link-wrapper { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - text-decoration: none; - transition: color 0.1s ease; -} - -.case-cards__grid-element:nth-child(n) { - background-color: var(--color-purple); -} - -.case-cards__grid-element:nth-child(2n) { - background-color: var(--color-aqua); -} - -.case-cards__grid-element:nth-child(2n + 3) { - background-color: var(--color-black); -} - -.case-cards__link-arrow { - --icon-arrow-size: 1.5rem; - position: relative; - margin-left: 0.25rem; - z-index: 1; - display: flex; - justify-content: center; -} - -.case-cards__link-label a { - text-decoration: none; - position: relative; - z-index: 100; -} diff --git a/src/assets/css/components/_featured-services.scss b/src/assets/css/components/_featured-services.scss index e5f81e73db..a2da9e76de 100644 --- a/src/assets/css/components/_featured-services.scss +++ b/src/assets/css/components/_featured-services.scss @@ -1,7 +1,3 @@ -.featured-services { - padding: 2.5rem 0 5rem; -} - .featured-services__list-wrapper { margin: 3rem 0; } @@ -76,10 +72,6 @@ } @media (min-width: $breakpoint-s) { - .featured-services { - padding: 7rem 0; - } - .featured-services__list-wrapper { display: flex; align-items: center; diff --git a/src/assets/css/components/_next-events-cards.scss b/src/assets/css/components/_next-events-cards.scss deleted file mode 100644 index 68e28ef57c..0000000000 --- a/src/assets/css/components/_next-events-cards.scss +++ /dev/null @@ -1,76 +0,0 @@ -.next-events-cards__grid-element { - position: relative; - color: var(--color-white); - padding: 1.25rem 1.25rem 1.25rem 1.25rem; - min-height: 32rem; - background-repeat: no-repeat; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: start; - text-decoration: none; - overflow: hidden; - cursor: pointer; - - a:hover, &:focus { - text-decoration: underline; - } -} - -.next-events-cards__grid-element:hover, .next-events-cards__grid-element:focus-within { - --icon-arrow-transform: translate3d(0.5rem, 0, 0); -} - -.next-events-cards__date-wrapper { - position: relative; -} - -.next-events-cards__link-wrapper { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-end; - text-decoration: none; - transition: color 0.3s ease; -} - -.next-events-cards__grid-element:nth-child(2n + 1) { - background-color: var(--color-purple); -} - -.next-events-cards__grid-element:nth-child(2n) { - background-color: var(--color-black); -} - -.next-events-cards__grid-element:nth-child(5n + 1) { - background-color: var(--color-aqua); -} - -.next-events-cards__content { - position: relative; - width: 100%; -} - -.next-events-cards__date-wrapper { - align-self: end; -} - -.next-events-cards__link { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - text-decoration: none; - background-repeat: no-repeat; - z-index: 50; -} - -.next-events-cards__link-arrow { - --icon-arrow-size: 1.5rem; - position: relative; - margin-left: 0.25rem; - z-index: 1; - display: flex; - justify-content: center; -} diff --git a/src/assets/css/components/_next-events.scss b/src/assets/css/components/_next-events.scss deleted file mode 100644 index f5b9945edc..0000000000 --- a/src/assets/css/components/_next-events.scss +++ /dev/null @@ -1,26 +0,0 @@ -.next-events { - margin: 6.75rem 0; -} - -.next-events__list { - display: grid; - grid-template-columns: 1fr; - list-style: none; - margin: 0; - padding: 0; - gap: 1.5rem; -} - -@media (min-width: $breakpoint-s) { - .next-events__list { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1.5rem; - } -} - -@media (min-width: $breakpoint-l) { - .next-events__list { - grid-template-columns: repeat(3, 1fr); - } -} diff --git a/src/assets/css/components/_post-cards.scss b/src/assets/css/components/_post-cards.scss index 1426a93fa1..55f118c39d 100644 --- a/src/assets/css/components/_post-cards.scss +++ b/src/assets/css/components/_post-cards.scss @@ -1,80 +1,3 @@ -.post-cards__grid { - display: grid; - grid-template-columns: 1fr; - gap: 1.5rem; - margin-top: 2.5rem; -} - -@media (min-width: $breakpoint-s) { - .post-cards__grid { - grid-template-columns: 1fr 1fr; - } -} - -@media (min-width: $breakpoint-l) { - .post-cards__grid { - grid-template-columns: 1fr 1fr 1fr; - } -} - -.post-cards__grid-element { - position: relative; - color: var(--color-white); - padding: 1.25rem 1.25rem 1.25rem 1.25rem; - min-height: 32rem; - background-repeat: no-repeat; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: start; - text-decoration: none; - overflow: hidden; - cursor: pointer; - - &:hover, - &:focus { - --icon-arrow-transform: translate3d(0.5rem, 0, 0); - } - - a:hover { - text-decoration: underline; - } -} - -.post-cards__logo svg { - fill: white; -} - -.post-cards__date-wrapper { - position: relative; -} - -.post-cards__link-wrapper { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - text-decoration: none; - transition: color 0.3s ease; -} - -.post-cards__grid-element:nth-child(2n + 1) { - background-color: var(--color-purple); -} - -.post-cards__grid-element:nth-child(2n) { - background-color: var(--color-black); -} - -.post-cards__grid-element:nth-child(5n + 1) { - background-color: var(--color-aqua); -} - -.post-cards__content { - position: relative; - width: 100%; -} - .post-cards__author { margin-bottom: 2rem; display: flex; @@ -94,41 +17,3 @@ object-fit: cover; border-radius: 50%; } - -.post-cards__date-wrapper { - align-self: end; -} - -.post-cards--hover { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; -} - -.post-cards__link { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - text-decoration: none; - background-repeat: no-repeat; - z-index: 50; - outline-offset: -0.25rem; -} - -.post-cards__link-arrow { - --icon-arrow-size: 1.5rem; - position: relative; - margin-left: 0.25rem; - z-index: 1; - display: flex; -} - -.post-cards__link-label a, -.post-cards__author-name a { - position: relative; - z-index: 100; -} diff --git a/src/assets/css/components/_tech-cards.scss b/src/assets/css/components/_tech-cards.scss index 6d925244ab..74f3fbeacf 100644 --- a/src/assets/css/components/_tech-cards.scss +++ b/src/assets/css/components/_tech-cards.scss @@ -1,76 +1,3 @@ -.tech-cards__grid { - display: grid; - grid-template-columns: 1fr; - gap: 1.5rem; - margin-top: 2.5rem; -} - -@media (min-width: $breakpoint-s) { - .tech-cards__grid { - grid-template-columns: 1fr 1fr; - } -} - -@media (min-width: $breakpoint-l) { - .tech-cards__grid { - grid-template-columns: 1fr 1fr 1fr; - } -} - -.tech-cards__grid-element { - color: var(--color-white); - padding: 1.25rem 1.25rem 1.25rem 1.25rem; - min-height: 32rem; - background-repeat: no-repeat; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: start; - text-decoration: none; - position: relative; - cursor: pointer; - overflow: hidden; - - &:hover, - &:focus { - .tech-cards__link-arrow { - .icon-arrow { - transform: translateX(0.5rem) rotate(-90deg); - transition: transform 0.5s ease; - } - } - } -} - -.tech-cards_link { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - text-decoration: none; - background-repeat: no-repeat; - cursor: pointer; - z-index: 50; -} - -.tech-cards__link-wrapper { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - text-decoration: none; -} - -.tech-cards__content { - width: 100%; - position: relative; -} - -.tech-cards__intro { - max-width: 64rem; -} - .tech-cards__logo { position: relative; max-width: 80%; @@ -96,15 +23,6 @@ } } -.tech-cards--hover { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - overflow: hidden; -} - .tech-cards__grid-element:nth-child(2n + 1) { background-color: var(--color-purple); @@ -128,27 +46,3 @@ fill: #55e6d8; } } - -.tech-cards__link-arrow { - position: relative; - margin-left: 0.25rem; - z-index: 1; - display: flex; - justify-content: center; - - .icon-arrow { - transform: translateX(0px) rotate(-90deg); - transition: transform 0.5s ease; - width: 24px; - height: auto; - } - - &--rotate { - margin-left: 0; - margin-right: 0.5rem; - - .icon-arrow { - transform: rotate(90deg); - } - } -} diff --git a/src/author.njk b/src/author.njk index 828d1ea2f3..f60e2a1435 100644 --- a/src/author.njk +++ b/src/author.njk @@ -48,11 +48,11 @@ permalink: "/blog/author/{{ paged.author.fileSlug }}/{% if paged.number > 1 %}/p
    -
    +
      {%- for post in paged.posts -%} {{ postCard(post, 'h2') }} {%- endfor -%} -
    + {% if paged.first != true %} {%- set previous -%}/blog/author/{{ paged.author.fileSlug }}/{% if paged.number > 2 %}page/{{ paged.number - 1 }}/{% endif %}{%- endset -%} {% endif %} diff --git a/src/blog.njk b/src/blog.njk index 5e5f7848da..5d429b810c 100644 --- a/src/blog.njk +++ b/src/blog.njk @@ -35,11 +35,11 @@ eleventyNavigation: {{ colorHero('purple', content) }}
    {% include 'global/tag-filter.njk' %} -
    +
      {%- for post in pagination.items -%} {{ postCard(post) }} {%- endfor -%} -
    + {% if pagination.pageNumber === 0 %} {% set nextLabel = 'Explore more articles' %} {% else %} diff --git a/src/components/case-card.njk b/src/components/case-card.njk index 93f5630d85..3006e2779b 100644 --- a/src/components/case-card.njk +++ b/src/components/case-card.njk @@ -1,32 +1,32 @@ -{% macro caseCard(clientHandle) %} -
  • +{%- macro caseCard(clientHandle) -%} +
  • {% set caseStudy = clientHandle | findBySlug %} -
    - {% if caseStudy.url %} - - {% else %} - - {% endif %} -
    + +

    + {{ caseStudy.data.problem }} + {{ caseStudy.data.solution }} +

    +     +
    {% set imagePath %}/assets/images/logos/{{ clientHandle }}.svg{% endset %} - + {{ company }}
    -
    +
    {% if caseStudy.data.problem %} -
    -

    {{ caseStudy.data.problem }}

    -

    {{ caseStudy.data.solution }}

    + {% endif %} -
    -
    +
    +
    {% for item in caseStudy.data.tags %} {% if loop.index != 1 %}/{% endif %} {{ item }} {% endfor %}
    - {% include 'svg/arrow.njk' %} + {% include 'svg/arrow.njk' %}
    • -{% endmacro %} +{%- endmacro -%} diff --git a/src/components/case-cards.njk b/src/components/case-cards.njk index 2e06938829..e9df6327f4 100644 --- a/src/components/case-cards.njk +++ b/src/components/case-cards.njk @@ -1,42 +1,19 @@ +{% from "case-card.njk" import caseCard %} + {% macro caseCards(id, title, intro, clients) %} -
    +
    -

    {{ title }}

    -

    {{ intro }}

    -
    + {% if title %} +

    {{ title }}

    + {% endif %} + {% if intro %} +

    {{ intro }}

    + {% endif %} +
      {% for clientHandle in clients %} -
      - {% set caseStudy = clientHandle | findBySlug %} -
      - {% if caseStudy.url %} - - {% else %} - - {% endif %} -
      - {% set imagePath %}/assets/images/logos/{{ clientHandle }}.svg{% endset %} - -
      -
      - {% if caseStudy.data.problem %} -
      -

      {{ caseStudy.data.problem }}

      -

      {{ caseStudy.data.solution }}

      -
      - {% endif %} -
      -
      - {% for item in caseStudy.data.tags %} - {% if loop.index != 1 %}/{% endif %} - {{ item }} - {% endfor %} -
      - {% include 'svg/arrow.njk' %} -
      -
      -
      + {{ caseCard(clientHandle) }} {% endfor %} -
    +
    {% endmacro %} diff --git a/src/components/color-hero.njk b/src/components/color-hero.njk index 6d787a53f9..2004108bdb 100644 --- a/src/components/color-hero.njk +++ b/src/components/color-hero.njk @@ -41,7 +41,7 @@ Example usage:
    {% if content.eyebrow %} -
    {{ content.eyebrow | safe }}
    +

    {{ content.eyebrow | safe }}

    {% endif %} {% if content.title %}

    {{ content.title | safe }}

    diff --git a/src/components/featured-services.njk b/src/components/featured-services.njk index 27a0dc0468..5e7ea65126 100644 --- a/src/components/featured-services.njk +++ b/src/components/featured-services.njk @@ -1,5 +1,5 @@ {%- macro featuredServices(services, content) -%} -
    +
    {% if content.title %} diff --git a/src/components/global/tag-filter.njk b/src/components/global/tag-filter.njk index 0fd19d1690..4d8a5c4421 100644 --- a/src/components/global/tag-filter.njk +++ b/src/components/global/tag-filter.njk @@ -1,5 +1,5 @@
    -

    Blog posts

    +

    Blog posts