From 668ab2980d4ed4c3545574bd557429ed7e331da5 Mon Sep 17 00:00:00 2001 From: Melanie Sumner Date: Mon, 1 Jul 2019 13:23:46 -0500 Subject: [PATCH 01/24] worked on the navbar to resolve some a11y issues --- addon/components/es-header/es-brand.js | 6 + addon/components/es-header/es-search.js | 6 + addon/components/es-navbar.js | 2 +- addon/components/es-navbar/link/component.js | 14 +-- addon/components/es-navbar/link/template.hbs | 21 ++-- addon/components/es-search.js | 8 -- addon/styles/components/es-navbar.css | 105 +++++++++++------- .../components/es-header/es-brand.hbs | 6 + .../components/es-header/es-search.hbs | 13 +++ addon/templates/components/es-navbar.hbs | 45 +------- addon/templates/components/es-search.hbs | 1 - app/components/es-header/es-brand.js | 1 + app/components/es-header/es-search.js | 1 + app/components/es-search.js | 1 - docs/concepts/accessibility.md | 5 +- jsconfig.json | 1 + .../es-brand-test.js} | 17 ++- .../components/es-header/es-search-test.js | 26 +++++ 18 files changed, 154 insertions(+), 125 deletions(-) create mode 100644 addon/components/es-header/es-brand.js create mode 100644 addon/components/es-header/es-search.js delete mode 100644 addon/components/es-search.js create mode 100644 addon/templates/components/es-header/es-brand.hbs create mode 100644 addon/templates/components/es-header/es-search.hbs delete mode 100644 addon/templates/components/es-search.hbs create mode 100644 app/components/es-header/es-brand.js create mode 100644 app/components/es-header/es-search.js delete mode 100644 app/components/es-search.js create mode 100644 jsconfig.json rename tests/integration/components/{es-search-test.js => es-header/es-brand-test.js} (52%) create mode 100644 tests/integration/components/es-header/es-search-test.js 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..a2ffbe51 100644 --- a/addon/components/es-navbar.js +++ b/addon/components/es-navbar.js @@ -20,7 +20,7 @@ export default class EsNavbar extends Component { } toggleMenu() { - let menu = this.element.querySelector('ul[role="menubar"]'); + let menu = this.element.querySelector('.navbar-list'); 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..e4909b8e 100644 --- a/addon/components/es-navbar/link/component.js +++ b/addon/components/es-navbar/link/component.js @@ -8,11 +8,7 @@ import { 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'), @@ -34,7 +30,7 @@ export default Component.extend({ navbar: service(), didInsertElement() { - this.element.tabIndex = -1; + // this.element.tabIndex = -1; this.get('navbar').register(this); this.domNode = this.element.querySelector('ul[role="menu"]'); @@ -51,8 +47,8 @@ export default Component.extend({ 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')); + let subItems = Array.from(this.element.querySelectorAll('.navbar-dropdown-list-item')); + let focused = subItems.find(item => document.activeElement === item.querySelector('button')); // debugger if(!focused) { @@ -103,7 +99,7 @@ export default Component.extend({ }).volatile(), setFocusToFirstItem() { - let element = this.element.querySelector('ul[role="menu"] li a') + let element = this.element.querySelector('.navbar-dropdown-list-item-link') if (element) { element.focus(); } diff --git a/addon/components/es-navbar/link/template.hbs b/addon/components/es-navbar/link/template.hbs index fb7f6f1e..46cfc2d4 100644 --- a/addon/components/es-navbar/link/template.hbs +++ b/addon/components/es-navbar/link/template.hbs @@ -1,30 +1,25 @@ {{#if (eq link.type "link")}} {{/if}} {{#if (eq link.type "dropdown")}} - - {{/if}} diff --git a/docs/components/button.md b/docs/components/button.md index 2827392a..5ba11455 100644 --- a/docs/components/button.md +++ b/docs/components/button.md @@ -73,7 +73,7 @@ Since we're using the native HTML button element and requiring a label value to If you are going to put an icon in the button, then you will need to set an aria-label property on the button: ```handlebars -{{#es-button ariaLabel="Hamster Secrets" title="Hamster Secrets"}} +{{#es-button ariaLabel="Hamster Secrets" title="Hamster Secrets" isIcon=true}} 🐹 {{/es-button}} ``` diff --git a/docs/concepts/colours.md b/docs/concepts/colors.md similarity index 85% rename from docs/concepts/colours.md rename to docs/concepts/colors.md index c653889b..a9ddcdcd 100644 --- a/docs/concepts/colours.md +++ b/docs/concepts/colors.md @@ -1,11 +1,11 @@ -# Colours +# Colors ### Here we talk about the color scheme -## Primary Colours -The primary palette is applied across every page of the website and contains the brand, accent and neutral colours. The purpose of the primary palette is to keep uniformity across all pages while encouraging accessibility best practices. +## Primary Colors +The primary palette is applied across every page of the website and contains the brand, accent and neutral colors. The purpose of the primary palette is to keep uniformity across all pages while encouraging accessibility best practices. -The following swatches contain a sample of each of the primary palette colours, along with recommendations for its usage and the acceptable contrast guidelines when coupled with text. +The following swatches contain a sample of each of the primary palette colors, along with recommendations for its usage and the acceptable contrast guidelines when coupled with text.
@@ -26,7 +26,7 @@ The following swatches contain a sample of each of the primary palette colours, -## Secondary Colours +## Secondary colors The secondary palette is applied to UI elements and it's not part of the base colors. The purpose of the secondary palette is to ensure the readability, usability, and accessibility of all UI elements and enhance the communication of actions, changes in state, or errors.
diff --git a/package-lock.json b/package-lock.json index 8ffca4bc..103cbb81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -831,9 +831,9 @@ } }, "semver": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.1.2.tgz", - "integrity": "sha512-z4PqiCpomGtWj8633oeAdXm1Kn1W++3T8epkZYnwiVgIYIJ0QHszhInYSJTYxebByQH7KVCEAn8R9duzZW2PhQ==" + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.2.0.tgz", + "integrity": "sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==" } } }, @@ -6697,12 +6697,12 @@ } }, "ember-cli-typescript": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/ember-cli-typescript/-/ember-cli-typescript-2.0.1.tgz", - "integrity": "sha512-xwSEQOUNM621Wt+XJWpbLhBIeqC/dM1lDS+oZQ2nSjxp4MLZkpKuiVBqdbBWcURbvv8ghoVQPfy8wYU4JIFkLA==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/ember-cli-typescript/-/ember-cli-typescript-2.0.2.tgz", + "integrity": "sha512-7I5azCTxOgRDN8aSSnJZIKSqr+MGnT+jLTUbBYqF8wu6ojs2DUnTePxUcQMcvNh3Q3B1ySv7Q/uZFSjdU9gSjA==", "requires": { "@babel/plugin-proposal-class-properties": "^7.1.0", - "@babel/plugin-transform-typescript": "^7.1.0", + "@babel/plugin-transform-typescript": "~7.4.0", "ansi-to-html": "^0.6.6", "debug": "^4.0.0", "ember-cli-babel-plugin-helpers": "^1.0.0", @@ -6726,14 +6726,14 @@ } }, "semver": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.1.2.tgz", - "integrity": "sha512-z4PqiCpomGtWj8633oeAdXm1Kn1W++3T8epkZYnwiVgIYIJ0QHszhInYSJTYxebByQH7KVCEAn8R9duzZW2PhQ==" + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.2.0.tgz", + "integrity": "sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==" }, "walk-sync": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-1.1.3.tgz", - "integrity": "sha512-23ivbET0Q/389y3EHpiIgxx881AS2mwdXA7iBqUDNSymoTPYb2jWlF3gkuuAP1iLgdNXmiHw/kZ/wZwrELU6Ag==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-1.1.4.tgz", + "integrity": "sha512-nowc9thB/Jg0KW4TgxoRjLLYRPvl3DB/98S89r4ZcJqq2B0alNcKDh6pzLkBSkPMzRSMsJghJHQi79qw0YWEkA==", "requires": { "@types/minimatch": "^3.0.3", "ensure-posix-path": "^1.1.0", @@ -16204,7 +16204,7 @@ } }, "sparkles-component": { - "version": "github:rwjblue/sparkles-component#56be780f7931166364b2da74eae7bcb2a143e6d9", + "version": "github:rwjblue/sparkles-component#0fa522041f7624d936933606f322e504e3e23251", "from": "github:rwjblue/sparkles-component", "requires": { "@ember-decorators/utils": "^5.1.3", diff --git a/package.json b/package.json index fc09525a..a0f11dda 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "normalize.css": "^8.0.1", "postcss-import": "^12.0.1", "postcss-preset-env": "^6.6.0", + "rsvp": "^4.8.5", "sparkles-component": "github:rwjblue/sparkles-component" }, "devDependencies": { From abb938e8335d9b92c51e396c0fffcbde7d9051b2 Mon Sep 17 00:00:00 2001 From: Melanie Sumner Date: Sat, 6 Jul 2019 16:06:58 -0500 Subject: [PATCH 20/24] more style updates --- addon/styles/components/es-button.css | 35 ++++++++++++++++++++-- addon/styles/components/es-page-header.css | 2 +- addon/styles/global.css | 7 ++++- addon/styles/helpers.css | 4 +++ addon/styles/layout.css | 16 ++++++++-- addon/styles/typography.css | 7 ++++- 6 files changed, 63 insertions(+), 8 deletions(-) diff --git a/addon/styles/components/es-button.css b/addon/styles/components/es-button.css index 683e9124..0628fe11 100644 --- a/addon/styles/components/es-button.css +++ b/addon/styles/components/es-button.css @@ -1,18 +1,47 @@ .es-button { background-color: var(--color-orange); + border-radius: 4px; color: var(--color-light); - font-size: var(--text-preset-2); + 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; - padding-bottom: 0.5rem; - border-radius: 4px; + 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; } + .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; + } + +} 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 48beed1f..d54759bd 100644 --- a/addon/styles/global.css +++ b/addon/styles/global.css @@ -51,7 +51,12 @@ h6 { margin: 0 0 2rem 0; } -@media (max-width: 1280px) and (min-width: 421px) { +h1, h2 { + min-width: 100%; +} + +@media (max-width: 1280px) and (min-width: 421px) { + /* TODO this media query is incorrect - CSS should be mobile-first */ body, html { diff --git a/addon/styles/helpers.css b/addon/styles/helpers.css index 4236d3dc..b890dd39 100644 --- a/addon/styles/helpers.css +++ b/addon/styles/helpers.css @@ -321,3 +321,7 @@ .padding-right-xlarge { padding-right: var(--spacing-5); } + +.margin-bottom-small, .margin-bottom-2rem { + margin-bottom: 2rem; +} diff --git a/addon/styles/layout.css b/addon/styles/layout.css index 5b5b6715..e1fd4add 100644 --- a/addon/styles/layout.css +++ b/addon/styles/layout.css @@ -1,5 +1,5 @@ .container { - padding: var(--spacing-4) 0; + padding: var(--spacing-3) 0; margin: 0 auto; width: var(--max-width); } @@ -30,7 +30,12 @@ width: 50%; margin: 0 2rem; } - +.half { + width: 50%; +} +.center-block { + margin: 0 auto; +} .col-one-third { width: 30.3%; margin: 0 2rem; @@ -45,3 +50,10 @@ } } +section { + display: flex; + flex-flow: row wrap; + & .full { + min-width: 100%; + } +} diff --git a/addon/styles/typography.css b/addon/styles/typography.css index c57ccf2d..a3e546e9 100644 --- a/addon/styles/typography.css +++ b/addon/styles/typography.css @@ -55,7 +55,7 @@ font-size: var(--text-preset-1); } -.small, p { +.small, p { /* TODO this isn't going to work for A11y */ font-size: var(--text-preset-2); } @@ -99,3 +99,8 @@ .text-light { color: var(--color-light); } + +.text-intro { + font-size: 1.5em; + margin-bottom: 6vh; +} From 9894fad8648d878872dcd75f409d6f41e872fb33 Mon Sep 17 00:00:00 2001 From: Melanie Sumner Date: Sat, 6 Jul 2019 16:47:29 -0500 Subject: [PATCH 21/24] updated some typography and added more styles --- addon/styles/addon.css | 2 ++ addon/styles/components/es-list.css | 18 ++++++++++++++++++ addon/styles/global.css | 8 ++++++-- addon/styles/helpers.css | 24 ++++++++++++++++++++++++ addon/styles/layout.css | 13 ++++++++----- addon/styles/typography.css | 6 +----- 6 files changed, 59 insertions(+), 12 deletions(-) create mode 100644 addon/styles/components/es-list.css diff --git a/addon/styles/addon.css b/addon/styles/addon.css index aee1f5bc..9c64f4f2 100644 --- a/addon/styles/addon.css +++ b/addon/styles/addon.css @@ -10,6 +10,8 @@ @import "components/es-card.css"; @import "components/es-footer.css"; @import "components/es-header.css"; +@import "components/es-list.css"; @import "components/es-navbar.css"; @import "components/es-page-header.css"; @import "components/es-tabs.css"; + diff --git a/addon/styles/components/es-list.css b/addon/styles/components/es-list.css new file mode 100644 index 00000000..7cfd7595 --- /dev/null +++ b/addon/styles/components/es-list.css @@ -0,0 +1,18 @@ +.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; + } + } +} */ \ No newline at end of file diff --git a/addon/styles/global.css b/addon/styles/global.css index d54759bd..7dfcaa95 100644 --- a/addon/styles/global.css +++ b/addon/styles/global.css @@ -24,12 +24,15 @@ --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: 18px; + font-size: 18px; line-height: 1.5; } @@ -53,9 +56,10 @@ h6 { h1, h2 { min-width: 100%; + line-height: 1; } -@media (max-width: 1280px) and (min-width: 421px) { +@media (max-width: 1280px) and (min-width: 421px) { /* TODO this media query is incorrect - CSS should be mobile-first */ body, html { diff --git a/addon/styles/helpers.css b/addon/styles/helpers.css index b890dd39..e9907048 100644 --- a/addon/styles/helpers.css +++ b/addon/styles/helpers.css @@ -325,3 +325,27 @@ .margin-bottom-small, .margin-bottom-2rem { margin-bottom: 2rem; } + +.margin-bottom-small, .margin-bottom-narrow { + margin-bottom: 2rem; +} + +.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 { + padding-left: 1em; + padding-right: 1em; +} diff --git a/addon/styles/layout.css b/addon/styles/layout.css index e1fd4add..9f3642b4 100644 --- a/addon/styles/layout.css +++ b/addon/styles/layout.css @@ -6,10 +6,8 @@ .row { display: flex; - margin-left: -2rem; - margin-right: -2rem; - flex-wrap: wrap; - margin-bottom: 4rem; + flex-flow: row wrap; + margin-bottom: 2rem; } .row >.col { @@ -40,7 +38,9 @@ width: 30.3%; margin: 0 2rem; } - +.one-third { + width: 33.3333%; +} @media (max-width: 576px) { .row { flex-direction: column; @@ -53,6 +53,9 @@ 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 a3e546e9..a4c955d3 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 { /* TODO this isn't going to work for A11y */ - font-size: var(--text-preset-2); -} - .medium, h3 { font-size: var(--text-preset-3); } From 5adca2461a6de8563e9944b6b4473cb4efa0097a Mon Sep 17 00:00:00 2001 From: Melanie Sumner Date: Sat, 6 Jul 2019 18:03:00 -0500 Subject: [PATCH 22/24] added section background shape --- addon/styles/global.css | 29 ++++++++++++++++++++++++----- addon/styles/helpers.css | 9 +++++++-- addon/styles/layout.css | 6 ++++++ 3 files changed, 37 insertions(+), 7 deletions(-) diff --git a/addon/styles/global.css b/addon/styles/global.css index 7dfcaa95..431aaef4 100644 --- a/addon/styles/global.css +++ b/addon/styles/global.css @@ -36,12 +36,10 @@ body, html { line-height: 1.5; } - p { - font-size: var(--text-preset-2); - line-height: 1.6; - margin: 0 0 1rem 0; - font-weight: 300; + font-size: 1em; + font-weight: normal; + margin: 0.25em 0.5em; } h1, @@ -89,3 +87,24 @@ h1, h2 { padding-bottom: 8rem; border: 1px solid #CCC; } + +/* the weird shit for the backgrounds */ +.section-bg-wrapper { + position: relative; + height: 750px; + width: 100%; + margin-bottom: -650px; +} +.section-bg { + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 30%; + height: 100%; + background-image: linear-gradient(#e04e39, #e04e39); + transform: skewY(-15deg); + transform-origin: bottom right; + z-index:-1; + border-top-left-radius: 7px; +} diff --git a/addon/styles/helpers.css b/addon/styles/helpers.css index e9907048..854d3d6e 100644 --- a/addon/styles/helpers.css +++ b/addon/styles/helpers.css @@ -330,6 +330,10 @@ margin-bottom: 2rem; } +.margin-bottom-wide { + margin-bottom: 5vh; +} + .margin-left-small, .margin-left-narrow { margin-left: 2rem; } @@ -346,6 +350,7 @@ padding-right: 0.25em; } .padding-sides-wide { - padding-left: 1em; - padding-right: 1em; + /* TODO ADD MEDIA QUERIES */ + padding-left: 15%; + padding-right: 15%; } diff --git a/addon/styles/layout.css b/addon/styles/layout.css index 9f3642b4..46234cd2 100644 --- a/addon/styles/layout.css +++ b/addon/styles/layout.css @@ -41,6 +41,12 @@ .one-third { width: 33.3333%; } +.two-thirds { + width: 66.6666%; +} +.three-fourths { + width: 75%; +} @media (max-width: 576px) { .row { flex-direction: column; From 02b793ab65de2d67e9e26402db283a9faae8ea9a Mon Sep 17 00:00:00 2001 From: Melanie Sumner Date: Sat, 6 Jul 2019 18:17:53 -0500 Subject: [PATCH 23/24] updated the background shape --- addon/styles/global.css | 17 +++++++++-------- addon/styles/typography.css | 2 ++ 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/addon/styles/global.css b/addon/styles/global.css index 431aaef4..91d601c9 100644 --- a/addon/styles/global.css +++ b/addon/styles/global.css @@ -90,21 +90,22 @@ h1, h2 { /* the weird shit for the backgrounds */ .section-bg-wrapper { + height: 725px; + margin-bottom: -690px; position: relative; - height: 750px; width: 100%; - margin-bottom: -650px; } .section-bg { - position: absolute; - top: 0; + background-image: linear-gradient(#e04e39, #e04e39); + border-top-left-radius: 7px; bottom: 0; - right: 0; - width: 30%; height: 100%; - background-image: linear-gradient(#e04e39, #e04e39); - transform: skewY(-15deg); + position: absolute; + right: 0; + top: 0; transform-origin: bottom right; + transform: skewY(-15deg); + width: 30%; z-index:-1; border-top-left-radius: 7px; } diff --git a/addon/styles/typography.css b/addon/styles/typography.css index a4c955d3..f8775e45 100644 --- a/addon/styles/typography.css +++ b/addon/styles/typography.css @@ -98,5 +98,7 @@ .text-intro { font-size: 1.5em; + font-weight: 300; + line-height: 1.4; margin-bottom: 6vh; } From 7073fdb5a56f8210348ba10890f8bb158d96a4ef Mon Sep 17 00:00:00 2001 From: Melanie Sumner Date: Sun, 7 Jul 2019 15:49:06 -0500 Subject: [PATCH 24/24] added es-media element, TODOs and some grid css --- addon/styles/addon.css | 1 + addon/styles/components/es-button.css | 3 +++ addon/styles/components/es-list.css | 21 ++++++++++++++++++++- addon/styles/components/es-media.css | 8 ++++++++ addon/styles/global.css | 7 ++++--- addon/styles/helpers.css | 22 +++++++++++++++++++++- 6 files changed, 57 insertions(+), 5 deletions(-) create mode 100644 addon/styles/components/es-media.css diff --git a/addon/styles/addon.css b/addon/styles/addon.css index 9c64f4f2..190bcd71 100644 --- a/addon/styles/addon.css +++ b/addon/styles/addon.css @@ -11,6 +11,7 @@ @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-tabs.css"; diff --git a/addon/styles/components/es-button.css b/addon/styles/components/es-button.css index 0628fe11..cd5d2c1c 100644 --- a/addon/styles/components/es-button.css +++ b/addon/styles/components/es-button.css @@ -45,3 +45,6 @@ } } + +/* TODO add hover state */ +/* TODO add focus state */ diff --git a/addon/styles/components/es-list.css b/addon/styles/components/es-list.css index 7cfd7595..8218051f 100644 --- a/addon/styles/components/es-list.css +++ b/addon/styles/components/es-list.css @@ -15,4 +15,23 @@ height: auto; } } -} */ \ No newline at end of file +} */ + + + +.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/global.css b/addon/styles/global.css index 91d601c9..59af14e7 100644 --- a/addon/styles/global.css +++ b/addon/styles/global.css @@ -37,8 +37,8 @@ body, html { } p { - font-size: 1em; - font-weight: normal; + font-size: 1.2rem; + font-weight: 300; margin: 0.25em 0.5em; } @@ -107,5 +107,6 @@ h1, h2 { transform: skewY(-15deg); width: 30%; z-index:-1; - border-top-left-radius: 7px; } + +/* 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 854d3d6e..1fac0d20 100644 --- a/addon/styles/helpers.css +++ b/addon/styles/helpers.css @@ -331,8 +331,22 @@ } .margin-bottom-wide { - margin-bottom: 5vh; + @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; @@ -354,3 +368,9 @@ padding-left: 15%; padding-right: 15%; } + +.padding-right-half { + @media screen and (min-width: 992px) { + padding-right: 50%; + } +}