| /* ========================================================================== |
| MASTHEAD |
| ========================================================================== */ |
| |
| .masthead { |
| background-color: $masthead-background-color; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| -webkit-animation: intro 0.3s both; |
| animation: intro 0.3s both; |
| -webkit-animation-delay: 0.15s; |
| animation-delay: 0.15s; |
| z-index: 20; |
| |
| &__inner-wrap { |
| @include container; |
| @include clearfix; |
| display: -webkit-box; |
| display: flex; |
| -webkit-box-pack: justify; |
| justify-content: space-between; |
| font-family: $sans-serif-narrow; |
| margin-left: 10%; |
| margin-right: 10%; |
| |
| @include breakpoint($x-large) { |
| max-width: $x-large; |
| } |
| |
| nav { |
| z-index: 10; |
| } |
| |
| a { |
| text-decoration: none; |
| } |
| } |
| } |
| |
| .site-title { |
| display: -webkit-box; |
| display: flex; |
| align-self: stretch; |
| -webkit-box-align: center; |
| align-items: center; |
| z-index: 20; |
| |
| img { |
| width: 300px; |
| height: 50px; |
| } |
| } |
| |
| .greedy-nav { |
| a.site-title { |
| margin-right: 0; |
| padding: 0 0; |
| } |
| } |
| |
| .masthead__menu { |
| width: 100%; |
| |
| .site-nav { |
| margin-left: 0; |
| |
| @include breakpoint($small) { |
| float: right; |
| } |
| } |
| |
| ul { |
| margin: 0; |
| padding: 0; |
| clear: both; |
| list-style-type: none; |
| } |
| } |
| |
| .masthead__menu-item { |
| display: block; |
| list-style-type: none; |
| white-space: nowrap; |
| |
| &--lg { |
| padding-right: 2em; |
| font-weight: 700; |
| } |
| } |
| |
| .def-nav-li { |
| display: block; |
| list-style-type: none; |
| white-space: nowrap; |
| |
| .def-children-show-en { |
| display: none; |
| position: absolute; |
| top: 55px; |
| width: 140px; |
| |
| li { |
| background: #000; |
| opacity: 0.8; |
| padding: 10px 20px; |
| margin-bottom: 1px; |
| |
| a { |
| width: 100%; |
| } |
| } |
| } |
| |
| .def-children-show-cn { |
| display: none; |
| position: absolute; |
| top: 55px; |
| width: 108px; |
| |
| li { |
| background: #000; |
| opacity: 0.8; |
| padding: 10px 20px; |
| margin-bottom: 1px; |
| |
| a { |
| width: 100%; |
| } |
| } |
| } |
| } |