From dc7e82db5d2d75a42f9946c80ffd99526b83f4da Mon Sep 17 00:00:00 2001 From: Maggie Bignell Date: Tue, 11 Sep 2018 15:34:29 -0700 Subject: [PATCH 01/13] initial... --- _data/navs/atoms.yml | 2 +- _data/navs/components.yml | 8 ++ _data/navs/examples.yml | 15 ++++ _data/navs/modules.yml | 5 -- _layouts/example.html | 12 +++ _sass/leap/_leap.sass | 1 + _sass/leap/_variables.scss | 13 +-- _sass/leap/atoms/_all.sass | 1 + _sass/leap/atoms/_box-shadow.sass | 2 + _sass/leap/atoms/_button.sass | 21 +++++ _sass/leap/components/_alerts.sass | 38 ++++++++ _sass/leap/components/_all.sass | 3 + _sass/leap/components/_boxes.sass | 0 _sass/leap/components/_search-bar.sass | 0 _sass/leap/components/_topic-filter.sass | 0 _sass/leap/mixins/_all.sass | 2 + _sass/leap/mixins/_animations.sass | 105 +++++++++++++++++++++++ _sass/leap/mixins/_transform.sass | 5 ++ components/nav-bar.html | 0 components/search-bar.html | 0 examples/library.html | 62 +++++++++++++ examples/support.html | 74 ++++++++++++++++ 22 files changed, 357 insertions(+), 12 deletions(-) create mode 100644 _data/navs/components.yml create mode 100644 _data/navs/examples.yml delete mode 100644 _data/navs/modules.yml create mode 100644 _layouts/example.html create mode 100644 _sass/leap/atoms/_box-shadow.sass create mode 100644 _sass/leap/components/_alerts.sass create mode 100644 _sass/leap/components/_all.sass create mode 100644 _sass/leap/components/_boxes.sass create mode 100644 _sass/leap/components/_search-bar.sass create mode 100644 _sass/leap/components/_topic-filter.sass create mode 100644 _sass/leap/mixins/_animations.sass create mode 100644 _sass/leap/mixins/_transform.sass create mode 100644 components/nav-bar.html create mode 100644 components/search-bar.html create mode 100644 examples/library.html create mode 100644 examples/support.html diff --git a/_data/navs/atoms.yml b/_data/navs/atoms.yml index e6d17b3..a6f5564 100644 --- a/_data/navs/atoms.yml +++ b/_data/navs/atoms.yml @@ -1,5 +1,5 @@ filename: atoms -name: Atoms +name: Utilities pages: - slug: /typography.html name: Typography diff --git a/_data/navs/components.yml b/_data/navs/components.yml new file mode 100644 index 0000000..556287f --- /dev/null +++ b/_data/navs/components.yml @@ -0,0 +1,8 @@ +filename: components +name: Components +pages: + - slug: /# + name: Coming Soon + + - slug: /cards.html + name: Cards diff --git a/_data/navs/examples.yml b/_data/navs/examples.yml new file mode 100644 index 0000000..df75099 --- /dev/null +++ b/_data/navs/examples.yml @@ -0,0 +1,15 @@ +filename: examples +name: Examples +pages: + + - slug: /examples/library.html + name: Library + + - slug: /examples/syllabus.html + name: Course Syllabus + + - slug: /examples/community.html + name: Community + + - slug: /examples/support.html + name: Support diff --git a/_data/navs/modules.yml b/_data/navs/modules.yml deleted file mode 100644 index 6f6a32a..0000000 --- a/_data/navs/modules.yml +++ /dev/null @@ -1,5 +0,0 @@ -filename: modules -name: Modules -pages: - - slug: /# - name: Coming Soon diff --git a/_layouts/example.html b/_layouts/example.html new file mode 100644 index 0000000..d106ef2 --- /dev/null +++ b/_layouts/example.html @@ -0,0 +1,12 @@ + + + + {% include head.html %} + + + + {{ content }} + + + + diff --git a/_sass/leap/_leap.sass b/_sass/leap/_leap.sass index 463410d..823afeb 100644 --- a/_sass/leap/_leap.sass +++ b/_sass/leap/_leap.sass @@ -7,3 +7,4 @@ @import reset @import global @import atoms/all +@import components/all diff --git a/_sass/leap/_variables.scss b/_sass/leap/_variables.scss index 8885ed0..f58b297 100644 --- a/_sass/leap/_variables.scss +++ b/_sass/leap/_variables.scss @@ -35,14 +35,15 @@ $ui-colors: ( "blue": #3f8abf, "green": #36b55c, "yellow": #ffd466, + "wtf": #ffd466, "orange": #ff9f1f, "red": #ed5a5a, - "error": #be4a4a, - "warning": #bf570f, - "success": #24793d + "error": #be4a4a, + "warning": #bf570f, + "success": #24793d ); -// Category colors +// Category colors $category-colors: ( "back-end": ( light: lighten(#008297,5%), @@ -124,8 +125,8 @@ $spacing-sides: ( // Type Variables $text-size: ( - 0: 3rem, - 1: 2.25rem, + 0: 2.5rem, + 1: 2rem, 2: 1.75rem, 3: 1.25rem, 4: 1.125rem, diff --git a/_sass/leap/atoms/_all.sass b/_sass/leap/atoms/_all.sass index 3e91cd4..5c846fa 100644 --- a/_sass/leap/atoms/_all.sass +++ b/_sass/leap/atoms/_all.sass @@ -17,3 +17,4 @@ @import table @import rotation @import flexbox +@import box-shadow diff --git a/_sass/leap/atoms/_box-shadow.sass b/_sass/leap/atoms/_box-shadow.sass new file mode 100644 index 0000000..cac8e2f --- /dev/null +++ b/_sass/leap/atoms/_box-shadow.sass @@ -0,0 +1,2 @@ +.box-shadow + box-shadow: 0 2px 0 rgba(#000,.06) diff --git a/_sass/leap/atoms/_button.sass b/_sass/leap/atoms/_button.sass index 95ea8da..71c6e21 100644 --- a/_sass/leap/atoms/_button.sass +++ b/_sass/leap/atoms/_button.sass @@ -152,6 +152,27 @@ line-height: 43px !important + // When you want to use button HTML syntax without border formatting + &--icon-only + background: none + border: none + color: grey + fill: grey + padding: 5px + width: 22px + transition: background 0.2s + &:hover + fill: black + + &--gray + background: gray-color(gray-dark) + border: gray-color(gray-dark) + color: #e9ecec + &:hover + background: gray-color(gray-darker) + border: gray-color(gray-darker) + color: white + // Button size style maps $button-sizes: (xlarge: (font-size: 18px, height: 58px, padding: 28px), large: (font-size: 16px, height: 50px, padding: 22px), normal: (font-size: 16px, height: 40px, padding: 15px), small: (font-size: 12px, height: 34px, padding: 12px), xsmall: (font-size: 12px, height: 30px, padding: 10px)) diff --git a/_sass/leap/components/_alerts.sass b/_sass/leap/components/_alerts.sass new file mode 100644 index 0000000..f8ce052 --- /dev/null +++ b/_sass/leap/components/_alerts.sass @@ -0,0 +1,38 @@ +// Base structures for all alerts, info alert default +.alert-banner + background: gray-color(gray) + border: 2px solid darken(gray-color(gray), 15%) + border-left-width: 10px + border-radius: $border-radius + padding: 10px 1rem + margin: 15px 0 + p + color: text-color(dark) + +.alert-banner--with-icon + p svg + position: absolute + top: 50% + fill: red + transform: translatey(-50%) + left: 15px + width: 20px + +// Alert color variations +.alert-banner--success + background: lighten(brand-color(green),25%) + border-color: brand-color(green) + p svg + fill: green + +.alert-banner--warning + background: lighten(ui-color(wtf),20%) + border-color: ui-color(wtf) + p svg + fill: yellow + +.alert-banner--error + background: lighten(ui-color(red),30%) + border-color: ui-color(red) + p svg + fill: red diff --git a/_sass/leap/components/_all.sass b/_sass/leap/components/_all.sass new file mode 100644 index 0000000..7daa8c2 --- /dev/null +++ b/_sass/leap/components/_all.sass @@ -0,0 +1,3 @@ +@import alerts +@import search-bar +@import topic-filter diff --git a/_sass/leap/components/_boxes.sass b/_sass/leap/components/_boxes.sass new file mode 100644 index 0000000..e69de29 diff --git a/_sass/leap/components/_search-bar.sass b/_sass/leap/components/_search-bar.sass new file mode 100644 index 0000000..e69de29 diff --git a/_sass/leap/components/_topic-filter.sass b/_sass/leap/components/_topic-filter.sass new file mode 100644 index 0000000..e69de29 diff --git a/_sass/leap/mixins/_all.sass b/_sass/leap/mixins/_all.sass index ac60930..69dff79 100644 --- a/_sass/leap/mixins/_all.sass +++ b/_sass/leap/mixins/_all.sass @@ -4,3 +4,5 @@ @import selected @import placeholder-style @import width-height +@import transform +@import animations diff --git a/_sass/leap/mixins/_animations.sass b/_sass/leap/mixins/_animations.sass new file mode 100644 index 0000000..e684c16 --- /dev/null +++ b/_sass/leap/mixins/_animations.sass @@ -0,0 +1,105 @@ ++keyframes(ring) + 0%, 100% + +transform(rotate(-5deg)) + 50% + +transform(rotate(5deg)) + ++keyframes(spin) + from + +transform-origin(center center) + +transform(rotate(0deg)) + to + +transform-origin(center center) + +transform(rotate(360deg)) + ++keyframes(spinning) + from + +transform(rotate(0deg)) + to + +transform(rotate(1800deg)) + ++keyframes(fanFair) + 0%, 100% + +transform-origin(50% 50% 0 0) + +transform(translateX(0) translateY(0) rotate(0deg)) + 50% + +transform-origin(50% 50% 0 0) + +transform(translateX(0) translateY(10px) rotate(10deg)) + ++keyframes(pulsate-opacity-to-65) + from + opacity: 1 + to + opacity: 0.65 + ++keyframes(shake) + 0%, 100% + +transform(translateX(0) translateY(0)) + 12.5% + +transform(translateX(-12px) translateY(0)) + 37.5% + +transform(translateX(10px) translateY(0)) + 62.5% + +transform(translateX(-7px) translateY(0)) + 87.5% + +transform(translateX(3px) translateY(0)) + ++keyframes(arrowRotateUp) + from + +transform(rotate(0deg)) + to + +transform(rotate(180deg)) + ++keyframes(arrowRotateDown) + from + +transform(rotate(180deg)) + to + +transform(rotate(0deg)) + ++keyframes(sonarPingHome) + 0% + opacity: 0.15 + 40% + opacity: 0.65 + 100% + opacity: 0 + +transform(scale(1.3)) + ++keyframes(sonarPingTracks) + 0% + opacity: 0.15 + 40% + opacity: 0.65 + box-shadow: 0 0 0 2px #fff + 100% + opacity: 0 + box-shadow: 0 0 0 2px #fff + +transform(scale(1.3)) + ++keyframes(fade-in) + from + opacity: 0 + to + opacity: 1 + ++keyframes(fade-out) + from + opacity: 1 + to + opacity: 0 + ++keyframes(panel-fade-up) + 0% + opacity: 0 + 25% + opacity: 0 + +transform(translatey(30px)) + 100% + opacity: 1 + +transform(translatey(0)) + ++keyframes(loading) + 0%, 100% + opacity: 1 + 50% + opacity: 0.25 diff --git a/_sass/leap/mixins/_transform.sass b/_sass/leap/mixins/_transform.sass new file mode 100644 index 0000000..a7778f7 --- /dev/null +++ b/_sass/leap/mixins/_transform.sass @@ -0,0 +1,5 @@ +@mixin transform($transform-value) + -ms-transform: $transform-value + -moz-transform: $transform-value + -webkit-transform: $transform-value + transform: $transform-value diff --git a/components/nav-bar.html b/components/nav-bar.html new file mode 100644 index 0000000..e69de29 diff --git a/components/search-bar.html b/components/search-bar.html new file mode 100644 index 0000000..e69de29 diff --git a/examples/library.html b/examples/library.html new file mode 100644 index 0000000..e6cfb8a --- /dev/null +++ b/examples/library.html @@ -0,0 +1,62 @@ +--- +layout: example +title: Library +--- + +
+ +
+ +
+

