.navbar { min-height: 3.25rem; background-color: var(--navbar-color); box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px; color: rgba(0,0,0,.7); position: fixed; z-index: 30; top: 0; right: 0; left: 0; @include respond-to("medium-up") { min-height: 3.25rem; align-items: stretch; display: flex; } .navbar-brand { align-items: stretch; display: flex; min-height: 3.25rem; .navbar-item { align-items: center; display: flex; img { max-height: 1.75rem; } span { word-break: break-word; color: var(--font-color); font-size: 2rem; font-weight: 600; line-height: 1.125; margin-left: .5rem !important; } } } .navbar-burger { padding: 0; margin: 0; font-size: 1em; appearance: none; background: none; border: none; cursor: pointer; display: block; height: 3.25rem; position: relative; width: 3.25rem; margin-left: auto; color: rgba(0,0,0,.7); @include respond-to("medium-up") { display: none; } span { background-color: currentColor; display: block; height: 1px; left: calc(50% - 8px); position: absolute; transform-origin: center; transition-duration: 86ms; transition-property: background-color,opacity,transform; transition-timing-function: ease-out; width: 16px; &:nth-child(1) { top: calc(50% - 6px); } &:nth-child(2) { top: calc(50% - 1px); } &:nth-child(3) { top: calc(50% + 4px); } } &.is-active { span { &:nth-child(1) { transform: translateY(5px) rotate(45deg); } &:nth-child(2) { opacity: 0; } &:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } } } } .navbar-item { line-height: 1.5; padding: .5rem .75rem; position: relative; flex-grow: 0; flex-shrink: 0; color: var(--font-color); display: block; &.has-dropdown { padding: 0; @include respond-to("medium-up") { display: flex; align-items: stretch; color: rgba(0,0,0,.7); .navbar-dropdown { background-color: var(--default-color); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top: 2px solid var(--default-hl-color); box-shadow: 0 8px 8px rgba(10,10,10,.1); display: none; font-size: .875rem; left: 0; min-width: 100%; position: absolute; top: 100%; z-index: 20; } &:hover { .navbar-link { background-color: var(--default-hl-color); color: rgba(0,0,0,.7); } .navbar-dropdown { display: block; } } } } @include respond-to("medium-up") { align-items: center; display: flex; } } .navbar-link { color: var(--font-color); display: block; line-height: 1.5; padding: .5rem .75rem; position: relative; cursor: pointer; padding-right: 2.5em; @include respond-to("medium-up") { display: flex; align-items: center; } .icon { align-items: center; display: inline-flex; justify-content: center; height: 1.5rem; width: 1.5rem; } &::after { border: 3px solid transparent; border-radius: 2px; border-right: 0; border-top: 0; content: " "; display: block; height: .625em; pointer-events: none; position: absolute; top: 50%; transform: rotate(-45deg); transform-origin: center; width: .625em; border-color: var(--secondary-color); margin-top: -0.375em; right: 1.125em; @include respond-to("medium-up") { border-color: rgba(0,0,0,.7); } } } .navbar-menu { display: none; background-color: var(--default-color); box-shadow: 0 8px 16px rgba(10,10,10,.1); padding: .5rem 0; @include respond-to("medium") { max-height: calc(100vh - 3.25rem); overflow: auto; } @include respond-to("medium-up") { flex-grow: 1; flex-shrink: 0; align-items: stretch; display: flex; background-color: initial; box-shadow: none; padding: 0; } &.is-active { display: block; } @include respond-to("medium-up") { .navbar-start { justify-content: flex-start; margin-right: auto; align-items: stretch; display: flex; .navbar-item { color: rgba(0,0,0,.7); align-items: center; display: flex; } } .navbar-end { justify-content: flex-end; margin-left: auto; align-items: stretch; display: flex; } } } .navbar-dropdown { font-size: .875rem; padding-bottom: .5rem; padding-top: .5rem; .navbar-item { cursor: pointer; padding-left: 1.5rem; padding-right: 1.5rem; } @include respond-to("medium-up") { background-color: var(--default-color); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top: 2px solid var(--default-hl-color); box-shadow: 0 8px 8px rgba(10,10,10,.1); display: none; font-size: .875rem; left: 0; min-width: 100%; position: absolute; top: 100%; z-index: 20; .navbar-item { white-space: nowrap; padding: .375rem 1rem; padding-right: 3rem; } } } img { height: auto; max-width: 100%; } a { text-decoration: none; } .buttons { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-start; .button { margin-right: 0.75rem; } &:last-child { margin-bottom: -0.5rem; } } } [data-theme="dark"] { .navbar { box-shadow: none; } }