| @@ -35,17 +35,17 @@ Secondary.args = { | |||||
| full: true, | full: true, | ||||
| }; | }; | ||||
| export const Warning = Template.bind({}); | |||||
| Warning.args = { | |||||
| type: 'warning', | |||||
| }; | |||||
| export const Error = Template.bind({}); | |||||
| Error.args = { | |||||
| type: 'error', | |||||
| }; | |||||
| export const Success = Template.bind({}); | |||||
| Success.args = { | |||||
| type: 'success', | |||||
| }; | |||||
| // export const Warning = Template.bind({}); | |||||
| // Warning.args = { | |||||
| // type: 'warning', | |||||
| // }; | |||||
| // | |||||
| // export const Error = Template.bind({}); | |||||
| // Error.args = { | |||||
| // type: 'error', | |||||
| // }; | |||||
| // | |||||
| // export const Success = Template.bind({}); | |||||
| // Success.args = { | |||||
| // type: 'success', | |||||
| // }; | |||||
| @@ -28,7 +28,9 @@ export const createInfobox = | |||||
| const olEl = createElement('ol', [], null, content); | const olEl = createElement('ol', [], null, content); | ||||
| createElement('li', [], ol, olEl); | createElement('li', [], ol, olEl); | ||||
| content.appendChild(createBlockquote({})); | |||||
| content.appendChild(createBlockquote({ | |||||
| author: '' | |||||
| })); | |||||
| let button; | let button; | ||||
| if (type === 'secondary') { | if (type === 'secondary') { | ||||
| @@ -1,20 +1,25 @@ | |||||
| @import '../../_global/styles/mixins'; | @import '../../_global/styles/mixins'; | ||||
| @import '../../_global/styles/vars'; | @import '../../_global/styles/vars'; | ||||
| .infobox, | |||||
| .richtext div.strong, | |||||
| article.col div.strong { | |||||
| position: relative; | |||||
| .infobox { | |||||
| display: flex; | display: flex; | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| align-items: flex-start; | align-items: flex-start; | ||||
| gap: 60px; | gap: 60px; | ||||
| } | |||||
| .infobox, | |||||
| .richtext div.strong, | |||||
| article.col div.strong { | |||||
| position: relative; | |||||
| margin: calc(3% + 26px) 0; | margin: calc(3% + 26px) 0; | ||||
| background-color: var(--theme-color-secondary-dimmed); | background-color: var(--theme-color-secondary-dimmed); | ||||
| padding: var(--content-box-padding); | padding: var(--content-box-padding); | ||||
| border-top-left-radius: calc(4 * (var(--border-radius-xs))); | |||||
| border-top-right-radius: calc(4 * (var(--border-radius-xs))); | |||||
| border-radius: calc(4 * (var(--border-radius-xs))); | |||||
| overflow: hidden; | |||||
| @media (max-width: 767px) { | @media (max-width: 767px) { | ||||
| border-radius: calc(2 * (var(--border-radius-xs))); | |||||
| padding-top: calc(2 * var(--content-box-padding)); | padding-top: calc(2 * var(--content-box-padding)); | ||||
| padding-bottom: calc(2 * var(--content-box-padding)); | padding-bottom: calc(2 * var(--content-box-padding)); | ||||
| } | } | ||||
| @@ -27,9 +32,7 @@ article.col div.strong { | |||||
| background: var(--theme-color-secondary); | background: var(--theme-color-secondary); | ||||
| position: absolute; | position: absolute; | ||||
| left: 0; | left: 0; | ||||
| bottom: calc(-1 * var(--border-width)); | |||||
| border-bottom-left-radius: calc(4 * (var(--border-radius-xs))); | |||||
| border-bottom-right-radius: calc(4 * (var(--border-radius-xs))); | |||||
| bottom: 0; | |||||
| } | } | ||||
| &.success { | &.success { | ||||
| @@ -61,6 +64,9 @@ article.col div.strong { | |||||
| blockquote { | blockquote { | ||||
| border-left-color: var(--theme-color-primary); | border-left-color: var(--theme-color-primary); | ||||
| } | } | ||||
| .icon-box { | |||||
| color: var(--theme-color-primary); | |||||
| } | |||||
| } | } | ||||
| > *:first-child { | > *:first-child { | ||||
| @@ -15,7 +15,7 @@ export const createTestimonial = | |||||
| let output; | let output; | ||||
| let div; | let div; | ||||
| if (article === true) { | if (article === true) { | ||||
| output = createElement('div', ['has-sidebar'], null); | |||||
| output = createElement('div', ['small-quote'], null); | |||||
| div = createElement('div', ['image-text', 'is-blockquote'], null, output); | div = createElement('div', ['image-text', 'is-blockquote'], null, output); | ||||
| } else { | } else { | ||||
| div = createElement('div', ['image-text', 'is-blockquote'], null); | div = createElement('div', ['image-text', 'is-blockquote'], null); | ||||
| @@ -25,11 +25,11 @@ export const createTestimonial = | |||||
| createImage(image, 1280, 1280, '', [], div2); | createImage(image, 1280, 1280, '', [], div2); | ||||
| const blockquote = createElement('blockquote', [], null, div3); | const blockquote = createElement('blockquote', [], null, div3); | ||||
| createElement('p', [], text, blockquote); | |||||
| createElement('div', ['text'], text, blockquote); | |||||
| const div4 = createElement('div', ['author-text'], null, blockquote); | const div4 = createElement('div', ['author-text'], null, blockquote); | ||||
| const div5 = createElement('div', ['author-text--inner'], null, div4); | const div5 = createElement('div', ['author-text--inner'], null, div4); | ||||
| createElement('p', ['author'], author, div5); | |||||
| createElement('p', ['author-subline'], subline, div5); | |||||
| createElement('div', ['text', 'author'], author, div5); | |||||
| createElement('div', ['text', 'author-subline'], subline, div5); | |||||
| if (article === true) { | if (article === true) { | ||||
| console.log(article); | console.log(article); | ||||
| @@ -1,10 +1,10 @@ | |||||
| import $ from 'jquery'; | import $ from 'jquery'; | ||||
| function moveTestimonialImage() { | function moveTestimonialImage() { | ||||
| $('.has-sidebar .image-text').each(function () { | |||||
| $('.small-quote .image-text').each(function () { | |||||
| var $container = $(this); | var $container = $(this); | ||||
| var $image = $container.children('.image-text--image'); | var $image = $container.children('.image-text--image'); | ||||
| var $firstParagraph = $container.find('.image-text--text blockquote > p:first-child'); | |||||
| var $firstParagraph = $container.find('.image-text--text blockquote > div:first-child'); | |||||
| if ($image.length === 0) return; | if ($image.length === 0) return; | ||||
| @@ -28,4 +28,4 @@ $(document).ready(function () { | |||||
| moveTestimonialImage(); | moveTestimonialImage(); | ||||
| }); | }); | ||||
| $(window).on('resize', moveTestimonialImage); | |||||
| $(window).on('resize', moveTestimonialImage); | |||||
| @@ -22,7 +22,7 @@ | |||||
| @media(min-width: 1110px) { | @media(min-width: 1110px) { | ||||
| font-size: 42px; | font-size: 42px; | ||||
| } | } | ||||
| + p { | |||||
| + .text { | |||||
| font-size: 18px; | font-size: 18px; | ||||
| @media(min-width: 768px) { | @media(min-width: 768px) { | ||||
| font-size: 22px; | font-size: 22px; | ||||
| @@ -73,15 +73,16 @@ | |||||
| border-left: 0; | border-left: 0; | ||||
| font-style: normal; | font-style: normal; | ||||
| font-weight: 300; | font-weight: 300; | ||||
| margin: calc(var(--section-margin)*.6) 0; | |||||
| margin: 116px 0 0 0; | |||||
| padding: 0 20px 0 40px; | padding: 0 20px 0 40px; | ||||
| @media(max-width: 767px) { | @media(max-width: 767px) { | ||||
| margin-top: calc(var(--section-margin)*.6); | |||||
| padding: 0; | padding: 0; | ||||
| } | } | ||||
| p { | |||||
| .text { | |||||
| font-size: var(--font-size-h2); | font-size: var(--font-size-h2); | ||||
| line-height: 1.2; | line-height: 1.2; | ||||
| &:not(.author, .author-subline) { | |||||
| &:not(.author):not(.author-subline) { | |||||
| font-family: "Korb", sans-serif; | font-family: "Korb", sans-serif; | ||||
| position: relative; | position: relative; | ||||
| &:before { | &:before { | ||||
| @@ -174,7 +175,7 @@ | |||||
| } | } | ||||
| } | } | ||||
| .has-sidebar { | |||||
| .small-quote { | |||||
| .image-text { | .image-text { | ||||
| &.is-blockquote { | &.is-blockquote { | ||||
| .image-text--image { | .image-text--image { | ||||
| @@ -199,7 +200,7 @@ | |||||
| width: auto; | width: auto; | ||||
| } | } | ||||
| blockquote { | blockquote { | ||||
| p:not(.author, .author-subline) { | |||||
| .test:not(.author):not(.author-subline) { | |||||
| margin-left: -40px; | margin-left: -40px; | ||||
| padding-bottom: 65px; | padding-bottom: 65px; | ||||
| padding-left: 30px; | padding-left: 30px; | ||||
| @@ -2,7 +2,7 @@ import {createElement} from "../../_global/scripts/helpers"; | |||||
| import {createHeader} from "../../components/header/HeaderComponent"; | import {createHeader} from "../../components/header/HeaderComponent"; | ||||
| import {createMagazineCover} from "../../components/magazine-cover/MagazineCoverComponent"; | import {createMagazineCover} from "../../components/magazine-cover/MagazineCoverComponent"; | ||||
| import {createMagazineArticle} from "../../components/magazine-article/MagazineArticleComponent"; | import {createMagazineArticle} from "../../components/magazine-article/MagazineArticleComponent"; | ||||
| import {createTileGrid} from "../../sections/tile-grid/TileGridComponent"; | |||||
| import {createTileGrid} from "../../sections/tile-grid-wood/TileGridWoodComponent"; | |||||
| import {createFooter} from "../../components/footer/FooterComponent"; | import {createFooter} from "../../components/footer/FooterComponent"; | ||||
| import {lorem1, lorem2} from "../../_global/scripts/lorem"; | import {lorem1, lorem2} from "../../_global/scripts/lorem"; | ||||
| @@ -11,7 +11,7 @@ export const createSuperlistSection = ({ | |||||
| centered = false, | centered = false, | ||||
| }) => { | }) => { | ||||
| const section = createElement('section', centered ? ['superlist', 'centered'] : ['superlist']); | const section = createElement('section', centered ? ['superlist', 'centered'] : ['superlist']); | ||||
| const container = createElement('div', ['container'], null, section); | |||||
| const container = createElement('div', ['list-container'], null, section); | |||||
| createElement('p', ['kicker'], kicker, container); | createElement('p', ['kicker'], kicker, container); | ||||
| createElement('h2', [], headline, container); | createElement('h2', [], headline, container); | ||||
| createElement('p', [], paragraph, container); | createElement('p', [], paragraph, container); | ||||
| @@ -18,7 +18,8 @@ | |||||
| padding-top: 60px; | padding-top: 60px; | ||||
| padding-bottom: 60px; | padding-bottom: 60px; | ||||
| } | } | ||||
| .container { | |||||
| .list-container { | |||||
| padding: 0 var(--content-box-padding); | |||||
| .button-container { | .button-container { | ||||
| display: flex; | display: flex; | ||||
| @@ -41,4 +42,4 @@ | |||||
| padding-bottom: 40px; | padding-bottom: 40px; | ||||
| } | } | ||||
| } | } | ||||
| } | |||||
| } | |||||