From: Tim Hartwick Date: Tue, 27 Jun 2017 18:35:33 +0000 (-0700) Subject: footer updates X-Git-Tag: v6.4.1~19^2~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=cd932445bfbedb42de25318bbb22b401eec92d7f;p=thirdparty%2Ffoundation%2Ffoundation-sites.git footer updates --- diff --git a/docs/assets/img/icons/email-icon.svg b/docs/assets/img/icons/email-icon.svg new file mode 100644 index 000000000..4d8008d8b --- /dev/null +++ b/docs/assets/img/icons/email-icon.svg @@ -0,0 +1,10 @@ + + + + Page-1 + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/assets/img/icons/facebook-icon.svg b/docs/assets/img/icons/facebook-icon.svg new file mode 100644 index 000000000..f8d4199aa --- /dev/null +++ b/docs/assets/img/icons/facebook-icon.svg @@ -0,0 +1,10 @@ + + + + facebook-icon + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/assets/img/icons/twitter-icon.svg b/docs/assets/img/icons/twitter-icon.svg new file mode 100644 index 000000000..5f1a076f9 --- /dev/null +++ b/docs/assets/img/icons/twitter-icon.svg @@ -0,0 +1,10 @@ + + + + Shape + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/assets/img/icons/youtube-icon.svg b/docs/assets/img/icons/youtube-icon.svg new file mode 100644 index 000000000..303aba051 --- /dev/null +++ b/docs/assets/img/icons/youtube-icon.svg @@ -0,0 +1,10 @@ + + + + Shape + Created with Sketch. + + + + + \ No newline at end of file diff --git a/docs/assets/scss/_docs-footer.scss b/docs/assets/scss/_docs-footer.scss new file mode 100755 index 000000000..08bf1660c --- /dev/null +++ b/docs/assets/scss/_docs-footer.scss @@ -0,0 +1,311 @@ +.footer-nav { + @include flex-grid-row; + align-items: center; + background-color: $topbar-background; + padding: 2rem; + width: 100%; + + @include breakpoint(medium only) { + justify-content: center; + } + + @include breakpoint(small only) { + flex-direction: column; + } +} + +.footer-nav-left, +.footer-nav-right { + @include flex-grid-column(shrink); + color: $white; + + a { + color: $white; + + &:hover, + &:focus { + color: darken($white, 10%); + } + + @include breakpoint(small only) { + font-size: 1rem; + } + } + + @include breakpoint(small only) { + @include flex-grid-column(expand); + } +} + +.footer-nav-left { + @include breakpoint(medium only) { + order: 3; + display: flex; + margin-left: 1rem; + } + + @include breakpoint(small only) { + order: 3; + } +} + +.footer-nav-right { + @include breakpoint(medium only) { + order: 2; + display: flex; + margin-right: 1rem; + } + + @include breakpoint(small only) { + margin-bottom: 1rem; + } +} + +.footer-copyright { + color: darken($white, 20%); + font-size: 1rem; + padding-top: 1rem; +} + +.footer-nav-center { + @include flex-grid-column; + + @include breakpoint(medium only) { + display: flex; + flex: 1 0 auto; + order: 1; + width: 100%; + justify-content: center; + } +} + +.footer-nav-menu { + list-style: none; + margin-bottom: 0; + text-align: center; + + @include breakpoint(small only) { + margin-left: 0; + } +} + +.footer-nav-menu-icons { + list-style: none; + margin-bottom: 0; + text-align: center; + + @include breakpoint(small only) { + margin-left: 0; + display: flex; + margin-top: 1rem; + + .footer-nav-menu-item { + margin-right: 2.5rem; + } + } +} + +.footer-nav-menu-item { + display: inline-block; + margin-right: 2.5rem; + font-size: 1.25rem; + padding: 0.4rem 0; + + a { + color: $white; + transition: color 0.3s ease; + + &:hover, + &:focus { + color: darken($white, 0%); + transition: color 0.3s ease; + } + } + + &:last-of-type { + margin-right: 0; + } + + @include breakpoint(small only) { + display: block; + font-size: 1rem; + margin: 0; + + &.social { + display: inline-block; + margin-left: 0.5rem; + margin-right: 0.5rem; + margin-top: 1rem; + } + + &.cow-palace-menu { + margin: 0 auto; + top: -2px; + } + } +} + +.footer-social-icon { + height: 1.25rem; + margin: 0; + width: 1.25rem; +} + + +// contact +.footer-contact { + background-color: $foundation-dark; + background-position: right; + background-repeat: no-repeat; + background-size: contain; + color: $true-white; + padding: 5rem 0 8rem; + + @include breakpoint(small only) { + background-image: none; + padding: 4rem 0; + } +} + +.homepage-section-title { + font-size: 5rem; + font-weight: 800; + letter-spacing: -1px; + line-height: 1.1em; + margin-top: 0; + margin-bottom: 1.5rem; + max-width: 64rem; + margin-left: auto; + margin-right: auto; + + @include breakpoint(medium only) { + font-size: 4rem; + } + + @include breakpoint(small only) { + font-size: 2.5rem; + } +} + +.homepage-section-desc { + color: $white; + margin-bottom: 2.5rem; + z-index: 1; + font-size: 1.25rem; + line-height: 1.8; + + &.light { + color: darken($white, 20%); + } + + .text-link { + color: $white; + font-weight: bold; + } + + @include breakpoint(small only) { + margin-bottom: 1.5rem; + } +} + +.footer-contact-form { + margin-top: 2rem; + + @include breakpoint (small only) { + margin-top: 0.5rem; + } + + label { + color: $white; + font-family: 'Proxima Nova Bold', Helvetica, san-serif; + font-weight: 600; + } + + [type='text'], + [type='email'], + textarea { + background-color: darken($white, 8%); + border: 1px solid darken($white, 15%); + border-radius: 5px; + color: darken($foundation-dark, 25%); + height: 2.55rem; + padding-left: 1rem; + transition: background-color 0.3s ease; + opacity: 0.5; + + &:focus, + &:focus { + background-color: darken($foundation-dark, 5%); + box-shadow: none; + transition: background-color 0.3s ease; + color: $white; + } + } + + // TODO: add placeholder mixin + ::-webkit-input-placeholder { + color: lighten($foundation-dark, 40%); + } + + ::-moz-placeholder { + color: lighten($foundation-dark, 40%); + } + + :-ms-input-placeholder { + color: lighten($foundation-dark, 40%); + } + + :-moz-placeholder { + color: lighten($foundation-dark, 40%); + } +} + +.form-contact-form-button { + margin-top: 1rem; +} + +.homepage-section-subtitle-divider { + border-bottom: 2px solid $foundation-dark; + display: block; + margin-bottom: 2.5rem; + width: 4rem; + + &.lighter { + border-bottom: 2px solid lighten($white, 40%); + } + + @include breakpoint(small only) { + margin-bottom: 2rem; + width: 3rem; + } +} + +.homepage-section-subtitle { + color: $foundation-dark; + font-size: 1rem; + font-weight: 600; + letter-spacing: 1px; + margin-bottom: 1.2rem; + text-transform: uppercase; + + &.lighter { + color: lighten($white, 40%); + } + + @include breakpoint(small only) { + font-size: 0.8rem; + } +} + +.home-form-submit-button { + font-size: 1.25rem; + font-weight: 600; + background: $white; + color: $foundation-dark; + + &:hover { + background: darken($white, 20%); + color: darken($foundation-dark, 20%); + } +} + diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 1320037cf..754e16476 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -18,6 +18,8 @@ @include foundation-meter-element; @include motion-ui-transitions; +$foundation-dark: #074E68 ; +$true-white: #fff; @import 'foundation-docs'; @import 'examples/grid'; @import 'examples/motion-ui'; @@ -29,6 +31,7 @@ @import 'course-callout'; @import 'component-list'; @import 'accordion-content'; +@import 'docs-footer'; // ZURB logo font diff --git a/docs/layout/default.html b/docs/layout/default.html index 2f5273cb9..e55d68635 100644 --- a/docs/layout/default.html +++ b/docs/layout/default.html @@ -62,6 +62,8 @@ + {{> newsletter-signup-rr}} + {{> footer-contact}} {{> footer}} diff --git a/docs/partials/footer-contact.html b/docs/partials/footer-contact.html new file mode 100644 index 000000000..c7549a4e0 --- /dev/null +++ b/docs/partials/footer-contact.html @@ -0,0 +1,42 @@ + diff --git a/docs/partials/footer.html b/docs/partials/footer.html old mode 100644 new mode 100755 index 52a90000b..674ddc52a --- a/docs/partials/footer.html +++ b/docs/partials/footer.html @@ -1,98 +1,40 @@ - - -
- - -