diff --git a/addon/components/es-header/es-brand.js b/addon/components/es-header/es-brand.js new file mode 100644 index 00000000..47bb421b --- /dev/null +++ b/addon/components/es-header/es-brand.js @@ -0,0 +1,6 @@ +import Component from '@ember/component'; +import layout from '../../templates/components/es-header/es-brand'; + +export default Component.extend({ + layout +}); diff --git a/addon/components/es-header/es-search.js b/addon/components/es-header/es-search.js new file mode 100644 index 00000000..3239c15a --- /dev/null +++ b/addon/components/es-header/es-search.js @@ -0,0 +1,6 @@ +import Component from '@ember/component'; +import layout from '../../templates/components/es-header/es-search'; + +export default Component.extend({ + layout +}); diff --git a/addon/components/es-navbar.js b/addon/components/es-navbar.js index d7d591cf..e6ad5fea 100644 --- a/addon/components/es-navbar.js +++ b/addon/components/es-navbar.js @@ -20,8 +20,7 @@ export default class EsNavbar extends Component { } toggleMenu() { - let menu = this.element.querySelector('ul[role="menubar"]'); - + let menu = this.element.querySelector('.navbar-toggler'); menu.setAttribute('aria-expanded', menu.getAttribute('aria-expanded') !== 'true'); } } diff --git a/addon/components/es-navbar/link/component.js b/addon/components/es-navbar/link/component.js index 57c4abfb..4dfdcd33 100644 --- a/addon/components/es-navbar/link/component.js +++ b/addon/components/es-navbar/link/component.js @@ -3,242 +3,104 @@ import layout from './template'; import { computed } from '@ember/object'; import { equal } from '@ember/object/computed'; import { inject as service } from '@ember/service'; -import { next } from '@ember/runloop'; +import { schedule, next } from '@ember/runloop'; export default Component.extend({ layout, tagName: 'li', - tabIndex: 0, - - role: 'menuitem', - - attributeBindings: ['role'], + classNames: ['navbar-list-item'], classNameBindings: ['isDropdown:dropdown'], isDropdown: equal('link.type', 'dropdown'), + isDropdownOpen: false, - keyCode: Object.freeze({ - 'TAB': 9, - 'RETURN': 13, - 'ESC': 27, - 'SPACE': 32, - 'PAGEUP': 33, - 'PAGEDOWN': 34, - 'END': 35, - 'HOME': 36, - 'LEFT': 37, - 'UP': 38, - 'RIGHT': 39, - 'DOWN': 40 + // because aria-expanded requires a string value instead of a boolean + isExpanded: computed('isDropdownOpen', function() { + return this.isDropdownOpen ? 'true' : 'false'; }), navbar: service(), - didInsertElement() { - this.element.tabIndex = -1; - - this.get('navbar').register(this); - this.domNode = this.element.querySelector('ul[role="menu"]'); - - if(this.domNode) { - this.element.querySelector('a').onmousedown = () => this.expand(); - let links = Array.from(this.domNode.querySelectorAll('a')) - - links.forEach((ancor) => { - ancor.addEventListener('blur', () => this.handleBlur()); - }); + actions: { + toggleDropdown() { + this.toggleProperty('isDropdownOpen'); + + if (this.isDropdownOpen) { + // if it's open, let's make sure it can do some things + schedule('afterRender', this, function() { + + // move focus to the first item in the dropdown + this.processFirstElementFocus(); + this.processKeyPress(); + }); + } } }, - handleBlur() { - next(this, function() { - let subItems = Array.from(this.element.querySelectorAll('ul[role="menu"] li')); - let focused = subItems.find(item => document.activeElement === item.querySelector('a')); - - // debugger - if(!focused) { - this.closePopupMenu(); - } - }) + closeDropdown() { + // set the isDropdownOpen to false, which will make the dropdown go away + this.set('isDropdownOpen', false); }, - openPopupMenu() { - // Get position and bounding rectangle of controller object's DOM node - var rect = this.element.getBoundingClientRect(); - - // Set CSS properties - if(this.domNode) { - this.domNode.style.display = 'block'; - this.domNode.style.top = rect.height + 'px'; - this.domNode.style.zIndex = 1000; - } - - this.set('expanded', true); + openDropdown() { //might not need this + // open the dropdown and set the focus to the first item inside + this.set('isDropdownOpen', true); + this.processFirstElementFocus(); }, - closePopupMenu(force) { - var controllerHasHover = this.hasHover; - - var hasFocus = this.hasFocus; - - if (!this.isMenubarItem) { - controllerHasHover = false; - } + processBlur() { + next(this, function() { + let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list li')); + let focused = subItems.find(item => document.activeElement === item.querySelector('a')); - if (force || (!hasFocus && !this.hasHover && !controllerHasHover)) { - if(this.domNode) { - this.domNode.style.display = 'none'; - this.domNode.style.zIndex = 0; + //if the dropdown isn't focused, close it + if (!focused) { + this.closeDropdown(); } - this.set('expanded', false); - } - }, - - expanded: computed({ - get() { - return this.element.getAttribute('aria-expanded') === 'true'; - }, - set(key, value) { - this.element.setAttribute('aria-expanded', value); - } - }).volatile(), + }); + }, - setFocusToFirstItem() { - let element = this.element.querySelector('ul[role="menu"] li a') - if (element) { - element.focus(); - } + processClick() { + // TODO handle mouseclick outside the current dropdown }, - setFocusToLastItem() { - this.element.querySelector('ul[role="menu"] li a:last-of-type').focus(); + processFirstElementFocus() { + // Identify the first item in the dropdown list & set focus on it + let firstFocusable = this.element.querySelector('.navbar-dropdown-list li:first-of-type a'); + firstFocusable.focus(); }, - setFocusToNextItem() { - let subItems = Array.from(this.element.querySelectorAll('ul[role="menu"] li')); - - let focused = subItems.find(item => document.activeElement === item.querySelector('a')); - let focusedIndex = subItems.indexOf(focused); - - let nextItem = subItems[(focusedIndex + 1) % subItems.length]; + processKeyPress() { + // add event listeners + let dropdownList = this.element.querySelector('.navbar-dropdown-list'); - if (!nextItem) { - return; - } - - nextItem.querySelector('a').focus(); - }, - - setFocusToPreviousItem() { - let subItems = Array.from(this.element.querySelectorAll('ul[role="menu"] li')); - - let focused = subItems.find(item => document.activeElement === item.querySelector('a')); - let focusedIndex = subItems.indexOf(focused); - - let nextIndex = focusedIndex - 1; - - if (nextIndex < 0) { - nextIndex = subItems.length - 1; - } + //...for certain keypress events + dropdownList.addEventListener('keydown', event => { - let nextItem = subItems[nextIndex]; + // ESC key should close the dropdown and return focus to the toggle + if (event.keyCode === 27 && this.isDropdownOpen) { + this.closeDropdown(); + this.returnFocus(); - if (!nextItem) { - return; - } + // if focus leaves the open dropdown via keypress, close it (without trying to otherwise control focus) + } else if (this.isDropdownOpen) { + this.processBlur(); - nextItem.querySelector('a').focus(); + } else { + return; + } + }); }, - keyDown(event) { - let flag = false; - let clickEvent; - let mousedownEvent; - - switch (event.keyCode) { - case this.keyCode.RETURN: - case this.keyCode.SPACE: - // Create simulated mouse event to mimic the behavior of ATs - // and let the event handler handleClick do the housekeeping. - mousedownEvent = new MouseEvent('mousedown', { - 'view': window, - 'bubbles': true, - 'cancelable': true - }); - clickEvent = new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - }); - - document.activeElement.dispatchEvent(mousedownEvent); - document.activeElement.dispatchEvent(clickEvent); - - flag = true; - break; - case this.keyCode.DOWN: - if(this.get('expanded')) { - this.setFocusToNextItem(); - } else { - this.openPopupMenu(); - this.setFocusToFirstItem(); - } - flag = true; - break; - - case this.keyCode.LEFT: - this.get('navbar').setFocusToPreviousItem(this); - flag = true; - break; - - case this.keyCode.RIGHT: - this.get('navbar').setFocusToNextItem(this); - flag = true; - break; - - case this.keyCode.UP: - if(this.get('expanded')) { - this.setFocusToPreviousItem(); - } else { - this.openPopupMenu(); - this.setFocusToLastItem(); - } - break; - - case this.keyCode.HOME: - case this.keyCode.PAGEUP: - this.setFocusToFirstItem(); - flag = true; - break; - - case this.keyCode.END: - case this.keyCode.PAGEDOWN: - this.setFocusToLastItem(); - flag = true; - break; - - case this.keyCode.TAB: - this.closePopupMenu(true); - break; - - case this.keyCode.ESC: - this.closePopupMenu(true); - break; - } - - if (flag) { - event.stopPropagation(); - event.preventDefault(); - } + returnFocus() { + // after that rendering bit happens, we need to return the focus to the trigger + schedule('afterRender', this, function() { + let dropdownTrigger = this.element.querySelector('.navbar-list-item-dropdown-toggle'); + dropdownTrigger.focus(); + }); }, - expand() { - next(this, () => { - if(this.get('expanded')) { - this.closePopupMenu(); - } else { - this.openPopupMenu(); - this.setFocusToFirstItem(); - } - }) + willDestroyElement() { + document.removeEventListener('keydown', this.triggerDropdown); + // document.removeEventListener('click', this.triggerDropdown); } }); diff --git a/addon/components/es-navbar/link/template.hbs b/addon/components/es-navbar/link/template.hbs index fb7f6f1e..ad5bcb7e 100644 --- a/addon/components/es-navbar/link/template.hbs +++ b/addon/components/es-navbar/link/template.hbs @@ -1,40 +1,36 @@ {{#if (eq link.type "link")}} {{/if}} {{#if (eq link.type "dropdown")}} - - + + {{#if isDropdownOpen}} + + {{/if}} {{/if}} diff --git a/addon/components/es-search.js b/addon/components/es-search.js deleted file mode 100644 index 38dabc68..00000000 --- a/addon/components/es-search.js +++ /dev/null @@ -1,8 +0,0 @@ -import Component from '@ember/component'; -import layout from '../templates/components/es-search'; - -export default Component.extend({ - layout, - classNames: ['es-search'], - ariaRole: 'search' -}); diff --git a/addon/styles/addon.css b/addon/styles/addon.css index 3c44fc0d..5eabfd8b 100644 --- a/addon/styles/addon.css +++ b/addon/styles/addon.css @@ -7,9 +7,13 @@ @import "layout.css"; @import "icon.css"; -@import "components/es-navbar.css"; +@import "components/es-button.css"; +@import "components/es-card.css"; +@import "components/es-footer.css"; @import "components/es-header.css"; +@import "components/es-list.css"; +@import "components/es-media.css"; +@import "components/es-navbar.css"; @import "components/es-page-header.css"; -@import "components/es-button.css"; @import "components/es-tabs.css"; -@import "components/es-card.css"; + diff --git a/addon/styles/colors.css b/addon/styles/colors.css index 505b0388..fea25731 100644 --- a/addon/styles/colors.css +++ b/addon/styles/colors.css @@ -21,4 +21,4 @@ .bg-info { background: var(--color-info); -} \ No newline at end of file +} diff --git a/addon/styles/components/es-button.css b/addon/styles/components/es-button.css index 4c151b35..cd5d2c1c 100644 --- a/addon/styles/components/es-button.css +++ b/addon/styles/components/es-button.css @@ -1,14 +1,50 @@ .es-button { background-color: var(--color-orange); - color: var(--color-light); - padding-left: 1.5em; - padding-right: 1.5em; - padding-top: 1em; - padding-bottom: 1em; border-radius: 4px; + color: var(--color-light); + font-size: 24px; /* buttons have to have this size if they are on the orange background */ + padding-bottom: 0.5rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.5rem; + text-decoration: none; +} +.es-button-secondary { + font-size: 24px; /* should match the primary button, we can abstract a base button class later */ + background-color: transparent; } -a.es-button { - display: inline-block; +.link-as-button { + color: inherit; + position: relative; text-decoration: none; + z-index: 0; +} +.link-as-button:after { + background-color: #E04E39; + bottom: 8%; + content: " "; + display: inline-block; + height: 24%; + left: 0; + position: absolute; + top: auto; + transform: scaleY(1); + width: 100%; + z-index: -1; } + +.es-button-icon { + background-color: transparent; + border-color: transparent; +} + +.es-button + .es-button-secondary { + @media screen and (min-width: 992px){ + margin-left: 20px; + } + +} + +/* TODO add hover state */ +/* TODO add focus state */ diff --git a/addon/styles/components/es-footer.css b/addon/styles/components/es-footer.css new file mode 100644 index 00000000..b683b414 --- /dev/null +++ b/addon/styles/components/es-footer.css @@ -0,0 +1,32 @@ +footer { + display: flex; + flex-flow: row wrap; + justify-content: space-evenly; + margin: 0; + max-width: 100%; + padding: 0; +} +.footer-info, .footer-statement, .footer-contributions { + display: flex; +} +.footer-info {} +.footer-statement { + .footer-social { + display: flex; + list-style: none; + li { + padding: 0; + margin: 0; + display: inline-flex; + a { + display: flex; + justify-content: center; + max-width: 25px; + svg { + width: 25px; + display: block; + } + } + } + } +} \ No newline at end of file diff --git a/addon/styles/components/es-list.css b/addon/styles/components/es-list.css new file mode 100644 index 00000000..8218051f --- /dev/null +++ b/addon/styles/components/es-list.css @@ -0,0 +1,37 @@ +.es-list { + list-style: none; + display: flex; + flex-flow: row wrap; + justify-content: space-around; +} + +/* TODO not sure how to write this in the style this project is now using */ + +/* .es-list-images { + & img { + max-width: 50%; + & @media screen and (min-width: 992px) { + max-width: 125px; + height: auto; + } + } +} */ + + + +.es-list-hero-images { + /* don't show it on mobile- it's not necessary for the site and it's not kind to the users' bandwidth */ + display: none; + + @media screen and (min-width: 992px) { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-column-gap: 50px; + grid-row-gap: 0px; + max-height: 400px; /* whatever the max height of the images are */ + } +} \ No newline at end of file diff --git a/addon/styles/components/es-media.css b/addon/styles/components/es-media.css new file mode 100644 index 00000000..693c0190 --- /dev/null +++ b/addon/styles/components/es-media.css @@ -0,0 +1,8 @@ +/* this component has a paragraph of text on one side, and and image on the other, and alternates depending on position. */ +.es-media { + /* TODO think about smaller viewports and put them here */ + @media screen and (min-width: 992px) { + display: flex; + flex-flow: row wrap; + } +} \ No newline at end of file diff --git a/addon/styles/components/es-navbar.css b/addon/styles/components/es-navbar.css index 8a186529..1b887f64 100644 --- a/addon/styles/components/es-navbar.css +++ b/addon/styles/components/es-navbar.css @@ -1,23 +1,29 @@ -nav.es-navbar { - width: 100%; - max-width: var(--container-width-large); - padding: 1rem; - font-size: var(--text-preset-2); +.es-navbar { + background-color: #1C1E23; + color: white; display: flex; flex-direction: column; + /* font-size: var(--text-preset-2); */ + font-size: 1.2em; + font-weight: 500; + max-width: var(--container-width-large); + padding: 0.5rem; + width: 100%; } .navbar-brand { display: block; - padding: 0 2rem; - height: 6rem; + padding: 0 1rem; + height: 3rem; + /* TODO using order is not ideal for accessibility */ order: 2; } -.navbar-nav { +.navbar-list { padding: 0; width: 100%; - margin: 1rem 0 0 0; + margin: 0.5rem 0 0 0; + /* TODO using order is not ideal for accessibility */ order: 3; } @@ -27,9 +33,10 @@ nav.es-navbar { border-radius: 4px; border-color: var(--color-light); margin-left: auto; + /* TODO using order is not ideal for accessibility */ order: 1; - margin-bottom: -6rem; - height: 6rem; + margin-bottom: -3rem; + height: 3rem; } .navbar-toggler .navbar-toggler-icon { @@ -37,108 +44,129 @@ nav.es-navbar { } .navbar-toggler-icon { - display: block; - width: 5rem; - height: 3rem; - vertical-align: middle; - content: ""; - background: center center no-repeat; background-size: 100% 100%; + background: center center no-repeat; + content: ""; + display: block; + height: 1.5rem; + width: 2.5rem; } -.navbar-nav >li { +.navbar-list-item { list-style: none; position: relative; } -.navbar-link__dropdown { - display: block; - padding: 2rem; - line-height: 2rem; +.navbar-list-item-link { + color: inherit; + padding: 1rem; text-decoration: none; - color: #FFF; - white-space: nowrap; - font-weight: 600; -} - -.dropdown .navbar-link__dropdown::after { - content: ''; - display: inline-block; - width: 0; - height: 0; - vertical-align: middle; - margin-left: 1rem; - border-top: 5px dashed; - border-top: 5px solid var(--color-orange); - border-right: 5px solid transparent; - border-left: 5px solid transparent; -} - -li[aria-expanded=true] .navbar-link__dropdown { - background: #FFFFFF; - color: var(--color-orange); -} - -ul[role="menu"] { - display: none; - padding: 0; - background: #FFFFFF; - box-shadow: 5px 5px 5px 0 rgba(50,50,50,0.2); -} - -ul[role="menu"] hr { - margin: 0; } -ul[role="menu"] li { - list-style: none; +.navbar-list-item-dropdown-toggle { + background-color: transparent; + border-color: transparent; + color: #FFF; display: block; + padding: 1rem; + text-decoration: none; white-space: nowrap; - background: #FFF; } -ul[role="menu"] li> a { - padding: 2rem; - font-weight: 600; - display: block; - text-decoration: none; - color: var(--color-orange); +.navbar-list-item-dropdown-toggle:hover { + cursor: pointer; } -ul[role="menu"] li> a:hover, ul[role="menu"] li> a:focus { - background: var(--color-orange); - color: var(--color-light); -} + .navbar-list-item-dropdown-toggle::after { + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px dashed; + border-top: 5px solid white; + content: ''; + display: inline-block; + height: 0; + margin-left: 0.5rem; + vertical-align: middle; + width: 0; + } + .navbar-list-item-dropdown-toggle[aria-expanded="true"] { + color: var(--color-ember-orange); + } + .navbar-list-item-dropdown-toggle[aria-expanded="true"]:after { + border-top-color: var(--color-ember-orange); + } -ul[role="menubar"][aria-expanded="true"] li{ - background: blue; -} -@media (min-width: 992px) { - nav.es-navbar { - display: flex; - flex-direction: row; - } - .navbar-brand { + .navbar-dropdown-list { + background: #FFFFFF; + box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2); padding: 0; - order: 1; } - .navbar-nav { - order: 2; - margin: 0 2rem; - padding: 0; - display: flex; - align-items: center; + + li.separator { + margin: 0; + /* TODO fix this */ + border-bottom: 1px solid black; } - .navbar-toggler { - order: 3; + + .navbar-dropdown-list-item { + background: #FFF; + display: block; + list-style: none; + white-space: nowrap; } - ul[role="menu"] { - display: none; - position: absolute; - padding: 0; - background: #FFFFFF; - box-shadow: 5px 5px 5px 0 rgba(50,50,50,0.2); + + .navbar-dropdown-list-item-link { + color: var(--color-ember-orange); + display: block; + padding: 1rem; + text-decoration: none; + } + + .navbar-dropdown-list-item-link:hover, + .navbar-dropdown-list-item-link:focus { + background: var(--color-ember-orange); + color: var(--color-light); } -} \ No newline at end of file + + + /* TODO This rule doesn't make sense so I'm commenting it out for now +ul[role="menubar"][aria-expanded="true"] li { + background: blue; +} */ + + @media (min-width: 992px) { + nav.es-navbar { + display: flex; + flex-direction: row; + padding: 0; + } + + .navbar-brand { + padding: 0; + /* TODO using order is not ideal for accessibility */ + order: 1; + } + + .navbar-list { + /* TODO using order is not ideal for accessibility */ + order: 2; + align-items: center; + display: flex; + margin: 0 1rem; + padding: 0; + } + + .navbar-toggler { + display: none; /* TODO remove this properly or else screen readers will still pick up on it */ + } + + .navbar-dropdown-list { + background: #FFFFFF; + box-shadow: 5px 5px 5px 0 rgba(50, 50, 50, 0.2); + padding: 0; + position: absolute; + z-index: 100; + } + } \ No newline at end of file diff --git a/addon/styles/components/es-page-header.css b/addon/styles/components/es-page-header.css index 894272b8..20a5dec7 100644 --- a/addon/styles/components/es-page-header.css +++ b/addon/styles/components/es-page-header.css @@ -1,5 +1,5 @@ .es-page-header { - padding-top: 4.5rem; + padding-top: 1.5rem; padding-bottom: 4.5rem; background-image: url('/images/pattern-1.svg'); background-repeat: no-repeat; diff --git a/addon/styles/global.css b/addon/styles/global.css index 69d7636d..9b426640 100644 --- a/addon/styles/global.css +++ b/addon/styles/global.css @@ -17,27 +17,29 @@ --text-preset-5: 8rem; --font-weight-1: 300; --font-weight-2: 400; - --font-weight-3: 600; + --font-weight-3: 600; --spacing-1: 2rem; --spacing-2: 4rem; --spacing-3: 8rem; --spacing-4: 16rem; --spacing-5: 24rem; } +*, *:after { + box-sizing: border-box; +} body, html { margin: 0; padding: 0; font-family: "Source Sans Pro", sans-serif; - font-size: 2rem; + font-size: 18px; + line-height: 1.5; } - p { - font-size: var(--text-preset-2); - line-height: 1.6; - margin: 0 0 1rem 0; + font-size: 1.2rem; font-weight: 300; + margin: 0.25em 0.5em; } h1, @@ -50,17 +52,23 @@ h6 { margin: 0 0 2rem 0; } +h1, h2 { + min-width: 100%; + line-height: 1; +} + @media (max-width: 1280px) and (min-width: 421px) { + /* TODO this media query is incorrect - CSS should be mobile-first */ body, html { - + } } @media (max-width: 520px) { body, html { - + } } @@ -76,4 +84,27 @@ h6 { padding-top: 8rem; padding-bottom: 8rem; border: 1px solid #CCC; -} \ No newline at end of file +} + +/* the weird shit for the backgrounds */ +.section-bg-wrapper { + height: 725px; + margin-bottom: -690px; + position: relative; + width: 100%; +} +.section-bg { + background-image: linear-gradient(#e04e39, #e04e39); + border-top-left-radius: 7px; + bottom: 0; + height: 100%; + position: absolute; + right: 0; + top: 0; + transform-origin: bottom right; + transform: skewY(-15deg); + width: 30%; + z-index:-1; +} + +/* TODO this grid generator tool is really useful: https://cssgrid-generator.netlify.com/ */ diff --git a/addon/styles/helpers.css b/addon/styles/helpers.css index 4236d3dc..1fac0d20 100644 --- a/addon/styles/helpers.css +++ b/addon/styles/helpers.css @@ -321,3 +321,56 @@ .padding-right-xlarge { padding-right: var(--spacing-5); } + +.margin-bottom-small, .margin-bottom-2rem { + margin-bottom: 2rem; +} + +.margin-bottom-small, .margin-bottom-narrow { + margin-bottom: 2rem; +} + +.margin-bottom-wide { + @media screen and (min-width:992px) { + margin-bottom: 5vh; + } +} +.margin-top-wide { + @media screen and (min-width:992px) { + margin-top: 5vh; + } +} +.margin-top-bottom-wide { + @media screen and (min-width:992px) { + margin-top: 5vh; + margin-bottom: 5vh; + } +} + + +.margin-left-small, .margin-left-narrow { + margin-left: 2rem; +} + + +/* if we name the modifiers the same as a word or google doc would use for page layout, it's more intuitive */ +/* TODO we can adjust these, I'm more putting these here because I need them in general */ +.padding-sides-normal { + padding-left: 0.5em; + padding-right: 0.5em; +} +.padding-sides-narrow { + padding-left: 0.25em; + padding-right: 0.25em; +} +.padding-sides-wide { + /* TODO ADD MEDIA QUERIES */ + padding-left: 15%; + padding-right: 15%; +} + +.padding-right-half { + @media screen and (min-width: 992px) { + padding-right: 50%; + } +} diff --git a/addon/styles/layout.css b/addon/styles/layout.css index 5b5b6715..46234cd2 100644 --- a/addon/styles/layout.css +++ b/addon/styles/layout.css @@ -1,15 +1,13 @@ .container { - padding: var(--spacing-4) 0; + padding: var(--spacing-3) 0; margin: 0 auto; width: var(--max-width); } .row { display: flex; - margin-left: -2rem; - margin-right: -2rem; - flex-wrap: wrap; - margin-bottom: 4rem; + flex-flow: row wrap; + margin-bottom: 2rem; } .row >.col { @@ -30,12 +28,25 @@ width: 50%; margin: 0 2rem; } - +.half { + width: 50%; +} +.center-block { + margin: 0 auto; +} .col-one-third { width: 30.3%; margin: 0 2rem; } - +.one-third { + width: 33.3333%; +} +.two-thirds { + width: 66.6666%; +} +.three-fourths { + width: 75%; +} @media (max-width: 576px) { .row { flex-direction: column; @@ -45,3 +56,13 @@ } } +section { + display: flex; + flex-flow: row wrap; + @media screen and (min-width: 992px) { + padding-top: 4em; + } + & .full { + min-width: 100%; + } +} diff --git a/addon/styles/typography.css b/addon/styles/typography.css index ba92c21a..f8775e45 100644 --- a/addon/styles/typography.css +++ b/addon/styles/typography.css @@ -51,14 +51,10 @@ font-style: italic; } -.xsmall, small { +.xsmall, small, .small { font-size: var(--text-preset-1); } -.small, p { - font-size: var(--text-preset-2); -} - .medium, h3 { font-size: var(--text-preset-3); } @@ -69,6 +65,7 @@ .xlarge, h1 { font-size: var(--text-preset-5); + line-height: 1; } .light { @@ -98,3 +95,10 @@ .text-light { color: var(--color-light); } + +.text-intro { + font-size: 1.5em; + font-weight: 300; + line-height: 1.4; + margin-bottom: 6vh; +} diff --git a/addon/templates/components/es-button.hbs b/addon/templates/components/es-button.hbs index 57e7d515..8c254f77 100644 --- a/addon/templates/components/es-button.hbs +++ b/addon/templates/components/es-button.hbs @@ -1,5 +1,5 @@ -