@import "colors.scss"; // Always use the dark-scheme colors for the navigation bar. $bar-background-color: color-get('dark', 'carbs-color-bg') !default $bar-foreground-color: color-get('dark', 'carbs-color-fg') !default; $bar-carbs-pink: color-get('dark', 'carbs-pink') !default; $bar-border: 5px solid $bar-carbs-pink !default; $bar-font-size: 14px !default; $bar-font-text: $font-text !default; $bar-title-height: 40px; $bar-title-width: 190px; $bar-margin: 2em; #preamble { margin-bottom: $bar-margin; } #navbar { background: $bar-background-color none repeat scroll 0 0 !important; border-bottom: $bar-border !important; min-height: $bar-title-height; padding: 10px 15px !important; label, #hamburger { display: none; } a.navbartitle { margin: 0 !important; padding: 0 !important; color: $bar-carbs-pink !important; float: left !important; font-weight: bolder !important; font-size: 200% !important; &:hover { text-decoration: none; color: $bar-carbs-pink; } } #navbarlist li a { color: $bar-foreground-color; font-weight: bold; text-decoration: none; } ul { display: block; list-style: none; margin: 0; padding: 0; text-align: right; font-size: 0; letter-spacing: 0; li { display: inline-block; font-size: $bar-font-size; font-family: $bar-font-text !important; line-height: 1.4; letter-spacing: 0; padding-top: 14px; padding-right: 15px; padding-left: 15px; margin: 0; a { color: $bar-foreground-color; font-weight: bold; text-decoration: none; } a:hover { color: color-get('dark', 'carbs-purple') !important; text-decoration: none !important; } } } } @media screen and (max-width: 768px) { #navbar { label { display: inline-block; box-sizing: border-box; color: $bar-foreground-color; background: $bar-carbs-pink; border-radius: 0.2em; font-style: normal; text-align: center; margin-right: auto; margin-left: auto; font-size: 1em; padding: 0.5em 0; font-size: 1em; width: 2.2em; height: 100%; float: right; } ul { margin-left: 0; margin-right: 0; text-align: left; } #navbarlist { margin-top: $bar-title-height + 10; li { box-sizing: border-box; border-top: 1px solid $carbs-purple; display: block; width: 100%; padding: 0.5em; } display: none; } input:checked ~ #navbarlist { display: block; } } } footer { clear: both; margin-top: $bar-margin; background: $bar-background-color none repeat scroll 0 0 !important; border-top: $bar-border !important; padding: 10px 15px !important; bottom: 0; p { text-align: center; color: $bar-foreground-color; } }