This is an Alert with the :info class set

+ +
+ + +
+

This is an Alert with the :success class set

+ +
+ +
+

+ + + + Nice. This is an Alert with the :warning class set

+ +
+ +
+

This is an Alert with the :warning class set

+ +
+
+

This is an Alert with the :warning class set

+ +
diff --git a/examples/support.html b/examples/support.html new file mode 100644 index 0000000..8d0b453 --- /dev/null +++ b/examples/support.html @@ -0,0 +1,74 @@ +--- +layout: example +title: Support +--- + +
+ +
+ +
+
+
+

Hello

+
+
+

+ report a bug +

+

+ hey +

+ +
+
+

+ report a bug +

+

+ hey +

+
+
+
+ +
+
+
+
+

FAQ

+

Treehouse Accounts

+
+
+
+
+
+

+ report a bug +

+

+ hey +

+
+
+
+

+ report a bug +

+

+ hey +

+
+
+
+
From 1445a6f596611b3a147bb0e6591fdd570c2c21c8 Mon Sep 17 00:00:00 2001 From: Maggie Bignell Date: Tue, 11 Sep 2018 21:06:34 -0700 Subject: [PATCH 02/13] Formatted examples, styling --- _includes/component-examples/card.html | 24 +++ _includes/component-examples/header-nav.html | 48 +++++ _sass/leap/_variables.scss | 10 + _sass/leap/atoms/_box-shadow.sass | 2 +- _sass/leap/atoms/_button.sass | 26 ++- _sass/leap/components/_alerts.sass | 14 +- _sass/leap/components/_all.sass | 3 + _sass/leap/components/_boxes.sass | 6 + _sass/leap/components/_course-card.sass | 13 ++ _sass/leap/components/_nav-bar.sass | 19 ++ examples/library.html | 183 +++++++++++++------ examples/support.html | 168 ++++++++++++----- 12 files changed, 399 insertions(+), 117 deletions(-) create mode 100644 _includes/component-examples/card.html create mode 100644 _includes/component-examples/header-nav.html create mode 100644 _sass/leap/components/_course-card.sass create mode 100644 _sass/leap/components/_nav-bar.sass diff --git a/_includes/component-examples/card.html b/_includes/component-examples/card.html new file mode 100644 index 0000000..7d7fcea --- /dev/null +++ b/_includes/component-examples/card.html @@ -0,0 +1,24 @@ +
  • +
    +
    + Icon + Header +
    +
    +

    + Concept +

    +

    + JavaScript Basics +

    +

    + Wow this is the full text of a card it's pretty cool and goes on two whole lines and then stops!! +

    +
    +
    + +
    +
    +
    • diff --git a/_includes/component-examples/header-nav.html b/_includes/component-examples/header-nav.html new file mode 100644 index 0000000..33e3eba --- /dev/null +++ b/_includes/component-examples/header-nav.html @@ -0,0 +1,48 @@ + diff --git a/_sass/leap/_variables.scss b/_sass/leap/_variables.scss index f58b297..4dda5b4 100644 --- a/_sass/leap/_variables.scss +++ b/_sass/leap/_variables.scss @@ -16,6 +16,7 @@ $text-colors: ( "base": #576366, "light": #7b8b8e, "white": #fff, + "light-on-dark": #b2bbbd, "blue-light": #387bab, // AA 4.58 "blue-medium": #2a5d81, "blue-dark": #303853 @@ -26,10 +27,17 @@ $gray-colors: ( "gray-darker": #2d3339, "gray-dark": #3f4850, "gray": #c6ccd2, + "gray-40": #dfe3e4, "gray-light": #edeff0, "gray-lighter": #f9fafa ); +// Icon colors +$icon-colors: ( + "normal": #bfc7ce, + "active": #9099a1 +); + // UI Colors $ui-colors: ( "blue": #3f8abf, @@ -145,6 +153,8 @@ $border-color-normal: #e8ebed; $border-color-light: #f0f2f4; $border-radius: 4px; +$box-shadow: 0 2px 0 rgba(#000,.06); + // Grid max width $grid-width: 1260px; diff --git a/_sass/leap/atoms/_box-shadow.sass b/_sass/leap/atoms/_box-shadow.sass index cac8e2f..1080804 100644 --- a/_sass/leap/atoms/_box-shadow.sass +++ b/_sass/leap/atoms/_box-shadow.sass @@ -1,2 +1,2 @@ .box-shadow - box-shadow: 0 2px 0 rgba(#000,.06) + box-shadow: $box-shadow diff --git a/_sass/leap/atoms/_button.sass b/_sass/leap/atoms/_button.sass index 71c6e21..6d223ef 100644 --- a/_sass/leap/atoms/_button.sass +++ b/_sass/leap/atoms/_button.sass @@ -39,6 +39,8 @@ background-color: brand-color(green) !important border-color: brand-color(green) !important color: #fff !important + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale svg fill: #fff !important +selected @@ -50,6 +52,8 @@ background-color: brand-color(blue-light) !important border-color: brand-color(blue-light) !important color: #fff !important + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale svg fill: #fff !important +selected @@ -105,6 +109,8 @@ border-color: #fff !important color: #fff !important opacity: 0.88 !important + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale svg fill: #fff !important +selected @@ -117,6 +123,8 @@ border-color: #fff !important color: text-color(medium) !important opacity: 0.88 + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale svg fill: text-color(medium) !important +selected @@ -126,6 +134,8 @@ border-color: #fff !important color: #fff !important opacity: 0.15 !important + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale +selected border-color: #fff !important color: #fff !important @@ -136,6 +146,8 @@ border-color: #fff !important color: text-color(medium) !important opacity: 0.15 !important + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale +selected background-color: #fff !important border-color: #fff !important @@ -156,18 +168,20 @@ &--icon-only background: none border: none - color: grey - fill: grey + color: gray-color(gray-dark) + fill: gray-color(gray-dark) padding: 5px - width: 22px - transition: background 0.2s + width: 24px + transition: fill 0.2s &:hover - fill: black + fill: gray-color(gray-darker) &--gray background: gray-color(gray-dark) border: gray-color(gray-dark) color: #e9ecec + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale &:hover background: gray-color(gray-darker) border: gray-color(gray-darker) @@ -239,6 +253,8 @@ background-color: category-color(#{$category}, base) !important border-color: category-color(#{$category}, base) !important color: #fff !important + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale +selected background-color: darken(category-color(#{$category}, base), 10%) !important border-color: darken(category-color(#{$category}, base), 10%) !important diff --git a/_sass/leap/components/_alerts.sass b/_sass/leap/components/_alerts.sass index f8ce052..c4f2934 100644 --- a/_sass/leap/components/_alerts.sass +++ b/_sass/leap/components/_alerts.sass @@ -6,33 +6,35 @@ border-radius: $border-radius padding: 10px 1rem margin: 15px 0 + position: relative p color: text-color(dark) .alert-banner--with-icon + padding-left: calc(1rem + 36px) p svg position: absolute top: 50% - fill: red + fill: text-color(dark) transform: translatey(-50%) left: 15px - width: 20px + width: 24px // Alert color variations .alert-banner--success background: lighten(brand-color(green),25%) border-color: brand-color(green) p svg - fill: green + fill: darken(brand-color(green),20%) .alert-banner--warning background: lighten(ui-color(wtf),20%) border-color: ui-color(wtf) p svg - fill: yellow + fill: darken(ui-color(wtf),30%) .alert-banner--error - background: lighten(ui-color(red),30%) + background: lighten(ui-color(red),28%) border-color: ui-color(red) p svg - fill: red + fill: darken(ui-color(red),15%) diff --git a/_sass/leap/components/_all.sass b/_sass/leap/components/_all.sass index 7daa8c2..3b308d2 100644 --- a/_sass/leap/components/_all.sass +++ b/_sass/leap/components/_all.sass @@ -1,3 +1,6 @@ @import alerts @import search-bar @import topic-filter +@import boxes +@import course-card +@import nav-bar diff --git a/_sass/leap/components/_boxes.sass b/_sass/leap/components/_boxes.sass index e69de29..0d3553f 100644 --- a/_sass/leap/components/_boxes.sass +++ b/_sass/leap/components/_boxes.sass @@ -0,0 +1,6 @@ +.box + background: white + border-radius: $border-radius + box-shadow: $box-shadow + padding: 2rem + margin-bottom: 2rem diff --git a/_sass/leap/components/_course-card.sass b/_sass/leap/components/_course-card.sass new file mode 100644 index 0000000..9e25644 --- /dev/null +++ b/_sass/leap/components/_course-card.sass @@ -0,0 +1,13 @@ +.card + background: white + border-radius: $border-radius + box-shadow: $box-shadow + margin-bottom: 1.5rem + // height: 280px + +.card__description + display: -webkit-box + -webkit-line-clamp: 2 + -webkit-box-orient: vertical + max-height: 40px + overflow: hidden diff --git a/_sass/leap/components/_nav-bar.sass b/_sass/leap/components/_nav-bar.sass new file mode 100644 index 0000000..dc9d121 --- /dev/null +++ b/_sass/leap/components/_nav-bar.sass @@ -0,0 +1,19 @@ +.header-nav + background: gray-color(gray-darker) + z-index: 101 + position: fixed + top: 0 + left: 0 + right: 0 + transition: height 600ms 0s ease + height: 70px + +.header-nav-container + height: 70px + a + color: text-color(light-on-dark) + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale + margin-right: 30px + &:hover, &.active + color: white diff --git a/examples/library.html b/examples/library.html index e6cfb8a..df0272f 100644 --- a/examples/library.html +++ b/examples/library.html @@ -3,60 +3,129 @@ title: Library --- -
    - -
    - -
    -

    This is an Alert with the :info class set

    - -
    - - -
    -

    This is an Alert with the :success class set

    - -
    - -
    -

    - - - - Nice. This is an Alert with the :warning class set

    - -
    - -
    -

    This is an Alert with the :warning class set

    - -
    -
    -

    This is an Alert with the :warning class set

    - -
    +{% include component-examples/header-nav.html %} + +
    +
    +

    This is an Alert with the :info class set

    + +
    + + +
    +

    This is an Alert with the :success class set

    + +
    + +
    +

    + + + + Nice. This is an Alert with the :warning class set

    + +
    + +
    +

    + + + + Nice. This is an Alert with the :warning class set

    + +
    + +
    +

    + + + + Nice. This is an Alert with the :warning class set

    + +
    + +
    +

    + + + + Nice. This is an Alert with the :warning class set

    + +
    + +
    +

    This is an Alert with the :warning class set

    + +
    +
    +

    This is an Alert with the :warning class set

    + +
    + +
    +
    + svg + Search bar +
    +
    + form +
    +
    + form +
    +
    + form +
    +
    + +
    +
      + + {% include component-examples/card.html %} + {% include component-examples/card.html %} + {% include component-examples/card.html %} + {% include component-examples/card.html %} + {% include component-examples/card.html %} {% include component-examples/card.html %} + {% include component-examples/card.html %} + +
    +
    + + +
    diff --git a/examples/support.html b/examples/support.html index 8d0b453..244034a 100644 --- a/examples/support.html +++ b/examples/support.html @@ -3,72 +3,144 @@ title: Support --- -
    - -
    - -
    -
    +
    +
    -

    Hello

    +

    + Customer Support +

    -

    - report a bug +

    + Having issues?

    - hey + Some of the most frequently asked questions from students are + listed below with helpful answers from our Support team. + If you need help with something not answered below, check + out the Community. + It's an active, helpful community of fellow Treehouse students. + You can also visit our Knowledge Base, + which has answers for many common questions about Treehouse. +

    + If you don't find an answer below or on the Treehouse Forum, we'd + love the opportunity to help you. You can get in touch with our + Support team directly by clicking the button below.

    - +
    -

    - report a bug +

    + Report a bug

    - hey + Shoot us an email at help@teamtreehouse.com + with a link and a screenshot. If this bug hasn’t been reported before, + we’ll award you a special Exterminator badge as a thank you! +

    + Response times from our Support team are fastest from 9am-6pm ET, + Monday thru Thursday. Support requests submitted outside those times may + receive delayed responses.

    - -
    -
    -
    -
    -

    FAQ

    -

    Treehouse Accounts

    +
    +
    +
    +

    FAQ

    +

    Treehouse Accounts

    +
    +
    +
    +
    +
    +

    + How do I do things such as upgrade, cancel, pause or update my billing information? +

    +

    + You can find these options on your Enrollment page. If you need more help, + please watch these brief videos which will show you how to upgrade or + change your plan and also how to pause or cancel your enrollment. +

    -
    +
    +

    + Can I gift a subscription to someone? +

    +

    + Yes! We do offer gift certificates. Please email help@teamtreehouse.com for more information. +

    -
    -
    -

    - report a bug -

    -

    - hey -

    -
    +
    +
    +
    +

    + Do you offer a Group Membership at a discounted rate? +

    +

    + We do offer group membership discounts. Please fill out + the form here and someone from our Organizations team + will follow up with you. +

    -
    -

    - report a bug -

    +
    +

    + Do you have a free trial? +

    - hey + We offer everyone a 14 day free trial! You can take advantage of it by visiting our sign-up page!

    -
    -
    -
    +
    + +
    +
    +

    Learning Content

    +
    +
    +
    +
    +
    +

    + How do I do things such as upgrade, cancel, pause or update my billing information? +

    +

    + You can find these options on your Enrollment page. If you need more help, + please watch these brief videos which will show you how to upgrade or + change your plan and also how to pause or cancel your enrollment. +

    +
    +
    +

    + Can I gift a subscription to someone? +

    +

    + Yes! We do offer gift certificates. Please email help@teamtreehouse.com for more information. +

    +
    +
    +
    +
    +

    + Do you offer a Group Membership at a discounted rate? +

    +

    + We do offer group membership discounts. Please fill out + the form here and someone from our Organizations team + will follow up with you. +

    +
    +
    +

    + Do you have a free trial? +

    +

    + We offer everyone a 14 day free trial! You can take advantage of it by visiting our sign-up page! +

    +
    +
    +
    + From 6edba934ecee5235c901cf3581e9f9e068dc75fd Mon Sep 17 00:00:00 2001 From: Maggie Bignell Date: Wed, 12 Sep 2018 18:50:29 -0700 Subject: [PATCH 03/13] card stages, estimates, header formatting --- _data/navs/atoms.yml | 32 +++++----- _includes/component-examples/card.html | 49 +++++++++++++-- _includes/component-examples/header-nav.html | 4 +- _sass/leap/_variables.scss | 10 +++ _sass/leap/atoms/_button.sass | 2 +- _sass/leap/atoms/_flexbox.sass | 3 + _sass/leap/atoms/_grid.sass | 14 +++-- _sass/leap/atoms/_margin.sass | 18 ++++++ _sass/leap/atoms/_padding.sass | 18 ++++++ _sass/leap/atoms/_position.sass | 3 + _sass/leap/atoms/_typography.sass | 16 ++++- _sass/leap/components/_course-card.sass | 64 +++++++++++++++++++- _sass/leap/components/_nav-bar.sass | 4 +- examples/library.html | 3 +- 14 files changed, 202 insertions(+), 38 deletions(-) diff --git a/_data/navs/atoms.yml b/_data/navs/atoms.yml index a6f5564..e420ee8 100644 --- a/_data/navs/atoms.yml +++ b/_data/navs/atoms.yml @@ -1,20 +1,8 @@ filename: atoms name: Utilities pages: - - slug: /typography.html - name: Typography - - - slug: /grid.html - name: Grid - - - slug: /block-grid.html - name: Block Grid - - - slug: /layout.html - name: Layout - - - slug: /flexbox.html - name: Flex Box + - slug: /borders.html + name: Borders - slug: /buttons.html name: Buttons @@ -22,14 +10,26 @@ pages: - slug: /colors.html name: Colors - - slug: /borders.html - name: Borders + - slug: /flexbox.html + name: Flex Box - slug: /forms.html name: Forms + - slug: /grid.html + name: Grid + + - slug: /block-grid.html + name: Block Grid + + - slug: /layout.html + name: Layout + - slug: /icons.html name: Icons - slug: /tables.html name: Tables + + - slug: /typography.html + name: Typography diff --git a/_includes/component-examples/card.html b/_includes/component-examples/card.html index 7d7fcea..50a0473 100644 --- a/_includes/component-examples/card.html +++ b/_includes/component-examples/card.html @@ -1,11 +1,50 @@
  • -
    - Icon - Header +
    + + + +
      +
    • 1
      • +
    • 2
      • +
    • 3
      • +
    • 4
      • +
    • 5
      • +
    • 6
      • +
    • 3
      • +
    • 4
      • +
    • 5
      • +
    • 6
      • +
    • 3
      • +
    • 4
      • +
    • 5
      • +
    • 6
      • +
    • 3
      • +
    • 4
      • +
    • 5
      • +
    • 6
      • +
    + 2 hours left
    -

    +

    Concept

    @@ -16,7 +55,7 @@

    -
    diff --git a/_includes/component-examples/header-nav.html b/_includes/component-examples/header-nav.html index 33e3eba..09e9d87 100644 --- a/_includes/component-examples/header-nav.html +++ b/_includes/component-examples/header-nav.html @@ -4,7 +4,7 @@
    +
    • diff --git a/_includes/component-examples/card.html b/_includes/component-examples/card.html index 50a0473..edef214 100644 --- a/_includes/component-examples/card.html +++ b/_includes/component-examples/card.html @@ -1,6 +1,6 @@
  • -
    +
  • 1
    • +
  • 2
  • 2
    • -
  • 3
    • -
  • 4
    • -
  • 5
    • -
  • 6
    • -
  • 3
    • -
  • 4
    • -
  • 5
    • -
  • 6
    • -
  • 3
    • -
  • 4
    • -
  • 5
    • -
  • 6
    • -
  • 3
  • 4
  • 5
  • 6
    • diff --git a/_includes/component-examples/topic-filter.html b/_includes/component-examples/topic-filter.html new file mode 100644 index 0000000..6a65658 --- /dev/null +++ b/_includes/component-examples/topic-filter.html @@ -0,0 +1,25 @@ +
  • +
    + + + + wow +
    +
    • diff --git a/_sass/leap/atoms/_typography.sass b/_sass/leap/atoms/_typography.sass index c94f91c..1614c80 100644 --- a/_sass/leap/atoms/_typography.sass +++ b/_sass/leap/atoms/_typography.sass @@ -12,7 +12,6 @@ h1, h2, h3, h4, h5, h6 text-rendering: optimizeLegibility - // text sizes for each header @for $num from 0 through 6 h#{$num} @@ -39,8 +38,6 @@ h1, h2, h3, h4, h5, h6 font-size: #{$number} !important - - // Adds the media queries to the header mixin @mixin header-classes($suffix, $media: null) @@ -91,10 +88,9 @@ p font-weight: normal !important strong, +b, .bold font-weight: $bold !important - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale em, .italic diff --git a/_sass/leap/components/_course-card.sass b/_sass/leap/components/_course-card.sass index 354a5be..da2dd28 100644 --- a/_sass/leap/components/_course-card.sass +++ b/_sass/leap/components/_course-card.sass @@ -3,6 +3,7 @@ border-radius: $border-radius box-shadow: $box-shadow margin-bottom: 2rem + position: relative // CLEAN height: 280px +animation(card-fade-up .5s ease) // CLEAN THIS @@ -71,3 +72,14 @@ right: 10px left: 10px transition: .1s ease-in-out + +.card--track::before + height: 10px + left: 20px + right: 20px + +.card--track:hover + &::after + height: 10px + &::before + height: 20px diff --git a/examples/library.html b/examples/library.html index e2812e9..e754b7a 100644 --- a/examples/library.html +++ b/examples/library.html @@ -113,15 +113,58 @@
    -
    +
    +

    + Wehoheorhow +

    +

    + Nowww +

      + {% include component-examples/card--track.html %} + {% include component-examples/card--track.html %} + +
    +
    + +
    +

    + Wehoheorhow +

    +

    + Nowww +

    +
      + + {% include component-examples/card.html %} {% include component-examples/card.html %} {% include component-examples/card.html %} {% include component-examples/card.html %} {% include component-examples/card.html %} - {% include component-examples/card.html %} {% include component-examples/card.html %} {% include component-examples/card.html %} + {% include component-examples/card.html %} + +
    +
    + +
    +

    + Wehoheorhow +

    +

    + Nowww +

    +
      + + {% include component-examples/topic-filter.html %} + {% include component-examples/topic-filter.html %} + {% include component-examples/topic-filter.html %} + {% include component-examples/topic-filter.html %} + {% include component-examples/topic-filter.html %} + {% include component-examples/topic-filter.html %} + {% include component-examples/topic-filter.html %} + {% include component-examples/topic-filter.html %}
    From 4c2b6f1d699cf73ce4400d1fe2f66a7235873b9b Mon Sep 17 00:00:00 2001 From: Maggie Bignell Date: Fri, 14 Sep 2018 13:36:57 -0700 Subject: [PATCH 05/13] Control bar, margin auto docs --- _includes/component-examples/control-bar.html | 5 ++++ _sass/leap/_variables.scss | 2 ++ _sass/leap/components/_all.sass | 1 + _sass/leap/components/_control-bar.sass | 27 +++++++++++++++++++ examples/library.html | 2 ++ layout.html | 1 + 6 files changed, 38 insertions(+) create mode 100644 _includes/component-examples/control-bar.html create mode 100644 _sass/leap/components/_control-bar.sass diff --git a/_includes/component-examples/control-bar.html b/_includes/component-examples/control-bar.html new file mode 100644 index 0000000..412a717 --- /dev/null +++ b/_includes/component-examples/control-bar.html @@ -0,0 +1,5 @@ +     diff --git a/_sass/leap/_variables.scss b/_sass/leap/_variables.scss index 9085e73..0b96d6a 100644 --- a/_sass/leap/_variables.scss +++ b/_sass/leap/_variables.scss @@ -151,6 +151,8 @@ $text-size-mobile: ( 5: 1rem, 6: 0.875rem ); + + $gotham: "Gotham Rounded A", "Gotham Rounded B", "Helvetica", Helvetica, Arial, sans-serif; $bold: 500; diff --git a/_sass/leap/components/_all.sass b/_sass/leap/components/_all.sass index 3b308d2..72ef4bf 100644 --- a/_sass/leap/components/_all.sass +++ b/_sass/leap/components/_all.sass @@ -4,3 +4,4 @@ @import boxes @import course-card @import nav-bar +@import control-bar diff --git a/_sass/leap/components/_control-bar.sass b/_sass/leap/components/_control-bar.sass new file mode 100644 index 0000000..a3a6a40 --- /dev/null +++ b/_sass/leap/components/_control-bar.sass @@ -0,0 +1,27 @@ +.control-bar + background: white + border-radius: $border-radius + box-shadow: $box-shadow + font-size: 1rem + font-weight: $bold + padding: 1rem 1.5rem + margin-bottom: 2rem + display: flex + flex-direction: column + +media(min-width $md) + flex-direction: row + padding: 1.5rem 2rem + a + color: text-color(light) + margin-bottom: 1rem + margin-right: 0 + +media(min-width $md) + margin-right: 2rem + margin-bottom: 0 + a:last-of-type + margin-bottom: 0 + +media(min-width $md) + margin-right: 0 + a.current, + a:hover + color: text-color(dark) diff --git a/examples/library.html b/examples/library.html index e754b7a..c9473c5 100644 --- a/examples/library.html +++ b/examples/library.html @@ -128,6 +128,8 @@

    +{% include component-examples/control-bar.html %} +

    Wehoheorhow diff --git a/layout.html b/layout.html index bf8b535..78f3e08 100644 --- a/layout.html +++ b/layout.html @@ -134,6 +134,7 @@

    Spacing Units and Naming

    Units

      +
    • auto = takes on value based on spacing
    • 0 = 0
    • 0.5 = 0.5rem
    • 1 = 1rem
      • From be0328019b9913c7a7a47bf3ceff07cba31342e1 Mon Sep 17 00:00:00 2001 From: Maggie Bignell Date: Fri, 14 Sep 2018 13:43:48 -0700 Subject: [PATCH 06/13] Margin auto styles actually --- _includes/component-examples/control-bar.html | 2 +- _sass/leap/atoms/_margin.sass | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_includes/component-examples/control-bar.html b/_includes/component-examples/control-bar.html index 412a717..ef13390 100644 --- a/_includes/component-examples/control-bar.html +++ b/_includes/component-examples/control-bar.html @@ -1,5 +1,5 @@ diff --git a/_sass/leap/atoms/_margin.sass b/_sass/leap/atoms/_margin.sass index cd4b428..b07dce8 100644 --- a/_sass/leap/atoms/_margin.sass +++ b/_sass/leap/atoms/_margin.sass @@ -75,6 +75,8 @@ @else .m-#{$type}-#{$unit}-#{$suffix} margin-#{$side}: spacing($unit) !important + .m-#{$type}-auto-#{$suffix} + margin-#{$side}: auto !important @@ -83,8 +85,6 @@ .m-auto-#{$suffix} margin: 0 auto !important - - // Adds the media queries to the margin-style mixin @mixin margin($suffix, $media: null) From 0f1c5107ea526d8477873bf0bd87b5a93ede4cb2 Mon Sep 17 00:00:00 2001 From: Maggie Bignell Date: Fri, 14 Sep 2018 16:38:07 -0700 Subject: [PATCH 07/13] fixed example styling/format --- .../component-examples/alert-banner.html | 15 +++ _includes/component-examples/header-nav.html | 46 +++---- _includes/component-examples/search-bar.html | 63 ++++++++++ _layouts/example.html | 10 +- _sass/leap/atoms/_button.sass | 1 + _sass/leap/components/_alerts.sass | 2 +- _sass/leap/components/_all.sass | 2 +- _sass/leap/components/_control-bar.sass | 26 +++- _sass/leap/components/_course-card.sass | 1 + .../{_nav-bar.sass => _header-nav.sass} | 20 +++- components/alert-banners.html | 74 ++++++++++++ examples/library.html | 112 +----------------- 12 files changed, 232 insertions(+), 140 deletions(-) create mode 100644 _includes/component-examples/alert-banner.html create mode 100644 _includes/component-examples/search-bar.html rename _sass/leap/components/{_nav-bar.sass => _header-nav.sass} (50%) create mode 100644 components/alert-banners.html diff --git a/_includes/component-examples/alert-banner.html b/_includes/component-examples/alert-banner.html new file mode 100644 index 0000000..7ea752b --- /dev/null +++ b/_includes/component-examples/alert-banner.html @@ -0,0 +1,15 @@ +
      +

      + + + + Nice. This is an Alert with the :warning class set

      + +
      diff --git a/_includes/component-examples/header-nav.html b/_includes/component-examples/header-nav.html index 09e9d87..66667b4 100644 --- a/_includes/component-examples/header-nav.html +++ b/_includes/component-examples/header-nav.html @@ -3,30 +3,30 @@ + + + + + Home +
    - - - From a23aa1bb8e886d3ad5d03136c1c3742a828573d4 Mon Sep 17 00:00:00 2001 From: Maggie Bignell Date: Fri, 14 Sep 2018 16:46:35 -0700 Subject: [PATCH 08/13] added track page --- _includes/component-examples/header-nav.html | 6 +- _layouts/example.html | 3 +- _sass/leap/components/_course-card.sass | 3 + _sass/leap/components/_header-nav.sass | 2 + examples/library.html | 103 ++++++++++--------- examples/support.html | 2 - 6 files changed, 62 insertions(+), 57 deletions(-) diff --git a/_includes/component-examples/header-nav.html b/_includes/component-examples/header-nav.html index 66667b4..5130a99 100644 --- a/_includes/component-examples/header-nav.html +++ b/_includes/component-examples/header-nav.html @@ -27,10 +27,10 @@ Home