-
-
Save naeluh/a4ab1aafb1f96334cdba9852964ee0fa to your computer and use it in GitHub Desktop.
J. Paul Getty Docent Site// source https://jsbin.com/helonim
This file contains hidden or 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
| window.onload = function() { | |
| var burger = document.querySelector('.burger'); | |
| burger.addEventListener('click', function(event) { | |
| document.getElementById('app').classList.toggle('slide-left'); | |
| document.querySelector('.burger').classList.toggle('is-active'); | |
| document.getElementById('navbarExampleTransparentExample').classList.toggle('is-active'); | |
| }); | |
| }; |
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>J. Paul Getty Docent Site</title> | |
| <link rel="stylesheet" type="text/css" href="https://blogs.getty.edu/docents2018/wp-content/themes/bulmapress-master/frontend/bulmapress/bulma.css"> | |
| <style id="jsbin-css"> | |
| /* navbar */ | |
| .navbar.is-fixed-top.is-signed-in { | |
| top: 32px | |
| } | |
| .navbar { | |
| min-height: 50px !important; | |
| max-height: 50px | |
| } | |
| .navbar, | |
| .navbar .navbar-menu { | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-menu .navbar-end .sign-in { | |
| margin-right: .5rem | |
| } | |
| .navbar .navbar-brand { | |
| padding: 0; | |
| margin: 0; | |
| min-height: 50px; | |
| max-height: 50px; | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-brand a.navbar-item { | |
| padding: 0; | |
| margin-right: 12px; | |
| min-height: 50px; | |
| max-height: 50px; | |
| background: none; | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-brand a.navbar-item:hover { | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-brand .navbar-burger span { | |
| color: #fff | |
| } | |
| .navbar .navbar-brand .navbar-item { | |
| padding: 0; | |
| margin: 0 | |
| } | |
| .navbar .navbar-brand .navbar-item img { | |
| height: 100%; | |
| width: 100%; | |
| max-height: 50px; | |
| max-width: 50px; | |
| } | |
| .navbar .navbar-dropdown { | |
| padding: 0; | |
| border-top: none; | |
| } | |
| .navbar .navbar-dropdown a.navbar-item { | |
| margin: 0; | |
| font-size: .75rem; | |
| font-weight: 100; | |
| color: #fff; | |
| border-radius: 0; | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| border-top: 1px solid #fff; | |
| } | |
| .navbar .navbar-dropdown a.navbar-item:hover { | |
| background-color: #32627b; | |
| color: #fff | |
| } | |
| .navbar a.navbar-item, | |
| div.navbar-end>div.navbar-item>a>span { | |
| margin: 5px 0; | |
| font-size: 14px; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 4px; | |
| margin-right: 5px; | |
| } | |
| .navbar a.navbar-item:hover, | |
| a.navbar-item.active { | |
| background-color: #32627b; | |
| } | |
| @media screen and (max-width:1145px) { | |
| #navbarExampleTransparentExample { | |
| background-color: #55a0c8; | |
| } | |
| .navbar .navbar-dropdown a.navbar-item { | |
| font-size: 14px; | |
| font-family: Univers LT W01_55 Roman1475956, Helvetica, Arial, Sans-Serif | |
| } | |
| .navbar a.navbar-item, | |
| div.navbar-end>div.navbar-item>a>span { | |
| font-size: 16px; | |
| font-family: Univers LT W01_65 Bold1475968, Helvetica, Arial, Sans-Serif; | |
| } | |
| .navbar.is-fixed-top.is-signed-in { | |
| top: 46px | |
| } | |
| .navbar.is-fixed-top .navbar-menu { | |
| right: 0; | |
| margin-left: 0; | |
| right: -100%; | |
| display: block | |
| } | |
| .navbar.is-fixed-top .navbar-menu, | |
| .navbar.is-fixed-top .navbar-menu.is-active { | |
| max-height: 100vh; | |
| position: absolute; | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear | |
| } | |
| .navbar.is-fixed-top .navbar-menu.is-active { | |
| right: 0; | |
| width: -webkit-calc(100% - 50px); | |
| width: calc(100% - 50px); | |
| margin-left: 50px | |
| } | |
| .navbar .navbar-brand a.navbar-item { | |
| margin-right: 0; | |
| border: none | |
| } | |
| .navbar .navbar-brand .navbar-burger:hover { | |
| background: none | |
| } | |
| .is-signed-in.navbar .navbar-menu { | |
| height: calc(100vh - 47px); | |
| } | |
| .navbar .navbar-menu { | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| position: absolute; | |
| width: calc(100vw - 50px); | |
| left: 100%; | |
| top: 0; | |
| overflow-y: scroll; | |
| height: 100vh; | |
| border-left: 1px solid #fff; | |
| border-right: 1px solid #fff; | |
| } | |
| .navbar .navbar-menu .navbar-end .navbar-item>a { | |
| background-color: #55a0c8; | |
| margin: 0; | |
| text-align: left; | |
| border-radius: 0; | |
| border: 1px solid #fff; | |
| padding: .5rem 1rem; | |
| display: block; | |
| border-left: none; | |
| margin-bottom: -1px; | |
| border-right: none; | |
| } | |
| .navbar .navbar-menu .navbar-end .navbar-item .is-grouped { | |
| width: 100%; | |
| display: block; | |
| background-color: #55a0c8 | |
| } | |
| .navbar .navbar-menu .navbar-end .navbar-item .is-grouped .control { | |
| margin: 0; | |
| border: 1px solid #fff; | |
| display: block; | |
| line-height: 1.5; | |
| padding: 1rem; | |
| position: relative | |
| } | |
| .navbar .navbar-menu .navbar-end .sign-in { | |
| margin-right: 0; | |
| background-color: #386f8c; | |
| padding: 1rem | |
| } | |
| .navbar .navbar-menu .has-dropdown .navbar-dropdown a.navbar-item, | |
| div.navbar-end>div.navbar-item>.navbar-dropdown a.navbar-item, | |
| .navbar .navbar-menu .navbar-end .has-dropdown .navbar-dropdown a.navbar-item { | |
| margin: 0; | |
| border-radius: 0; | |
| font-weight: 100; | |
| padding-left: 2rem; | |
| margin-bottom: -1px; | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| } | |
| div.navbar-end>div.navbar-item>.navbar-dropdown a.navbar-item { | |
| background-color: #55a0c8; | |
| } | |
| .navbar a.navbar-item { | |
| /*! font-weight: 900; */ | |
| margin: 0; | |
| text-align: left; | |
| border-radius: 0; | |
| border: 1px solid; | |
| padding: 12px; | |
| margin-bottom: -1px; | |
| background-color: #32627b; | |
| border-left: none; | |
| border-right: none; | |
| } | |
| .navbar-start>a:nth-child(1) { | |
| border-top: none; | |
| } | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| height: 50px; | |
| z-index: 9999; | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| height: 38px; | |
| background: #fff | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form input { | |
| font-family: Univers LT W01_55 Roman1475956, Helvetica, Arial, Sans-Serif; | |
| font-size: 1rem; | |
| -webkit-appearance: none; | |
| border-radius: 0; | |
| padding: 5px; | |
| border: none; | |
| display: inline-block | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form input:focus { | |
| border: none | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form button { | |
| display: inline-block | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form button img { | |
| cursor: pointer | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search .search-form { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search a.open-search { | |
| display: none | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search a.close-search { | |
| display: block; | |
| line-height: 0; | |
| margin-left: .5rem | |
| } | |
| .search-form { | |
| display: none | |
| } | |
| a.open-search { | |
| display: block; | |
| cursor: pointer; | |
| position: relative; | |
| margin-left: auto | |
| } | |
| a.close-search { | |
| display: none | |
| } | |
| @media screen and (max-width:1145px) { | |
| .navbar .navbar-menu .navbar-end .site-search-desktop { | |
| display: none | |
| } | |
| } | |
| .navbar-brand .site-search-mobile { | |
| display: none | |
| } | |
| .mobile-nav-text { | |
| display: none; | |
| } | |
| .desktop-nav-text { | |
| display: block; | |
| } | |
| .back-to-top { | |
| display: none; | |
| } | |
| /* @media screen and (max-width:1023px) {*/ | |
| @media screen and (max-width:1145px) { | |
| .back-to-top { | |
| right: 0; | |
| position: fixed; | |
| top: 50%; | |
| display: block; | |
| } | |
| .back-to-top.hide { | |
| display: none; | |
| } | |
| .mobile-nav-img { | |
| float: right; | |
| margin-top: 5px; | |
| } | |
| .mobile-nav-text { | |
| display: inline-block; | |
| vertical-align: bottom; | |
| } | |
| .desktop-nav-text { | |
| display: none; | |
| } | |
| .navbar-end .navbar-item { | |
| padding: 0; | |
| } | |
| .navbar-brand .site-search-mobile { | |
| margin-right: 0; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| width: -webkit-calc(100vw - 110px); | |
| width: calc(100vw - 110px); | |
| } | |
| .navbar-brand .site-search-mobile form { | |
| background: #fff | |
| } | |
| .navbar-brand .site-search-mobile form button image { | |
| fill: #386f8c | |
| } | |
| .navbar-brand .show-search-mobile { | |
| cursor: pointer; | |
| position: absolute; | |
| width: 100%; | |
| margin: 0; | |
| z-index: 9999; | |
| background-color: #386f8c; | |
| min-height: 50px; | |
| max-height: 50px; | |
| top: 0; | |
| left: 0; | |
| } | |
| .navbar-brand .show-search-mobile form { | |
| /* width: -webkit-calc(100% - 52px); */ | |
| width: calc(100% - 52px); | |
| position: absolute; | |
| margin-left: 10px; | |
| height: 38px; | |
| /* text-shadow: 0 0 #000; */ | |
| margin-top: 6px; | |
| top: 0; | |
| } | |
| .navbar-brand .show-search-mobile form input { | |
| font-family: Univers LT W01_55 Roman1475956, Helvetica, Arial, Sans-Serif; | |
| font-size: 1rem; | |
| -webkit-appearance: none; | |
| border-radius: 0; | |
| border: none; | |
| padding-left: 1rem; | |
| /* width: -webkit-calc(100vw - 100px); | |
| width: calc(100vw - 100px); */ | |
| width: 100%; | |
| /* position: absolute; */ | |
| background: #fff; | |
| /* top: 0; */ | |
| /* left: 0; */ | |
| height: 38px; | |
| } | |
| .navbar-brand .show-search-mobile form button { | |
| position: absolute; | |
| right: 0; | |
| top: 7px | |
| } | |
| .navbar .navbar-brand .show-search-mobile form button img { | |
| width: 19px; | |
| } | |
| .navbar-brand .show-search-mobile .search-form { | |
| display: block | |
| } | |
| .navbar-brand .show-search-mobile a.open-search { | |
| display: none | |
| } | |
| .navbar-brand .show-search-mobile a.close-search { | |
| display: block; | |
| line-height: 0; | |
| margin-left: 10px; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| padding: 14px 10px | |
| } | |
| .navbar .navbar-brand .show-search-mobile a.close-search img { | |
| width: 21px; | |
| } | |
| .search-form { | |
| display: none | |
| } | |
| a.open-search { | |
| display: block; | |
| cursor: pointer; | |
| position: relative; | |
| margin-left: auto | |
| } | |
| .navbar .navbar-brand .navbar-item a.open-search img { | |
| width: 19px; | |
| } | |
| a.close-search { | |
| display: none | |
| } | |
| } | |
| /* navbar */ | |
| /* footer */ | |
| .footer { | |
| background-color: #f5f5f5; | |
| padding: 3rem 1.5rem 6rem | |
| } | |
| footer { | |
| background-color: #f4f4f4 | |
| } | |
| footer .columns .column:last-child a.footer-links:after { | |
| content: "" | |
| } | |
| footer .columns .column a.footer-links { | |
| color: #8a8a8a; | |
| font-size: 11.2px; | |
| display: block; | |
| } | |
| footer>section>div>div>a>span.logo-text { | |
| font-size: 100%; | |
| position: absolute; | |
| color: #646464; | |
| font-family: "APHont", "Syntax Next W01", "Neue Helvetica W01", Helvetica, Arial, sans-serif; | |
| display: inline-block; | |
| font-size: 13px; | |
| width: 200px; | |
| top: -11px; | |
| left: 60px; | |
| } | |
| footer>section>div>div>a { | |
| position: relative; | |
| } | |
| [class*=" icon-"], | |
| [class^=icon-] { | |
| font-family: GettyWeb; | |
| font-weight: 400; | |
| font-style: normal; | |
| text-decoration: inherit; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .icon-getty-logo-r:before { | |
| content: "\e602"; | |
| } | |
| [class*=" icon-"]:before, | |
| [class^=icon-]:before { | |
| text-decoration: inherit; | |
| display: inline-block; | |
| speak: none; | |
| } | |
| @media print, | |
| screen and (min-width:767px) { | |
| footer .columns .column a.footer-links:after { | |
| content: "|"; | |
| margin: 0 1rem | |
| } | |
| } | |
| footer .columns .column a.footer-links { | |
| /* text-align: center; */ | |
| margin: 12px 0 0 0; | |
| } | |
| /* footer */ | |
| /* nav animation */ | |
| @media screen and (max-width:1145px) { | |
| body { | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear | |
| } | |
| .navbar .navbar-brand.slide-left { | |
| left: auto | |
| } | |
| .navbar .navbar-brand.slide-left, | |
| body>div.slide-left { | |
| right: 100%; | |
| margin-right: -50px; | |
| } | |
| .navbar .navbar-brand.slide-left, | |
| body>div.slide-left { | |
| position: fixed; | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear; | |
| width: 100%; | |
| } | |
| body>div { | |
| position: absolute; | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear; | |
| width: 100%; | |
| } | |
| body>div.slide-left>header.type-system-sans>nav.navbar>div.navbar-brand>div.site-search-mobile { | |
| display: none; | |
| } | |
| body>div { | |
| right: 0 | |
| } | |
| } | |
| /* nav animation */ | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <header class="type-system-sans"> | |
| <nav class="navbar"> | |
| <div class="navbar-brand"><a href="https://www.getty.edu/" target="_blank" class="navbar-item"><img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/gettylogo.svg"></a> | |
| <div class="navbar-item site-search site-search-mobile"> | |
| <input type="checkbox" id="hidden-check" style="display: none;"> <a href="#" id="open-search" class="open-search"><img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/icon_search.svg" alt="submit"></a> | |
| <form role="search" method="get" action="https://blogs.getty.edu/docents2018" name="form" class="search-form"> | |
| <input type="search" placeholder="Enter keyword(s)" name="s" id="sM" title="Search for:" class="search-field"> | |
| <button type="submit" style="border: 0px; background: transparent;"><img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/icon_search_blue.svg" alt="submit"></button> | |
| </form> | |
| <a href="#" class="close-search"><img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/icon_close.svg" alt="submit"></a></div> | |
| <div data-target="navbarExampleTransparentExample" class="navbar-burger burger" :class="{'is-active':this.active}" v-on:click="toggleMenu()"><span></span> <span></span> <span></span></div> | |
| </div> | |
| <div id="navbarExampleTransparentExample" class="navbar-menu" :class="{'is-active':this.active}"> | |
| <div class="navbar-start"><a href="https://blogs.getty.edu/docents2018/" class="navbar-item active">Docent Home</a><a href="https://blogs.getty.edu/docents2018/calendar-shifts/" class="navbar-item in-active-tree">Calendar and Shifts</a> | |
| <div target="_blank" href="https://blogs.getty.edu/docents2018/tour-prep/" class=" navbar-item has-dropdown is-hoverable in-active-tree"><a href="https://blogs.getty.edu/docents2018/tour-prep/" class="navbar-item in-active-tree">Tour Preparation</a> | |
| <div class="navbar-dropdown"><a href="https://blogs.getty.edu/docents2018/tour-prep?location=center" class="navbar-item in-active-tree">Center Tours</a><a href="https://blogs.getty.edu/docents2018/tour-prep?location=villa" class="navbar-item in-active-tree">Villa Tours</a></div> | |
| </div> | |
| <div target="_blank" href="https://blogs.getty.edu/docents2018/grow-your-skills/" class=" navbar-item has-dropdown is-hoverable in-active-tree"><a href="https://blogs.getty.edu/docents2018/grow-your-skills/" class="navbar-item in-active-tree">Grow Your Skills</a> | |
| <div class="navbar-dropdown"><a href="https://blogs.getty.edu/docents2018/grow_your_skills/conduct-research/" class="navbar-item in-active-tree">Conduct Research</a><a href="https://blogs.getty.edu/docents2018/pedagogy_resources/" class="navbar-item in-active-tree">Pedagogy Resources</a></div> | |
| </div> | |
| <div target="_blank" href="https://blogs.getty.edu/docents2018/docent-life/" class=" navbar-item has-dropdown is-hoverable in-active-tree"><a href="https://blogs.getty.edu/docents2018/docent-life/" class="navbar-item in-active-tree">Docent Life</a> | |
| <div class="navbar-dropdown"><a href="https://blogs.getty.edu/docents2018/community/" class="navbar-item in-active-tree">Community</a><a href="https://blogs.getty.edu/docents2018/docent-leadership-team/" class="navbar-item in-active-tree">Docent Leadership Team</a> | |
| <a href="https://blogs.getty.edu/docents2018/docent_profile/raul-nava/" class="navbar-item in-active-tree">Docent Profiles</a> | |
| </div> | |
| </div><a href="https://blogs.getty.edu/docents2018/contact-us/" class="navbar-item in-active-tree">Contact Us</a></div> | |
| <div class="navbar-end"> | |
| <div class="navbar-item site-search site-search-desktop"><a href="#" class="open-search"><img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/icon_search.svg" alt="submit"></a> | |
| <form role="search" method="get" action="https://blogs.getty.edu/docents2018" class="search-form"> | |
| <input type="search" placeholder="Enter keyword(s)" id="sD" name="s" title="Search for:" class="search-field"> | |
| <button type="submit" style="border: 0px; background: transparent;"><img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/icon_search_blue.svg" alt="submit"></button> | |
| </form> | |
| <a href="#" class="close-search"><img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/icon_close.svg" alt="submit"></a></div> | |
| <div class="navbar-item"><a href="#"><span class="mobile-nav-text">Directory</span> <img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/icon_dir.svg" class="mobile-nav-img"></a></div> | |
| <div class="navbar-item in-active-tree"><a href="https://blogs.getty.edu/docents2018/wp-admin/"><span class="mobile-nav-text">Sign In</span> <img src="https://blogs.getty.edu/docent/wp-content/themes/bulmapress-master/assets/icon_user.svg" class="mobile-nav-img"></a> | |
| <!----> | |
| </div> <a href="https://blogs.getty.edu/docents2018/wp-admin/" class="sign-in navbar-item Roman-55 desktop-nav-text"> | |
| Sign In | |
| </a></div> | |
| </div> | |
| </nav> | |
| </header> | |
| <footer class="type-system-sans section"> | |
| <section> | |
| <div class="columns"> | |
| <div class="column is-narrow"><a href="/docents2018"><img src="https://blogs.getty.edu/docents2018/wp-content/themes/bulmapress-master/assets/footerlogo.svg" class="logo"> <span class="logo-text">The J. Paul Getty Trust</span></a></div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="columns is-narrow is-gapless"> | |
| <div class="column is-narrow"><a href="http://www.getty.edu/" target="_blank" class="footer-links active">© J. Paul Getty Trust</a></div> | |
| <div class="column is-narrow"><a href="http://www.getty.edu/legal/privacy.html" target="_blank" class="footer-links active">Privacy Policy</a></div> | |
| <div class="column is-narrow"><a href="http://www.getty.edu/legal/copyright.html" target="_blank" class="footer-links active">Terms of Use</a></div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="columns is-narrow is-gapless"> | |
| <div class="column is-narrow"><a href="https://blogs.getty.edu/docents2018/" target="_blank" class="footer-links active">Docent Home</a></div> | |
| <div class="column is-narrow"><a href="https://blogs.getty.edu/docents2018/calendar-shifts/" target="_blank" class="footer-links active">Calendar and Shifts</a></div> | |
| <div class="column is-narrow"><a href="https://blogs.getty.edu/docents2018/tour-prep/" target="_blank" class="footer-links active">Tour Preparation</a></div> | |
| <div class="column is-narrow"><a href="https://blogs.getty.edu/docents2018/contact-us/" target="_blank" class="footer-links active">Contact Us</a></div> | |
| </div> | |
| </section> | |
| </footer> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| window.onload = function() { | |
| var burger = document.querySelector('.burger'); | |
| burger.addEventListener('click', function(event) { | |
| document.getElementById('app').classList.toggle('slide-left'); | |
| document.querySelector('.burger').classList.toggle('is-active'); | |
| document.getElementById('navbarExampleTransparentExample').classList.toggle('is-active'); | |
| }); | |
| }; | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">/* navbar */ | |
| .navbar.is-fixed-top.is-signed-in { | |
| top: 32px | |
| } | |
| .navbar { | |
| min-height: 50px !important; | |
| max-height: 50px | |
| } | |
| .navbar, | |
| .navbar .navbar-menu { | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-menu .navbar-end .sign-in { | |
| margin-right: .5rem | |
| } | |
| .navbar .navbar-brand { | |
| padding: 0; | |
| margin: 0; | |
| min-height: 50px; | |
| max-height: 50px; | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-brand a.navbar-item { | |
| padding: 0; | |
| margin-right: 12px; | |
| min-height: 50px; | |
| max-height: 50px; | |
| background: none; | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-brand a.navbar-item:hover { | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-brand .navbar-burger span { | |
| color: #fff | |
| } | |
| .navbar .navbar-brand .navbar-item { | |
| padding: 0; | |
| margin: 0 | |
| } | |
| .navbar .navbar-brand .navbar-item img { | |
| height: 100%; | |
| width: 100%; | |
| max-height: 50px; | |
| max-width: 50px; | |
| } | |
| .navbar .navbar-dropdown { | |
| padding: 0; | |
| border-top: none; | |
| } | |
| .navbar .navbar-dropdown a.navbar-item { | |
| margin: 0; | |
| font-size: .75rem; | |
| font-weight: 100; | |
| color: #fff; | |
| border-radius: 0; | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| border-top: 1px solid #fff; | |
| } | |
| .navbar .navbar-dropdown a.navbar-item:hover { | |
| background-color: #32627b; | |
| color: #fff | |
| } | |
| .navbar a.navbar-item, | |
| div.navbar-end>div.navbar-item>a>span { | |
| margin: 5px 0; | |
| font-size: 14px; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 4px; | |
| margin-right: 5px; | |
| } | |
| .navbar a.navbar-item:hover, | |
| a.navbar-item.active { | |
| background-color: #32627b; | |
| } | |
| @media screen and (max-width:1145px) { | |
| #navbarExampleTransparentExample { | |
| background-color: #55a0c8; | |
| } | |
| .navbar .navbar-dropdown a.navbar-item { | |
| font-size: 14px; | |
| font-family: Univers LT W01_55 Roman1475956, Helvetica, Arial, Sans-Serif | |
| } | |
| .navbar a.navbar-item, | |
| div.navbar-end>div.navbar-item>a>span { | |
| font-size: 16px; | |
| font-family: Univers LT W01_65 Bold1475968, Helvetica, Arial, Sans-Serif; | |
| } | |
| .navbar.is-fixed-top.is-signed-in { | |
| top: 46px | |
| } | |
| .navbar.is-fixed-top .navbar-menu { | |
| right: 0; | |
| margin-left: 0; | |
| right: -100%; | |
| display: block | |
| } | |
| .navbar.is-fixed-top .navbar-menu, | |
| .navbar.is-fixed-top .navbar-menu.is-active { | |
| max-height: 100vh; | |
| position: absolute; | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear | |
| } | |
| .navbar.is-fixed-top .navbar-menu.is-active { | |
| right: 0; | |
| width: -webkit-calc(100% - 50px); | |
| width: calc(100% - 50px); | |
| margin-left: 50px | |
| } | |
| .navbar .navbar-brand a.navbar-item { | |
| margin-right: 0; | |
| border: none | |
| } | |
| .navbar .navbar-brand .navbar-burger:hover { | |
| background: none | |
| } | |
| .is-signed-in.navbar .navbar-menu { | |
| height: calc(100vh - 47px); | |
| } | |
| .navbar .navbar-menu { | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| position: absolute; | |
| width: calc(100vw - 50px); | |
| left: 100%; | |
| top: 0; | |
| overflow-y: scroll; | |
| height: 100vh; | |
| border-left: 1px solid #fff; | |
| border-right: 1px solid #fff; | |
| } | |
| .navbar .navbar-menu .navbar-end .navbar-item>a { | |
| background-color: #55a0c8; | |
| margin: 0; | |
| text-align: left; | |
| border-radius: 0; | |
| border: 1px solid #fff; | |
| padding: .5rem 1rem; | |
| display: block; | |
| border-left: none; | |
| margin-bottom: -1px; | |
| border-right: none; | |
| } | |
| .navbar .navbar-menu .navbar-end .navbar-item .is-grouped { | |
| width: 100%; | |
| display: block; | |
| background-color: #55a0c8 | |
| } | |
| .navbar .navbar-menu .navbar-end .navbar-item .is-grouped .control { | |
| margin: 0; | |
| border: 1px solid #fff; | |
| display: block; | |
| line-height: 1.5; | |
| padding: 1rem; | |
| position: relative | |
| } | |
| .navbar .navbar-menu .navbar-end .sign-in { | |
| margin-right: 0; | |
| background-color: #386f8c; | |
| padding: 1rem | |
| } | |
| .navbar .navbar-menu .has-dropdown .navbar-dropdown a.navbar-item, | |
| div.navbar-end>div.navbar-item>.navbar-dropdown a.navbar-item, | |
| .navbar .navbar-menu .navbar-end .has-dropdown .navbar-dropdown a.navbar-item { | |
| margin: 0; | |
| border-radius: 0; | |
| font-weight: 100; | |
| padding-left: 2rem; | |
| margin-bottom: -1px; | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| } | |
| div.navbar-end>div.navbar-item>.navbar-dropdown a.navbar-item { | |
| background-color: #55a0c8; | |
| } | |
| .navbar a.navbar-item { | |
| /*! font-weight: 900; */ | |
| margin: 0; | |
| text-align: left; | |
| border-radius: 0; | |
| border: 1px solid; | |
| padding: 12px; | |
| margin-bottom: -1px; | |
| background-color: #32627b; | |
| border-left: none; | |
| border-right: none; | |
| } | |
| .navbar-start>a:nth-child(1) { | |
| border-top: none; | |
| } | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| height: 50px; | |
| z-index: 9999; | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| height: 38px; | |
| background: #fff | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form input { | |
| font-family: Univers LT W01_55 Roman1475956, Helvetica, Arial, Sans-Serif; | |
| font-size: 1rem; | |
| -webkit-appearance: none; | |
| border-radius: 0; | |
| padding: 5px; | |
| border: none; | |
| display: inline-block | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form input:focus { | |
| border: none | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form button { | |
| display: inline-block | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form button img { | |
| cursor: pointer | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search .search-form { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search a.open-search { | |
| display: none | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search a.close-search { | |
| display: block; | |
| line-height: 0; | |
| margin-left: .5rem | |
| } | |
| .search-form { | |
| display: none | |
| } | |
| a.open-search { | |
| display: block; | |
| cursor: pointer; | |
| position: relative; | |
| margin-left: auto | |
| } | |
| a.close-search { | |
| display: none | |
| } | |
| @media screen and (max-width:1145px) { | |
| .navbar .navbar-menu .navbar-end .site-search-desktop { | |
| display: none | |
| } | |
| } | |
| .navbar-brand .site-search-mobile { | |
| display: none | |
| } | |
| .mobile-nav-text { | |
| display: none; | |
| } | |
| .desktop-nav-text { | |
| display: block; | |
| } | |
| .back-to-top { | |
| display: none; | |
| } | |
| /* @media screen and (max-width:1023px) {*/ | |
| @media screen and (max-width:1145px) { | |
| .back-to-top { | |
| right: 0; | |
| position: fixed; | |
| top: 50%; | |
| display: block; | |
| } | |
| .back-to-top.hide { | |
| display: none; | |
| } | |
| .mobile-nav-img { | |
| float: right; | |
| margin-top: 5px; | |
| } | |
| .mobile-nav-text { | |
| display: inline-block; | |
| vertical-align: bottom; | |
| } | |
| .desktop-nav-text { | |
| display: none; | |
| } | |
| .navbar-end .navbar-item { | |
| padding: 0; | |
| } | |
| .navbar-brand .site-search-mobile { | |
| margin-right: 0; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| width: -webkit-calc(100vw - 110px); | |
| width: calc(100vw - 110px); | |
| } | |
| .navbar-brand .site-search-mobile form { | |
| background: #fff | |
| } | |
| .navbar-brand .site-search-mobile form button image { | |
| fill: #386f8c | |
| } | |
| .navbar-brand .show-search-mobile { | |
| cursor: pointer; | |
| position: absolute; | |
| width: 100%; | |
| margin: 0; | |
| z-index: 9999; | |
| background-color: #386f8c; | |
| min-height: 50px; | |
| max-height: 50px; | |
| top: 0; | |
| left: 0; | |
| } | |
| .navbar-brand .show-search-mobile form { | |
| /* width: -webkit-calc(100% - 52px); */ | |
| width: calc(100% - 52px); | |
| position: absolute; | |
| margin-left: 10px; | |
| height: 38px; | |
| /* text-shadow: 0 0 #000; */ | |
| margin-top: 6px; | |
| top: 0; | |
| } | |
| .navbar-brand .show-search-mobile form input { | |
| font-family: Univers LT W01_55 Roman1475956, Helvetica, Arial, Sans-Serif; | |
| font-size: 1rem; | |
| -webkit-appearance: none; | |
| border-radius: 0; | |
| border: none; | |
| padding-left: 1rem; | |
| /* width: -webkit-calc(100vw - 100px); | |
| width: calc(100vw - 100px); */ | |
| width: 100%; | |
| /* position: absolute; */ | |
| background: #fff; | |
| /* top: 0; */ | |
| /* left: 0; */ | |
| height: 38px; | |
| } | |
| .navbar-brand .show-search-mobile form button { | |
| position: absolute; | |
| right: 0; | |
| top: 7px | |
| } | |
| .navbar .navbar-brand .show-search-mobile form button img { | |
| width: 19px; | |
| } | |
| .navbar-brand .show-search-mobile .search-form { | |
| display: block | |
| } | |
| .navbar-brand .show-search-mobile a.open-search { | |
| display: none | |
| } | |
| .navbar-brand .show-search-mobile a.close-search { | |
| display: block; | |
| line-height: 0; | |
| margin-left: 10px; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| padding: 14px 10px | |
| } | |
| .navbar .navbar-brand .show-search-mobile a.close-search img { | |
| width: 21px; | |
| } | |
| .search-form { | |
| display: none | |
| } | |
| a.open-search { | |
| display: block; | |
| cursor: pointer; | |
| position: relative; | |
| margin-left: auto | |
| } | |
| .navbar .navbar-brand .navbar-item a.open-search img { | |
| width: 19px; | |
| } | |
| a.close-search { | |
| display: none | |
| } | |
| } | |
| /* navbar */ | |
| /* footer */ | |
| .footer { | |
| background-color: #f5f5f5; | |
| padding: 3rem 1.5rem 6rem | |
| } | |
| footer { | |
| background-color: #f4f4f4 | |
| } | |
| footer .columns .column:last-child a.footer-links:after { | |
| content: "" | |
| } | |
| footer .columns .column a.footer-links { | |
| color: #8a8a8a; | |
| font-size: 11.2px; | |
| display: block; | |
| } | |
| footer>section>div>div>a>span.logo-text { | |
| font-size: 100%; | |
| position: absolute; | |
| color: #646464; | |
| font-family: "APHont", "Syntax Next W01", "Neue Helvetica W01", Helvetica, Arial, sans-serif; | |
| display: inline-block; | |
| font-size: 13px; | |
| width: 200px; | |
| top: -11px; | |
| left: 60px; | |
| } | |
| footer>section>div>div>a { | |
| position: relative; | |
| } | |
| [class*=" icon-"], | |
| [class^=icon-] { | |
| font-family: GettyWeb; | |
| font-weight: 400; | |
| font-style: normal; | |
| text-decoration: inherit; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .icon-getty-logo-r:before { | |
| content: "\e602"; | |
| } | |
| [class*=" icon-"]:before, | |
| [class^=icon-]:before { | |
| text-decoration: inherit; | |
| display: inline-block; | |
| speak: none; | |
| } | |
| @media print, | |
| screen and (min-width:767px) { | |
| footer .columns .column a.footer-links:after { | |
| content: "|"; | |
| margin: 0 1rem | |
| } | |
| } | |
| footer .columns .column a.footer-links { | |
| /* text-align: center; */ | |
| margin: 12px 0 0 0; | |
| } | |
| /* footer */ | |
| /* nav animation */ | |
| @media screen and (max-width:1145px) { | |
| body { | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear | |
| } | |
| .navbar .navbar-brand.slide-left { | |
| left: auto | |
| } | |
| .navbar .navbar-brand.slide-left, | |
| body>div.slide-left { | |
| right: 100%; | |
| margin-right: -50px; | |
| } | |
| .navbar .navbar-brand.slide-left, | |
| body>div.slide-left { | |
| position: fixed; | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear; | |
| width: 100%; | |
| } | |
| body>div { | |
| position: absolute; | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear; | |
| width: 100%; | |
| } | |
| body>div.slide-left>header.type-system-sans>nav.navbar>div.navbar-brand>div.site-search-mobile { | |
| display: none; | |
| } | |
| body>div { | |
| right: 0 | |
| } | |
| } | |
| /* nav animation */ | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">window.onload = function() { | |
| var burger = document.querySelector('.burger'); | |
| burger.addEventListener('click', function(event) { | |
| document.getElementById('app').classList.toggle('slide-left'); | |
| document.querySelector('.burger').classList.toggle('is-active'); | |
| document.getElementById('navbarExampleTransparentExample').classList.toggle('is-active'); | |
| }); | |
| }; | |
| </script></body> | |
| </html> |
This file contains hidden or 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
| /* navbar */ | |
| .navbar.is-fixed-top.is-signed-in { | |
| top: 32px | |
| } | |
| .navbar { | |
| min-height: 50px !important; | |
| max-height: 50px | |
| } | |
| .navbar, | |
| .navbar .navbar-menu { | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-menu .navbar-end .sign-in { | |
| margin-right: .5rem | |
| } | |
| .navbar .navbar-brand { | |
| padding: 0; | |
| margin: 0; | |
| min-height: 50px; | |
| max-height: 50px; | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-brand a.navbar-item { | |
| padding: 0; | |
| margin-right: 12px; | |
| min-height: 50px; | |
| max-height: 50px; | |
| background: none; | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-brand a.navbar-item:hover { | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-brand .navbar-burger span { | |
| color: #fff | |
| } | |
| .navbar .navbar-brand .navbar-item { | |
| padding: 0; | |
| margin: 0 | |
| } | |
| .navbar .navbar-brand .navbar-item img { | |
| height: 100%; | |
| width: 100%; | |
| max-height: 50px; | |
| max-width: 50px; | |
| } | |
| .navbar .navbar-dropdown { | |
| padding: 0; | |
| border-top: none; | |
| } | |
| .navbar .navbar-dropdown a.navbar-item { | |
| margin: 0; | |
| font-size: .75rem; | |
| font-weight: 100; | |
| color: #fff; | |
| border-radius: 0; | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| border-top: 1px solid #fff; | |
| } | |
| .navbar .navbar-dropdown a.navbar-item:hover { | |
| background-color: #32627b; | |
| color: #fff | |
| } | |
| .navbar a.navbar-item, | |
| div.navbar-end>div.navbar-item>a>span { | |
| margin: 5px 0; | |
| font-size: 14px; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 4px; | |
| margin-right: 5px; | |
| } | |
| .navbar a.navbar-item:hover, | |
| a.navbar-item.active { | |
| background-color: #32627b; | |
| } | |
| @media screen and (max-width:1145px) { | |
| #navbarExampleTransparentExample { | |
| background-color: #55a0c8; | |
| } | |
| .navbar .navbar-dropdown a.navbar-item { | |
| font-size: 14px; | |
| font-family: Univers LT W01_55 Roman1475956, Helvetica, Arial, Sans-Serif | |
| } | |
| .navbar a.navbar-item, | |
| div.navbar-end>div.navbar-item>a>span { | |
| font-size: 16px; | |
| font-family: Univers LT W01_65 Bold1475968, Helvetica, Arial, Sans-Serif; | |
| } | |
| .navbar.is-fixed-top.is-signed-in { | |
| top: 46px | |
| } | |
| .navbar.is-fixed-top .navbar-menu { | |
| right: 0; | |
| margin-left: 0; | |
| right: -100%; | |
| display: block | |
| } | |
| .navbar.is-fixed-top .navbar-menu, | |
| .navbar.is-fixed-top .navbar-menu.is-active { | |
| max-height: 100vh; | |
| position: absolute; | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear | |
| } | |
| .navbar.is-fixed-top .navbar-menu.is-active { | |
| right: 0; | |
| width: -webkit-calc(100% - 50px); | |
| width: calc(100% - 50px); | |
| margin-left: 50px | |
| } | |
| .navbar .navbar-brand a.navbar-item { | |
| margin-right: 0; | |
| border: none | |
| } | |
| .navbar .navbar-brand .navbar-burger:hover { | |
| background: none | |
| } | |
| .is-signed-in.navbar .navbar-menu { | |
| height: calc(100vh - 47px); | |
| } | |
| .navbar .navbar-menu { | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| -webkit-box-shadow: none; | |
| box-shadow: none; | |
| position: absolute; | |
| width: calc(100vw - 50px); | |
| left: 100%; | |
| top: 0; | |
| overflow-y: scroll; | |
| height: 100vh; | |
| border-left: 1px solid #fff; | |
| border-right: 1px solid #fff; | |
| } | |
| .navbar .navbar-menu .navbar-end .navbar-item>a { | |
| background-color: #55a0c8; | |
| margin: 0; | |
| text-align: left; | |
| border-radius: 0; | |
| border: 1px solid #fff; | |
| padding: .5rem 1rem; | |
| display: block; | |
| border-left: none; | |
| margin-bottom: -1px; | |
| border-right: none; | |
| } | |
| .navbar .navbar-menu .navbar-end .navbar-item .is-grouped { | |
| width: 100%; | |
| display: block; | |
| background-color: #55a0c8 | |
| } | |
| .navbar .navbar-menu .navbar-end .navbar-item .is-grouped .control { | |
| margin: 0; | |
| border: 1px solid #fff; | |
| display: block; | |
| line-height: 1.5; | |
| padding: 1rem; | |
| position: relative | |
| } | |
| .navbar .navbar-menu .navbar-end .sign-in { | |
| margin-right: 0; | |
| background-color: #386f8c; | |
| padding: 1rem | |
| } | |
| .navbar .navbar-menu .has-dropdown .navbar-dropdown a.navbar-item, | |
| div.navbar-end>div.navbar-item>.navbar-dropdown a.navbar-item, | |
| .navbar .navbar-menu .navbar-end .has-dropdown .navbar-dropdown a.navbar-item { | |
| margin: 0; | |
| border-radius: 0; | |
| font-weight: 100; | |
| padding-left: 2rem; | |
| margin-bottom: -1px; | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; | |
| } | |
| div.navbar-end>div.navbar-item>.navbar-dropdown a.navbar-item { | |
| background-color: #55a0c8; | |
| } | |
| .navbar a.navbar-item { | |
| /*! font-weight: 900; */ | |
| margin: 0; | |
| text-align: left; | |
| border-radius: 0; | |
| border: 1px solid; | |
| padding: 12px; | |
| margin-bottom: -1px; | |
| background-color: #32627b; | |
| border-left: none; | |
| border-right: none; | |
| } | |
| .navbar-start>a:nth-child(1) { | |
| border-top: none; | |
| } | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| height: 50px; | |
| z-index: 9999; | |
| background-color: #386f8c | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| height: 38px; | |
| background: #fff | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form input { | |
| font-family: Univers LT W01_55 Roman1475956, Helvetica, Arial, Sans-Serif; | |
| font-size: 1rem; | |
| -webkit-appearance: none; | |
| border-radius: 0; | |
| padding: 5px; | |
| border: none; | |
| display: inline-block | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form input:focus { | |
| border: none | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form button { | |
| display: inline-block | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search form button img { | |
| cursor: pointer | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search .search-form { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search a.open-search { | |
| display: none | |
| } | |
| .navbar .navbar-menu .navbar-end .show-search a.close-search { | |
| display: block; | |
| line-height: 0; | |
| margin-left: .5rem | |
| } | |
| .search-form { | |
| display: none | |
| } | |
| a.open-search { | |
| display: block; | |
| cursor: pointer; | |
| position: relative; | |
| margin-left: auto | |
| } | |
| a.close-search { | |
| display: none | |
| } | |
| @media screen and (max-width:1145px) { | |
| .navbar .navbar-menu .navbar-end .site-search-desktop { | |
| display: none | |
| } | |
| } | |
| .navbar-brand .site-search-mobile { | |
| display: none | |
| } | |
| .mobile-nav-text { | |
| display: none; | |
| } | |
| .desktop-nav-text { | |
| display: block; | |
| } | |
| .back-to-top { | |
| display: none; | |
| } | |
| /* @media screen and (max-width:1023px) {*/ | |
| @media screen and (max-width:1145px) { | |
| .back-to-top { | |
| right: 0; | |
| position: fixed; | |
| top: 50%; | |
| display: block; | |
| } | |
| .back-to-top.hide { | |
| display: none; | |
| } | |
| .mobile-nav-img { | |
| float: right; | |
| margin-top: 5px; | |
| } | |
| .mobile-nav-text { | |
| display: inline-block; | |
| vertical-align: bottom; | |
| } | |
| .desktop-nav-text { | |
| display: none; | |
| } | |
| .navbar-end .navbar-item { | |
| padding: 0; | |
| } | |
| .navbar-brand .site-search-mobile { | |
| margin-right: 0; | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| width: -webkit-calc(100vw - 110px); | |
| width: calc(100vw - 110px); | |
| } | |
| .navbar-brand .site-search-mobile form { | |
| background: #fff | |
| } | |
| .navbar-brand .site-search-mobile form button image { | |
| fill: #386f8c | |
| } | |
| .navbar-brand .show-search-mobile { | |
| cursor: pointer; | |
| position: absolute; | |
| width: 100%; | |
| margin: 0; | |
| z-index: 9999; | |
| background-color: #386f8c; | |
| min-height: 50px; | |
| max-height: 50px; | |
| top: 0; | |
| left: 0; | |
| } | |
| .navbar-brand .show-search-mobile form { | |
| /* width: -webkit-calc(100% - 52px); */ | |
| width: calc(100% - 52px); | |
| position: absolute; | |
| margin-left: 10px; | |
| height: 38px; | |
| /* text-shadow: 0 0 #000; */ | |
| margin-top: 6px; | |
| top: 0; | |
| } | |
| .navbar-brand .show-search-mobile form input { | |
| font-family: Univers LT W01_55 Roman1475956, Helvetica, Arial, Sans-Serif; | |
| font-size: 1rem; | |
| -webkit-appearance: none; | |
| border-radius: 0; | |
| border: none; | |
| padding-left: 1rem; | |
| /* width: -webkit-calc(100vw - 100px); | |
| width: calc(100vw - 100px); */ | |
| width: 100%; | |
| /* position: absolute; */ | |
| background: #fff; | |
| /* top: 0; */ | |
| /* left: 0; */ | |
| height: 38px; | |
| } | |
| .navbar-brand .show-search-mobile form button { | |
| position: absolute; | |
| right: 0; | |
| top: 7px | |
| } | |
| .navbar .navbar-brand .show-search-mobile form button img { | |
| width: 19px; | |
| } | |
| .navbar-brand .show-search-mobile .search-form { | |
| display: block | |
| } | |
| .navbar-brand .show-search-mobile a.open-search { | |
| display: none | |
| } | |
| .navbar-brand .show-search-mobile a.close-search { | |
| display: block; | |
| line-height: 0; | |
| margin-left: 10px; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| padding: 14px 10px | |
| } | |
| .navbar .navbar-brand .show-search-mobile a.close-search img { | |
| width: 21px; | |
| } | |
| .search-form { | |
| display: none | |
| } | |
| a.open-search { | |
| display: block; | |
| cursor: pointer; | |
| position: relative; | |
| margin-left: auto | |
| } | |
| .navbar .navbar-brand .navbar-item a.open-search img { | |
| width: 19px; | |
| } | |
| a.close-search { | |
| display: none | |
| } | |
| } | |
| /* navbar */ | |
| /* footer */ | |
| .footer { | |
| background-color: #f5f5f5; | |
| padding: 3rem 1.5rem 6rem | |
| } | |
| footer { | |
| background-color: #f4f4f4 | |
| } | |
| footer .columns .column:last-child a.footer-links:after { | |
| content: "" | |
| } | |
| footer .columns .column a.footer-links { | |
| color: #8a8a8a; | |
| font-size: 11.2px; | |
| display: block; | |
| } | |
| footer>section>div>div>a>span.logo-text { | |
| font-size: 100%; | |
| position: absolute; | |
| color: #646464; | |
| font-family: "APHont", "Syntax Next W01", "Neue Helvetica W01", Helvetica, Arial, sans-serif; | |
| display: inline-block; | |
| font-size: 13px; | |
| width: 200px; | |
| top: -11px; | |
| left: 60px; | |
| } | |
| footer>section>div>div>a { | |
| position: relative; | |
| } | |
| [class*=" icon-"], | |
| [class^=icon-] { | |
| font-family: GettyWeb; | |
| font-weight: 400; | |
| font-style: normal; | |
| text-decoration: inherit; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .icon-getty-logo-r:before { | |
| content: "\e602"; | |
| } | |
| [class*=" icon-"]:before, | |
| [class^=icon-]:before { | |
| text-decoration: inherit; | |
| display: inline-block; | |
| speak: none; | |
| } | |
| @media print, | |
| screen and (min-width:767px) { | |
| footer .columns .column a.footer-links:after { | |
| content: "|"; | |
| margin: 0 1rem | |
| } | |
| } | |
| footer .columns .column a.footer-links { | |
| /* text-align: center; */ | |
| margin: 12px 0 0 0; | |
| } | |
| /* footer */ | |
| /* nav animation */ | |
| @media screen and (max-width:1145px) { | |
| body { | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear | |
| } | |
| .navbar .navbar-brand.slide-left { | |
| left: auto | |
| } | |
| .navbar .navbar-brand.slide-left, | |
| body>div.slide-left { | |
| right: 100%; | |
| margin-right: -50px; | |
| } | |
| .navbar .navbar-brand.slide-left, | |
| body>div.slide-left { | |
| position: fixed; | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear; | |
| width: 100%; | |
| } | |
| body>div { | |
| position: absolute; | |
| -webkit-transition: all .1s linear; | |
| transition: all .1s linear; | |
| width: 100%; | |
| } | |
| body>div.slide-left>header.type-system-sans>nav.navbar>div.navbar-brand>div.site-search-mobile { | |
| display: none; | |
| } | |
| body>div { | |
| right: 0 | |
| } | |
| } | |
| /* nav animation */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment