<commit_before>/*
Hero. Has a full width [of the site content] background image with text content on top.
Image inserted as html img tag and via js set as css background-image. The
image is initial hidden but is reveal in a translateY/opacity movement, when
the js has run and the image is loaded.

## With grid
```
<div class="f-hero">
	<div class="f-row f-row_6">
		<div class="f-row__cell">
			<img src="foo/bar.png">
			<div class="f-hero__heading">
				<h1><span>Project:</span></h1><br>
				<h1>Rebuild Kobanê</h1>
			</div>
		</div>
		<div class="f-row__cell-2 f-row__cell-mobile-5">
			<p class="f-hero__text">
				<span>We have always dealt with oppression, but we do not only fight</span>
				<span>against ISIS - we fight for freedom. We are the Kobanê</span>
				<span>Reconstruction Board, and this is a global call to action, to stand</span>
				<span>with us and rebuild our city.</span>
			</p>
		</div>
	</div>
</div>
```
*/

@import "../variables";

.f-hero {
	height: 30rem;
	width: 100%;
	margin-bottom: 3rem;
	padding-top: 4rem;

	background-image: url(../../image/projecthero.png);
	background-repeat: no-repeat;
	background-position: center top; /* cut sides until media query limit */
}

/* `<img>` tags are hidden */
.f-hero img { display: none; }

.f-hero__heading {
	position: relative;
  margin: 0 0 0 3.4rem;
}
.f-hero__heading::before {
	position: absolute;
  top: 0;
  left: -40.8rem;
  width: 40rem;
  height: 100%;

  background-color: var(--color-black-transparent);

  content: "";
}
.f-hero__heading h1 {
	display: inline;
  margin: 0 0 0 -0.8rem;
  padding-right: 1.4rem;
  padding-left: 0.8rem;

  background-color: var(--color-black-transparent);

  color: var(--color-white);
  font-size: 3.7rem;
  font-weight: bold;
}
<commit_msg>switch to use the same variable for margin as our grid + added more description and a js TODO<commit_after>/*
Hero. Has a full width [of the site content] background image with text content on top.
Image inserted as html img tag and via js set as css background-image. The
image is initial hidden but is reveal in a translateY/opacity movement, when
the js has run and the image is loaded.

Known issue: With some image dimensions and browser window dimensions the image is too short.
E.i. the image doesn't reach the top of the container and the black background is visible.

## With grid
```
<div class="f-hero">
	<div class="f-row f-row_6">
		<div class="f-row__cell">
			<img src="foo/bar.png">
			<div class="f-hero__heading">
				<h1><span>Project:</span></h1><br>
				<h1>Rebuild Kobanê</h1>
			</div>
		</div>
		<div class="f-row__cell-2 f-row__cell-mobile-5">
			<p class="f-hero__text">
				<span>We have always dealt with oppression, but we do not only fight</span>
				<span>against ISIS - we fight for freedom. We are the Kobanê</span>
				<span>Reconstruction Board, and this is a global call to action, to stand</span>
				<span>with us and rebuild our city.</span>
			</p>
		</div>
	</div>
</div>
```
*/

@import "../variables";

.f-hero {
	height: 30rem;
	width: 100%;
	margin-bottom: 3rem;
	padding-top: 4rem;

	/*TODO: set background-image via js */
	background-image: url(../../image/projecthero.png);
	background-repeat: no-repeat;
	background-position: center bottom; /* cut sides until media query limit */
}

/* `<img>` tags are hidden */
.f-hero img { display: none; }

.f-hero__heading {
	position: relative;
  margin: 0 0 0 var(--gutter-width);
}
.f-hero__heading::before {
	position: absolute;
  top: 0;
  left: -40.8rem;
  width: 40rem;
  height: 100%;

  background-color: var(--color-black-transparent);

  content: "";
}
.f-hero__heading h1 {
	display: inline;
  margin: 0 0 0 -0.8rem;
  padding-right: 1.4rem;
  padding-left: 0.8rem;

  background-color: var(--color-black-transparent);

  color: var(--color-white);
  font-size: 3.7rem;
  font-weight: bold;
}

{'fraction_non_alphanumeric': 0.1471805483704087, 'fraction_numerical': 0.02017589239524056, 'mean_word_length': 3.4194285714285715, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 61, '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': '2610471', 'n_tokens_mistral': 1485, 'n_tokens_neox': 1343, 'n_words': 441}