<commit_before>/*doc
---
title: View Head
name: viewHead
category: Views
---
The `view-head` element is the first child (the
fixed top nav bar) within every view.

```
<div class="view">
	<header class="view-head row inverted">
		<a href="#" class="row-item row-item--shrink row-item--alignMiddle">[...]</a>
		<a href="#" class="row-item row-item--alignMiddle">Page Title</a>
		<a href="#" class="row-item row-item--shrink row-item--alignMiddle">[...]</a>
	</header>
</div>
```

## view-head variants
A class of `.view-head` is required for view headers. The following classes
are optional variants (most likely added/removed with javascript to accommodate
hero headers).

Class                      | Description
-------------------------- | ---------------------------
`.view-head--transparent`  | Makes view header transparent; hides `h1` heading
`.view-head--photoOverlay` | Same as 'transparent' variant, but adds text protext gradient

*/
.view-head {
	@include box-sizing(border-box);
	background: $C_accent;
	color: $C_textPrimaryInverted;
	left: 0;
	top: 0;
	width: 100%;
	z-index: map-get($zindex-map, "main-header");
	height: $view-head-height;
	padding: 0 $space;

	@include atMediaUp(large){
		height: $view-head-height-tablet;
	}
}

@include atMediaUp(medium){
	.view-head {
		.view--splitList & {
			border-right: 1px solid $C_border;
			width: $view-minWidth;
		}
		.view--splitDetail & {
			left: $view-minWidth;
			right: 0;
			width: auto;
		}
	}
}

//
// view-head variants
//
%view-head--transparent,
.view-head--transparent {
	background: transparent;
	border-bottom: none;
	color: $C_textPrimaryInverted;
	position: absolute;
	h1 { // assumes there's only ever one h1 in view-head
		opacity: 0;
	}
}

.view-head--photoOverlay {
	@extend %view-head--transparent;
	@include background(linear-gradient(transparentize($C_scrimGradient, .2), transparentize($C_scrimGradient, 1) ));
}<commit_msg>view-head photoOverlay changes<commit_after>/*doc
---
title: View Head
name: viewHead
category: Views
---
The `view-head` element is the first child (the
fixed top nav bar) within every view.

```
<div class="view">
	<header class="view-head row inverted">
		<a href="#" class="row-item row-item--shrink row-item--alignMiddle">[...]</a>
		<a href="#" class="row-item row-item--alignMiddle">Page Title</a>
		<a href="#" class="row-item row-item--shrink row-item--alignMiddle">[...]</a>
	</header>
</div>
```

## view-head variants
A class of `.view-head` is required for view headers. The following classes
are optional variants (most likely added/removed with javascript to accommodate
hero headers).

Class                      | Description
-------------------------- | ---------------------------
`.view-head--transparent`  | Makes view header transparent; hides `h1` heading
`.view-head--photoOverlay` | Adds text protext gradient (`view-head--trasnparent` required with this class)

*/
.view-head {
	@include box-sizing(border-box);
	background: $C_accent;
	color: $C_textPrimaryInverted;
	left: 0;
	top: 0;
	width: 100%;
	z-index: map-get($zindex-map, "main-header");
	height: $view-head-height;
	padding: 0 $space;

	@include atMediaUp(large){
		height: $view-head-height-tablet;
	}
}

@include atMediaUp(medium){
	.view-head {
		.view--splitList & {
			border-right: 1px solid $C_border;
			width: $view-minWidth;
		}
		.view--splitDetail & {
			left: $view-minWidth;
			right: 0;
			width: auto;
		}
	}
}

//
// view-head variants
//
.view-head--transparent {
	background: transparent;
	border-bottom: none;
	color: $C_textPrimaryInverted;
	position: absolute;
	h1 { // assumes there's only ever one h1 in view-head
		opacity: 0;
	}
}

//
// photoOverlay adds gradient to transparent
// view-head (both classes required)
//
.view-head--transparent.view-head--photoOverlay {
	@include background(linear-gradient(transparentize($C_scrimGradient, .2), transparentize($C_scrimGradient, 1) ));
}
{'fraction_non_alphanumeric': 0.18225971370143149, 'fraction_numerical': 0.007157464212678937, 'mean_word_length': 3.3047304730473046, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2244320', 'n_tokens_mistral': 1409, 'n_tokens_neox': 1308, 'n_words': 338}