grav-theme-future2021/assets/sass/layout/_header.scss

///
/// Future Imperfect by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Header */

	body {
		padding-top: 3.5em;
	}

	#header {
		@include vendor('display', 'flex');
		@include vendor('justify-content', 'space-between');
		background-color: _palette(bg);
		border-bottom: solid 1px _palette(border);
		box-shadow: 0 5px 6px -6px _palette(bg-dropdown);
		height: 3.5em;
		left: 0;
		line-height: 3.5em;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: _misc(z-index-base);

		a {
			color: inherit;
			text-decoration: none;
		}

		ul {
			list-style: none;
			margin: 0;
			padding-left: 0;

			li {
				display: inline-block;
				padding-left: 0;
			}
		}

		h1 {
			height: inherit;
			line-height: inherit;
			padding: 0 0 0 1.5em;
			white-space: nowrap;

			a {
				font-size: 0.7em;
			}
		}

		.main {
			height: inherit;
			line-height: inherit;
			text-align: right;

			ul {
				height: inherit;
				line-height: inherit;

				li {
					border-left: solid 1px _palette(border);
					height: inherit;
					line-height: inherit;
					white-space: nowrap;

					> * {
						display: block;
						float: left;
					}

					> a {
						@include icon(false, solid);
						border-bottom: 0;
						color: _palette(fg-light);
						overflow: hidden;
						position: relative;
						text-indent: 4em;
						width: 4em;

						&:before {
							display: block;
							height: inherit;
							left: 0;
							line-height: inherit;
							position: absolute;
							text-align: center;
							text-indent: 0;
							top: 0;
							width: inherit;
						}
					}
				}
			}
		}

		form {
			margin: 0;

			input {
				display: inline-block;
				height: 2.5em;
				position: relative;
				top: -2px;
				vertical-align: middle;
			}
		}

		#search {
			@include vendor('transition', 'all 0.5s ease');
			max-width: 0;
			opacity: 0;
			overflow: hidden;
			padding: 0;
			white-space: nowrap;

			input {
				width: 12em;
			}

			&.visible {
				max-width: 12.5em;
				opacity: 1;
				padding: 0 0.5em 0 0;
			}
		}

		@include breakpoint('<=medium') {
			.links {
				display: none;
			}
		}

		@include breakpoint('<=small') {
			height: 2.75em;
			line-height: 2.75em;

			h1 {
				padding: 0 0 0 1em;
			}

			.main {
				.search {
					display: none;
				}
			}
		}
	}