diff --git a/.eleventy.js b/.eleventy.js index 604eaf4..615d47e 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -4,6 +4,7 @@ module.exports = function (eleventyConfig) { eleventyConfig.addWatchTarget("./_src/sass/"); eleventyConfig.addPassthroughCopy("./_src/css"); eleventyConfig.addPassthroughCopy("./_src/images"); + eleventyConfig.addPassthroughCopy("./_src/makeovers/ableton/assets"); eleventyConfig.addPlugin(syntaxHighlight); diff --git a/_src/_includes/makeovers/ableton/base.njk b/_src/_includes/makeovers/ableton/base.njk new file mode 100644 index 0000000..e94a4aa --- /dev/null +++ b/_src/_includes/makeovers/ableton/base.njk @@ -0,0 +1,154 @@ + + + + + + + + + Ableton + + + {% include "partials/makeovers/ableton/svg-sprite.html" %} +
+
+
+ + + + + + +
+ Try Live for free + Log in or register +
+
+
+ +
+
+ +
+ {{ content | safe }} +
+ + +
+ + \ No newline at end of file diff --git a/_src/_includes/partials/makeovers/ableton/svg-sprite.html b/_src/_includes/partials/makeovers/ableton/svg-sprite.html new file mode 100644 index 0000000..8ebf695 --- /dev/null +++ b/_src/_includes/partials/makeovers/ableton/svg-sprite.html @@ -0,0 +1,36 @@ + \ No newline at end of file diff --git a/_src/css/ableton.css b/_src/css/ableton.css new file mode 100644 index 0000000..05cc654 --- /dev/null +++ b/_src/css/ableton.css @@ -0,0 +1,875 @@ +.able-styles, +.able-styles *, +.able-styles *::before, +.able-styles *::after { + box-sizing: border-box; + background-origin: border-box; + background-repeat: no-repeat; + margin: unset; + padding: unset; + font-family: inherit; + font-size: inherit; + line-height: inherit; + color: inherit; +} + +.able-styles { + text-rendering: optimizeSpeed; + -moz-osx-font-smoothing: grayscale; +} +.able-styles:focus-within { + scroll-behavior: smooth; +} +.able-styles a[class] { + text-decoration: none; +} +.able-styles a:not([class]) { + text-decoration-skip-ink: auto; +} +.able-styles ul[role=list], +.able-styles ol[role=list] { + list-style: none; + padding: 0; +} +.able-styles dt { + font-weight: 600; +} +.able-styles img, +.able-styles video, +.able-styles picture { + max-width: 100%; + display: block; +} +.able-styles code, +.able-styles pre { + font-family: monospace; +} +.able-styles pre { + white-space: pre-wrap; +} + +@media (prefers-reduced-motion: reduce) { + .able-styles *, +.able-styles *::before, +.able-styles *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + .able-styles:focus-within { + scroll-behavior: auto; + } +} +.able-styles { + font-family: Futura, sans-serif; + font-size: 1rem; + line-height: 1.5rem; + background-color: #f2f2f2; +} +.able-styles img, +.able-styles svg { + display: block; +} +.able-styles figure img, +.able-styles figure video, +.able-styles figure picture { + width: 100%; +} +.able-styles a { + color: blue; + text-decoration: none; + text-underline-offset: 2px; +} +.able-styles code { + display: inline-block; + font-size: 0.875em; + line-height: 1.5em; + color: #ffffff; + background-color: blue; + border-radius: 4px; + padding: 0 0.5rem; +} +.able-styles pre { + background-color: #1c2022; + color: #ffffff; + padding: 1rem; + border-radius: 4px; +} +.able-styles blockquote { + padding: 1rem 2rem; + font-size: 1.25rem; + line-height: 1.875rem; + border: solid #ededed; + border-width: 2px 0; +} +.able-styles table { + border-collapse: collapse; +} +.able-styles th, .able-styles caption { + text-align: left; +} +.able-styles figcaption { + font-size: 1rem; + line-height: 1.5rem; + padding: 0.25rem 0; +} +.able-styles ul, .able-styles ol { + padding-left: 1em; +} + +@font-face { + font-family: Futura; + src: url("/makeovers/ableton/assets/futura-pt-book.woff2"); + font-weight: 400; + display: swap; +} +@font-face { + font-family: Futura; + src: url("/makeovers/ableton/assets/futura-pt-medium.woff2"); + font-weight: 700; + display: swap; +} +.able-styles label:not(.able-form-control) { + font-weight: 600; + display: block; + margin-bottom: 0.25rem; +} +.able-styles label:not(.able-form-control) [type=checkbox] + span, +.able-styles label:not(.able-form-control) [type=radio] + span { + font-weight: 400; +} +.able-styles fieldset { + border: 0; +} +.able-styles legend { + font-weight: 600; +} + +.able-input { + appearance: none; + --form-field-width: 30ch; + background-color: #ededed; + border: 0; + border-radius: 0; + font-size: 1rem; + width: 100%; + min-height: 34px; +} +@media (min-width: 700px) { + .able-input { + width: var(--form-field-width, 30ch); + } +} +.able-input:not(textarea) { + line-height: 1.5; +} +.able-input:not(.able-select) { + padding: 0.25rem 0.75rem; +} +.able-input:is(textarea) { + line-height: 1.5rem; +} +.able-input:is(select) { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23556168'/%3E%3C/svg%3E%0A"); + background-size: auto 20%; + background-position: center right 0.75rem; +} +.able-input:is(select):disabled { + color: #556168; +} +.able-input:focus { + border-color: blue; + box-shadow: 0 0 0.35em -0.1em blue; + outline: 2px solid transparent; +} +.able-input:disabled { + border-color: #94a1a8; + background-color: #ededed; + cursor: not-allowed; +} +.able-input::placeholder { + color: #556168; +} +.able-form-control { + display: grid; + align-items: center; + grid-template-columns: 1.5rem 1fr; + grid-gap: 0.25rem 0.75rem; +} +.able-form-control:not(:last-child) { + margin-bottom: 0.25rem; +} +.able-form-control input { + appearance: none; + width: 1.5rem; + height: 1.5rem; + border: 2px solid #ededed; + position: relative; +} +.able-form-control input[type=radio] { + border-radius: 50%; +} +.able-form-control input[type=checkbox] { + border-radius: 2px; +} +.able-form-control input:focus { + border-color: blue; + box-shadow: 0 0 0.35em -0.1em blue; + outline: 2px solid transparent; +} +.able-form-control input:checked { + border-color: blue; +} +.able-form-control input:checked[type=radio]:before { + content: ""; + display: block; + width: calc(1.5rem - 8px); + height: calc(1.5rem - 8px); + background-color: blue; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.able-form-control input:checked[type=checkbox] { + background-color: blue; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12 30c-.5 0-1-.2-1.4-.6l-8-8c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l6.3 6.3 14.6-22c.6-.9 1.9-1.2 2.8-.6.9.6 1.2 1.9.6 2.8l-16 24c-.3.5-.9.8-1.5.9H12z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A"); + background-size: calc(1.5rem * .65) calc(1.5rem * .65); + background-position: 50% 50%; +} +.able-form-control input:disabled { + background-color: #ededed; + border-color: #94a1a8; +} +.able-form-control input:disabled + span { + color: #556168; +} +.able-button { + display: inline-block; + appearance: none; + border: 0; + border-radius: 0; + padding: 0.25rem 1.5rem; + margin: 0; + background-color: blue; + color: #ffffff; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 600; + min-height: 34px; + cursor: pointer; +} +.able-button:focus { + border-color: blue; + box-shadow: 0 0 0.35em -0.1em blue; + outline: 2px solid transparent; +} +.able-button:hover { + background-color: #082636; +} + +.able-nav-list, +.able-nav-list-small { + display: flex; + font-weight: 600; + font-size: 1.25rem; + line-height: 1.875rem; +} +.able-nav-list a, +.able-nav-list-small a { + display: flex; + color: #000000; + text-decoration: none; + padding: 0 0.625rem; +} +.able-nav-list a:hover, +.able-nav-list-small a:hover { + color: inherit; +} +.able-nav-list li:first-of-type a, +.able-nav-list-small li:first-of-type a { + padding-left: 0; +} +.able-nav-list li:last-of-type a, +.able-nav-list-small li:last-of-type a { + padding-right: 0; +} +.able-nav-list > :not(:last-child), +.able-nav-list-small > :not(:last-child) { + margin-right: 0.625rem; +} + +.able-nav-list-small { + font-size: 0.875rem; + line-height: 1.3125rem; +} +.able-nav-list-small .able-is-active { + color: #e81902; +} + +.able-nav-list-tight > :not(:last-child) { + margin-right: 0; +} + +.able-heading-1 { + font-size: 2.5rem; + line-height: 3rem; +} +.able-heading-2 { + font-size: 1.875rem; + line-height: 2.625rem; +} +.able-heading-3 { + font-size: 1.5rem; + line-height: 2rem; +} +.able-heading-4 { + font-size: 1.25rem; + line-height: 1.875rem; +} +.able-text-large { + font-size: 1.25rem; + line-height: 1.875rem; +} +.able-text-medium { + font-size: 1rem; + line-height: 1.5rem; +} +.able-text-small { + font-size: 0.875rem; + line-height: 1.3125rem; +} +.able-text-subdued { + color: #556168; +} +.able-text-error { + color: #a5182f; +} +.able-text-strong { + font-weight: 700; +} +.able-text-brand { + color: #fd5b49; +} + +a.able-text-inherit { + color: inherit; +} + +a.able-chevron-link { + display: inline-flex; + align-items: center; +} +a.able-chevron-link:after { + content: ""; + display: block; + width: 0.5em; + height: 0.5em; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z' fill='blue'/%3E%3C/svg%3E"); + margin-left: 0.25rem; + position: relative; + top: 0.125em; +} + +a.able-chevron-link.able-text-inherit:after { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); +} + +.able-table { + --label-min-width: 100px; + width: 100%; + font-size: 1rem; + line-height: 1.5rem; +} +.able-table thead th { + display: none; +} +.able-table tbody tr { + display: block; +} +.able-table tbody tr:not(:last-child) { + margin-bottom: 1rem; +} +.able-table tbody tr:first-of-type td:first-of-type { + border-top: 2px solid #ededed; + padding-top: 1rem; +} +.able-table tbody td { + display: flex; + align-items: flex-start; +} +.able-table tbody td:last-of-type { + border-bottom: 2px solid #ededed; + padding-bottom: 1rem; +} +.able-table tbody td[data-label]:before { + content: attr(data-label); + font-weight: 600; + min-width: var(--label-min-width); +} +.able-table th, .able-table td, .able-table caption { + padding: 0.25rem 0; +} +@media (min-width: 700px) { + .able-table { + font-variant-numeric: tabular-nums; + } + .able-table tbody tr { + display: table-row; + border-bottom: 2px solid #ededed; + } + .able-table tbody tr:first-of-type { + border-top: 2px solid #ededed; + } + .able-table tbody tr:first-of-type td:first-of-type { + border-top: none; + padding-top: 0.25rem; + } + .able-table thead th, +.able-table tbody td { + display: table-cell; + padding-left: 0.5rem; + padding-right: 0.5rem; + } + .able-table tbody td { + vertical-align: top; + } + .able-table tbody td:last-of-type { + border-bottom: none; + padding-bottom: 0.25rem; + } + .able-table tbody td[data-label]:before { + display: none; + } +} + +.able-icon { + fill: currentColor; + width: 40px; + height: 40px; +} +.able-icon-social-facebook { + background-color: #3b5897; +} +.able-icon-social-twitter { + background-color: #1ca0f2; +} +.able-icon-social-youtube { + background-color: red; +} +.able-icon-social-instagram { + background-color: #f77636; +} + +[class*=icon-social] { + fill: #ffffff; +} + +.able-icon-wordmark { + fill: #fd5b49; +} + +.able-flow-4 > :not(:last-child):not([class*=able-stack]) { + margin-bottom: 0.25rem; +} +.able-flow-8 > :not(:last-child):not([class*=able-stack]) { + margin-bottom: 0.5rem; +} +.able-flow-16 > :not(:last-child):not([class*=able-stack]) { + margin-bottom: 1rem; +} +.able-flow-24 > :not(:last-child):not([class*=able-stack]) { + margin-bottom: 1.5rem; +} +.able-flow-32 > :not(:last-child):not([class*=able-stack]) { + margin-bottom: 2rem; +} +.able-stack-4 { + margin-bottom: 0.25rem; +} +.able-stack-8 { + margin-bottom: 0.5rem; +} +.able-stack-10 { + margin-bottom: 0.625rem; +} +.able-stack-16 { + margin-bottom: 1rem; +} +.able-stack-20 { + margin-bottom: 1.25rem; +} +.able-stack-24 { + margin-bottom: 1.5rem; +} +.able-stack-32 { + margin-bottom: 2rem; +} +.able-stack-60 { + margin-bottom: 3.75rem; +} +.able-stack-64 { + margin-bottom: 4rem; +} +.able-stack-100 { + margin-bottom: 6.25rem; +} +.able-inline-4 { + margin-right: 0.25rem; +} +.able-inline-8 { + margin-right: 0.5rem; +} +.able-inline-16 { + margin-right: 1rem; +} +.able-inline-24 { + margin-right: 1.5rem; +} +.able-inline-32 { + margin-right: 2rem; +} +.able-inset-square-8 { + padding: 0.5rem; +} +.able-inset-square-16 { + padding: 1rem; +} +.able-inset-square-20 { + padding: 1.25rem; +} +.able-inset-square-24 { + padding: 1.5rem; +} +.able-inset-square-32 { + padding: 2rem; +} +.able-inset-squish-16 { + padding: 0.5rem 1rem; +} +.able-inset-squish-24 { + padding: 1rem 1.5rem; +} +.able-inset-stretch-20 { + padding: 1.25rem 0.625rem; +} +.able-inset-stretch-32 { + padding: 2rem 1.5rem; +} +.able-inset-stretch-24 { + padding: 1.5rem 1rem; +} +.able-inset-vertical-120 { + padding: 7.5rem 0; +} +@media (min-width: 700px) { + .able-half-width { + width: 50%; + } +} + +[class*=able-flex-row] { + display: flex; + align-items: center; +} +[class*=able-flex-row] > :not(:last-child) { + margin-right: 1rem; +} + +[class*=able-flex-row-responsive] { + display: flex; + flex-direction: column; + align-items: flex-start; +} +[class*=able-flex-row-responsive] > :not(:last-child) { + margin-bottom: 1rem; +} + +.able-flex-row-30 > :not(:last-child) { + margin-right: 1.875rem; +} +.able-flex-row-16 > :not(:last-child) { + margin-right: 1rem; +} +.able-flex-row-10 > :not(:last-child) { + margin-right: 0.625rem; +} +.able-flex-row-8 > :not(:last-child) { + margin-right: 0.5rem; +} +.able-flex-row-4 > :not(:last-child) { + margin-right: 0.25rem; +} +.able-flex-row-0 > :not(:last-child) { + margin-right: 0; +} +.able-flex-row-responsive-8 > :not(:last-child) { + margin-bottom: 0.5rem; +} +.able-flex-row-responsive-4 > :not(:last-child) { + margin-bottom: 0.25rem; +} +.able-flex-item { + flex: 1; +} + +@media (min-width: 700px) { + .able-space-between { + display: flex; + align-items: center; + justify-content: space-between; + } + .able-space-between > :not(:last-child) { + margin-right: 1rem; + } + + [class*=able-flex-row-responsive] { + flex-direction: row; + } + [class*=able-flex-row-responsive] :not(:last-child) { + margin-right: 1rem; + } + + .able-flex-row-responsive :not(:last-child) { + margin-bottom: 0; + margin-right: 1rem; + } + .able-flex-row-responsive-8 :not(:last-child) { + margin-bottom: 0; + margin-right: 0.5rem; + } + .able-flex-row-responsive-4 :not(:last-child) { + margin-bottom: 0; + margin-right: 0.25rem; + } +} +@media (min-width: 700px) { + .able-left { + float: left; + margin-right: 1rem; + } + .able-right { + float: right; + margin-left: 1rem; + } +} +.able-border-bottom { + border-bottom: 2px solid #ededed; +} +.able-border-top { + border-top: 2px solid #ededed; +} + +.able-center-all { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + place-items: center; +} +.able-center-all > * { + grid-row-start: 1; + grid-row-end: 2; + grid-column-start: 1; + grid-row-end: 2; +} + +.able-layout-header-main-footer { + background-color: #ffffff; + display: grid; + grid-template-rows: auto 1fr auto; + max-width: 1600px; + margin: 0 auto; + grid-template-areas: "header" "main" "footer"; +} +.able-layout-header-main-footer [data-grid-area=header] { + grid-area: header; +} +.able-layout-header-main-footer [data-grid-area=main] { + grid-area: main; + padding: 0 0 100px 0; +} +.able-layout-header-main-footer [data-grid-area=main] > section { + max-width: 800px; + margin: 0 auto; + padding: 100px 0; +} +.able-layout-header-main-footer [data-grid-area=main] > :not(section):not([class*=able-layout-collage]) { + width: 83.33%; + margin: 0 auto; +} +.able-layout-header-main-footer [data-grid-area=footer] { + grid-area: footer; + padding: 100px 8.33%; +} + +[class*=able-layout-collage] { + display: grid; + grid-template-columns: repeat(12, 1fr); +} +[class*=able-layout-collage] > * { + z-index: 1; +} + +[class*=able-layout-collage]:after { + content: ""; + display: block; + width: 100%; + height: 100%; +} + +.able-layout-collage-yellow { + grid-template-rows: repeat(7, 1fr); +} + +.able-layout-collage-yellow > :nth-of-type(1) { + grid-column: 2/span 5; + grid-row: 2/span 5; +} + +.able-layout-collage-yellow > :nth-of-type(2) { + grid-column: 8/span 4; + grid-row: 3/span 3; +} + +.able-layout-collage-yellow:after { + background-color: #fbffa8; + grid-column: 6/span 7; + grid-row: 1/span 7; +} + +.able-layout-collage-purple { + grid-template-rows: repeat(7, 1fr); +} + +.able-layout-collage-purple > :nth-of-type(1) { + grid-column: 2/span 4; + grid-row: 3/span 3; +} + +.able-layout-collage-purple > :nth-of-type(2) { + grid-column: 7/span 5; + grid-row: 2/span 5; + z-index: 1; + height: 100%; + object-fit: cover; +} + +.able-layout-collage-purple:after { + background-color: #d5b3ff; + grid-column: 3/span 8; + grid-row: 1/span 7; +} + +.able-layout-collage-green { + grid-template-rows: repeat(9, 1fr); +} + +.able-layout-collage-green > :nth-of-type(1) { + grid-column: 2/span 4; + grid-row: 2/span 3; +} + +.able-layout-collage-green > :nth-of-type(2) { + grid-column: 2/span 4; + grid-row: 6/span 3; +} + +.able-layout-collage-green > :nth-of-type(3) { + grid-column: 7/span 5; + grid-row: 3/span 5; +} + +.able-layout-collage-green:after { + background-color: #b8ffc1; + grid-column: 1/span 7; + grid-row: 1/span 9; +} + +.able-layout-collage-blue { + grid-template-rows: repeat(5, 1fr); +} + +.able-layout-collage-blue > :nth-child(1) { + grid-column: 2/span 5; + grid-row: 1/span 5; + min-height: 500px; + height: 100%; + object-fit: cover; +} + +.able-layout-collage-blue > :nth-child(2) { + grid-column: 8/span 3; + grid-row: 2/span 3; +} + +.able-layout-collage-blue:after { + background-color: #c5e6f7; + grid-column: 7/span 5; + grid-row: 1/span 5; +} + +.able-layout-30-30-40 { + display: grid; + grid-template-columns: 3fr 3fr 4fr; +} + +.able-layout-single-column { + max-width: calc(200px + 75ch); + margin: 0 auto; + display: grid; + grid-template-rows: auto 1fr auto; + min-height: 100vh; +} +.able-layout-single-column [data-grid-area=header], +.able-layout-single-column [data-grid-area=main], +.able-layout-single-column [data-grid-area=footer] { + padding: 1rem; +} +.able-layout-single-column article { + max-width: 75ch; + font-size: 1.25rem; + line-height: 1.875rem; +} + +.able-layout-two-column-aside-main { + max-width: calc(200px + 75ch); + margin: 0 auto; + display: grid; + grid-template-rows: auto auto auto auto; + grid-template-areas: "header" "main" "aside" "footer"; +} +.able-layout-two-column-aside-main [data-grid-area=header], +.able-layout-two-column-aside-main [data-grid-area=aside], +.able-layout-two-column-aside-main [data-grid-area=main], +.able-layout-two-column-aside-main [data-grid-area=footer] { + padding: 1rem; +} +.able-layout-two-column-aside-main [data-grid-area=header] { + grid-area: header; +} +.able-layout-two-column-aside-main [data-grid-area=aside] { + grid-area: aside; +} +.able-layout-two-column-aside-main [data-grid-area=main] { + grid-area: main; +} +.able-layout-two-column-aside-main [data-grid-area=footer] { + grid-area: footer; +} +.able-layout-two-column-aside-main article { + max-width: 75ch; + font-size: 1.25rem; + line-height: 1.875rem; +} + +@media (min-width: 700px) { + .able-layout-two-column-aside-main { + min-height: 100vh; + grid-template-columns: 1fr 200px; + grid-template-rows: auto 1fr auto; + grid-template-areas: "header header" "main aside" "footer footer"; + } +} diff --git a/_src/css/cool.css b/_src/css/cool.css index 797de82..05cc654 100644 --- a/_src/css/cool.css +++ b/_src/css/cool.css @@ -1,7 +1,7 @@ -.cool-styles, -.cool-styles *, -.cool-styles *::before, -.cool-styles *::after { +.able-styles, +.able-styles *, +.able-styles *::before, +.able-styles *::after { box-sizing: border-box; background-origin: border-box; background-repeat: no-repeat; @@ -13,495 +13,860 @@ color: inherit; } -.cool-styles { +.able-styles { text-rendering: optimizeSpeed; + -moz-osx-font-smoothing: grayscale; } -.cool-styles:focus-within { +.able-styles:focus-within { scroll-behavior: smooth; } -.cool-styles a[class] { +.able-styles a[class] { text-decoration: none; } -.cool-styles a:not([class]) { +.able-styles a:not([class]) { text-decoration-skip-ink: auto; } -.cool-styles ul[role=list], -.cool-styles ol[role=list] { +.able-styles ul[role=list], +.able-styles ol[role=list] { list-style: none; padding: 0; } -.cool-styles dt { +.able-styles dt { font-weight: 600; } -.cool-styles img, -.cool-styles video, -.cool-styles picture { +.able-styles img, +.able-styles video, +.able-styles picture { max-width: 100%; display: block; } -.cool-styles code, -.cool-styles pre { +.able-styles code, +.able-styles pre { font-family: monospace; } -.cool-styles pre { +.able-styles pre { white-space: pre-wrap; } @media (prefers-reduced-motion: reduce) { - .cool-styles *, -.cool-styles *::before, -.cool-styles *::after { + .able-styles *, +.able-styles *::before, +.able-styles *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } - .cool-styles:focus-within { + .able-styles:focus-within { scroll-behavior: auto; } } -.cool-styles { - font-family: Rubik, sans-serif; +.able-styles { + font-family: Futura, sans-serif; font-size: 1rem; line-height: 1.5rem; + background-color: #f2f2f2; } -.cool-styles figure img, -.cool-styles figure video, -.cool-styles figure picture { +.able-styles img, +.able-styles svg { + display: block; +} +.able-styles figure img, +.able-styles figure video, +.able-styles figure picture { width: 100%; } -.cool-styles a { - color: #1876a5; +.able-styles a { + color: blue; + text-decoration: none; text-underline-offset: 2px; } -.cool-styles a:hover { - color: #082636; -} -.cool-styles code { +.able-styles code { display: inline-block; font-size: 0.875em; line-height: 1.5em; color: #ffffff; - background-color: #1876a5; + background-color: blue; border-radius: 4px; padding: 0 0.5rem; } -.cool-styles pre { +.able-styles pre { background-color: #1c2022; color: #ffffff; padding: 1rem; border-radius: 4px; } -.cool-styles blockquote { +.able-styles blockquote { padding: 1rem 2rem; font-size: 1.25rem; line-height: 1.875rem; - border: solid #556168; - border-width: 1px 0; + border: solid #ededed; + border-width: 2px 0; } -.cool-styles table { +.able-styles table { border-collapse: collapse; } -.cool-styles th, .cool-styles caption { +.able-styles th, .able-styles caption { text-align: left; } -.cool-styles figcaption { +.able-styles figcaption { font-size: 1rem; line-height: 1.5rem; padding: 0.25rem 0; } -.cool-styles ul, .cool-styles ol { +.able-styles ul, .able-styles ol { padding-left: 1em; } -.cool-styles label:not(.cool-form-control) { +@font-face { + font-family: Futura; + src: url("/makeovers/ableton/assets/futura-pt-book.woff2"); + font-weight: 400; + display: swap; +} +@font-face { + font-family: Futura; + src: url("/makeovers/ableton/assets/futura-pt-medium.woff2"); + font-weight: 700; + display: swap; +} +.able-styles label:not(.able-form-control) { font-weight: 600; display: block; margin-bottom: 0.25rem; } -.cool-styles label:not(.cool-form-control) [type=checkbox] + span, -.cool-styles label:not(.cool-form-control) [type=radio] + span { +.able-styles label:not(.able-form-control) [type=checkbox] + span, +.able-styles label:not(.able-form-control) [type=radio] + span { font-weight: 400; } -.cool-styles fieldset { +.able-styles fieldset { border: 0; } -.cool-styles legend { +.able-styles legend { font-weight: 600; } -.cool-input { +.able-input { appearance: none; --form-field-width: 30ch; - background-color: #ffffff; - border: 2px solid #556168; - border-radius: 4px; + background-color: #ededed; + border: 0; + border-radius: 0; font-size: 1rem; width: 100%; - min-height: 44px; + min-height: 34px; } @media (min-width: 700px) { - .cool-input { + .able-input { width: var(--form-field-width, 30ch); } } -.cool-input:not(textarea) { +.able-input:not(textarea) { line-height: 1.5; } -.cool-input:not(.cool-select) { - padding: 0.5rem; +.able-input:not(.able-select) { + padding: 0.25rem 0.75rem; } -.cool-input:is(textarea) { +.able-input:is(textarea) { line-height: 1.5rem; } -.cool-input:is(select) { +.able-input:is(select) { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23556168'/%3E%3C/svg%3E%0A"); background-size: auto 20%; - background-position: center right 0.5rem; + background-position: center right 0.75rem; } -.cool-input:is(select):disabled { +.able-input:is(select):disabled { color: #556168; } -.cool-input:focus { - border-color: #1876a5; - box-shadow: 0 0 0.35em -0.1em #1876a5; +.able-input:focus { + border-color: blue; + box-shadow: 0 0 0.35em -0.1em blue; outline: 2px solid transparent; } -.cool-input:disabled { +.able-input:disabled { border-color: #94a1a8; - background-color: #dbdfe1; + background-color: #ededed; cursor: not-allowed; } -.cool-input::placeholder { +.able-input::placeholder { color: #556168; } -.cool-form-control { +.able-form-control { display: grid; align-items: center; grid-template-columns: 1.5rem 1fr; - grid-gap: 0.5rem; + grid-gap: 0.25rem 0.75rem; } -.cool-form-control:not(:last-child) { +.able-form-control:not(:last-child) { margin-bottom: 0.25rem; } -.cool-form-control input { +.able-form-control input { appearance: none; width: 1.5rem; height: 1.5rem; - border: 2px solid #556168; + border: 2px solid #ededed; position: relative; } -.cool-form-control input[type=radio] { +.able-form-control input[type=radio] { border-radius: 50%; } -.cool-form-control input[type=checkbox] { +.able-form-control input[type=checkbox] { border-radius: 2px; } -.cool-form-control input:focus { - border-color: #1876a5; - box-shadow: 0 0 0.35em -0.1em #1876a5; +.able-form-control input:focus { + border-color: blue; + box-shadow: 0 0 0.35em -0.1em blue; outline: 2px solid transparent; } -.cool-form-control input:checked { - border-color: #1876a5; +.able-form-control input:checked { + border-color: blue; } -.cool-form-control input:checked[type=radio]:before { +.able-form-control input:checked[type=radio]:before { content: ""; display: block; width: calc(1.5rem - 8px); height: calc(1.5rem - 8px); - background-color: #1876a5; + background-color: blue; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } -.cool-form-control input:checked[type=checkbox] { - background-color: #1876a5; +.able-form-control input:checked[type=checkbox] { + background-color: blue; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12 30c-.5 0-1-.2-1.4-.6l-8-8c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l6.3 6.3 14.6-22c.6-.9 1.9-1.2 2.8-.6.9.6 1.2 1.9.6 2.8l-16 24c-.3.5-.9.8-1.5.9H12z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A"); background-size: calc(1.5rem * .65) calc(1.5rem * .65); background-position: 50% 50%; } -.cool-form-control input:disabled { - background-color: #dbdfe1; +.able-form-control input:disabled { + background-color: #ededed; border-color: #94a1a8; } -.cool-form-control input:disabled + span { +.able-form-control input:disabled + span { color: #556168; } -.cool-button { +.able-button { display: inline-block; appearance: none; - border: 2px solid transparent; - border-radius: 4px; - padding: 0.5rem; + border: 0; + border-radius: 0; + padding: 0.25rem 1.5rem; margin: 0; - background-color: #1876a5; + background-color: blue; color: #ffffff; font-size: 1rem; line-height: 1.5rem; + font-weight: 600; + min-height: 34px; cursor: pointer; } -.cool-button:focus { - border-color: #1876a5; - box-shadow: 0 0 0.35em -0.1em #1876a5; +.able-button:focus { + border-color: blue; + box-shadow: 0 0 0.35em -0.1em blue; outline: 2px solid transparent; } -.cool-button:hover { +.able-button:hover { background-color: #082636; } -.cool-nav-list { - margin: 0; +.able-nav-list, +.able-nav-list-small { + display: flex; + font-weight: 600; + font-size: 1.25rem; + line-height: 1.875rem; } -.cool-nav-list a { - color: #556168; +.able-nav-list a, +.able-nav-list-small a { + display: flex; + color: #000000; text-decoration: none; + padding: 0 0.625rem; } -.cool-nav-list a:hover { - color: #1876a5; - text-decoration: underline; +.able-nav-list a:hover, +.able-nav-list-small a:hover { + color: inherit; +} +.able-nav-list li:first-of-type a, +.able-nav-list-small li:first-of-type a { + padding-left: 0; +} +.able-nav-list li:last-of-type a, +.able-nav-list-small li:last-of-type a { + padding-right: 0; +} +.able-nav-list > :not(:last-child), +.able-nav-list-small > :not(:last-child) { + margin-right: 0.625rem; } -.cool-heading-1 { +.able-nav-list-small { + font-size: 0.875rem; + line-height: 1.3125rem; +} +.able-nav-list-small .able-is-active { + color: #e81902; +} + +.able-nav-list-tight > :not(:last-child) { + margin-right: 0; +} + +.able-heading-1 { font-size: 2.5rem; line-height: 3rem; } -.cool-heading-2 { - font-size: 2rem; - line-height: 2.5rem; +.able-heading-2 { + font-size: 1.875rem; + line-height: 2.625rem; } -.cool-heading-3 { +.able-heading-3 { font-size: 1.5rem; line-height: 2rem; } -.cool-heading-4 { +.able-heading-4 { font-size: 1.25rem; line-height: 1.875rem; } -.cool-text-large { +.able-text-large { font-size: 1.25rem; line-height: 1.875rem; } -.cool-text-medium { +.able-text-medium { font-size: 1rem; line-height: 1.5rem; } -.cool-text-small { +.able-text-small { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.3125rem; } -.cool-text-subdued { +.able-text-subdued { color: #556168; } -.cool-text-error { +.able-text-error { color: #a5182f; } +.able-text-strong { + font-weight: 700; +} +.able-text-brand { + color: #fd5b49; +} + +a.able-text-inherit { + color: inherit; +} + +a.able-chevron-link { + display: inline-flex; + align-items: center; +} +a.able-chevron-link:after { + content: ""; + display: block; + width: 0.5em; + height: 0.5em; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z' fill='blue'/%3E%3C/svg%3E"); + margin-left: 0.25rem; + position: relative; + top: 0.125em; +} + +a.able-chevron-link.able-text-inherit:after { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); +} -.cool-table { +.able-table { --label-min-width: 100px; width: 100%; font-size: 1rem; line-height: 1.5rem; } -.cool-table thead th { +.able-table thead th { display: none; } -.cool-table tbody tr { +.able-table tbody tr { display: block; } -.cool-table tbody tr:not(:last-child) { +.able-table tbody tr:not(:last-child) { margin-bottom: 1rem; } -.cool-table tbody tr:first-of-type td:first-of-type { - border-top: 1px solid #556168; +.able-table tbody tr:first-of-type td:first-of-type { + border-top: 2px solid #ededed; padding-top: 1rem; } -.cool-table tbody td { +.able-table tbody td { display: flex; align-items: flex-start; } -.cool-table tbody td:last-of-type { - border-bottom: 1px solid #556168; +.able-table tbody td:last-of-type { + border-bottom: 2px solid #ededed; padding-bottom: 1rem; } -.cool-table tbody td[data-label]:before { +.able-table tbody td[data-label]:before { content: attr(data-label); font-weight: 600; min-width: var(--label-min-width); } -.cool-table th, .cool-table td, .cool-table caption { +.able-table th, .able-table td, .able-table caption { padding: 0.25rem 0; } @media (min-width: 700px) { - .cool-table { + .able-table { font-variant-numeric: tabular-nums; } - .cool-table tbody tr { + .able-table tbody tr { display: table-row; - border-bottom: 1px solid #556168; + border-bottom: 2px solid #ededed; } - .cool-table tbody tr:first-of-type { - border-top: 1px solid #556168; + .able-table tbody tr:first-of-type { + border-top: 2px solid #ededed; } - .cool-table tbody tr:first-of-type td:first-of-type { + .able-table tbody tr:first-of-type td:first-of-type { border-top: none; padding-top: 0.25rem; } - .cool-table thead th, -.cool-table tbody td { + .able-table thead th, +.able-table tbody td { display: table-cell; padding-left: 0.5rem; padding-right: 0.5rem; } - .cool-table tbody td { + .able-table tbody td { vertical-align: top; } - .cool-table tbody td:last-of-type { + .able-table tbody td:last-of-type { border-bottom: none; padding-bottom: 0.25rem; } - .cool-table tbody td[data-label]:before { + .able-table tbody td[data-label]:before { display: none; } } -.cool-flow-16 > :not(:last-child) { +.able-icon { + fill: currentColor; + width: 40px; + height: 40px; +} +.able-icon-social-facebook { + background-color: #3b5897; +} +.able-icon-social-twitter { + background-color: #1ca0f2; +} +.able-icon-social-youtube { + background-color: red; +} +.able-icon-social-instagram { + background-color: #f77636; +} + +[class*=icon-social] { + fill: #ffffff; +} + +.able-icon-wordmark { + fill: #fd5b49; +} + +.able-flow-4 > :not(:last-child):not([class*=able-stack]) { + margin-bottom: 0.25rem; +} +.able-flow-8 > :not(:last-child):not([class*=able-stack]) { + margin-bottom: 0.5rem; +} +.able-flow-16 > :not(:last-child):not([class*=able-stack]) { margin-bottom: 1rem; } -.cool-flow-24 > :not(:last-child) { +.able-flow-24 > :not(:last-child):not([class*=able-stack]) { margin-bottom: 1.5rem; } -.cool-stack-16 { +.able-flow-32 > :not(:last-child):not([class*=able-stack]) { + margin-bottom: 2rem; +} +.able-stack-4 { + margin-bottom: 0.25rem; +} +.able-stack-8 { + margin-bottom: 0.5rem; +} +.able-stack-10 { + margin-bottom: 0.625rem; +} +.able-stack-16 { margin-bottom: 1rem; } +.able-stack-20 { + margin-bottom: 1.25rem; +} +.able-stack-24 { + margin-bottom: 1.5rem; +} +.able-stack-32 { + margin-bottom: 2rem; +} +.able-stack-60 { + margin-bottom: 3.75rem; +} +.able-stack-64 { + margin-bottom: 4rem; +} +.able-stack-100 { + margin-bottom: 6.25rem; +} +.able-inline-4 { + margin-right: 0.25rem; +} +.able-inline-8 { + margin-right: 0.5rem; +} +.able-inline-16 { + margin-right: 1rem; +} +.able-inline-24 { + margin-right: 1.5rem; +} +.able-inline-32 { + margin-right: 2rem; +} +.able-inset-square-8 { + padding: 0.5rem; +} +.able-inset-square-16 { + padding: 1rem; +} +.able-inset-square-20 { + padding: 1.25rem; +} +.able-inset-square-24 { + padding: 1.5rem; +} +.able-inset-square-32 { + padding: 2rem; +} +.able-inset-squish-16 { + padding: 0.5rem 1rem; +} +.able-inset-squish-24 { + padding: 1rem 1.5rem; +} +.able-inset-stretch-20 { + padding: 1.25rem 0.625rem; +} +.able-inset-stretch-32 { + padding: 2rem 1.5rem; +} +.able-inset-stretch-24 { + padding: 1.5rem 1rem; +} +.able-inset-vertical-120 { + padding: 7.5rem 0; +} @media (min-width: 700px) { - .cool-half-width { + .able-half-width { width: 50%; } } -[class*=cool-flex-row] { +[class*=able-flex-row] { display: flex; align-items: center; } -[class*=cool-flex-row] :not(:last-child) { +[class*=able-flex-row] > :not(:last-child) { margin-right: 1rem; } -[class*=cool-flex-row-responsive] { +[class*=able-flex-row-responsive] { display: flex; flex-direction: column; align-items: flex-start; } -[class*=cool-flex-row-responsive] :not(:last-child) { +[class*=able-flex-row-responsive] > :not(:last-child) { margin-bottom: 1rem; } -.cool-flex-row-8 :not(:last-child) { +.able-flex-row-30 > :not(:last-child) { + margin-right: 1.875rem; +} +.able-flex-row-16 > :not(:last-child) { + margin-right: 1rem; +} +.able-flex-row-10 > :not(:last-child) { + margin-right: 0.625rem; +} +.able-flex-row-8 > :not(:last-child) { margin-right: 0.5rem; } -.cool-flex-row-4 :not(:last-child) { +.able-flex-row-4 > :not(:last-child) { margin-right: 0.25rem; } -.cool-flex-row-responsive-8 :not(:last-child) { +.able-flex-row-0 > :not(:last-child) { + margin-right: 0; +} +.able-flex-row-responsive-8 > :not(:last-child) { margin-bottom: 0.5rem; } -.cool-flex-row-responsive-4 :not(:last-child) { +.able-flex-row-responsive-4 > :not(:last-child) { margin-bottom: 0.25rem; } +.able-flex-item { + flex: 1; +} @media (min-width: 700px) { - .cool-space-between { + .able-space-between { display: flex; align-items: center; justify-content: space-between; } - .cool-space-between > :not(last-child) { + .able-space-between > :not(:last-child) { margin-right: 1rem; } - [class*=cool-flex-row-responsive] { + [class*=able-flex-row-responsive] { flex-direction: row; } - [class*=cool-flex-row-responsive] :not(:last-child) { + [class*=able-flex-row-responsive] :not(:last-child) { margin-right: 1rem; } - .cool-flex-row-responsive :not(:last-child) { + .able-flex-row-responsive :not(:last-child) { margin-bottom: 0; margin-right: 1rem; } - .cool-flex-row-responsive-8 :not(:last-child) { + .able-flex-row-responsive-8 :not(:last-child) { margin-bottom: 0; margin-right: 0.5rem; } - .cool-flex-row-responsive-4 :not(:last-child) { + .able-flex-row-responsive-4 :not(:last-child) { margin-bottom: 0; margin-right: 0.25rem; } } @media (min-width: 700px) { - .cool-left { + .able-left { float: left; margin-right: 1rem; } - .cool-right { + .able-right { float: right; margin-left: 1rem; } } -.cool-layout-single-column { +.able-border-bottom { + border-bottom: 2px solid #ededed; +} +.able-border-top { + border-top: 2px solid #ededed; +} + +.able-center-all { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + place-items: center; +} +.able-center-all > * { + grid-row-start: 1; + grid-row-end: 2; + grid-column-start: 1; + grid-row-end: 2; +} + +.able-layout-header-main-footer { + background-color: #ffffff; + display: grid; + grid-template-rows: auto 1fr auto; + max-width: 1600px; + margin: 0 auto; + grid-template-areas: "header" "main" "footer"; +} +.able-layout-header-main-footer [data-grid-area=header] { + grid-area: header; +} +.able-layout-header-main-footer [data-grid-area=main] { + grid-area: main; + padding: 0 0 100px 0; +} +.able-layout-header-main-footer [data-grid-area=main] > section { + max-width: 800px; + margin: 0 auto; + padding: 100px 0; +} +.able-layout-header-main-footer [data-grid-area=main] > :not(section):not([class*=able-layout-collage]) { + width: 83.33%; + margin: 0 auto; +} +.able-layout-header-main-footer [data-grid-area=footer] { + grid-area: footer; + padding: 100px 8.33%; +} + +[class*=able-layout-collage] { + display: grid; + grid-template-columns: repeat(12, 1fr); +} +[class*=able-layout-collage] > * { + z-index: 1; +} + +[class*=able-layout-collage]:after { + content: ""; + display: block; + width: 100%; + height: 100%; +} + +.able-layout-collage-yellow { + grid-template-rows: repeat(7, 1fr); +} + +.able-layout-collage-yellow > :nth-of-type(1) { + grid-column: 2/span 5; + grid-row: 2/span 5; +} + +.able-layout-collage-yellow > :nth-of-type(2) { + grid-column: 8/span 4; + grid-row: 3/span 3; +} + +.able-layout-collage-yellow:after { + background-color: #fbffa8; + grid-column: 6/span 7; + grid-row: 1/span 7; +} + +.able-layout-collage-purple { + grid-template-rows: repeat(7, 1fr); +} + +.able-layout-collage-purple > :nth-of-type(1) { + grid-column: 2/span 4; + grid-row: 3/span 3; +} + +.able-layout-collage-purple > :nth-of-type(2) { + grid-column: 7/span 5; + grid-row: 2/span 5; + z-index: 1; + height: 100%; + object-fit: cover; +} + +.able-layout-collage-purple:after { + background-color: #d5b3ff; + grid-column: 3/span 8; + grid-row: 1/span 7; +} + +.able-layout-collage-green { + grid-template-rows: repeat(9, 1fr); +} + +.able-layout-collage-green > :nth-of-type(1) { + grid-column: 2/span 4; + grid-row: 2/span 3; +} + +.able-layout-collage-green > :nth-of-type(2) { + grid-column: 2/span 4; + grid-row: 6/span 3; +} + +.able-layout-collage-green > :nth-of-type(3) { + grid-column: 7/span 5; + grid-row: 3/span 5; +} + +.able-layout-collage-green:after { + background-color: #b8ffc1; + grid-column: 1/span 7; + grid-row: 1/span 9; +} + +.able-layout-collage-blue { + grid-template-rows: repeat(5, 1fr); +} + +.able-layout-collage-blue > :nth-child(1) { + grid-column: 2/span 5; + grid-row: 1/span 5; + min-height: 500px; + height: 100%; + object-fit: cover; +} + +.able-layout-collage-blue > :nth-child(2) { + grid-column: 8/span 3; + grid-row: 2/span 3; +} + +.able-layout-collage-blue:after { + background-color: #c5e6f7; + grid-column: 7/span 5; + grid-row: 1/span 5; +} + +.able-layout-30-30-40 { + display: grid; + grid-template-columns: 3fr 3fr 4fr; +} + +.able-layout-single-column { max-width: calc(200px + 75ch); margin: 0 auto; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } -.cool-layout-single-column [data-grid-area=header], -.cool-layout-single-column [data-grid-area=main], -.cool-layout-single-column [data-grid-area=footer] { +.able-layout-single-column [data-grid-area=header], +.able-layout-single-column [data-grid-area=main], +.able-layout-single-column [data-grid-area=footer] { padding: 1rem; } -.cool-layout-single-column article { +.able-layout-single-column article { max-width: 75ch; + font-size: 1.25rem; + line-height: 1.875rem; } -.cool-layout-two-column-aside-main { +.able-layout-two-column-aside-main { max-width: calc(200px + 75ch); margin: 0 auto; display: grid; grid-template-rows: auto auto auto auto; grid-template-areas: "header" "main" "aside" "footer"; } -.cool-layout-two-column-aside-main [data-grid-area=header], -.cool-layout-two-column-aside-main [data-grid-area=aside], -.cool-layout-two-column-aside-main [data-grid-area=main], -.cool-layout-two-column-aside-main [data-grid-area=footer] { +.able-layout-two-column-aside-main [data-grid-area=header], +.able-layout-two-column-aside-main [data-grid-area=aside], +.able-layout-two-column-aside-main [data-grid-area=main], +.able-layout-two-column-aside-main [data-grid-area=footer] { padding: 1rem; } -.cool-layout-two-column-aside-main [data-grid-area=header] { +.able-layout-two-column-aside-main [data-grid-area=header] { grid-area: header; } -.cool-layout-two-column-aside-main [data-grid-area=aside] { +.able-layout-two-column-aside-main [data-grid-area=aside] { grid-area: aside; } -.cool-layout-two-column-aside-main [data-grid-area=main] { +.able-layout-two-column-aside-main [data-grid-area=main] { grid-area: main; } -.cool-layout-two-column-aside-main [data-grid-area=footer] { +.able-layout-two-column-aside-main [data-grid-area=footer] { grid-area: footer; } -.cool-layout-two-column-aside-main article { +.able-layout-two-column-aside-main article { max-width: 75ch; font-size: 1.25rem; line-height: 1.875rem; } @media (min-width: 700px) { - .cool-layout-two-column-aside-main { + .able-layout-two-column-aside-main { min-height: 100vh; grid-template-columns: 1fr 200px; grid-template-rows: auto 1fr auto; diff --git a/_src/css/site.css b/_src/css/site.css index 65496cf..bc6a9bc 100644 --- a/_src/css/site.css +++ b/_src/css/site.css @@ -1,7 +1,7 @@ -.cool-styles, -.cool-styles *, -.cool-styles *::before, -.cool-styles *::after { +.able-styles, +.able-styles *, +.able-styles *::before, +.able-styles *::after { box-sizing: border-box; background-origin: border-box; background-repeat: no-repeat; @@ -13,495 +13,860 @@ color: inherit; } -.cool-styles { +.able-styles { text-rendering: optimizeSpeed; + -moz-osx-font-smoothing: grayscale; } -.cool-styles:focus-within { +.able-styles:focus-within { scroll-behavior: smooth; } -.cool-styles a[class] { +.able-styles a[class] { text-decoration: none; } -.cool-styles a:not([class]) { +.able-styles a:not([class]) { text-decoration-skip-ink: auto; } -.cool-styles ul[role=list], -.cool-styles ol[role=list] { +.able-styles ul[role=list], +.able-styles ol[role=list] { list-style: none; padding: 0; } -.cool-styles dt { +.able-styles dt { font-weight: 600; } -.cool-styles img, -.cool-styles video, -.cool-styles picture { +.able-styles img, +.able-styles video, +.able-styles picture { max-width: 100%; display: block; } -.cool-styles code, -.cool-styles pre { +.able-styles code, +.able-styles pre { font-family: monospace; } -.cool-styles pre { +.able-styles pre { white-space: pre-wrap; } @media (prefers-reduced-motion: reduce) { - .cool-styles *, -.cool-styles *::before, -.cool-styles *::after { + .able-styles *, +.able-styles *::before, +.able-styles *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } - .cool-styles:focus-within { + .able-styles:focus-within { scroll-behavior: auto; } } -.cool-styles { - font-family: Rubik, sans-serif; +.able-styles { + font-family: Futura, sans-serif; font-size: 1rem; line-height: 1.5rem; + background-color: #f2f2f2; } -.cool-styles figure img, -.cool-styles figure video, -.cool-styles figure picture { +.able-styles img, +.able-styles svg { + display: block; +} +.able-styles figure img, +.able-styles figure video, +.able-styles figure picture { width: 100%; } -.cool-styles a { - color: #1876a5; +.able-styles a { + color: blue; + text-decoration: none; text-underline-offset: 2px; } -.cool-styles a:hover { - color: #082636; -} -.cool-styles code { +.able-styles code { display: inline-block; font-size: 0.875em; line-height: 1.5em; color: #ffffff; - background-color: #1876a5; + background-color: blue; border-radius: 4px; padding: 0 0.5rem; } -.cool-styles pre { +.able-styles pre { background-color: #1c2022; color: #ffffff; padding: 1rem; border-radius: 4px; } -.cool-styles blockquote { +.able-styles blockquote { padding: 1rem 2rem; font-size: 1.25rem; line-height: 1.875rem; - border: solid #556168; - border-width: 1px 0; + border: solid #ededed; + border-width: 2px 0; } -.cool-styles table { +.able-styles table { border-collapse: collapse; } -.cool-styles th, .cool-styles caption { +.able-styles th, .able-styles caption { text-align: left; } -.cool-styles figcaption { +.able-styles figcaption { font-size: 1rem; line-height: 1.5rem; padding: 0.25rem 0; } -.cool-styles ul, .cool-styles ol { +.able-styles ul, .able-styles ol { padding-left: 1em; } -.cool-styles label:not(.cool-form-control) { +@font-face { + font-family: Futura; + src: url("/makeovers/ableton/assets/futura-pt-book.woff2"); + font-weight: 400; + display: swap; +} +@font-face { + font-family: Futura; + src: url("/makeovers/ableton/assets/futura-pt-medium.woff2"); + font-weight: 700; + display: swap; +} +.able-styles label:not(.able-form-control) { font-weight: 600; display: block; margin-bottom: 0.25rem; } -.cool-styles label:not(.cool-form-control) [type=checkbox] + span, -.cool-styles label:not(.cool-form-control) [type=radio] + span { +.able-styles label:not(.able-form-control) [type=checkbox] + span, +.able-styles label:not(.able-form-control) [type=radio] + span { font-weight: 400; } -.cool-styles fieldset { +.able-styles fieldset { border: 0; } -.cool-styles legend { +.able-styles legend { font-weight: 600; } -.cool-input { +.able-input { appearance: none; --form-field-width: 30ch; - background-color: #ffffff; - border: 2px solid #556168; - border-radius: 4px; + background-color: #ededed; + border: 0; + border-radius: 0; font-size: 1rem; width: 100%; - min-height: 44px; + min-height: 34px; } @media (min-width: 700px) { - .cool-input { + .able-input { width: var(--form-field-width, 30ch); } } -.cool-input:not(textarea) { +.able-input:not(textarea) { line-height: 1.5; } -.cool-input:not(.cool-select) { - padding: 0.5rem; +.able-input:not(.able-select) { + padding: 0.25rem 0.75rem; } -.cool-input:is(textarea) { +.able-input:is(textarea) { line-height: 1.5rem; } -.cool-input:is(select) { +.able-input:is(select) { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23556168'/%3E%3C/svg%3E%0A"); background-size: auto 20%; - background-position: center right 0.5rem; + background-position: center right 0.75rem; } -.cool-input:is(select):disabled { +.able-input:is(select):disabled { color: #556168; } -.cool-input:focus { - border-color: #1876a5; - box-shadow: 0 0 0.35em -0.1em #1876a5; +.able-input:focus { + border-color: blue; + box-shadow: 0 0 0.35em -0.1em blue; outline: 2px solid transparent; } -.cool-input:disabled { +.able-input:disabled { border-color: #94a1a8; - background-color: #dbdfe1; + background-color: #ededed; cursor: not-allowed; } -.cool-input::placeholder { +.able-input::placeholder { color: #556168; } -.cool-form-control { +.able-form-control { display: grid; align-items: center; grid-template-columns: 1.5rem 1fr; - grid-gap: 0.5rem; + grid-gap: 0.25rem 0.75rem; } -.cool-form-control:not(:last-child) { +.able-form-control:not(:last-child) { margin-bottom: 0.25rem; } -.cool-form-control input { +.able-form-control input { appearance: none; width: 1.5rem; height: 1.5rem; - border: 2px solid #556168; + border: 2px solid #ededed; position: relative; } -.cool-form-control input[type=radio] { +.able-form-control input[type=radio] { border-radius: 50%; } -.cool-form-control input[type=checkbox] { +.able-form-control input[type=checkbox] { border-radius: 2px; } -.cool-form-control input:focus { - border-color: #1876a5; - box-shadow: 0 0 0.35em -0.1em #1876a5; +.able-form-control input:focus { + border-color: blue; + box-shadow: 0 0 0.35em -0.1em blue; outline: 2px solid transparent; } -.cool-form-control input:checked { - border-color: #1876a5; +.able-form-control input:checked { + border-color: blue; } -.cool-form-control input:checked[type=radio]:before { +.able-form-control input:checked[type=radio]:before { content: ""; display: block; width: calc(1.5rem - 8px); height: calc(1.5rem - 8px); - background-color: #1876a5; + background-color: blue; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } -.cool-form-control input:checked[type=checkbox] { - background-color: #1876a5; +.able-form-control input:checked[type=checkbox] { + background-color: blue; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M12 30c-.5 0-1-.2-1.4-.6l-8-8c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l6.3 6.3 14.6-22c.6-.9 1.9-1.2 2.8-.6.9.6 1.2 1.9.6 2.8l-16 24c-.3.5-.9.8-1.5.9H12z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A"); background-size: calc(1.5rem * .65) calc(1.5rem * .65); background-position: 50% 50%; } -.cool-form-control input:disabled { - background-color: #dbdfe1; +.able-form-control input:disabled { + background-color: #ededed; border-color: #94a1a8; } -.cool-form-control input:disabled + span { +.able-form-control input:disabled + span { color: #556168; } -.cool-button { +.able-button { display: inline-block; appearance: none; - border: 2px solid transparent; - border-radius: 4px; - padding: 0.5rem; + border: 0; + border-radius: 0; + padding: 0.25rem 1.5rem; margin: 0; - background-color: #1876a5; + background-color: blue; color: #ffffff; font-size: 1rem; line-height: 1.5rem; + font-weight: 600; + min-height: 34px; cursor: pointer; } -.cool-button:focus { - border-color: #1876a5; - box-shadow: 0 0 0.35em -0.1em #1876a5; +.able-button:focus { + border-color: blue; + box-shadow: 0 0 0.35em -0.1em blue; outline: 2px solid transparent; } -.cool-button:hover { +.able-button:hover { background-color: #082636; } -.cool-nav-list { - margin: 0; +.able-nav-list, +.able-nav-list-small { + display: flex; + font-weight: 600; + font-size: 1.25rem; + line-height: 1.875rem; } -.cool-nav-list a { - color: #556168; +.able-nav-list a, +.able-nav-list-small a { + display: flex; + color: #000000; text-decoration: none; + padding: 0 0.625rem; } -.cool-nav-list a:hover { - color: #1876a5; - text-decoration: underline; +.able-nav-list a:hover, +.able-nav-list-small a:hover { + color: inherit; +} +.able-nav-list li:first-of-type a, +.able-nav-list-small li:first-of-type a { + padding-left: 0; +} +.able-nav-list li:last-of-type a, +.able-nav-list-small li:last-of-type a { + padding-right: 0; +} +.able-nav-list > :not(:last-child), +.able-nav-list-small > :not(:last-child) { + margin-right: 0.625rem; } -.cool-heading-1 { +.able-nav-list-small { + font-size: 0.875rem; + line-height: 1.3125rem; +} +.able-nav-list-small .able-is-active { + color: #e81902; +} + +.able-nav-list-tight > :not(:last-child) { + margin-right: 0; +} + +.able-heading-1 { font-size: 2.5rem; line-height: 3rem; } -.cool-heading-2 { - font-size: 2rem; - line-height: 2.5rem; +.able-heading-2 { + font-size: 1.875rem; + line-height: 2.625rem; } -.cool-heading-3 { +.able-heading-3 { font-size: 1.5rem; line-height: 2rem; } -.cool-heading-4 { +.able-heading-4 { font-size: 1.25rem; line-height: 1.875rem; } -.cool-text-large { +.able-text-large { font-size: 1.25rem; line-height: 1.875rem; } -.cool-text-medium { +.able-text-medium { font-size: 1rem; line-height: 1.5rem; } -.cool-text-small { +.able-text-small { font-size: 0.875rem; - line-height: 1.25rem; + line-height: 1.3125rem; } -.cool-text-subdued { +.able-text-subdued { color: #556168; } -.cool-text-error { +.able-text-error { color: #a5182f; } +.able-text-strong { + font-weight: 700; +} +.able-text-brand { + color: #fd5b49; +} + +a.able-text-inherit { + color: inherit; +} + +a.able-chevron-link { + display: inline-flex; + align-items: center; +} +a.able-chevron-link:after { + content: ""; + display: block; + width: 0.5em; + height: 0.5em; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z' fill='blue'/%3E%3C/svg%3E"); + margin-left: 0.25rem; + position: relative; + top: 0.125em; +} + +a.able-chevron-link.able-text-inherit:after { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); +} -.cool-table { +.able-table { --label-min-width: 100px; width: 100%; font-size: 1rem; line-height: 1.5rem; } -.cool-table thead th { +.able-table thead th { display: none; } -.cool-table tbody tr { +.able-table tbody tr { display: block; } -.cool-table tbody tr:not(:last-child) { +.able-table tbody tr:not(:last-child) { margin-bottom: 1rem; } -.cool-table tbody tr:first-of-type td:first-of-type { - border-top: 1px solid #556168; +.able-table tbody tr:first-of-type td:first-of-type { + border-top: 2px solid #ededed; padding-top: 1rem; } -.cool-table tbody td { +.able-table tbody td { display: flex; align-items: flex-start; } -.cool-table tbody td:last-of-type { - border-bottom: 1px solid #556168; +.able-table tbody td:last-of-type { + border-bottom: 2px solid #ededed; padding-bottom: 1rem; } -.cool-table tbody td[data-label]:before { +.able-table tbody td[data-label]:before { content: attr(data-label); font-weight: 600; min-width: var(--label-min-width); } -.cool-table th, .cool-table td, .cool-table caption { +.able-table th, .able-table td, .able-table caption { padding: 0.25rem 0; } @media (min-width: 700px) { - .cool-table { + .able-table { font-variant-numeric: tabular-nums; } - .cool-table tbody tr { + .able-table tbody tr { display: table-row; - border-bottom: 1px solid #556168; + border-bottom: 2px solid #ededed; } - .cool-table tbody tr:first-of-type { - border-top: 1px solid #556168; + .able-table tbody tr:first-of-type { + border-top: 2px solid #ededed; } - .cool-table tbody tr:first-of-type td:first-of-type { + .able-table tbody tr:first-of-type td:first-of-type { border-top: none; padding-top: 0.25rem; } - .cool-table thead th, -.cool-table tbody td { + .able-table thead th, +.able-table tbody td { display: table-cell; padding-left: 0.5rem; padding-right: 0.5rem; } - .cool-table tbody td { + .able-table tbody td { vertical-align: top; } - .cool-table tbody td:last-of-type { + .able-table tbody td:last-of-type { border-bottom: none; padding-bottom: 0.25rem; } - .cool-table tbody td[data-label]:before { + .able-table tbody td[data-label]:before { display: none; } } -.cool-flow-16 > :not(:last-child) { +.able-icon { + fill: currentColor; + width: 40px; + height: 40px; +} +.able-icon-social-facebook { + background-color: #3b5897; +} +.able-icon-social-twitter { + background-color: #1ca0f2; +} +.able-icon-social-youtube { + background-color: red; +} +.able-icon-social-instagram { + background-color: #f77636; +} + +[class*=icon-social] { + fill: #ffffff; +} + +.able-icon-wordmark { + fill: #fd5b49; +} + +.able-flow-4 > :not(:last-child):not([class*=able-stack]) { + margin-bottom: 0.25rem; +} +.able-flow-8 > :not(:last-child):not([class*=able-stack]) { + margin-bottom: 0.5rem; +} +.able-flow-16 > :not(:last-child):not([class*=able-stack]) { margin-bottom: 1rem; } -.cool-flow-24 > :not(:last-child) { +.able-flow-24 > :not(:last-child):not([class*=able-stack]) { margin-bottom: 1.5rem; } -.cool-stack-16 { +.able-flow-32 > :not(:last-child):not([class*=able-stack]) { + margin-bottom: 2rem; +} +.able-stack-4 { + margin-bottom: 0.25rem; +} +.able-stack-8 { + margin-bottom: 0.5rem; +} +.able-stack-10 { + margin-bottom: 0.625rem; +} +.able-stack-16 { margin-bottom: 1rem; } +.able-stack-20 { + margin-bottom: 1.25rem; +} +.able-stack-24 { + margin-bottom: 1.5rem; +} +.able-stack-32 { + margin-bottom: 2rem; +} +.able-stack-60 { + margin-bottom: 3.75rem; +} +.able-stack-64 { + margin-bottom: 4rem; +} +.able-stack-100 { + margin-bottom: 6.25rem; +} +.able-inline-4 { + margin-right: 0.25rem; +} +.able-inline-8 { + margin-right: 0.5rem; +} +.able-inline-16 { + margin-right: 1rem; +} +.able-inline-24 { + margin-right: 1.5rem; +} +.able-inline-32 { + margin-right: 2rem; +} +.able-inset-square-8 { + padding: 0.5rem; +} +.able-inset-square-16 { + padding: 1rem; +} +.able-inset-square-20 { + padding: 1.25rem; +} +.able-inset-square-24 { + padding: 1.5rem; +} +.able-inset-square-32 { + padding: 2rem; +} +.able-inset-squish-16 { + padding: 0.5rem 1rem; +} +.able-inset-squish-24 { + padding: 1rem 1.5rem; +} +.able-inset-stretch-20 { + padding: 1.25rem 0.625rem; +} +.able-inset-stretch-32 { + padding: 2rem 1.5rem; +} +.able-inset-stretch-24 { + padding: 1.5rem 1rem; +} +.able-inset-vertical-120 { + padding: 7.5rem 0; +} @media (min-width: 700px) { - .cool-half-width { + .able-half-width { width: 50%; } } -[class*=cool-flex-row] { +[class*=able-flex-row] { display: flex; align-items: center; } -[class*=cool-flex-row] :not(:last-child) { +[class*=able-flex-row] > :not(:last-child) { margin-right: 1rem; } -[class*=cool-flex-row-responsive] { +[class*=able-flex-row-responsive] { display: flex; flex-direction: column; align-items: flex-start; } -[class*=cool-flex-row-responsive] :not(:last-child) { +[class*=able-flex-row-responsive] > :not(:last-child) { margin-bottom: 1rem; } -.cool-flex-row-8 :not(:last-child) { +.able-flex-row-30 > :not(:last-child) { + margin-right: 1.875rem; +} +.able-flex-row-16 > :not(:last-child) { + margin-right: 1rem; +} +.able-flex-row-10 > :not(:last-child) { + margin-right: 0.625rem; +} +.able-flex-row-8 > :not(:last-child) { margin-right: 0.5rem; } -.cool-flex-row-4 :not(:last-child) { +.able-flex-row-4 > :not(:last-child) { margin-right: 0.25rem; } -.cool-flex-row-responsive-8 :not(:last-child) { +.able-flex-row-0 > :not(:last-child) { + margin-right: 0; +} +.able-flex-row-responsive-8 > :not(:last-child) { margin-bottom: 0.5rem; } -.cool-flex-row-responsive-4 :not(:last-child) { +.able-flex-row-responsive-4 > :not(:last-child) { margin-bottom: 0.25rem; } +.able-flex-item { + flex: 1; +} @media (min-width: 700px) { - .cool-space-between { + .able-space-between { display: flex; align-items: center; justify-content: space-between; } - .cool-space-between > :not(last-child) { + .able-space-between > :not(:last-child) { margin-right: 1rem; } - [class*=cool-flex-row-responsive] { + [class*=able-flex-row-responsive] { flex-direction: row; } - [class*=cool-flex-row-responsive] :not(:last-child) { + [class*=able-flex-row-responsive] :not(:last-child) { margin-right: 1rem; } - .cool-flex-row-responsive :not(:last-child) { + .able-flex-row-responsive :not(:last-child) { margin-bottom: 0; margin-right: 1rem; } - .cool-flex-row-responsive-8 :not(:last-child) { + .able-flex-row-responsive-8 :not(:last-child) { margin-bottom: 0; margin-right: 0.5rem; } - .cool-flex-row-responsive-4 :not(:last-child) { + .able-flex-row-responsive-4 :not(:last-child) { margin-bottom: 0; margin-right: 0.25rem; } } @media (min-width: 700px) { - .cool-left { + .able-left { float: left; margin-right: 1rem; } - .cool-right { + .able-right { float: right; margin-left: 1rem; } } -.cool-layout-single-column { +.able-border-bottom { + border-bottom: 2px solid #ededed; +} +.able-border-top { + border-top: 2px solid #ededed; +} + +.able-center-all { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + place-items: center; +} +.able-center-all > * { + grid-row-start: 1; + grid-row-end: 2; + grid-column-start: 1; + grid-row-end: 2; +} + +.able-layout-header-main-footer { + background-color: #ffffff; + display: grid; + grid-template-rows: auto 1fr auto; + max-width: 1600px; + margin: 0 auto; + grid-template-areas: "header" "main" "footer"; +} +.able-layout-header-main-footer [data-grid-area=header] { + grid-area: header; +} +.able-layout-header-main-footer [data-grid-area=main] { + grid-area: main; + padding: 0 0 100px 0; +} +.able-layout-header-main-footer [data-grid-area=main] > section { + max-width: 800px; + margin: 0 auto; + padding: 100px 0; +} +.able-layout-header-main-footer [data-grid-area=main] > :not(section):not([class*=able-layout-collage]) { + width: 83.33%; + margin: 0 auto; +} +.able-layout-header-main-footer [data-grid-area=footer] { + grid-area: footer; + padding: 100px 8.33%; +} + +[class*=able-layout-collage] { + display: grid; + grid-template-columns: repeat(12, 1fr); +} +[class*=able-layout-collage] > * { + z-index: 1; +} + +[class*=able-layout-collage]:after { + content: ""; + display: block; + width: 100%; + height: 100%; +} + +.able-layout-collage-yellow { + grid-template-rows: repeat(7, 1fr); +} + +.able-layout-collage-yellow > :nth-of-type(1) { + grid-column: 2/span 5; + grid-row: 2/span 5; +} + +.able-layout-collage-yellow > :nth-of-type(2) { + grid-column: 8/span 4; + grid-row: 3/span 3; +} + +.able-layout-collage-yellow:after { + background-color: #fbffa8; + grid-column: 6/span 7; + grid-row: 1/span 7; +} + +.able-layout-collage-purple { + grid-template-rows: repeat(7, 1fr); +} + +.able-layout-collage-purple > :nth-of-type(1) { + grid-column: 2/span 4; + grid-row: 3/span 3; +} + +.able-layout-collage-purple > :nth-of-type(2) { + grid-column: 7/span 5; + grid-row: 2/span 5; + z-index: 1; + height: 100%; + object-fit: cover; +} + +.able-layout-collage-purple:after { + background-color: #d5b3ff; + grid-column: 3/span 8; + grid-row: 1/span 7; +} + +.able-layout-collage-green { + grid-template-rows: repeat(9, 1fr); +} + +.able-layout-collage-green > :nth-of-type(1) { + grid-column: 2/span 4; + grid-row: 2/span 3; +} + +.able-layout-collage-green > :nth-of-type(2) { + grid-column: 2/span 4; + grid-row: 6/span 3; +} + +.able-layout-collage-green > :nth-of-type(3) { + grid-column: 7/span 5; + grid-row: 3/span 5; +} + +.able-layout-collage-green:after { + background-color: #b8ffc1; + grid-column: 1/span 7; + grid-row: 1/span 9; +} + +.able-layout-collage-blue { + grid-template-rows: repeat(5, 1fr); +} + +.able-layout-collage-blue > :nth-child(1) { + grid-column: 2/span 5; + grid-row: 1/span 5; + min-height: 500px; + height: 100%; + object-fit: cover; +} + +.able-layout-collage-blue > :nth-child(2) { + grid-column: 8/span 3; + grid-row: 2/span 3; +} + +.able-layout-collage-blue:after { + background-color: #c5e6f7; + grid-column: 7/span 5; + grid-row: 1/span 5; +} + +.able-layout-30-30-40 { + display: grid; + grid-template-columns: 3fr 3fr 4fr; +} + +.able-layout-single-column { max-width: calc(200px + 75ch); margin: 0 auto; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } -.cool-layout-single-column [data-grid-area=header], -.cool-layout-single-column [data-grid-area=main], -.cool-layout-single-column [data-grid-area=footer] { +.able-layout-single-column [data-grid-area=header], +.able-layout-single-column [data-grid-area=main], +.able-layout-single-column [data-grid-area=footer] { padding: 1rem; } -.cool-layout-single-column article { +.able-layout-single-column article { max-width: 75ch; + font-size: 1.25rem; + line-height: 1.875rem; } -.cool-layout-two-column-aside-main { +.able-layout-two-column-aside-main { max-width: calc(200px + 75ch); margin: 0 auto; display: grid; grid-template-rows: auto auto auto auto; grid-template-areas: "header" "main" "aside" "footer"; } -.cool-layout-two-column-aside-main [data-grid-area=header], -.cool-layout-two-column-aside-main [data-grid-area=aside], -.cool-layout-two-column-aside-main [data-grid-area=main], -.cool-layout-two-column-aside-main [data-grid-area=footer] { +.able-layout-two-column-aside-main [data-grid-area=header], +.able-layout-two-column-aside-main [data-grid-area=aside], +.able-layout-two-column-aside-main [data-grid-area=main], +.able-layout-two-column-aside-main [data-grid-area=footer] { padding: 1rem; } -.cool-layout-two-column-aside-main [data-grid-area=header] { +.able-layout-two-column-aside-main [data-grid-area=header] { grid-area: header; } -.cool-layout-two-column-aside-main [data-grid-area=aside] { +.able-layout-two-column-aside-main [data-grid-area=aside] { grid-area: aside; } -.cool-layout-two-column-aside-main [data-grid-area=main] { +.able-layout-two-column-aside-main [data-grid-area=main] { grid-area: main; } -.cool-layout-two-column-aside-main [data-grid-area=footer] { +.able-layout-two-column-aside-main [data-grid-area=footer] { grid-area: footer; } -.cool-layout-two-column-aside-main article { +.able-layout-two-column-aside-main article { max-width: 75ch; font-size: 1.25rem; line-height: 1.875rem; } @media (min-width: 700px) { - .cool-layout-two-column-aside-main { + .able-layout-two-column-aside-main { min-height: 100vh; grid-template-columns: 1fr 200px; grid-template-rows: auto 1fr auto; diff --git a/_src/makeovers/ableton/assets/ableton-logo.svg b/_src/makeovers/ableton/assets/ableton-logo.svg new file mode 100644 index 0000000..a1fe932 --- /dev/null +++ b/_src/makeovers/ableton/assets/ableton-logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/_src/makeovers/ableton/assets/ableton-wordmark.svg b/_src/makeovers/ableton/assets/ableton-wordmark.svg new file mode 100644 index 0000000..bd78bfe --- /dev/null +++ b/_src/makeovers/ableton/assets/ableton-wordmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/_src/makeovers/ableton/assets/futura-pt-book.woff2 b/_src/makeovers/ableton/assets/futura-pt-book.woff2 new file mode 100644 index 0000000..d6a01b2 Binary files /dev/null and b/_src/makeovers/ableton/assets/futura-pt-book.woff2 differ diff --git a/_src/makeovers/ableton/assets/futura-pt-medium.woff2 b/_src/makeovers/ableton/assets/futura-pt-medium.woff2 new file mode 100644 index 0000000..d1d5666 Binary files /dev/null and b/_src/makeovers/ableton/assets/futura-pt-medium.woff2 differ diff --git a/_src/makeovers/ableton/assets/header.webp b/_src/makeovers/ableton/assets/header.webp new file mode 100644 index 0000000..37711ac Binary files /dev/null and b/_src/makeovers/ableton/assets/header.webp differ diff --git a/_src/makeovers/ableton/assets/photo-1.jpg b/_src/makeovers/ableton/assets/photo-1.jpg new file mode 100644 index 0000000..999f69f Binary files /dev/null and b/_src/makeovers/ableton/assets/photo-1.jpg differ diff --git a/_src/makeovers/ableton/assets/photo-2.jpg b/_src/makeovers/ableton/assets/photo-2.jpg new file mode 100644 index 0000000..ead5415 Binary files /dev/null and b/_src/makeovers/ableton/assets/photo-2.jpg differ diff --git a/_src/makeovers/ableton/assets/photo-3.jpg b/_src/makeovers/ableton/assets/photo-3.jpg new file mode 100644 index 0000000..2b1996d Binary files /dev/null and b/_src/makeovers/ableton/assets/photo-3.jpg differ diff --git a/_src/makeovers/ableton/assets/photo-4.jpg b/_src/makeovers/ableton/assets/photo-4.jpg new file mode 100644 index 0000000..e38dd27 Binary files /dev/null and b/_src/makeovers/ableton/assets/photo-4.jpg differ diff --git a/_src/makeovers/ableton/assets/photo-5.jpg b/_src/makeovers/ableton/assets/photo-5.jpg new file mode 100644 index 0000000..21f6894 Binary files /dev/null and b/_src/makeovers/ableton/assets/photo-5.jpg differ diff --git a/_src/makeovers/ableton/assets/photo-6-a.jpg b/_src/makeovers/ableton/assets/photo-6-a.jpg new file mode 100644 index 0000000..60e9577 Binary files /dev/null and b/_src/makeovers/ableton/assets/photo-6-a.jpg differ diff --git a/_src/makeovers/ableton/assets/photo-7.jpg b/_src/makeovers/ableton/assets/photo-7.jpg new file mode 100644 index 0000000..2da11bd Binary files /dev/null and b/_src/makeovers/ableton/assets/photo-7.jpg differ diff --git a/_src/makeovers/ableton/assets/photo-8.jpg b/_src/makeovers/ableton/assets/photo-8.jpg new file mode 100644 index 0000000..0523ae8 Binary files /dev/null and b/_src/makeovers/ableton/assets/photo-8.jpg differ diff --git a/_src/makeovers/ableton/assets/play.svg b/_src/makeovers/ableton/assets/play.svg new file mode 100644 index 0000000..089606f --- /dev/null +++ b/_src/makeovers/ableton/assets/play.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/_src/makeovers/ableton/assets/poster-juanpe.webp b/_src/makeovers/ableton/assets/poster-juanpe.webp new file mode 100644 index 0000000..80cc90e Binary files /dev/null and b/_src/makeovers/ableton/assets/poster-juanpe.webp differ diff --git a/_src/makeovers/ableton/assets/poster-meet-the-makers.webp b/_src/makeovers/ableton/assets/poster-meet-the-makers.webp new file mode 100644 index 0000000..41f0466 Binary files /dev/null and b/_src/makeovers/ableton/assets/poster-meet-the-makers.webp differ diff --git a/_src/makeovers/ableton/index.html b/_src/makeovers/ableton/index.html new file mode 100644 index 0000000..3eb8ede --- /dev/null +++ b/_src/makeovers/ableton/index.html @@ -0,0 +1,82 @@ +--- +title: Ableton +layout: makeovers/ableton/base.njk +--- + +
+ +
+ + + +
+
+ +
+

We make Live, Push and Link — unique software and hardware for music creation and performance. With these products, our community of users creates amazing things.

+

Ableton was founded in 1999 and released the first version of Live in 2001. Our products are used by a community of dedicated musicians, sound designers, and artists from across the world.

+
+ +
+ + +
+ +
+

Making music isn’t easy. It takes time, effort, and learning. But when you’re in the flow, it’s incredibly rewarding.

+

We feel the same way about making Ableton products. The driving force behind Ableton is our passion for what we make, and the people we make it for.

+ +
+
+ Juanpe Bolivar + + + +
+
+

Why Ableton - Juanpe Bolivar

+
+
+ +

We are more than 350 people from 30 different countries divided between our headquarters in Berlin and our offices in Los Angeles and Tokyo.

+

Most of us are active musicians, producers, and DJs, and many of us use Live and Push every day. We come from a wide range of cultural and professional backgrounds. Some of us have PhDs, some are self-taught, and most of us are somewhere in between. What connects us is the shared belief that each of us has the skills and knowledge to contribute to something big: helping to shape the future of music culture.

+
+ +
+ + + +
+ +
+

We believe it takes focus to create truly outstanding instruments. We only work on a few products and we strive to make them great.

+

Rather than having a one-size-fits-all process, we try to give our people what they need to work their magic and grow. We’ve learned that achieving the best results comes from building teams that are richly diverse, and thus able to explore problems from a wider set of perspectives. We don’t always agree with each other, but opinion and debate are valued and openly encouraged.

+
+ +
+ +
+ +
+

We’re passionate about what we do, but we’re equally passionate about improving who we are.

+

We work hard to foster an environment where people can grow both personally and professionally, and we strive to create a wealth of opportunities to learn from and with each other.

+

Alongside an internal training program, employees are actively supported in acquiring new knowledge and skills, and coached on applying these in their daily work. In addition, staff-organized development and music salons are a chance to discuss new technologies, production techniques and best practices.

+
+ +
+ + +
+ +
+

We want our employees to love it here. Since we’re looking for exceptional talent from around the world, we will do everything we can to make your transition as easy as possible.

+

If you're joining us in Berlin, we'll help with relocation and paperwork. We’ll even provide you with free German or English lessons. Plus, working in Germany means you can expect comprehensive health insurance for you and your family, as well as generous maternity and paternity leave. Office hours are flexible, but it’s not all work; we have several company and team outings throughout the year as well as a variety of fun, informal small-group activities.

+
+ +
+ +
+

We’re really proud of the work we’ve done so far. But there’s so much more to come. If you’d like to be a part of it, please join us.

+

See latest jobs

+
+
\ No newline at end of file diff --git a/_src/sass/ableton.scss b/_src/sass/ableton.scss new file mode 100644 index 0000000..a94c95f --- /dev/null +++ b/_src/sass/ableton.scss @@ -0,0 +1,21 @@ +@import "makeovers/ableton/tokens"; +@import "abstracts/functions"; +@import "abstracts/icons"; +@import "base/reset"; +@import "base/global"; +@import "base/fonts"; +@import "components/forms"; +@import "components/navigation"; +@import "components/type"; +@import "components/tables"; +@import "components/icons"; +@import "utilities/spacing"; +@import "utilities/flexbox"; +@import "utilities/position"; +@import "utilities/visual"; +@import "utilities/grid"; +@import "layout/header-main-footer"; +@import "layout/collages"; +@import "layout/30-30-40"; +@import "layout/single-column"; +@import "layout/two-column-aside-main"; \ No newline at end of file diff --git a/_src/sass/abstracts/_icons.scss b/_src/sass/abstracts/_icons.scss new file mode 100644 index 0000000..0d49a22 --- /dev/null +++ b/_src/sass/abstracts/_icons.scss @@ -0,0 +1,3 @@ +$icon-chevron-right-black: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E"); + +$icon-chevron-right-blue: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z' fill='blue'/%3E%3C/svg%3E"); \ No newline at end of file diff --git a/_src/sass/abstracts/_tokens.scss b/_src/sass/abstracts/_tokens.scss index 8a8c87b..9153484 100644 --- a/_src/sass/abstracts/_tokens.scss +++ b/_src/sass/abstracts/_tokens.scss @@ -1,27 +1,49 @@ // all of your selectors will be prefixed with this. -$prefix: cool; +$prefix: able; +// Ableton color palette $color-black: #000000; +$color-gray-400: hsl(0, 0%, 58%); // #949494 +$color-gray-200: hsl(0, 0%, 93%); // #eeeeee +$color-gray-100: hsl(0, 0%, 95%); // #f3f3f3 +$color-white: #ffffff; +$color-blue-600: hsl(240, 100%, 50%); // #0000ff +$color-orange-600: hsl(6, 98%, 46%); // #E81902 +$color-orange-400: hsl(6, 98%, 64%); // #FD5948 + +$color-yellow-200: hsl(63, 100%, 83%); // #FBFFA7 +$color-green-200: hsl(128, 100%, 86%); // #B6FFC0 +$color-purple-200: hsl(267, 100%, 85%); //#D5B3FF +$color-blue-200: hsl(225, 100%, 82%); // #a3baff + +$color-social-facebook: hsl(221, 44%, 41%); +$color-social-twitter: hsl(203, 89%, 53%); +$color-social-youtube: hsl(0, 100%, 50%); +$color-social-instagram: hsl(20, 92%, 59%); + +// Unused Cool CSS colors $color-gray-800: hsl(200, 10%, 12%); // #1c2022 $color-gray-600: hsl(200, 10%, 37%); // #556168 $color-gray-400: hsl(200, 10%, 62%); // #94a1a8 -$color-gray-200: hsl(200, 10%, 87%); // #dbdfe1 -$color-white: #ffffff; $color-blue-800: hsl(200, 75%, 12%); // #082636 -$color-blue-600: hsl(200, 75%, 37%); // #1876a5 $color-blue-400: hsl(200, 75%, 62%); // #55b6e7 $color-blue-200: hsl(200, 75%, 87%); // #c5e6f7 $color-red-800: hsl(350, 75%, 12%); // #36080f $color-red-600: hsl(350, 75%, 37%); // #a6172f -$color-red-400: hsl(350, 75%, 62%); // #e7556e $color-red-200: hsl(350, 75%, 87%); // #f7c5cd +$font-family: Futura, sans-serif; + +$font-weight-normal: 400; +$font-weight-semibold: 600; +$font-weight-bold: 700; + $heading-1-font-size: 2.5rem; $heading-1-line-height: 3rem; -$heading-2-font-size: 2rem; -$heading-2-line-height: 2.5rem; +$heading-2-font-size: 1.875rem; +$heading-2-line-height: 2.625rem; $heading-3-font-size: 1.5rem; $heading-3-line-height: 2rem; $heading-4-font-size: 1.25rem; @@ -29,59 +51,75 @@ $heading-4-line-height: 1.875rem; $text-large-font-size: 1.25rem; $text-large-line-height: 1.875rem; - $text-medium-font-size: 1rem; $text-medium-line-height: 1.5rem; - $text-small-font-size: .875rem; -$text-small-line-height: 1.25rem; - -$font-family: Rubik, sans-serif; - -$font-weight-normal: 400; -$font-weight-semibold: 600; +$text-small-line-height: 1.3125rem; $spacing-4: .25rem; +$spacing-5: .3125rem; $spacing-8: .5rem; +$spacing-10: .625rem; +$spacing-12: .75rem; $spacing-16: 1rem; +$spacing-20: 1.25rem; $spacing-24: 1.5rem; +$spacing-30: 1.875rem; $spacing-32: 2rem; +$spacing-40: 2.5rem; +$spacing-60: 3.75rem; $spacing-64: 4rem; +$spacing-100: 6.25rem; +$spacing-120: 7.5rem; $max-line-length: 75ch; $sidebar-width: 200px; $container-max-width: calc(#{$sidebar-width} + #{$max-line-length}); $breakpoint-medium: 700px; -$color-text-body: $color-gray-800; +$icon-size-large: 40px; + +$color-text-body: $color-black; $color-text-subdued: $color-gray-600; $color-text-interactive: $color-blue-600; $color-text-interactive-hover: $color-blue-800; $color-text-error: $color-red-600; $color-text-inverse: $color-white; +$color-text-brand: $color-orange-400; $color-icon-default: $color-gray-600; $color-icon-highlight: $color-blue-600; $color-icon-inverse: $color-white; -$color-background-default: $color-white; +$color-background-default: $color-gray-100; +$color-background-surface: $color-white; $color-background-disabled: $color-gray-200; -$color-border-default: $color-gray-600; +$color-border-default: $color-gray-200; $color-border-focus: $color-blue-600; $color-border-disabled: $color-gray-400; -$border-width-default: 1px; +$border-width-default: 2px; $border-width-thick: 2px; $border-radius-small: 2px; $border-radius-medium: 4px; $form-field-width-default: 30ch; -$form-field-padding: $spacing-8; -$form-field-min-height: 44px; +$form-field-padding: $spacing-4 $spacing-12; +$form-field-min-height: 34px; $form-field-arrow-size: auto 20%; +$form-field-border-radius: 0; +$form-field-border: 0; +$form-field-background-color: $color-gray-200; +$form-field-background-position: center right $spacing-12; $form-control-size: $spacing-24; $form-control-background: $color-blue-600; $form-control-background-highlight: $color-blue-800; $form-control-border: $color-blue-600; + +$button-radius: 0; +$button-border: 0; +$button-min-height: 34px; +$button-padding: $spacing-4 $spacing-24; +$button-font-weight: $font-weight-semibold; diff --git a/_src/sass/base/_fonts.scss b/_src/sass/base/_fonts.scss new file mode 100644 index 0000000..546f594 --- /dev/null +++ b/_src/sass/base/_fonts.scss @@ -0,0 +1,12 @@ +@font-face { + font-family: Futura; + src: url('/makeovers/ableton/assets/futura-pt-book.woff2'); + font-weight: 400; + display: swap; +} +@font-face { + font-family: Futura; + src: url('/makeovers/ableton/assets/futura-pt-medium.woff2'); + font-weight: 700; + display: swap; +} \ No newline at end of file diff --git a/_src/sass/base/_global.scss b/_src/sass/base/_global.scss index 9209c70..a3d32eb 100644 --- a/_src/sass/base/_global.scss +++ b/_src/sass/base/_global.scss @@ -4,7 +4,12 @@ font-family: $font-family; font-size: $text-medium-font-size; line-height: $text-medium-line-height; + background-color: $color-background-default; + img, + svg { + display: block; + } figure img, figure video, figure picture { @@ -12,11 +17,12 @@ } a { color: $color-text-interactive; + text-decoration: none; text-underline-offset: 2px; - &:hover { - color: $color-text-interactive-hover; - } + // &:hover { + // color: $color-text-interactive-hover; + // } } code { display: inline-block; diff --git a/_src/sass/base/_reset.scss b/_src/sass/base/_reset.scss index affe726..a2931d0 100644 --- a/_src/sass/base/_reset.scss +++ b/_src/sass/base/_reset.scss @@ -15,6 +15,7 @@ .#{$prefix}-styles { text-rendering: optimizeSpeed; + -moz-osx-font-smoothing: grayscale; &:focus-within { scroll-behavior: smooth; diff --git a/_src/sass/components/_forms.scss b/_src/sass/components/_forms.scss index 010ac07..0bae7fc 100644 --- a/_src/sass/components/_forms.scss +++ b/_src/sass/components/_forms.scss @@ -23,9 +23,9 @@ &-input { appearance: none; --form-field-width: #{$form-field-width-default}; - background-color: $color-white; - border: $border-width-thick solid $color-border-default; - border-radius: $border-radius-medium; + background-color: $form-field-background-color; + border: $form-field-border; + border-radius: $form-field-border-radius; font-size: $text-medium-font-size; width: 100%; min-height: $form-field-min-height; @@ -53,7 +53,7 @@ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='#{$arrow-color}'/%3E%3C/svg%3E%0A"); background-size: $form-field-arrow-size; - background-position: center right $form-field-padding; + background-position: $form-field-background-position; &:disabled { color: $color-text-subdued; @@ -149,14 +149,16 @@ &-button { display: inline-block; appearance: none; - border: $border-width-thick solid transparent; - border-radius: $border-radius-medium; - padding: $form-field-padding; + border: $button-border; + border-radius: $button-radius; + padding: $button-padding; margin: 0; background-color: $form-control-background; color: $color-text-inverse; font-size: $text-medium-font-size; line-height: $text-medium-line-height; + font-weight: $button-font-weight; + min-height: $button-min-height; cursor: pointer; &:focus { diff --git a/_src/sass/components/_icons.scss b/_src/sass/components/_icons.scss new file mode 100644 index 0000000..436d046 --- /dev/null +++ b/_src/sass/components/_icons.scss @@ -0,0 +1,25 @@ +.#{$prefix} { + &-icon { + fill: currentColor; + width: $icon-size-large; + height: $icon-size-large; + } + &-icon-social-facebook { + background-color: $color-social-facebook; + } + &-icon-social-twitter { + background-color: $color-social-twitter; + } + &-icon-social-youtube { + background-color: $color-social-youtube; + } + &-icon-social-instagram { + background-color: $color-social-instagram; + } +} +[class*=icon-social] { + fill: $color-white; +} +.#{$prefix}-icon-wordmark { + fill: $color-text-brand; +} \ No newline at end of file diff --git a/_src/sass/components/_navigation.scss b/_src/sass/components/_navigation.scss index 29ec043..9f12ea5 100644 --- a/_src/sass/components/_navigation.scss +++ b/_src/sass/components/_navigation.scss @@ -1,12 +1,41 @@ -.#{$prefix}-nav-list { - margin: 0; +.#{$prefix}-nav-list, +.#{$prefix}-nav-list-small { + display: flex; + font-weight: $font-weight-semibold; + font-size: $text-large-font-size; + line-height: $text-large-line-height; a { - color: $color-text-subdued; + display: flex; + color: $color-text-body; text-decoration: none; + padding: 0 $spacing-10; + &:hover { + color: inherit; + } } - - a:hover { - color: $color-text-interactive; - text-decoration: underline; + li:first-of-type a { + padding-left: 0; + } + li:last-of-type a { + padding-right: 0; + } + + > :not(:last-child) { + margin-right: $spacing-10; + } +} + +.#{$prefix}-nav-list-small { + font-size: $text-small-font-size; + line-height: $text-small-line-height; + + .#{$prefix}-is-active { + color: $color-orange-600; + } +} + +.#{$prefix}-nav-list-tight { + > :not(:last-child) { + margin-right: 0; } } \ No newline at end of file diff --git a/_src/sass/components/_type.scss b/_src/sass/components/_type.scss index 2e3befd..7574f09 100644 --- a/_src/sass/components/_type.scss +++ b/_src/sass/components/_type.scss @@ -33,4 +33,34 @@ &-text-error { color: $color-text-error; } + &-text-strong { + font-weight: $font-weight-bold; + } + &-text-brand { + color: $color-text-brand; + } +} +a.#{$prefix}-text-inherit { + color: inherit; +} + +a.#{$prefix}-chevron-link { + display: inline-flex; + align-items: center; + &:after { + content: ""; + display: block; + width: .5em; + height: .5em; + background-image: $icon-chevron-right-blue; + margin-left: $spacing-4; + position: relative; + top: .125em; + } +} + +a.#{$prefix}-chevron-link.#{$prefix}-text-inherit { + &:after { + background-image: $icon-chevron-right-black; + } } \ No newline at end of file diff --git a/_src/sass/cool.scss b/_src/sass/cool.scss index ddaa046..c88514e 100644 --- a/_src/sass/cool.scss +++ b/_src/sass/cool.scss @@ -1,13 +1,21 @@ @import "abstracts/tokens"; @import "abstracts/functions"; +@import "abstracts/icons"; @import "base/reset"; @import "base/global"; +@import "base/fonts"; @import "components/forms"; @import "components/navigation"; @import "components/type"; @import "components/tables"; +@import "components/icons"; @import "utilities/spacing"; @import "utilities/flexbox"; @import "utilities/position"; +@import "utilities/visual"; +@import "utilities/grid"; +@import "layout/header-main-footer"; +@import "layout/collages"; +@import "layout/30-30-40"; @import "layout/single-column"; @import "layout/two-column-aside-main"; \ No newline at end of file diff --git a/_src/sass/layout/_30-30-40.scss b/_src/sass/layout/_30-30-40.scss new file mode 100644 index 0000000..d3c01c1 --- /dev/null +++ b/_src/sass/layout/_30-30-40.scss @@ -0,0 +1,4 @@ +.#{$prefix}-layout-30-30-40 { + display: grid; + grid-template-columns: 3fr 3fr 4fr; +} \ No newline at end of file diff --git a/_src/sass/layout/_collages.scss b/_src/sass/layout/_collages.scss new file mode 100644 index 0000000..0eaa2e7 --- /dev/null +++ b/_src/sass/layout/_collages.scss @@ -0,0 +1,105 @@ +[class*="#{$prefix}-layout-collage"] { + display: grid; + grid-template-columns: repeat(12, 1fr); + > * { + z-index: 1; + } +} + +[class*="#{$prefix}-layout-collage"]:after { + content: ""; + display: block; + width: 100%; + height: 100%; +} + +.#{$prefix}-layout-collage-yellow { + grid-template-rows: repeat(7, 1fr); +} + +.#{$prefix}-layout-collage-yellow > :nth-of-type(1) { + grid-column: 2 / span 5; + grid-row: 2/ span 5; +} + +.#{$prefix}-layout-collage-yellow > :nth-of-type(2) { + grid-column: 8 / span 4; + grid-row: 3 / span 3; +} + +.#{$prefix}-layout-collage-yellow:after { + background-color: $color-yellow-200; + grid-column: 6 / span 7; + grid-row: 1 / span 7; +} + +.#{$prefix}-layout-collage-purple { + grid-template-rows: repeat(7, 1fr); +} + +.#{$prefix}-layout-collage-purple > :nth-of-type(1) { + grid-column: 2 / span 4; + grid-row: 3/ span 3; +} + +.#{$prefix}-layout-collage-purple > :nth-of-type(2) { + grid-column: 7 / span 5; + grid-row: 2 / span 5; + z-index: 1; + height: 100%; + object-fit: cover; +} + +.#{$prefix}-layout-collage-purple:after { + background-color: $color-purple-200; + grid-column: 3 / span 8; + grid-row: 1 / span 7; +} + +.#{$prefix}-layout-collage-green { + grid-template-rows: repeat(9, 1fr); +} + +.#{$prefix}-layout-collage-green > :nth-of-type(1) { + grid-column: 2 / span 4; + grid-row: 2/ span 3; +} + +.#{$prefix}-layout-collage-green > :nth-of-type(2) { + grid-column: 2 / span 4; + grid-row: 6 / span 3; +} + +.#{$prefix}-layout-collage-green > :nth-of-type(3) { + grid-column: 7 / span 5; + grid-row: 3 / span 5; +} + +.#{$prefix}-layout-collage-green:after { + background-color: $color-green-200; + grid-column: 1 / span 7; + grid-row: 1 / span 9; +} + +.#{$prefix}-layout-collage-blue { + grid-template-rows: repeat(5, 1fr); +} + +.#{$prefix}-layout-collage-blue > :nth-child(1) { + grid-column: 2 / span 5; + grid-row: 1 / span 5; + min-height: 500px; + height: 100%; + object-fit: cover; +} + +.#{$prefix}-layout-collage-blue > :nth-child(2) { + grid-column: 8 / span 3; + grid-row: 2 / span 3; +} + +.#{$prefix}-layout-collage-blue:after { + background-color: $color-blue-200; + grid-column: 7 / span 5; + grid-row: 1 / span 5; +} \ No newline at end of file diff --git a/_src/sass/layout/_header-main-footer.scss b/_src/sass/layout/_header-main-footer.scss new file mode 100644 index 0000000..18d2cd8 --- /dev/null +++ b/_src/sass/layout/_header-main-footer.scss @@ -0,0 +1,34 @@ +.#{$prefix}-layout-header-main-footer { + background-color: $color-background-surface; display: grid; + grid-template-rows: auto 1fr auto; + max-width: 1600px; + margin: 0 auto; + grid-template-areas: + "header" + "main" + "footer"; + + [data-grid-area="header"] { + grid-area: header; + } + [data-grid-area="main"] { + grid-area: main; + padding: 0 0 100px 0; + + > section { + max-width: 800px; + margin: 0 auto; + padding: 100px 0; + } + + > :not(section):not([class*="#{$prefix}-layout-collage"]) { + width: 83.33%; + margin: 0 auto; + } + } + [data-grid-area="footer"] { + grid-area: footer; + padding: 100px 8.33%; + } +} + diff --git a/_src/sass/layout/_single-column.scss b/_src/sass/layout/_single-column.scss index 0faf140..aa23511 100644 --- a/_src/sass/layout/_single-column.scss +++ b/_src/sass/layout/_single-column.scss @@ -13,6 +13,8 @@ article { max-width: $max-line-length; + font-size: $text-large-font-size; + line-height: $text-large-line-height; } } diff --git a/_src/sass/makeovers/ableton/_tokens.scss b/_src/sass/makeovers/ableton/_tokens.scss new file mode 100644 index 0000000..9153484 --- /dev/null +++ b/_src/sass/makeovers/ableton/_tokens.scss @@ -0,0 +1,125 @@ +// all of your selectors will be prefixed with this. +$prefix: able; + +// Ableton color palette +$color-black: #000000; +$color-gray-400: hsl(0, 0%, 58%); // #949494 +$color-gray-200: hsl(0, 0%, 93%); // #eeeeee +$color-gray-100: hsl(0, 0%, 95%); // #f3f3f3 +$color-white: #ffffff; +$color-blue-600: hsl(240, 100%, 50%); // #0000ff +$color-orange-600: hsl(6, 98%, 46%); // #E81902 +$color-orange-400: hsl(6, 98%, 64%); // #FD5948 + +$color-yellow-200: hsl(63, 100%, 83%); // #FBFFA7 +$color-green-200: hsl(128, 100%, 86%); // #B6FFC0 +$color-purple-200: hsl(267, 100%, 85%); //#D5B3FF +$color-blue-200: hsl(225, 100%, 82%); // #a3baff + +$color-social-facebook: hsl(221, 44%, 41%); +$color-social-twitter: hsl(203, 89%, 53%); +$color-social-youtube: hsl(0, 100%, 50%); +$color-social-instagram: hsl(20, 92%, 59%); + +// Unused Cool CSS colors +$color-gray-800: hsl(200, 10%, 12%); // #1c2022 +$color-gray-600: hsl(200, 10%, 37%); // #556168 +$color-gray-400: hsl(200, 10%, 62%); // #94a1a8 + +$color-blue-800: hsl(200, 75%, 12%); // #082636 +$color-blue-400: hsl(200, 75%, 62%); // #55b6e7 +$color-blue-200: hsl(200, 75%, 87%); // #c5e6f7 + +$color-red-800: hsl(350, 75%, 12%); // #36080f +$color-red-600: hsl(350, 75%, 37%); // #a6172f +$color-red-200: hsl(350, 75%, 87%); // #f7c5cd + +$font-family: Futura, sans-serif; + +$font-weight-normal: 400; +$font-weight-semibold: 600; +$font-weight-bold: 700; + +$heading-1-font-size: 2.5rem; +$heading-1-line-height: 3rem; +$heading-2-font-size: 1.875rem; +$heading-2-line-height: 2.625rem; +$heading-3-font-size: 1.5rem; +$heading-3-line-height: 2rem; +$heading-4-font-size: 1.25rem; +$heading-4-line-height: 1.875rem; + +$text-large-font-size: 1.25rem; +$text-large-line-height: 1.875rem; +$text-medium-font-size: 1rem; +$text-medium-line-height: 1.5rem; +$text-small-font-size: .875rem; +$text-small-line-height: 1.3125rem; + +$spacing-4: .25rem; +$spacing-5: .3125rem; +$spacing-8: .5rem; +$spacing-10: .625rem; +$spacing-12: .75rem; +$spacing-16: 1rem; +$spacing-20: 1.25rem; +$spacing-24: 1.5rem; +$spacing-30: 1.875rem; +$spacing-32: 2rem; +$spacing-40: 2.5rem; +$spacing-60: 3.75rem; +$spacing-64: 4rem; +$spacing-100: 6.25rem; +$spacing-120: 7.5rem; + +$max-line-length: 75ch; +$sidebar-width: 200px; +$container-max-width: calc(#{$sidebar-width} + #{$max-line-length}); +$breakpoint-medium: 700px; + +$icon-size-large: 40px; + +$color-text-body: $color-black; +$color-text-subdued: $color-gray-600; +$color-text-interactive: $color-blue-600; +$color-text-interactive-hover: $color-blue-800; +$color-text-error: $color-red-600; +$color-text-inverse: $color-white; +$color-text-brand: $color-orange-400; + +$color-icon-default: $color-gray-600; +$color-icon-highlight: $color-blue-600; +$color-icon-inverse: $color-white; + +$color-background-default: $color-gray-100; +$color-background-surface: $color-white; +$color-background-disabled: $color-gray-200; + +$color-border-default: $color-gray-200; +$color-border-focus: $color-blue-600; +$color-border-disabled: $color-gray-400; + +$border-width-default: 2px; +$border-width-thick: 2px; + +$border-radius-small: 2px; +$border-radius-medium: 4px; + +$form-field-width-default: 30ch; +$form-field-padding: $spacing-4 $spacing-12; +$form-field-min-height: 34px; +$form-field-arrow-size: auto 20%; +$form-field-border-radius: 0; +$form-field-border: 0; +$form-field-background-color: $color-gray-200; +$form-field-background-position: center right $spacing-12; +$form-control-size: $spacing-24; +$form-control-background: $color-blue-600; +$form-control-background-highlight: $color-blue-800; +$form-control-border: $color-blue-600; + +$button-radius: 0; +$button-border: 0; +$button-min-height: 34px; +$button-padding: $spacing-4 $spacing-24; +$button-font-weight: $font-weight-semibold; diff --git a/_src/sass/utilities/_flexbox.scss b/_src/sass/utilities/_flexbox.scss index e814ffd..b1db7c1 100644 --- a/_src/sass/utilities/_flexbox.scss +++ b/_src/sass/utilities/_flexbox.scss @@ -2,7 +2,7 @@ display: flex; align-items: center; - & :not(:last-child) { + > :not(:last-child) { margin-right: $spacing-16; } } @@ -12,28 +12,43 @@ flex-direction: column; align-items: flex-start; - & :not(:last-child) { + > :not(:last-child) { margin-bottom: $spacing-16; } } .#{$prefix} { &-flex-row { - &-8 :not(:last-child) { + &-30 > :not(:last-child) { + margin-right: $spacing-30; + } + &-16 > :not(:last-child) { + margin-right: $spacing-16; + } + &-10 > :not(:last-child) { + margin-right: $spacing-10; + } + &-8 > :not(:last-child) { margin-right: $spacing-8; } - &-4 :not(:last-child) { + &-4 > :not(:last-child) { margin-right: $spacing-4; } + &-0 > :not(:last-child) { + margin-right: 0; + } } &-flex-row-responsive { - &-8 :not(:last-child) { + &-8 > :not(:last-child) { margin-bottom: $spacing-8; } - &-4 :not(:last-child) { + &-4 > :not(:last-child) { margin-bottom: $spacing-4; } } + &-flex-item { + flex: 1; + } } @media (min-width: $breakpoint-medium) { @@ -43,7 +58,7 @@ align-items: center; justify-content: space-between; - > :not(last-child) { + > :not(:last-child) { margin-right: $spacing-16; } } @@ -68,7 +83,7 @@ &-4 :not(:last-child) { margin-bottom: 0; margin-right: $spacing-4; - } + } } } } \ No newline at end of file diff --git a/_src/sass/utilities/_grid.scss b/_src/sass/utilities/_grid.scss new file mode 100644 index 0000000..3e613e9 --- /dev/null +++ b/_src/sass/utilities/_grid.scss @@ -0,0 +1,13 @@ +.#{$prefix}-center-all { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + place-items: center; + + > * { + grid-row-start: 1; + grid-row-end: 2; + grid-column-start: 1; + grid-row-end: 2; + } +} \ No newline at end of file diff --git a/_src/sass/utilities/_spacing.scss b/_src/sass/utilities/_spacing.scss index 12bee7a..10e4f3d 100644 --- a/_src/sass/utilities/_spacing.scss +++ b/_src/sass/utilities/_spacing.scss @@ -1,15 +1,103 @@ .#{$prefix} { - &-flow-16 > :not(:last-child) { + &-flow-4 > :not(:last-child):not([class*="#{$prefix}-stack"]) { + margin-bottom: $spacing-4; + } + &-flow-8 > :not(:last-child):not([class*="#{$prefix}-stack"]) { + margin-bottom: $spacing-8; + } + &-flow-16 > :not(:last-child):not([class*="#{$prefix}-stack"]) { margin-bottom: $spacing-16; } - - &-flow-24 > :not(:last-child) { + &-flow-24 > :not(:last-child):not([class*="#{$prefix}-stack"]) { margin-bottom: $spacing-24; } + &-flow-32 > :not(:last-child):not([class*="#{$prefix}-stack"]) { + margin-bottom: $spacing-32; + } + &-stack-4 { + margin-bottom: $spacing-4; + } + &-stack-8 { + margin-bottom: $spacing-8; + } + &-stack-10 { + margin-bottom: $spacing-10; + } &-stack-16 { margin-bottom: $spacing-16; } + &-stack-20 { + margin-bottom: $spacing-20; + } + &-stack-24 { + margin-bottom: $spacing-24; + } + &-stack-32 { + margin-bottom: $spacing-32; + } + &-stack-60 { + margin-bottom: $spacing-60; + } + &-stack-64 { + margin-bottom: $spacing-64; + } + &-stack-100 { + margin-bottom: $spacing-100; + } + + &-inline-4 { + margin-right: $spacing-4; + } + &-inline-8 { + margin-right: $spacing-8; + } + &-inline-16 { + margin-right: $spacing-16; + } + &-inline-24 { + margin-right: $spacing-24; + } + &-inline-32 { + margin-right: $spacing-32; + } + + &-inset-square-8 { + padding: $spacing-8; + } + &-inset-square-16 { + padding: $spacing-16; + } + &-inset-square-20 { + padding: $spacing-20; + } + &-inset-square-24 { + padding: $spacing-24; + } + &-inset-square-32 { + padding: $spacing-32; + } + + &-inset-squish-16 { + padding: $spacing-8 $spacing-16; + } + &-inset-squish-24 { + padding: $spacing-16 $spacing-24; + } + + &-inset-stretch-20 { + padding: $spacing-20 $spacing-10; + } + &-inset-stretch-32 { + padding: $spacing-32 $spacing-24; + } + &-inset-stretch-24 { + padding: $spacing-24 $spacing-16; + } + + &-inset-vertical-120 { + padding: $spacing-120 0; + } @media (min-width: $breakpoint-medium) { &-half-width { diff --git a/_src/sass/utilities/_visual.scss b/_src/sass/utilities/_visual.scss new file mode 100644 index 0000000..d24b4b0 --- /dev/null +++ b/_src/sass/utilities/_visual.scss @@ -0,0 +1,8 @@ +.#{$prefix} { + &-border-bottom { + border-bottom: $border-width-default solid $color-border-default; + } + &-border-top { + border-top: $border-width-default solid $color-border-default; + } +} \ No newline at end of file