Created
November 27, 2018 21:18
-
-
Save xaqrox/153775fd0e8aa05a419293b01443c733 to your computer and use it in GitHub Desktop.
main.less git bundle > live site
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| diff --git a/src/wp-content/themes/yold-season2/src/less/main.less b/src/wp-content/themes/yold-season2/src/less/main.less | |
| index 9b365e0d..48bfb665 100644 | |
| --- a/src/wp-content/themes/yold-season2/src/less/main.less | |
| +++ b/src/wp-content/themes/yold-season2/src/less/main.less | |
| @@ -2,9 +2,13 @@ | |
| @import 'core'; | |
| +// colors, variables, fonts and mixins are in yold.less | |
| + | |
| body { | |
| + @msn-header-height: 33px; | |
| @sub-navbar-height: 49px; | |
| + -webkit-font-smoothing: antialiased; | |
| line-height: 1.3; | |
| padding-top: @navbar-height; | |
| @@ -12,18 +16,41 @@ body { | |
| padding-top: @navbar-height-collapsed; | |
| } | |
| - // adjust body padding based on sub-navbar presence | |
| + // adjust body padding based on msn and sub-navbar presence | |
| &.has-sub-navbar { | |
| - padding-top: @navbar-height + @sub-navbar-height; | |
| + padding-top: @navbar-height-collapsed; | |
| + | |
| + @media @desktop { | |
| + padding-top: @navbar-height + @sub-navbar-height; | |
| + } | |
| + | |
| } // &.has-sub-navbar | |
| + &.ref-msn { | |
| + padding-top: @navbar-height-collapsed + @msn-header-height; | |
| + | |
| + @media @desktop { | |
| + padding-top: @navbar-height + @msn-header-height; | |
| + | |
| + &.has-sub-navbar { | |
| + padding-top: @navbar-height + @msn-header-height + @sub-navbar-height; | |
| + } | |
| + | |
| + } | |
| + | |
| + } // &.ref-msn | |
| + | |
| } // body | |
| /* !MISC */ | |
| /* Overwrite some Bootstrap defaults */ | |
| +label { | |
| + font-weight: 300; | |
| +} | |
| + | |
| a:hover { | |
| text-decoration: none; | |
| } | |
| @@ -33,13 +60,13 @@ a:active { | |
| outline: none; | |
| } | |
| -body, | |
| button, | |
| input { | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .btn { | |
| + border: none; | |
| font: @font-weight-semibold 18px @headings-font-family; | |
| min-width: 120px; | |
| padding-bottom: 10px; | |
| @@ -47,11 +74,6 @@ input { | |
| text-transform: uppercase; | |
| .transition(0.2s); | |
| - @{icon} { | |
| - line-height: 1.2; | |
| - vertical-align: text-bottom; | |
| - } | |
| - | |
| &.btn-lg { | |
| padding-bottom: 18px; | |
| padding-top: 18px; | |
| @@ -85,12 +107,7 @@ input { | |
| &.btn-secondary { | |
| .button-variant(@btn-secondary-color, @btn-secondary-bg, @btn-secondary-border); | |
| } | |
| - | |
| - &.btn-outline { | |
| - .button-variant(#888, transparent, #ccc); | |
| - font-weight: @font-weight-light; | |
| - } | |
| - | |
| + | |
| &.btn-connect { | |
| &.btn-connect-twitter { | |
| .social-button-lg(twitter); | |
| @@ -120,25 +137,6 @@ input { | |
| &.btn-twitter-blue { | |
| .button-variant(@btn-primary-color; @share-color-twitter; @btn-primary-border); | |
| } | |
| - | |
| - &.btn-ask-joe { | |
| - padding-right: 30px; | |
| - max-width: 100%; | |
| - | |
| - @media @phone { | |
| - width: 100%; | |
| - } | |
| - | |
| - svg { | |
| - width: 70px; | |
| - height: 55px; | |
| - display: inline-block; | |
| - vertical-align: middle; | |
| - margin: 0 0 2px -6px; | |
| - } | |
| - | |
| - } | |
| - | |
| } // .btn | |
| .anim { | |
| @@ -278,7 +276,7 @@ input { | |
| right: 0; | |
| bottom: 0; | |
| padding: 0.5em; | |
| - position: absolute !important; | |
| + position: absolute; | |
| text-shadow: 1px 1px 0 fadeout(#000, 50); | |
| z-index: 999; | |
| max-width: 100%; | |
| @@ -330,6 +328,11 @@ input { | |
| .transition(0.5s ease); | |
| } | |
| + &.invisible { | |
| + top: -200px; | |
| + .opacity(0); | |
| + } | |
| + | |
| @media @tablet { | |
| height: @navbar-height-collapsed; | |
| min-height: @navbar-height-collapsed; | |
| @@ -341,8 +344,6 @@ input { | |
| .navbar-toggle { | |
| margin-top: 13px; | |
| margin-bottom: 13px; | |
| - padding-left: 0; | |
| - padding-right: 0; | |
| } | |
| } | |
| } | |
| @@ -352,22 +353,17 @@ input { | |
| } | |
| .site-title { | |
| - @logo-height: 50px; | |
| - | |
| .display(flex); | |
| .align-items(center); | |
| height: @navbar-height; | |
| margin-top: 0; | |
| margin-bottom: 0; | |
| - | |
| - a { | |
| - text-decoration: none; | |
| - } | |
| - | |
| + | |
| .logo-natgeo, | |
| .forward-slash, | |
| .logo-years { | |
| + height: 50px; | |
| display: inline-block; | |
| svg { | |
| @@ -386,233 +382,815 @@ input { | |
| .logo-years { | |
| .transition(0.25s); | |
| opacity: 0.65; | |
| - } | |
| - | |
| - .logo-sizes(@height: @logo-height) { | |
| - | |
| - .logo-natgeo, | |
| - .forward-slash, | |
| - .logo-years { | |
| - height: @height; | |
| - } | |
| - | |
| - .logo-natgeo svg { | |
| - width: @height * 300 / 105.7; // viewbox dimensions | |
| - } | |
| - .forward-slash svg { | |
| - width: @height * 173.5 / 500; // viewbox dimensions | |
| + &:hover { | |
| + opacity: 1; | |
| } | |
| - .logo-years svg { | |
| - width: @height * 785.7 / 217.3; // viewbox dimensions | |
| - } | |
| - | |
| - } // .logo-sizes mixin | |
| - | |
| - .logo-sizes(); | |
| - | |
| + } | |
| + | |
| @media @tablet { | |
| height: @navbar-height-collapsed; | |
| - .logo-sizes(@navbar-height-collapsed * 0.6); | |
| } | |
| - @media @sm-phone { | |
| - .logo-sizes(@navbar-height-collapsed * 0.5); | |
| + } // .site-title | |
| + | |
| + .primary-navigation, | |
| + .secondary-navigation { | |
| + font: normal 18px @headings-font-family; | |
| + text-transform: uppercase; | |
| + } | |
| + | |
| + .primary-navigation, | |
| + .secondary-navigation, | |
| + .social-links { | |
| + | |
| + a { | |
| + .transition(0.25s); | |
| + } | |
| + | |
| + } | |
| + | |
| + .primary-navigation { | |
| + | |
| + .active a, | |
| + .active:focus a, | |
| + .active:hover a { | |
| + background-color: transparent; | |
| + } | |
| + | |
| + ul.nav { | |
| + | |
| + li { | |
| + .display(flex); | |
| + .align-items(center); | |
| + height: @navbar-height; | |
| + | |
| + &.menu-item-home { | |
| + display: none; // hide "home" item in main nav (keep it visible in mobile nav) | |
| + } | |
| + | |
| + a { | |
| + padding: 10px; | |
| + | |
| + .caret { | |
| + display: none; | |
| + } | |
| + | |
| + } | |
| + | |
| + } | |
| + | |
| + li:last-child { | |
| + | |
| + a { | |
| + padding-right: 0; // flush to right edge | |
| + } | |
| + | |
| + } | |
| + | |
| } | |
| - &:hover { | |
| + ul.navbar-btns { | |
| - .logo-years { | |
| - opacity: 1; | |
| + li { | |
| + padding: 10px; | |
| + | |
| + > a.btn { | |
| + color: #fff; | |
| + } | |
| + | |
| + } | |
| + | |
| + li:last-child { | |
| + padding-right: 0; | |
| } | |
| } | |
| - } // .site-title | |
| + } // .primary-navigation | |
| - .header-violator { | |
| - .transition(transform 0.5s @easeInOutCirc); | |
| + .secondary-navigation { | |
| + background: #1a1a1a; | |
| + text-align: center; | |
| + | |
| + ul { | |
| + margin: 0; | |
| + padding: 0; | |
| + | |
| + li { | |
| + padding: 15px 10px; | |
| + color: #fff; | |
| + display: none; // revealed by JS | |
| + | |
| + &.title { | |
| + display: none; | |
| + } | |
| + | |
| + &.visible { | |
| + display: inline-block; | |
| + } | |
| + | |
| + i { | |
| + margin-right: -5px; | |
| + display: inline-block; | |
| + font-size: 14px; | |
| + } | |
| + | |
| + a { | |
| + color: #999; | |
| + } | |
| + | |
| + &.current_page_item { | |
| + | |
| + a { | |
| + color: @link-color; | |
| + } | |
| + | |
| + } | |
| + | |
| + } | |
| + | |
| + } | |
| + } // .secondary-navigation | |
| + | |
| + .super-nav-container { | |
| + position: relative; | |
| + } | |
| + | |
| + .super-navigation { | |
| + background: @gray-lighter; | |
| position: absolute; | |
| - top: 0; | |
| left: 0; | |
| right: 0; | |
| - border-top: solid 7px #333; | |
| - text-align: center; | |
| + top: 0; | |
| + padding: 30px 0; | |
| + max-height: 0; | |
| + overflow: scroll; | |
| + pointer-events: none; | |
| z-index: 1; | |
| + .translate3d(0,0,0); | |
| + .opacity(0); | |
| + .transition(~"max-height 0.6s cubic-bezier(0.980, -0.050, 0.385, 1.080) 0.25s, opacity 0.5s"); | |
| + .box-shadow(inset 0 -1px 0 fadeout(#000, 90)); | |
| - .violator-message { | |
| - display: inline-block; | |
| - background: #333; | |
| - margin: 0 auto; | |
| - padding: 0.65em 1.5em; | |
| - line-height: 1; | |
| - color: #a3a3a3; | |
| - border-radius: 0 0 5px 5px; | |
| + &.visible { | |
| + max-height: 400px; | |
| + pointer-events: auto; | |
| + z-index: 2; | |
| + .opacity(1); | |
| + .transition(~"max-height 0.4s cubic-bezier(0.360, -0.065, 0.000, 1.115), opacity 0.4s"); | |
| + } | |
| + | |
| + .super-nav { | |
| + text-align: center; | |
| + display: block; | |
| + position: relative; | |
| + } | |
| + | |
| + .super-nav-column { | |
| + text-align: left; | |
| - a { | |
| - .transition(0.25s); | |
| - color: #fff; | |
| - border-bottom: solid 1px #666; | |
| + .super-nav-header { | |
| + border-bottom: 1px solid @gray-light; | |
| + font: normal 18px @headings-font-family; | |
| + text-transform: uppercase; | |
| + margin: 0 0 4px; | |
| + padding-bottom: 8px; | |
| - &:hover { | |
| - border-color: #fff; | |
| + a { | |
| + color: @text-color; | |
| + } | |
| + | |
| + } // .super-nav-header | |
| + | |
| + ul { | |
| + margin: 0; | |
| + padding: 0; | |
| + | |
| + li { | |
| + list-style: none; | |
| + | |
| + a { | |
| + color: @text-color; | |
| + display: block; | |
| + padding: 8px 0; | |
| + text-decoration: none; | |
| + .transition(0.25s ease); | |
| + | |
| + &:hover { | |
| + color: @orange; | |
| + text-decoration: underline; | |
| + } | |
| + | |
| + } | |
| + | |
| } | |
| } | |
| + | |
| + &.super-nav-column-double { | |
| + | |
| + ul { | |
| + | |
| + li { | |
| + width: 50%; | |
| + float: left; | |
| + | |
| + &:nth-child(odd) { | |
| + clear: left; | |
| + } | |
| + | |
| + } | |
| + | |
| + } | |
| + | |
| + } // &.super-nav-column-double | |
| + | |
| + &.super-nav-column-hlist { | |
| + | |
| + .super-nav-header { | |
| + border-bottom: none; | |
| + } | |
| - } | |
| + } // &.super-nav-column-hlist | |
| + | |
| + } // .super-nav-column | |
| - @media @tablet { | |
| + } // .super-navigation | |
| + | |
| + .social-links { | |
| + position: absolute; | |
| + top: 20px; | |
| + right: 3px; | |
| + font-size: 20px; | |
| + z-index: 1; | |
| + | |
| + .nav-label { | |
| display: none; | |
| } | |
| - } // .header-violator | |
| + a { | |
| + margin-left: 0.4em; | |
| + color: #c2c2c2; | |
| + text-decoration: none; | |
| + | |
| + &:hover { | |
| + color: @gray-light; | |
| + } | |
| + | |
| + } | |
| + | |
| + } // .social-links | |
| + | |
| + .site-header-msn { | |
| + background: @gray-lighter; | |
| + border-bottom: 1px solid #ccc; | |
| + font-family: Arial; | |
| + font-size: 12px; | |
| + line-height: 32px; | |
| + padding: 0 10px; | |
| + | |
| + li { | |
| + margin-right: 10px; | |
| + } | |
| + | |
| + a { | |
| + color: #666; | |
| + } | |
| + | |
| + .logo-header-msn { | |
| + margin-bottom: -3px; | |
| + display: inline-block; | |
| + } | |
| + | |
| + } // .site-header-msn | |
| } // .site-header | |
| -@import 'navigation'; | |
| +/* !Drawer navigation */ | |
| -/* !FOOTER */ | |
| +@drawer-width-desktop: 20%; | |
| +@drawer-width-phone: 70%; | |
| -.site-footer { | |
| - background: #353535; | |
| - color: #a7a7a7; | |
| - text-align: center; | |
| - padding: 40px 0; | |
| +.site-drawer { | |
| + .transition(all 0.6s @easeInOutCirc); | |
| + | |
| + position: fixed; | |
| + top: 0; | |
| + bottom: 0; | |
| + left: 100%; | |
| + width: @drawer-width-desktop; | |
| + min-width: 300px; | |
| + background: #fff; | |
| + z-index: @zindex-navbar-fixed + 10; | |
| - .footer-title { | |
| - font: @font-weight-light 32px @headings-font-family; | |
| - color: #636363; | |
| - margin: 0 auto; | |
| + .drawer-close { | |
| + .transition(all 0.6s @easeInOutCirc); | |
| + .translate(100%, 0); | |
| + .display(flex); | |
| + .align-items(center); | |
| + .justify-content(center); | |
| - @media @phone { | |
| + position: absolute; | |
| + top: 20px; | |
| + right: 100%; | |
| + width: 40px; | |
| + height: 40px; | |
| + background: #fff; | |
| + z-index: 1; | |
| + cursor: pointer; | |
| + | |
| + @{icon} { | |
| + .transition(0.2s); | |
| font-size: 24px; | |
| } | |
| - } | |
| - | |
| - .join-form { | |
| - @form-height: 44px; | |
| - | |
| - margin-top: 20px; | |
| - margin-bottom: 20px; | |
| - position: relative; | |
| - | |
| - &.thinking { | |
| + &:hover { | |
| - .form-control, | |
| - .btn { | |
| - opacity: 0.2; | |
| - pointer-events: none; | |
| + @{icon} { | |
| + opacity: 0.5; | |
| } | |
| } | |
| - .form-control { | |
| - .transition(0.35s); | |
| - //line-height: @form-height; | |
| - height: @form-height; | |
| - width: ~"calc(100% - 10px)"; | |
| - } | |
| + } | |
| + | |
| + @media @phone { | |
| + width: @drawer-width-phone; | |
| + } | |
| + | |
| + .drawer-scroll { | |
| + overflow: auto; | |
| + height: 100vh; | |
| + z-index: 2; | |
| + position: relative; | |
| + background: inherit; | |
| + } | |
| + | |
| + .drawer-form { | |
| + .display(flex); | |
| + .justify-content(center); | |
| + .flex-direction(column); | |
| + background: @gray-lighter; | |
| + padding: 25px; | |
| - .btn { | |
| - height: @form-height; | |
| - | |
| - &:focus { | |
| - .box-shadow(none); | |
| - outline: none; | |
| - } | |
| - | |
| + .form-label { | |
| + text-align: center; | |
| + color: @navbar-default-link-color; | |
| + text-transform: uppercase; | |
| + font-weight: @font-weight-normal; | |
| } | |
| - @media @phone { | |
| + .form-input { | |
| + width: 100%; | |
| - .form-control { | |
| + input { | |
| + .transition(0.25s); | |
| + | |
| width: 100%; | |
| - margin-bottom: 10px; | |
| - } | |
| - | |
| - .btn { | |
| - width: ~"calc(100% - 10px)"; | |
| - float: right; | |
| - min-width: 0; | |
| + padding: 12px; | |
| + font-size: 18px; | |
| + background: #f8f8f8; | |
| + border: solid 1px transparent; | |
| + border-bottom: solid 1px fade(#000, 10); | |
| + border-radius: 0; | |
| + | |
| + &:focus { | |
| + border-color: @brand-primary; | |
| + background: #fff; | |
| + outline: none; | |
| + } | |
| + | |
| } | |
| } | |
| + // .form-input | |
| - } // .join-form | |
| + } | |
| + // .drawer-search | |
| - .result-message { | |
| + .form-search { | |
| + min-height: @navbar-height; | |
| + } | |
| + | |
| + ul.nav { | |
| + margin: 20px 0; | |
| - p { | |
| - margin: 10px auto; | |
| + > li { | |
| + margin-bottom: 20px; | |
| - &.info { | |
| - | |
| + > a { | |
| + text-transform: uppercase; | |
| } | |
| - &.success @{icon} { | |
| - color: @brand-success; | |
| + > ul.sub-menu { | |
| + padding: 0; | |
| + list-style: none; | |
| + margin-top: 5px; | |
| + | |
| + a { | |
| + font-weight: @font-weight-light | |
| + } | |
| + | |
| } | |
| - &.error @{icon} { | |
| - color: @brand-danger; | |
| + } | |
| + | |
| + li.active a { | |
| + color: @brand-primary; | |
| + background-color: transparent; | |
| + | |
| + svg { | |
| + .svg-fill(@brand-primary); | |
| + opacity: 0.5; | |
| } | |
| } | |
| - | |
| - } | |
| - | |
| - .menu-social-nav { | |
| - margin-top: 10px; | |
| - margin-bottom: 10px; | |
| - | |
| - .nav-label { | |
| - .screen-reader-text(); | |
| - } | |
| a { | |
| - .transition(0.3s); | |
| - color: #535353; | |
| - font-size: 32px; | |
| - display: inline-block; | |
| + .transition(0.3s ease-in-out); | |
| + | |
| + display: block; | |
| + color: @navbar-default-link-color; | |
| + font: @font-weight-normal 18px @headings-font-family; | |
| + padding: 3px 10px 3px 55px; | |
| text-decoration: none; | |
| - margin: 0 0.05em; | |
| + svg { | |
| + .transition(0.2s ease-in-out); | |
| + .translate(0, -50%); | |
| + .svg-fill(@navbar-default-link-hover-color); | |
| + | |
| + position: absolute; | |
| + top: 50%; | |
| + left: 24px; | |
| + width: 20px; | |
| + height: 20px; | |
| + opacity: 0.6; | |
| + } | |
| + | |
| &:hover { | |
| - .scale(1.1); | |
| - color: @brand-primary; | |
| + color: @navbar-default-link-hover-color; | |
| + background: @navbar-default-link-hover-bg; | |
| + | |
| + svg { | |
| + .transform(translate(0, -50%), scale(1.2)); | |
| + opacity: 1; | |
| + } | |
| + | |
| } | |
| - | |
| + | |
| } | |
| - | |
| - } // .menu-social-nav | |
| + // a | |
| + | |
| + } | |
| + // ul.menu | |
| - .menu-footer-nav { | |
| - margin-top: 20px; | |
| + .social-links { | |
| + .display(flex); | |
| + .align-items(center); | |
| + .justify-content(center); | |
| - .copyright, | |
| - a { | |
| - margin: 3px 10px; | |
| + margin: 20px 0; | |
| + | |
| + .nav-label { | |
| + display: none; | |
| } | |
| a { | |
| - .transition(0.3s); | |
| - color: inherit; | |
| - text-decoration: underline; | |
| + .transition(0.25s); | |
| + | |
| + display: inline-block; | |
| + font-size: 18px; | |
| + width: 2em; | |
| + line-height: 2; | |
| + text-align: center; | |
| + margin: 0.25em; | |
| + color: #fff; | |
| + background: #dbdbdb; | |
| + border-radius: 999px; | |
| &:hover { | |
| - color: #fff; | |
| + .scale(1.1); | |
| + background: @brand-primary; | |
| } | |
| - } | |
| + } | |
| - } // .menu-footer-nav | |
| + | |
| + } | |
| +} | |
| +// .site-drawer | |
| -} // .site-footer | |
| +.drawer-overlay { | |
| + .transition(all 0.6s @easeInOutCirc); | |
| + position: fixed; | |
| + top: 0; | |
| + bottom: 0; | |
| + left: 0; | |
| + right: 0; | |
| + z-index: @zindex-navbar-fixed + 5; | |
| + background: #353535; | |
| + pointer-events: none; | |
| + opacity: 0; | |
| +} | |
| + | |
| +.site-header, | |
| +.site-content { | |
| + .transition(all 0.6s @easeInOutCirc); | |
| +} | |
| +// .site-content | |
| + | |
| +body.drawer--open { | |
| + overflow: hidden; | |
| + | |
| + .site-header, | |
| + .site-content { | |
| + .translate(-@drawer-width-desktop / 2, 0); | |
| + //.blur(10px); | |
| + //opacity: 0.25; | |
| + | |
| + @media @phone { | |
| + .translate(-@drawer-width-phone / 2, 0); | |
| + } | |
| + | |
| + > * { | |
| + pointer-events: none; | |
| + } | |
| + | |
| + } | |
| + | |
| + .drawer-close { | |
| + .translate(0, 0); | |
| + } | |
| + | |
| + .drawer-overlay { | |
| + opacity: 0.93; | |
| + pointer-events: auto; | |
| + } | |
| + | |
| + .site-drawer { | |
| + .translate(-100%, 0); | |
| + } | |
| + | |
| +} | |
| +// body.drawer--open | |
| + | |
| +/* !FOOTER */ | |
| + | |
| +.site-footer { | |
| + background: @gray-bg; | |
| + color: #666; | |
| + font: normal 100% @headings-font-family; | |
| + margin-top: 50px; | |
| + text-transform: uppercase; | |
| + .clearfix(); | |
| + | |
| + .error404 & { | |
| + margin-top: 0; | |
| + } | |
| + | |
| + #footer-signup { | |
| + @row-height: 60px; | |
| + | |
| + background: #000; | |
| + margin-bottom: 18px; | |
| + position: relative; | |
| + | |
| + .footer-signup-form { | |
| + background: #000; | |
| + display: none; | |
| + position: relative; | |
| + top: 0; | |
| + left: 0; | |
| + | |
| + .btn-close { | |
| + margin-top: 20px; | |
| + .close-button(); | |
| + } | |
| + | |
| + header { | |
| + .clearfix(); | |
| + } | |
| + | |
| + } // .footer-signup-form | |
| + | |
| + .footer-signup-cta { | |
| + overflow: hidden; | |
| + | |
| + @media @tablet { | |
| + > div { | |
| + height: auto !important; | |
| + float: none !important; | |
| + min-height: inherit !important; | |
| + } | |
| + } | |
| + } // .footer-signup-cta | |
| + | |
| + #form-email-subscribe { | |
| + margin: 25px 0 65px; | |
| + | |
| + label { | |
| + color: #fff; | |
| + font-size: 18px; | |
| + text-transform: uppercase; | |
| + line-height: @row-height; | |
| + width: 20%; | |
| + margin: 0; | |
| + float: left; | |
| + | |
| + &.error { | |
| + color: #ff2020; | |
| + } | |
| + | |
| + } | |
| + | |
| + .inputs(@row-height); | |
| + | |
| + input[type=text], | |
| + input[type=email], | |
| + input[type=password], | |
| + textarea { | |
| + width: 75% !important; | |
| + | |
| + @media @tablet { | |
| + width: 100% !important; | |
| + margin-bottom: 10px; | |
| + } | |
| + | |
| + } | |
| + | |
| + .btn { | |
| + min-width: 0; | |
| + width: 100%; | |
| + } | |
| + | |
| + } // #footer-email-subscribe | |
| + | |
| + #email-subscribe-result { | |
| + display: none; | |
| + | |
| + h4 { | |
| + color: #fff; | |
| + margin: 20px 0; | |
| + | |
| + &.error { | |
| + color: #ff2020; | |
| + } | |
| + | |
| + } | |
| + | |
| + } // #email-subscribe-result | |
| + | |
| + .menu-social-nav { | |
| + line-height: @row-height; | |
| + | |
| + @media @tablet { | |
| + float: none !important; | |
| + margin: 0 10px; | |
| + text-align: center; | |
| + } | |
| + | |
| + .nav-label { | |
| + display: inline-block; | |
| + } | |
| + | |
| + a { | |
| + margin-left: 15px; | |
| + font-size: 22px; | |
| + vertical-align: middle; | |
| + color: inherit; | |
| + text-decoration: none; | |
| + .transition(0.2s); | |
| + | |
| + &:hover { | |
| + .opacity(0.75); | |
| + } | |
| + | |
| + } | |
| + | |
| + } // .menu-social-nav | |
| + | |
| + .footer-title { | |
| + line-height: @row-height; | |
| + margin-right: 20px; | |
| + | |
| + @media @tablet { | |
| + float: left !important; | |
| + } | |
| + } | |
| + | |
| + .btn { | |
| + line-height: @row-height; | |
| + padding-top: 0; | |
| + padding-bottom: 0; | |
| + min-width: 0; | |
| + | |
| + @media @tablet { | |
| + float: right !important; | |
| + } | |
| + } | |
| + | |
| + } // #footer-signup | |
| + | |
| + .site-footer-info { | |
| + margin-bottom: 20px; | |
| + | |
| + .menu-footer-nav { | |
| + text-align: center; | |
| + margin: 40px 20px; | |
| + | |
| + li { | |
| + padding-left: 0; | |
| + margin: 6px; | |
| + } | |
| + | |
| + a { | |
| + color: #666; | |
| + } | |
| + | |
| + @media @lg-desktop { | |
| + float: right; | |
| + text-align: left; | |
| + line-height: 43px; | |
| + margin: 0; | |
| + | |
| + li { | |
| + white-space: nowrap; | |
| + | |
| + &:last-child { | |
| + margin-right: 0; | |
| + } | |
| + | |
| + } | |
| + | |
| + } | |
| + | |
| + } | |
| + | |
| + .colophon { | |
| + text-align: center; | |
| + margin-left: 20px; | |
| + margin-right: 20px; | |
| + | |
| + > * { | |
| + display: inline-block; | |
| + margin: 10px; | |
| + } | |
| + | |
| + @media @lg-desktop { | |
| + float: left; | |
| + text-align: left; | |
| + margin-left: 0; | |
| + margin-right: 0; | |
| + | |
| + > * { | |
| + | |
| + &:first-child { | |
| + margin-left: 0; | |
| + } | |
| + | |
| + } | |
| + | |
| + } | |
| + | |
| + } // .colophon | |
| + | |
| + } // .site-footer-info | |
| + | |
| + .site-footer-disclaimer { | |
| + text-align: left; | |
| + color: @gray; | |
| + font: normal 70% @font-family-sans-serif; | |
| + text-transform: none; | |
| + margin: 20px auto; | |
| + | |
| + } // .site-footer-disclaimer | |
| + | |
| + .site-footer-msn { | |
| + color: #fff; | |
| + font-family: Arial; | |
| + font-size: 11px; | |
| + | |
| + li { | |
| + margin-right: 20px; | |
| + } | |
| + | |
| + a { | |
| + color: #fff; | |
| + } | |
| + | |
| + .logo-footer-microsoft { | |
| + position: relative; | |
| + top: -4px; | |
| + } | |
| + | |
| + } | |
| + | |
| +} // .site-footer | |
| /* Carousels */ | |
| @@ -749,6 +1327,35 @@ input { | |
| } | |
| .section-content-templates { | |
| + | |
| + &[style*="background"] { | |
| + .background-image-cover(); | |
| + margin-bottom: 30px; | |
| + | |
| + &.truncate-bg-image { | |
| + background-size: 100% auto; | |
| + background-position: top center; | |
| + } | |
| + | |
| + .module:last-child { | |
| + | |
| + &, | |
| + .share-bar, | |
| + .link-bar { | |
| + margin-bottom: 0; | |
| + } | |
| + | |
| + } // last module | |
| + | |
| + & + & { | |
| + margin-top: -30px; | |
| + } | |
| + | |
| + &.no-margin { | |
| + margin-bottom: 0; | |
| + } | |
| + | |
| + } // has background image | |
| h1, | |
| h2, | |
| @@ -756,268 +1363,441 @@ input { | |
| h4, | |
| h5 { | |
| font-family: @headings-font-family; | |
| - font-weight: @font-weight-light; | |
| + font-weight: normal; | |
| text-rendering: optimizelegibility; | |
| text-transform: uppercase; | |
| } | |
| - | |
| -} // .section-content-templates | |
| + | |
| + h1 { // ABOUT HEADLINE COPY | |
| + color: #fff; | |
| + font-size: 100px; | |
| + line-height: 1; | |
| + margin: 0; | |
| + } | |
| + | |
| + h2 { // BEHIND THE PRODUCTION | |
| + color: #fff; | |
| + font-size: 48px; | |
| + font-weight: 300; | |
| + line-height: 1; | |
| + margin: 0; | |
| + } | |
| + | |
| + h3 { // OUR EXECUTIVE PRODUCERS | |
| + color: @gray-dark; | |
| + font-size: 24px; | |
| + font-weight: 300; | |
| + line-height: 1.2; | |
| + margin: 0 0 30px 0; | |
| + } | |
| + | |
| + h3.page-section-title { | |
| + font-size: 30px; | |
| + margin-bottom: 20px; | |
| + @media @phone { | |
| + text-align: center; | |
| + } | |
| -// Fancybox styles | |
| + } | |
| + | |
| + h3.page-section-title-large { | |
| + font-size: 60px; | |
| + line-height: 1; | |
| + margin-bottom: 20px; | |
| + | |
| + @media @phone { | |
| + text-align: center; | |
| + } | |
| -.fancybox-wrap { | |
| + } | |
| + | |
| + h4 { // JAMES CAMERON | |
| + color: @gray-dark; | |
| + font-size: 24px; | |
| + font-weight: 300; | |
| + line-height: 1.1; | |
| + margin: 0 0 8px 0; | |
| + | |
| + &.hero-subheadline { | |
| + color: #fff; | |
| + text-transform: none; | |
| + } | |
| + | |
| + &.page-section-subtitle { | |
| + font-size: 20px; | |
| + margin-top: -20px; | |
| + margin-bottom: 20px; | |
| + text-transform: none; | |
| + } | |
| + | |
| + &.module-subtitle { | |
| + font-size: 20px; | |
| + text-transform: none; | |
| + } | |
| + | |
| + } | |
| - &.subtleZoomIn { | |
| - .animation-duration(0.65s); | |
| - .animation-timing-function(@easeInOutCirc); | |
| + h5 { // GET EMAIL UPDATES ABOUT YEARS | |
| + color: #fff; | |
| + font-size: 18px; | |
| + margin: 0; | |
| } | |
| - &.subtleZoomOut { | |
| - .animation-duration(0.35s); | |
| - .animation-timing-function(@easeInOutCirc); | |
| + h6 { // SUBHEAD OPTIONAL | |
| + color: #fff; | |
| + font-family: @font-family-serif; | |
| + font-size: 24px; | |
| + font-style: italic; | |
| + font-weight: 300; | |
| + margin: 0; | |
| + | |
| + @media @tablet { | |
| + font-size: 16px; | |
| + } | |
| } | |
| - | |
| - .fancybox-skin { | |
| - .box-shadow(0 20px 40px fade(#000, 20)); | |
| + | |
| + .watch-bar { | |
| + background: #000; | |
| + margin-bottom: 30px; | |
| + padding-top: 35px; | |
| + padding-bottom: 35px; | |
| - .fancybox-title-float-wrap { | |
| - .transition(0.25s @easeOutExpo); | |
| - .translate(0, -20px); | |
| - | |
| - top: 100%; | |
| - right: auto; | |
| - margin-bottom: 0; | |
| - width: 100%; | |
| - visibility: visible; | |
| - opacity: 0; | |
| - | |
| - .child { | |
| - .box-shadow(0 20px 40px fade(#000, 20)); | |
| - | |
| - width: 100%; | |
| - display: block; | |
| - margin: 0; | |
| - padding: 20px 120px 20px 20px; | |
| - white-space: normal; | |
| - text-align: left; | |
| - border-radius: 0; | |
| - position: relative; | |
| - color: #454545; | |
| - font: normal 16px / 1.3 @font-family-sans-serif; | |
| - text-shadow: none; | |
| - | |
| - @media @phone { | |
| - padding: 10px; | |
| - font-size: 14px; | |
| - line-height: 1.15; | |
| - } | |
| - | |
| - .fancy-share-buttons { | |
| - position: absolute; | |
| - top: 0; | |
| - right: 20px; | |
| - bottom: 0; | |
| - | |
| - a { | |
| - font-size: 24px; | |
| - margin: 0 8px; | |
| - display: inline-block; | |
| - } | |
| - | |
| - @media @phone { | |
| - display: none; | |
| - } | |
| - | |
| - } | |
| - | |
| - } | |
| - | |
| + @media @tablet { | |
| + padding-bottom: 10px; | |
| + padding-top: 10px; | |
| } | |
| - // .fancybox-title-float-wrap | |
| - .fancybox-outer { | |
| - z-index: 9999; // on top of image viewer | |
| - | |
| - .fancybox-nav { | |
| - height: 60%; | |
| - top: 20%; | |
| - | |
| - &.fancybox-prev, | |
| - &.fancybox-next { | |
| - | |
| - span { | |
| - .transition(0.25s); | |
| - | |
| - background: none; | |
| - visibility: visible; | |
| - opacity: 0; | |
| - | |
| - @{icon} { | |
| - color: #fff; | |
| - font-size: 40px; | |
| - } | |
| - | |
| - } | |
| - | |
| - &:hover span { | |
| - opacity: 1; | |
| - } | |
| - | |
| - } | |
| - | |
| - &.fancybox-prev span { | |
| - left: auto; | |
| - right: 100%; | |
| - padding-right: 0.3em; | |
| - } | |
| - | |
| - &.fancybox-next span { | |
| - right: auto; | |
| - left: 100%; | |
| - padding-left: 0.3em; | |
| - } | |
| - | |
| + .watch-excerpt { | |
| + | |
| + a { | |
| + text-decoration: none; | |
| } | |
| - .fancybox-inner { | |
| - background: #353535; | |
| + .btn-link { | |
| + color: #fff; | |
| + font-family: @headings-font-family; | |
| + font-size: 24px; | |
| + line-height: 1; | |
| + padding-left: 0 !important; | |
| + text-transform: uppercase; | |
| + text-decoration: none; | |
| + } | |
| - .module { | |
| - margin-bottom: 0; | |
| - .clearfix(); | |
| + } | |
| + | |
| + .watch-showtime { | |
| + | |
| + a { | |
| + color: @gray-medium; | |
| + font-family: @headings-font-family; | |
| + font-size: 24px; | |
| + font-weight: 300; | |
| + line-height: 1; | |
| + | |
| + span.asterisk { | |
| + color: @orange; | |
| + font-size: 30px; | |
| } | |
| - > iframe { | |
| - position: absolute; | |
| - top: 0; | |
| - bottom: 0; | |
| - left: 0; | |
| - right: 0; | |
| - width: 100%; | |
| - height: 100%; | |
| + .icon-showtime-logo { | |
| + font-size: 400%; | |
| + vertical-align: middle; | |
| + line-height: 1px; | |
| + margin: 0 0.1em; | |
| } | |
| - } // .fancybox-inner | |
| - | |
| + &:hover { | |
| + color: @orange; | |
| + text-decoration: none; | |
| + } | |
| + } | |
| + | |
| + @media @tablet { | |
| + float: none !important; | |
| + font-size: 18px; | |
| + text-align: center; | |
| + } | |
| + | |
| } | |
| - // .fancybox-outer | |
| - } | |
| - // .fancybox-skin | |
| + } // .watch-bar | |
| - .fancybox-close { | |
| - .transition(0.35s); | |
| - .translate(-100%, 0); | |
| + .share-bar, | |
| + .link-bar { | |
| + background: #000; | |
| + margin-bottom: 30px; | |
| + padding-top: 30px; | |
| + padding-bottom: 30px; | |
| - background: none; | |
| - top: 0; | |
| - right: auto; | |
| - left: 100%; | |
| - font-size: 30px; | |
| - color: #fff; | |
| - margin-left: 0.3em; | |
| - opacity: 0; | |
| - text-decoration: none; | |
| + @media @tablet { | |
| + padding-bottom: 10px; | |
| + padding-top: 10px; | |
| + } | |
| - &:hover { | |
| - color: @brand-primary; | |
| + &.transparent-bar { | |
| + background: transparent; | |
| } | |
| + | |
| + } // .share-bar | |
| + | |
| + .link-bar { | |
| + | |
| + .cta-link { | |
| + .cta-link(#fff); | |
| + | |
| + @media @tablet { | |
| + | |
| + .btn { | |
| + //margin-top:20px; | |
| + } | |
| + | |
| + } | |
| + | |
| + } | |
| - } | |
| + } // .link-bar | |
| - &.fancybox-opened { | |
| + .sort-bar { | |
| + @bar-height: 50px; | |
| + | |
| + background: #000; | |
| + height: @bar-height; | |
| + overflow: visible !important; | |
| - .fancybox-close { | |
| - .translate(0, 0); | |
| - opacity: 1; | |
| + @media @tablet { | |
| + .dropdown { | |
| + float: none !important; | |
| + } | |
| } | |
| - .fancybox-title-float-wrap { | |
| - .transition-duration(0.65s); | |
| - .translate(0, 0); | |
| - opacity: 1; | |
| + h5 { | |
| + color: @gray-title; | |
| + display: inline-block; | |
| + line-height: @bar-height; | |
| + margin-right: 20px; | |
| + float: left; | |
| + | |
| + @media @tablet { | |
| + margin-left: 10px; | |
| + margin-right: 0; | |
| + text-align: left; | |
| + width: 80px; | |
| + } | |
| } | |
| - } | |
| + .dropdown-toggle { | |
| + background: @gray-dark; | |
| + color: @gray-medium; | |
| + height: @bar-height; | |
| + padding: 0 20px; | |
| + min-width: 240px; | |
| + text-align: left; | |
| + float: left; | |
| + | |
| + @media @tablet { | |
| + min-width: 230px; | |
| + } | |
| + | |
| + .dropdown-label { | |
| + line-height: @bar-height; | |
| + } | |
| + | |
| + @{icon} { | |
| + float: right; | |
| + line-height: @bar-height; | |
| + } | |
| + | |
| + } | |
| + | |
| + } // .sort-bar | |
| -} | |
| -// .fancybox-wrap | |
| + .clips-cta { | |
| + padding: 30px; | |
| + overflow: hidden; | |
| + .background-image-cover(); | |
| + background-image: url('../img/backgrounds/clips-bg.jpg'); | |
| + | |
| + h3 { | |
| + font-size: 36px; | |
| + margin: 0px; | |
| + padding: 25px 15px 25px 15px; | |
| + | |
| + @media @phone { | |
| + font-size: 24px; | |
| + text-align: center; | |
| + padding: 25px 0 15px 0; | |
| + } | |
| + } | |
| -.video-player { | |
| - padding-top: percentage(9/16); | |
| - position: relative; | |
| + a { | |
| + color: #fff; | |
| + | |
| + &:hover { | |
| + color: @gray-light; | |
| + text-decoration: none; | |
| + } | |
| + } | |
| + | |
| + } | |
| - .player { | |
| - position: absolute; | |
| - top: 0; | |
| - left: 0; | |
| - right: 0; | |
| - bottom: 0; | |
| + &.section-content-dark { | |
| + background: #000; | |
| + | |
| + .page-section-title, .page-section-title-large { | |
| + color: #fff; | |
| + } | |
| } | |
| -} | |
| +} // .section-content-templates | |
| -.bio-popup { | |
| - .display(flex); | |
| - width: 80vw; | |
| - max-width: 800px; | |
| +.dotnav { | |
| + @dotSize: 14px; | |
| + @dotBorderWidth: 2px; | |
| - .bio-header { | |
| - .flex(1); | |
| - | |
| - background: #ececec; | |
| + position: fixed; | |
| + right: 20px; | |
| + top: 0; | |
| + bottom: 0; | |
| + z-index: 3; | |
| + | |
| + ul { | |
| + margin: 0; | |
| + padding: 0; | |
| + display: inline-block; | |
| - .header-photo { | |
| - .background-image-cover(); | |
| - position: relative; | |
| - padding-top: 100%; | |
| - overflow: hidden; | |
| + li { | |
| + list-style: none; | |
| + margin: 21px 0; | |
| + padding: 0; | |
| - .image-caption { | |
| - position: absolute; | |
| + a { | |
| + position: relative; | |
| + width: @dotSize; | |
| + height: @dotSize; | |
| + border-radius: 9999px; | |
| + border: solid @dotBorderWidth #888; | |
| + color: #fff; | |
| + display: block; | |
| + text-indent: -9999px; | |
| + .opacity(0.5); | |
| + .transition(0.2s); | |
| + | |
| + span { | |
| + position: absolute; | |
| + top: -@dotBorderWidth; | |
| + bottom: -@dotBorderWidth; | |
| + right: 200%; | |
| + display: inline-block; | |
| + text-transform: uppercase; | |
| + white-space: nowrap; | |
| + font: normal ( @dotSize * 0.9 ) ~"/" ( @dotSize ) @headings-font-family; | |
| + margin-right: 12px; | |
| + pointer-events: none; | |
| + text-indent: 0; | |
| + text-shadow: 0 1px 1px fadeout(#000, 60); | |
| + .opacity(0); | |
| + .transition(0.25s ease); | |
| + } | |
| + | |
| + &:hover { | |
| + .opacity(1); | |
| + | |
| + span { | |
| + right: 100%; | |
| + .opacity(1); | |
| + } | |
| + | |
| + } | |
| + | |
| } | |
| - &[data-logo-background] { | |
| - background-size: 80%; | |
| - } | |
| + &.active { | |
| - } // .header-photo | |
| - | |
| - .header-titles { | |
| - padding: 20px; | |
| - text-transform: uppercase; | |
| - | |
| - .title { | |
| - font: @font-weight-light 24px / 0.9 @headings-font-family; | |
| - color: #636363; | |
| - margin-top: 0; | |
| - margin-bottom: 0.25em; | |
| + a { | |
| + .opacity(1); | |
| + } | |
| + | |
| } | |
| - .subtitle { | |
| - font: @font-weight-normal 18px / 0.9 @headings-font-family; | |
| - color: #aaa; | |
| - margin: 0; | |
| + &.separator { | |
| + background: fadeout(#888, 60); | |
| + height: 1px; | |
| } | |
| - | |
| - } | |
| - | |
| - } | |
| - | |
| - .bio-content { | |
| - .flex(1.5); | |
| - background: #353535; | |
| - color: #a3a3a3; | |
| - font-size: 18px; | |
| - padding: 40px; | |
| - text-decoration: none; | |
| + } // li | |
| - } | |
| + } // ul | |
| + | |
| +} // .dotnav | |
| + | |
| + | |
| +// Fancybox styles | |
| + | |
| +.fancybox-inner { | |
| + background: @gray-bg; | |
| + | |
| + .module { | |
| + margin-bottom: 0; | |
| + .clearfix(); | |
| + } | |
| -} // .bio-popup | |
| + > iframe { | |
| + position: absolute; | |
| + top: 0; | |
| + bottom: 0; | |
| + left: 0; | |
| + right: 0; | |
| + width: 100%; | |
| + height: 100%; | |
| + } | |
| + | |
| +} // .fancybox-inner | |
| + | |
| +.fancybox-outer { | |
| + | |
| + .fancybox-nav { | |
| + height: 60%; | |
| + top: 20%; | |
| + } | |
| + | |
| +} | |
| + | |
| +.fancybox-skin { | |
| + | |
| + .fancybox-title-float-wrap { | |
| + top: 100%; | |
| + margin-bottom: 0; | |
| + margin-top: 30px; | |
| + width: 100%; | |
| + | |
| + .child { | |
| + width: 90%; | |
| + padding: 12px 90px 12px 14px; | |
| + line-height: 1.3; | |
| + white-space: normal; | |
| + text-align: left; | |
| + border-radius: 4px; | |
| + position: relative; | |
| + | |
| + .fancy-share-buttons { | |
| + position: absolute; | |
| + top: 0; | |
| + right: 20px; | |
| + bottom: 0; | |
| + | |
| + a { | |
| + font-size: 24px; | |
| + margin: 0 8px; | |
| + display: inline-block; | |
| + } | |
| + | |
| + } | |
| + | |
| + } | |
| + } | |
| +} | |
| /* ========================================================================== |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment