Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/d.js

Last active April 16, 2018 17:28
Show Gist options
  • Save naeluh/a4ab1aafb1f96334cdba9852964ee0fa to your computer and use it in GitHub Desktop.
Save naeluh/a4ab1aafb1f96334cdba9852964ee0fa to your computer and use it in GitHub Desktop.
Download ZIP
J. Paul Getty Docent Site// source https://jsbin.com/helonim
Raw
d.js
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');
});
};
Raw
index.html
<!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>
Raw
jsbin.helonim.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 */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment