<commit_before>/*doc
---
title: Views
name: views
category: Core
---
A "view" contains all layout and content for a given screen.
Typically, a document only has a single view. Split views,
where a document contains two view elements are possible (see below).

A class of `.view` is required for view elements; the
following classes are optional variants:

Class                  | Description
---------------------- | ---------------------------
`view--splitList`      | Sets view to "list style" when viewport is wide enough
`view--splitDetail`    | Sets view to "detail style" when viewport is wide enough
`view--dimmed`         | Dims view (for use with modal overlays)

## Basic view (<a class="link" href="pages/basic-view.html">Demo</a>)
Basic example of a single view in a document:

```
<div class="view">
	<header class="view-head">
		... view-head ...
	</header>
	<main class="view-body">
		... view-body ...
	</main>
</div>
```

## Split view (DEMO TK)
Basic example of two views in one document, where we specify
which view has the "list" responsibility, and which view has
the "detail" responsibility.

```
<div class="view view--splitList">
	<header class="view-head">
		... view-head ...
	</header>
	<main class="view-body">
		... view-body ...
	</main>
</div>

<div class="view view--splitDetail">
	<header class="view-head">
		... view-head ...
	</header>
	<main class="view-body">
		... view-body ...
	</main>
</div>
```
*/
%_splitViewBase {
	display: none;
	&.focus {
		display: block;
	}
	@include atMediaUp(medium) {
		width: $view-minWidth;
		display: block;
	}
}

.view {
	@include box-sizing(border-box);
	background: white;
	width: 100%;
	min-height: 100vh;
}

.view--splitList {
	@extend %_splitViewBase;
	// NOTE: uses fixed position
	// try not to put forms in the split part
	// usually the split view will be a list
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: $view-minWidth;
	border-right: 1px solid $C_border;
}

.view--splitDetail {
	@extend %_splitViewBase;
	padding-left: $view-minWidth;
}

.view--dimmed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: map-get($zindex-map, "shade");
	@include transition(all .15s);
	background: $C_modalShade;
	opacity: 1;
}

// TODO: doc this somehow
.view--dimmed-close {
	@include transition(all .15s .15s);
	display: block;
	height: 100vh;
	left: 0;
	line-height: 100vh;
	position: fixed;
	text-align: center;
	top: 0;
	vertical-align: middle;
	width: 100%;
}


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

TODO: view-head inner layout TK

```
<div class="view">
	<header class="view-head">
	</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;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: map-get($zindex-map, "main-header"); // TODO: maybe abstract this map a bit
	
	height: $view-head-height;
	@include atMediaUp(large){
		height: $view-head-height-tablet;
	}
}

.view-head {
	.view--splitList & {
		border-right: 1px solid $C_border;
		width: $view-minWidth;
	}
	.view--splitDetail & {
		left: $view-minWidth;
		right: 0;
		width: auto;
	}
}


.view-head--transparent {
	background: transparent;
	border-bottom: none;
	color: $C_textPrimaryInverted;
	h1 { // assumes there's only ever one h1 in view-head
		opacity: 0;
	}
}
.view-head--photoOverlay {
	@include background(linear-gradient(transparentize(#000000, .4), transparentize(#000000, 1) ));
}


/*doc
---
title: View Body
name: viewBody
parent: views
---
The `view-body` element is our main
content container for the view.

```
<div class="view">
	<main class="view-body">
		... stripes, bounds, etc ...
		... all content ...
	</main>
</div>
```
*/
.view-body {
	.stripe:first-child {
		padding-top: $view-head-height;
		@include atMediaUp(large){
			padding-top: $view-head-height-tablet;
		}
	}
}
.view-body {<commit_msg>head size<commit_after>/*doc
---
title: Views
name: views
category: Core
---
A "view" contains all layout and content for a given screen.
Typically, a document only has a single view. Split views,
where a document contains two view elements are possible (see below).

A class of `.view` is required for view elements; the
following classes are optional variants:

Class                  | Description
---------------------- | ---------------------------
`view--splitList`      | Sets view to "list style" when viewport is wide enough
`view--splitDetail`    | Sets view to "detail style" when viewport is wide enough
`view--dimmed`         | Dims view (for use with modal overlays)

## Basic view (<a class="link" href="pages/basic-view.html">Demo</a>)
Basic example of a single view in a document:

```
<div class="view">
	<header class="view-head">
		... view-head ...
	</header>
	<main class="view-body">
		... view-body ...
	</main>
</div>
```

## Split view (DEMO TK)
Basic example of two views in one document, where we specify
which view has the "list" responsibility, and which view has
the "detail" responsibility.

```
<div class="view view--splitList">
	<header class="view-head">
		... view-head ...
	</header>
	<main class="view-body">
		... view-body ...
	</main>
</div>

<div class="view view--splitDetail">
	<header class="view-head">
		... view-head ...
	</header>
	<main class="view-body">
		... view-body ...
	</main>
</div>
```
*/
%_splitViewBase {
	display: none;
	&.focus {
		display: block;
	}
	@include atMediaUp(medium) {
		width: $view-minWidth;
		display: block;
	}
}

.view {
	@include box-sizing(border-box);
	background: white;
	width: 100%;
	min-height: 100vh;
}

.view--splitList {
	@extend %_splitViewBase;
	// NOTE: uses fixed position
	// try not to put forms in the split part
	// usually the split view will be a list
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: $view-minWidth;
	border-right: 1px solid $C_border;
}

.view--splitDetail {
	@extend %_splitViewBase;
	padding-left: $view-minWidth;
}

.view--dimmed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: map-get($zindex-map, "shade");
	@include transition(all .15s);
	background: $C_modalShade;
	opacity: 1;
}

// TODO: doc this somehow
.view--dimmed-close {
	@include transition(all .15s .15s);
	display: block;
	height: 100vh;
	left: 0;
	line-height: 100vh;
	position: fixed;
	text-align: center;
	top: 0;
	vertical-align: middle;
	width: 100%;
}


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

TODO: view-head inner layout TK

```
<div class="view">
	<header class="view-head">
	</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;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: map-get($zindex-map, "main-header"); // TODO: maybe abstract this map a bit
	
	height: $view-head-height;
	@include atMediaUp(large){
		height: $view-head-height-tablet;
	}
}

.view-head {
	.view--splitList & {
		border-right: 1px solid $C_border;
		width: $view-minWidth;
	}
	.view--splitDetail & {
		left: $view-minWidth;
		right: 0;
		width: auto;
	}
}


.view-head--transparent {
	background: transparent;
	border-bottom: none;
	color: $C_textPrimaryInverted;
	h1 { // assumes there's only ever one h1 in view-head
		opacity: 0;
	}
}
.view-head--photoOverlay {
	@include background(linear-gradient(transparentize($C_scrimGradient, .2), transparentize($C_scrimGradient, 1) ));
}


/*doc
---
title: View Body
name: viewBody
parent: views
---
The `view-body` element is our main
content container for the view.

```
<div class="view">
	<main class="view-body">
		... stripes, bounds, etc ...
		... all content ...
	</main>
</div>
```
*/
.view-body {
	.stripe:first-child {
		padding-top: $view-head-height;
		@include atMediaUp(large){
			padding-top: $view-head-height-tablet;
		}
	}
}
.view-body {
{'fraction_non_alphanumeric': 0.17315436241610738, 'fraction_numerical': 0.012751677852348993, 'mean_word_length': 3.0752051048313582, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 59, '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': '5483665', 'n_tokens_mistral': 3258, 'n_tokens_neox': 3041, 'n_words': 929}