| html.is-clipped--navbar { |
| overflow-y: hidden; |
| } |
| |
| body { |
| padding-top: var(--navbar-height); |
| } |
| |
| .navbar { |
| background: var(--navbar-background); |
| color: var(--navbar-font-color); |
| font-size: calc(16 / var(--rem-base) * 1rem); |
| height: var(--navbar-height); |
| position: fixed; |
| top: 0; |
| width: 100%; |
| word-wrap: break-word; |
| z-index: var(--z-index-navbar); |
| border-bottom: 1px solid var(--color-smoke-90); |
| } |
| |
| .homepage .navbar { |
| box-shadow: 0 0.5rem 3rem var(--color-smoke-70); |
| } |
| |
| .navbar a { |
| text-decoration: none; |
| } |
| |
| .navbar-brand .separator { |
| padding: 0 0.375rem; |
| } |
| |
| @media screen and (min-width: 1024px) { |
| .navbar-end > .navbar-item, |
| .navbar-end .navbar-link { |
| color: var(--navbar-font-color); |
| } |
| |
| .navbar-end > a.navbar-item:hover, |
| .navbar-end .navbar-link:hover { |
| background: var(--navbar-hover-background); |
| color: var(--navbar-hover-font-color); |
| } |
| |
| .navbar-end .navbar-link::after { |
| border-color: var(--navbar-font-color); |
| } |
| |
| .navbar-item.has-dropdown:hover .navbar-link { |
| background: var(--navbar-hover-background); |
| color: var(--navbar-hover-font-color); |
| } |
| } |
| |
| .navbar-brand { |
| align-items: stretch; |
| display: flex; |
| flex-grow: 1; |
| height: var(--navbar-height); |
| } |
| |
| .navbar-burger { |
| color: var(--navbar-font-color); |
| background: none; |
| border: none; |
| outline: none; |
| line-height: 1; |
| height: var(--navbar-height); |
| position: relative; |
| /* width: var(--navbar-height); */ |
| width: 2.75rem; |
| margin-left: auto; |
| padding: 0; |
| } |
| |
| .navbar-burger:focus { |
| outline: none; |
| } |
| |
| .navbar-burger span { |
| background: var(--navbar-font-color); |
| display: block; |
| height: 1px; |
| left: 50%; |
| margin-left: -7px; |
| position: absolute; |
| top: 50%; |
| width: 15px; |
| } |
| |
| .navbar-burger span:nth-child(1) { |
| margin-top: -6px; |
| } |
| |
| .navbar-burger span:nth-child(2) { |
| margin-top: -1px; |
| } |
| |
| .navbar-burger span:nth-child(3) { |
| margin-top: 4px; |
| } |
| |
| .navbar-burger.is-active span:nth-child(1) { |
| margin-left: -5px; |
| transform: rotate(45deg); |
| transform-origin: left top; |
| } |
| |
| .navbar-burger.is-active span:nth-child(2) { |
| opacity: 0; |
| } |
| |
| .navbar-burger.is-active span:nth-child(3) { |
| margin-left: -5px; |
| transform: rotate(-45deg); |
| transform-origin: left bottom; |
| } |
| |
| .navbar-menu { |
| display: none; |
| } |
| |
| .navbar-item, |
| .navbar-link { |
| color: var(--navbar-menu-font-color); |
| display: block; |
| line-height: var(--doc-line-height); |
| padding: 0.5rem 0.5rem; |
| position: relative; |
| } |
| |
| .navbar-item { |
| flex: none; |
| margin-bottom: 1px; |
| padding-right: 1.5rem; |
| } |
| |
| .navbar-item.has-dropdown { |
| padding: 0; |
| } |
| |
| .navbar-item .icon { |
| width: 1.1rem; |
| height: 1.1rem; |
| display: block; |
| } |
| |
| .navbar-link { |
| padding-right: 2.5em; |
| } |
| |
| .navbar-dropdown .navbar-item { |
| padding-left: 1.5rem; |
| padding-right: 1.5rem; |
| font-weight: normal; |
| } |
| |
| .navbar-divider { |
| background-color: var(--navbar-menu-border-color); |
| border: none; |
| height: 1px; |
| margin: 0.25rem 0; |
| } |
| |
| @media screen and (max-width: 1023px) { |
| .navbar-brand .navbar-item { |
| display: flex; |
| align-items: flex-start; |
| flex-flow: column; |
| } |
| |
| .navbar-menu { |
| background: var(--navbar-menu-background); |
| padding: 0.5rem 0; |
| } |
| |
| .navbar-menu.is-active { |
| display: block; |
| position: fixed; |
| height: 100%; |
| box-shadow: 0 16px 16px 0 rgba(10, 10, 10, 0.1); |
| overflow-y: auto; |
| top: 4rem; |
| right: 0; |
| } |
| |
| .navbar-menu a.navbar-item:hover, |
| .navbar-menu .navbar-link:hover { |
| background-color: var(--navbar-menu-hover-background); |
| } |
| } |
| |
| @media screen and (min-width: 1024px) { |
| .navbar, |
| .navbar-menu, |
| .navbar-end { |
| align-items: stretch; |
| display: flex; |
| } |
| |
| .navbar-burger { |
| display: none; |
| } |
| |
| .navbar-item, |
| .navbar-link { |
| align-items: flex-end; |
| display: flex; |
| font-weight: bold; |
| } |
| |
| .navbar-item.has-dropdown { |
| align-items: stretch; |
| } |
| |
| .navbar-item.has-dropdown:last-of-type .navbar-dropdown { |
| left: auto; |
| right: 0; |
| } |
| |
| .navbar-item.is-hoverable:hover .navbar-dropdown { |
| display: block; |
| } |
| |
| .navbar-link::after { |
| border-width: 0 0 2px 2px; |
| border-style: solid; |
| content: " "; |
| display: block; |
| height: 0.5em; |
| pointer-events: none; |
| position: absolute; |
| transform: rotate(-45deg); |
| width: 0.5em; |
| margin-top: 0.6em; |
| right: 1.7em; |
| top: 50%; |
| } |
| |
| .navbar-end { |
| justify-content: flex-end; |
| margin-left: auto; |
| } |
| |
| .navbar-dropdown { |
| background-color: var(--navbar-menu-background); |
| border: 1px solid var(--navbar-menu-border-color); |
| border-top: none; |
| border-radius: 0 0 0.25rem 0.25rem; |
| display: none; |
| top: 100%; |
| left: 0; |
| min-width: 100%; |
| position: absolute; |
| } |
| |
| .navbar-dropdown .navbar-item { |
| padding: 0.5rem 1rem; |
| white-space: nowrap; |
| } |
| |
| .navbar-dropdown .navbar-item:last-child { |
| border-radius: inherit; |
| } |
| |
| .navbar-dropdown a.navbar-item { |
| padding-right: 3rem; |
| } |
| |
| .navbar-dropdown.is-right { |
| left: auto; |
| right: 0; |
| } |
| |
| .navbar-dropdown a.navbar-item:hover { |
| background-color: var(--navbar-menu-hover-background); |
| text-decoration: underline; |
| text-decoration-color: var(--navbar-menu-hover-decoration-color); |
| } |
| } |
| |
| .navbar .button { |
| display: inline-flex; |
| align-items: center; |
| background: var(--navbar-button-background); |
| border: 1px solid var(--navbar-button-border-color); |
| border-radius: 0.15rem; |
| height: 1.75rem; |
| color: var(--navbar-button-font-color); |
| padding: 0 0.75em; |
| white-space: nowrap; |
| } |
| |
| .navbar-tools { |
| display: flex; |
| align-items: flex-end; |
| flex-grow: 1; |
| justify-content: flex-end; |
| line-height: 1.6; |
| padding: 0.5rem; |
| font-weight: bold; |
| } |
| |
| .navbar-tools .brand-icon { |
| height: 1.2em; |
| width: 1.2em; |
| margin: 0.35rem; |
| fill: var(--navbar-font-color); |
| } |
| |
| @media screen and (max-width: 1023px) { |
| .navbar-tools { |
| align-items: end; |
| padding: 0.5rem 0; |
| } |
| |
| .navbar-tools .brand-icon { |
| margin: 1rem 0.8rem; |
| } |
| } |