diff --git a/src/assets/images/archive.svg b/src/assets/images/archive.svg new file mode 100644 index 00000000..e58fc5af --- /dev/null +++ b/src/assets/images/archive.svg @@ -0,0 +1 @@ +Technology & platformsLaw & policyFair laborPlatformcoop theoryFormatSector \ No newline at end of file diff --git a/src/assets/images/coop-types.svg b/src/assets/images/coop-types.svg new file mode 100644 index 00000000..572ccfa1 --- /dev/null +++ b/src/assets/images/coop-types.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/favorites.svg b/src/assets/images/favorites.svg new file mode 100644 index 00000000..c51bacf0 --- /dev/null +++ b/src/assets/images/favorites.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/formats.svg b/src/assets/images/formats.svg new file mode 100644 index 00000000..988e4a98 --- /dev/null +++ b/src/assets/images/formats.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/goals.svg b/src/assets/images/goals.svg new file mode 100644 index 00000000..f198a616 --- /dev/null +++ b/src/assets/images/goals.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/home.svg b/src/assets/images/home.svg new file mode 100644 index 00000000..c9f2269d --- /dev/null +++ b/src/assets/images/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/page.svg b/src/assets/images/page.svg new file mode 100644 index 00000000..069e39da --- /dev/null +++ b/src/assets/images/page.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/sectors.svg b/src/assets/images/sectors.svg new file mode 100644 index 00000000..096849c0 --- /dev/null +++ b/src/assets/images/sectors.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/topics.svg b/src/assets/images/topics.svg new file mode 100644 index 00000000..4f0d373d --- /dev/null +++ b/src/assets/images/topics.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/styles/layouts/_archive.scss b/src/assets/styles/layouts/_archive.scss index 1b7b7b8d..b375807a 100644 --- a/src/assets/styles/layouts/_archive.scss +++ b/src/assets/styles/layouts/_archive.scss @@ -6,6 +6,20 @@ .archive .page-header, .search-results .page-header { + align-items: flex-start; + display: flex; + flex-direction: column; + margin-bottom: rem(50); + + &::before { + background-image: url("../images/archive.svg"); + } + + > * { + background-color: var(--off-white); + box-shadow: 0 0 0 rem(30) var(--off-white); + } + @include full-width-background(var(--white)); @include grid-column-span(4, 4); } @@ -65,6 +79,7 @@ @include breakpoint-up(md) { .archive .page-header, .search-results .page-header { + margin-bottom: rem(65); padding: rem(157) 0 rem(114); } } diff --git a/src/assets/styles/layouts/_favorites.scss b/src/assets/styles/layouts/_favorites.scss index 30117990..97b3b1a5 100644 --- a/src/assets/styles/layouts/_favorites.scss +++ b/src/assets/styles/layouts/_favorites.scss @@ -1,3 +1,9 @@ +.page.page-template-page-favorites .page-header { + &::before { + background-image: url("../images/favorites.svg"); + } +} + .page.page-template-page-favorites .cards .card__wrapper { display: grid; gap: rem(20); diff --git a/src/assets/styles/layouts/_header.scss b/src/assets/styles/layouts/_header.scss index 3353dd4c..e0c2be79 100644 --- a/src/assets/styles/layouts/_header.scss +++ b/src/assets/styles/layouts/_header.scss @@ -4,6 +4,7 @@ background-color: var(--white); box-shadow: 0 rem(3) rem(6) rgba(0, 0, 0, 0.16); width: 100%; + z-index: 1; .container { align-items: center; diff --git a/src/assets/styles/layouts/_home.scss b/src/assets/styles/layouts/_home.scss index a6ecdc6a..c6c205cb 100644 --- a/src/assets/styles/layouts/_home.scss +++ b/src/assets/styles/layouts/_home.scss @@ -1,16 +1,45 @@ +.page.home .banner-pattern { + background: var(--blue-500); + background-image: url("../images/home.svg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + height: rem(500); + left: 50%; + position: absolute; + transform: translateX(-50%); + width: 100vw; + z-index: -2; +} + .page.home .page-header { color: var(--white); + display: block; + margin-bottom: 0; + margin-top: rem(140); padding-bottom: rem(70); + padding-top: rem(25); position: relative; - @include full-width-background(var(--blue-500)); + > * { + background-color: transparent; + box-shadow: none; + color: inherit; + } + + @include full-width-background(transparentize($blue-700, 0.1)); + + &::before { + background-image: unset; + margin-left: 0; + } } .home__search { - background: var(--blue-400); + background-color: var(--blue-500); position: relative; - @include full-width-background(var(--blue-400)); + @include full-width-background(var(--blue-500)); .search-form { position: relative; @@ -19,7 +48,7 @@ } .home__browse { - background: var(--blue-400); + background-color: var(--blue-500); color: var(--white); padding-bottom: rem(40); padding-top: rem(8); @@ -33,7 +62,7 @@ margin-top: rem(36); } - @include full-width-background(var(--blue-400)); + @include full-width-background(var(--blue-500)); } .home__feed { @@ -80,6 +109,15 @@ } @include breakpoint-up(sm) { + .page.home .banner-pattern { + height: rem(608); + } + + .page.home .page-header { + margin-top: rem(275); + padding-top: rem(60); + } + .page.home main { @include grid-column-span(8, 8); } diff --git a/src/assets/styles/layouts/_page.scss b/src/assets/styles/layouts/_page.scss index 744603d5..09ecb9b2 100644 --- a/src/assets/styles/layouts/_page.scss +++ b/src/assets/styles/layouts/_page.scss @@ -6,10 +6,53 @@ main { padding-bottom: rem(100); } +} - .page-header { - padding-bottom: rem(100); - padding-top: rem(100); +.page .page-header { + align-items: flex-start; + display: flex; + flex-direction: column; + margin-bottom: rem(50); + padding-bottom: rem(100); + padding-top: rem(100); + + > * { + background-color: var(--blue-500); + box-shadow: 0 0 0 rem(30) var(--blue-500); + color: var(--white); + } + + &::before { + background-image: url("../images/page.svg"); + background-position: center top; + background-repeat: no-repeat; + background-size: cover; + content: ""; + display: block; + height: 100%; + left: 50%; + position: absolute; + top: 0; + transform: translateX(-50%); + width: 100vw; + z-index: -1; + } + + .link--breadcrumb { + --background-color: transparent; + --border-color: transparent; + --color: var(--off-white); + --outline-color: var(--dark-mint-500); + --hover-background-color: var(--background-color); + --hover-border-color: var(--border-color); + --hover-color: var(--white); + --visited-color: var(--blue-50); + --active-background-color: var(--background-color); + --active-border-color: var(--border-color); + --active-color: var(--blue-200); + --focus-background-color: var(--blue-200); + --focus-border-color: var(--border-color); + --focus-color: var(--dark-mint-500); } } @@ -28,6 +71,12 @@ } } +@include breakpoint-up(md) { + .page:not(.home):not(.term-list) .page-header { + margin-bottom: rem(65); + } +} + @include breakpoint-up(lg) { .page { main { diff --git a/src/assets/styles/layouts/_term-list.scss b/src/assets/styles/layouts/_term-list.scss new file mode 100644 index 00000000..c63fd073 --- /dev/null +++ b/src/assets/styles/layouts/_term-list.scss @@ -0,0 +1,69 @@ +.page.term-list .page-header { + > * { + background-color: transparent; + box-shadow: none; + color: inherit; + } + + .link--breadcrumb { + --background-color: transparent; + --border-color: transparent; + --color: var(--blue-500); + --outline-color: var(--white); + --hover-background-color: var(--background-color); + --hover-border-color: var(--border-color); + --hover-color: var(--dark-mint-500); + --visited-color: var(--blue-700); + --active-background-color: var(--background-color); + --active-border-color: var(--border-color); + --active-color: var(--blue-400); + --focus-background-color: var(--blue-500); + --focus-border-color: var(--border-color); + --focus-box-shadow: + 0 0 0 calc(2 * var(--border-width)) var(--focus-background-color), + 0 0 0 calc(3 * var(--border-width)) var(--outline-color), + 0 0 0 calc(4 * var(--border-width)) var(--focus-background-color); + --focus-color: var(--white); + } + + &::before { + background-image: unset; + } +} + +.page.term-list .link-list { + margin-top: 0; +} + +.page.term-list .link-list h2 { + margin-top: 4rem; +} + +.page.term-list .link-list .link-list { + margin-bottom: 4rem; +} + +.page.term-list [role="document"] { + background-repeat: repeat-y; + background-size: 100% auto; +} + +.page.term-list.topics [role="document"] { + background-image: url("../images/topics.svg"); +} + +.page.term-list.goals [role="document"] { + background-image: url("../images/goals.svg"); +} + +.page.term-list.sectors [role="document"] { + background-image: url("../images/sectors.svg"); +} + +.page.term-list.coop-types [role="document"] { + background-image: url("../images/coop-types.svg"); +} + +.page.term-list.formats [role="document"] { + background-image: url("../images/formats.svg"); +} diff --git a/src/assets/styles/mixins/_general.scss b/src/assets/styles/mixins/_general.scss index cfafa9f4..d8c50bdf 100644 --- a/src/assets/styles/mixins/_general.scss +++ b/src/assets/styles/mixins/_general.scss @@ -13,7 +13,10 @@ @mixin full-width-background($color: var(--white)) { &::before { - background: $color; + background-color: $color; + background-position: center top; + background-repeat: no-repeat; + background-size: cover; content: ""; display: block; height: 100%; diff --git a/src/assets/styles/pinecone.scss b/src/assets/styles/pinecone.scss index 3617443f..19e766d7 100644 --- a/src/assets/styles/pinecone.scss +++ b/src/assets/styles/pinecone.scss @@ -42,3 +42,4 @@ @import "layouts/archive"; @import "layouts/resource"; @import "layouts/favorites"; +@import "layouts/term-list"; diff --git a/src/components/layouts/archive/archive.njk b/src/components/layouts/archive/archive.njk index d148c287..dc7178bd 100644 --- a/src/components/layouts/archive/archive.njk +++ b/src/components/layouts/archive/archive.njk @@ -1,6 +1,8 @@
-

{% render '@link--breadcrumb', {label: 'Home', href: '/'}, true %}

-

{{ title }}

+
+

{% render '@link--breadcrumb', {label: 'Home', href: '/', standAlone: true}, true %}

+

{{ title }}

+
{% render '@button--borderless', {standAlone: true, id: 'show-filters'}, true %} diff --git a/src/components/layouts/favorites/favorites.njk b/src/components/layouts/favorites/favorites.njk index 8c4eef86..13121405 100644 --- a/src/components/layouts/favorites/favorites.njk +++ b/src/components/layouts/favorites/favorites.njk @@ -1,6 +1,8 @@
-

{% render '@link--breadcrumb', {label: 'Home', href: '/'}, true %}

-

{{ title }}

+
+

{% render '@link--breadcrumb', {label: 'Home', href: '/', standAlone: true}, true %}

+

{{ title }}

+
{% render '@button--destructive-borderless', {label: 'Remove all', icon: 'delete', standAlone: true, className: 'remove-all-favorites'}, true %} diff --git a/src/components/layouts/home/home.njk b/src/components/layouts/home/home.njk index 0a8c2c39..11aeb731 100644 --- a/src/components/layouts/home/home.njk +++ b/src/components/layouts/home/home.njk @@ -1,6 +1,9 @@ +
-

{{ title | safe }}

-

{{ subhead }}

+
+

{{ title | safe }}

+

{{ subhead }}

+
{% render '@search-form', {standAlone: true, modifier: 'inverse', placeholder: 'Search resource name, publisher, or topic…'}, true %} diff --git a/src/components/layouts/page/page.njk b/src/components/layouts/page/page.njk index 391dae75..fb1df8a7 100644 --- a/src/components/layouts/page/page.njk +++ b/src/components/layouts/page/page.njk @@ -1,6 +1,8 @@
-

{% render '@link--breadcrumb', {label: 'Home', href: '/'}, true %}

-

Page Title

-

This is the subhead of this page.

+
+

{% render '@link--breadcrumb', {label: 'Home', href: '/', standAlone: true}, true %}

+

Page Title

+

This is the subhead of this page.

+
{% render '@repertoire', {title: false}, true %} diff --git a/src/components/layouts/search-results/search-results.njk b/src/components/layouts/search-results/search-results.njk index 9a6cd1a5..d94667ba 100644 --- a/src/components/layouts/search-results/search-results.njk +++ b/src/components/layouts/search-results/search-results.njk @@ -1,6 +1,8 @@
-

{% render '@link--breadcrumb', {label: 'Home', href: '/'}, true %}

-

{{ title }}

+
+

{% render '@link--breadcrumb', {label: 'Home', href: '/', standAlone: true}, true %}

+

{{ title }}

+
{% render '@button--borderless', {standAlone: true, id: 'show-filters'}, true %} diff --git a/src/components/layouts/term-list/term-list.config.js b/src/components/layouts/term-list/term-list.config.js new file mode 100644 index 00000000..923a7e11 --- /dev/null +++ b/src/components/layouts/term-list/term-list.config.js @@ -0,0 +1,231 @@ +module.exports = { + title: 'Term List', + status: 'wip', + // order: 5, + context: { + bodyClass: 'page term-list topics', + hasMenu: true, + hasFooter: true, + label: 'Topics', + terms: [ + { + label: 'Cooperative essentials', + children: [ + 'Governance', + 'Ownership', + 'Cooperative best practices', + 'Diversity and inclusion', + 'Bylaws', + ] + }, + { + label: 'Business operations', + children: [ + 'Human resources', + 'Marketing', + 'Social media', + 'Incorporation', + 'Business model', + 'Income, benefits, and compensation' + ] + }, + { + label: 'Technology & Platforms', + children: [ + 'Software development', + 'Platforms', + 'Design', + 'Free software', + 'Data', + 'Algorithms', + 'Automation', + 'Blockchain', + 'Search engines' + ] + }, + { + label: 'Law & Policy', + children: [ + 'Anti-trust', + 'Labor law', + 'Policy', + 'Co-op law' + ] + }, + { + label: 'Fair labour', + children: [ + 'Unions', + 'Workplace safety', + 'Social security', + ] + }, + { + label: 'Platform co-op theory', + children: [ + 'Platform cooperativism', + 'Platform capitalism', + 'Gig economy', + 'Sharing economy', + 'Solidarity economy', + 'Information economy', + 'Peer-to-peer' + ] + } + ] + }, + variants: [ + { + name: 'Topics', + context: { + bodyClass: 'page term-list topics', + label: 'Topics' + } + }, + { + name: 'Goals', + context: { + bodyClass: 'page term-list goals', + label: 'Goals' + } + }, + { + name: 'Sectors', + context: { + bodyClass: 'page term-list sectors', + label: 'Sectors' + } + }, + { + name: 'Coop Types', + label: 'Co-op Types', + context: { + bodyClass: 'page term-list coop-types', + label: 'Co-op Types', + terms: [ + { + label:'Agriculture' + }, + { + label:'Art, fashion, design' + }, + { + label:'Accounting and Finance' + }, + { + label:'Advertising and marketing' + }, + { + label:'Consulting' + }, + { + label:'Co-op development' + }, + { + label:'Community organizing' + }, + { + label:'Construction' + }, + { + label:'Environment' + }, + { + label:'Education' + }, + { + label:'Energy and mining' + }, + { + label:'Entertainment' + }, + { + label:'Food' + }, + { + label:'Healthcare' + }, + { + label:'Hospitality and tourism' + }, + { + label:'Legal' + }, + { + label:'Manufacturing' + }, + { + label:'Media and communications' + }, + { + label:'Maintenance and repair' + }, + { + label:'Protective services and defense' + }, + { + label:'Personal care and services' + }, + { + label:'Public and social services' + }, + { + label:'Property and real estate' + }, + { + label:'Recycling and waste management' + }, + { + label:'Sales and retail' + }, + { + label:'Science and engineering' + }, + { + label:'Sports fitness and recreation' + }, + { + label:'Technology', + children: [ + 'Electronics and computer manufacturing', + 'Software and hardware enginereeing', + 'Web service providers', + 'Data processing', + 'Misc technology' + ] + }, + { + label:'Transportation and logistics' + }, + { + label:'Translation' + }, + { + label:'Utilities' + } + ] + } + }, + { + name: 'Formats', + context: { + bodyClass: 'page term-list formats', + label: 'Formats', + terms: [ + {label: 'Academic Paper'}, + {label: 'Article'}, + {label: 'Audio'}, + {label: 'Book'}, + {label: 'Case Study'}, + {label: 'Educational Curriculum'}, + {label: 'Online Training'}, + {label: 'Podcast'}, + {label: 'Presentation Slides'}, + {label: 'Report'}, + {label: 'Toolkit'}, + {label: 'Video'} + ] + } + } + ] +}; diff --git a/src/components/layouts/term-list/term-list.njk b/src/components/layouts/term-list/term-list.njk new file mode 100644 index 00000000..7d2f78c2 --- /dev/null +++ b/src/components/layouts/term-list/term-list.njk @@ -0,0 +1,21 @@ +
+
+

{% render '@link--breadcrumb', {label: 'Home', href: '/', standAlone: true}, true %}

+

{{ label }}

+
+
+
    +{% for term in terms %} + {% if term.children %} +

  • {{ term.label }}

    • +
    • + {% endif %} +{% endfor %} +