<commit_before>@import "./variables/index.css";
@import "./fonts.css";

* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
}

@import '../../node_modules/mozilla-tabzilla/css/tabzilla.css';

body {
	font-family: $baseFontFamily;
	@extend base-rhythm;
	background: #1e1e21;
	background-image: radial-gradient(ellipse farthest-side at top left, #00549e 0, #000 100%);
	background-size: 100% 500px;
	background-repeat: no-repeat;
	background-position: top center;
	-webkit-text-size-adjust: 100%;
}

a {
  color: $linkBlue;
  text-decoration: none;
  &:hover, &:focus, &:active {
    color: $linkBlue;
    text-decoration: underline;
  }
}

.row {
	display: flex;
	@media (min-width: $breakDesktop) {
		display: flex;
		justify-content: center;
	}
}
.row-inner {
	min-width: 300px;
	max-width: 1020px;
}
header {
	flex: 1;
	padding: 0 0 calc($gutterY / 2) $gutterX;
}

h1 {
	@extend h1;
	padding-top: $gutterY;
	margin-bottom: 0;
	letter-spacing: -.035em;
	color: #fff;
	font-weight: 600;
}
h2 {
	font-weight: 300;
	font-size: $h4FontSize;
	padding-top: 0;
	margin: 0 0 $gutterY 0;
	color: $textColorLight;
	font-style: italic;
}

article {
	background-color: #fff;
	color: $textColorPrimary;
}

#features {
	list-style: none;
	margin: calc($gutterY) 0;
	padding: 0;
}

.feature {
	margin: 0;
	padding: 0;
	padding-left: $gutterX;
	@media (min-width: $breakMobileLandscape) {
		padding: calc($gutterX / 2) $gutterX;
	}
}
.feature:hover, .feature:focus {
	outline: none;
	background-color: $backgroundLightWarm;
}
.feature-header {
	display: flex;
	flex-direction: row;
  min-width: 0;
}
.feature-title {
	flex: 1;
	@extend is-truncated;
	@extend h5;
	padding-top: 0;
	margin-bottom: 0;
	line-height: calc($gutterY * 2);
	padding-right: $gutterX;
	@media (min-width: $breakMobileLandscape) {
		font-size: $h3FontSize;
		font-weight: 300;
	}
}

.feature-meta {
	padding-top: calc($gutterY / 2);
	padding-bottom: calc($gutterY / 1.5);
	display: none;
	@media (min-width: $breakMobileLandscape) {
		display: block;
	}
}
@media (max-width: $breakMobileLandscape) {
	.feature:focus .feature-meta {
		display: block;
	}
}
.feature-summary {
	margin: 0;
	padding-bottom: calc($gutterY / 2);
	color: $textColorTertiary;
}
.feature-links {
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	li {
		display: inline-block;
		margin-right: calc($gutterX / 2);
	}
	a {
		color: $textColorLightWarm;
		&:hover, &:focus, &:active {
			color: $linkBlue;
		}
	}
}
.icon {
	display: inline-block;
	background-position: center;
	background-repeat: no-repeat;
	width: $gutterY;
	height: $gutterX;
	background-size: $gutterX;
	margin-right: $gutterX / 2;
}
.icon-spec {
	background-image: url(images/html5.png);
	@media (min-resolution: 2dppx) {
		background-image: url(images/html5@2x.png);
	}
}
.icon-mdn {
	background-image: url(images/mdn.png);
	@media (min-resolution: 2dppx) {
		background-image: url(images/mdn@2x.png);
	}
}
.icon-bugzilla {
	background-image: url(images/bugzilla.png);
	@media (min-resolution: 2dppx) {
		background-image: url(images/bugzilla@2x.png);
	}
}
.icon-samples {
	background-image: url(images/github.png);
	@media (min-resolution: 2dppx) {
		background-image: url(images/github@2x.png);
	}
}

.feature-status ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	height: calc($gutterY * 2);
}
.status {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: stretch;
	align-items: stretch;
	width: calc($gutterY);
	background-position: 50% calc($gutterY + 1px);
	background-repeat: no-repeat;
	background-size: 16px;
	color: $textColorSecondary;
	font-weight: 700;
	font-size: $smallFontSize;
	text-transform: uppercase;
	border: 1px solid rgba(0, 0, 0, 0);
	border-bottom: none;
	@media (min-width: $breakTablet) {
		color: #fff;
		font-weight: 600;
		font-size: $fontSize;
		text-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
		width: calc($gutterY * 4);
		background-size: 32px;
		background-position: 50% calc(($gutterY * 2) / 1.618);
		border-top: none;
	}
	/*&:first-child {
		border-left: none;
	}
	&:last-child {
		border-right: none;
	}*/

	&.state-firefox {
		@media (min-width: $breakTablet) {
			background-size: 48px;
			width: calc($gutterY * 6);
			background-position: 50% calc($gutterY);
		}
	}
	&.state-chrome {
		background-image: url(https://raw.githubusercontent.com/alrra/browser-logos/master/chrome/chrome_64x64.png);
	}
	&.state-firefox {
		background-image: url(https://raw.githubusercontent.com/alrra/browser-logos/master/firefox/firefox_128x128.png);
	}
	&.state-edge {
		background-image: url(https://raw.githubusercontent.com/alrra/browser-logos/master/edge/edge_64x64.png);
	}
	&.state-webkit {
		background-image: url(https://raw.githubusercontent.com/alrra/browser-logos/master/safari/safari_64x64.png);
	}
}
.status-inner {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	color: inherit;
	&:hover, &:focus, &:active {
    text-decoration: none;
		color: inherit;
  }
}

$stateUnknown: $lightGray;
$stateNotPlanned: $firefoxOrangeVibrant;
$stateDeprecated: $firefoxOrangeVibrant;
$stateConsidering: $marketOrangeVibrant;
$stateDeveloping: $flameYellowVibrant;
$stateShipped: $geckoGreenVibrant;

$stateUnknownLight: $lightGray;
$stateNotPlannedLight: $firefoxOrangeTint;
$stateDeprecatedLight: $firefoxOrangeTint;
$stateConsideringLight: $marketOrangeTint;
$stateDevelopingLight: $flameYellowTint;
$stateShippedLight: $geckoGreenTint;

$stateShade: -2%;
$stateAlpha: 100%;
$fadeStart: 70%;
$fadeMid: 10%;
$fadeHeight: 25%;
<commit_msg>Better contrast for type and text-shadow for status<commit_after>@import "./variables/index.css";
@import "./fonts.css";

* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
}

@import '../../node_modules/mozilla-tabzilla/css/tabzilla.css';

body {
	font-family: $baseFontFamily;
	@extend base-rhythm;
	background: #1e1e21;
	background-image: radial-gradient(ellipse farthest-side at top left, #00549e 0, #000 100%);
	background-size: 100% 500px;
	background-repeat: no-repeat;
	background-position: top center;
	color: $textColorPrimary;
	-webkit-text-size-adjust: 100%;
}

a {
  color: $linkBlue;
  text-decoration: none;
  &:hover, &:focus, &:active {
    color: $linkBlue;
    text-decoration: underline;
  }
}

.row {
	display: flex;
	@media (min-width: $breakDesktop) {
		display: flex;
		justify-content: center;
	}
}
.row-inner {
	min-width: 300px;
	max-width: 1020px;
}
header {
	flex: 1;
	padding: 0 0 calc($gutterY / 2) $gutterX;
}

h1 {
	@extend h1;
	padding-top: $gutterY;
	margin-bottom: 0;
	letter-spacing: -.035em;
	color: #fff;
	font-weight: 600;
}
h2 {
	font-weight: 300;
	font-size: $h4FontSize;
	padding-top: 0;
	margin: 0 0 $gutterY 0;
	color: $textColorLight;
	font-style: italic;
}

article {
	background-color: #fff;
}

#features {
	list-style: none;
	margin: calc($gutterY) 0;
	padding: 0;
}

.feature {
	margin: 0;
	padding: 0;
	padding-left: $gutterX;
	@media (min-width: $breakMobileLandscape) {
		padding: calc($gutterX / 2) $gutterX;
	}
}
.feature:hover, .feature:focus {
	outline: none;
	background-color: $backgroundLightWarm;
}
.feature-header {
	display: flex;
	flex-direction: row;
  min-width: 0;
}
.feature-title {
	flex: 1;
	@extend is-truncated;
	@extend h5;
	padding-top: 0;
	margin-bottom: 0;
	line-height: calc($gutterY * 2);
	padding-right: $gutterX;
	@media (min-width: $breakMobileLandscape) {
		font-size: $h3FontSize;
		font-weight: 300;
	}
}

.feature-meta {
	padding-top: calc($gutterY / 2);
	padding-bottom: calc($gutterY / 1.5);
	display: none;
	color: $textColorTertiary;
	@media (min-width: $breakMobileLandscape) {
		display: block;
	}
}
@media (max-width: $breakMobileLandscape) {
	.feature:focus .feature-meta {
		display: block;
	}
}
.feature-summary {
	margin: 0;
	padding-bottom: calc($gutterY / 2);
}
.feature-links {
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	li {
		display: inline-block;
		margin-right: calc($gutterX / 2);
	}
	a {
		color: $linkBlue;
		&:hover, &:focus, &:active {
			color: $linkBlue;
		}
	}
}
.icon {
	display: inline-block;
	background-position: center;
	background-repeat: no-repeat;
	width: $gutterY;
	height: $gutterX;
	background-size: $gutterX;
	margin-right: $gutterX / 2;
}
.icon-spec {
	background-image: url(images/html5.png);
	@media (min-resolution: 2dppx) {
		background-image: url(images/html5@2x.png);
	}
}
.icon-mdn {
	background-image: url(images/mdn.png);
	@media (min-resolution: 2dppx) {
		background-image: url(images/mdn@2x.png);
	}
}
.icon-bugzilla {
	background-image: url(images/bugzilla.png);
	@media (min-resolution: 2dppx) {
		background-image: url(images/bugzilla@2x.png);
	}
}
.icon-samples {
	background-image: url(images/github.png);
	@media (min-resolution: 2dppx) {
		background-image: url(images/github@2x.png);
	}
}

.feature-status ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	height: calc($gutterY * 2);
}
.status {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: stretch;
	align-items: stretch;
	width: calc($gutterY);
	background-position: 50% calc($gutterY + 1px);
	background-repeat: no-repeat;
	background-size: 16px;
	color: $textColorSecondary;
	font-weight: 700;
	font-size: $smallFontSize;
	text-transform: uppercase;
	border: 1px solid rgba(0, 0, 0, 0);
	border-bottom: none;
	@media (min-width: $breakTablet) {
		color: #fff;
		font-weight: 600;
		font-size: $fontSize;
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.3);
		width: calc($gutterY * 4);
		background-size: 32px;
		background-position: 50% calc(($gutterY * 2) / 1.618);
		border-top: none;
	}
	/*&:first-child {
		border-left: none;
	}
	&:last-child {
		border-right: none;
	}*/

	&.state-firefox {
		@media (min-width: $breakTablet) {
			background-size: 48px;
			width: calc($gutterY * 6);
			background-position: 50% calc($gutterY);
		}
	}
	&.state-chrome {
		background-image: url(https://raw.githubusercontent.com/alrra/browser-logos/master/chrome/chrome_64x64.png);
	}
	&.state-firefox {
		background-image: url(https://raw.githubusercontent.com/alrra/browser-logos/master/firefox/firefox_128x128.png);
	}
	&.state-edge {
		background-image: url(https://raw.githubusercontent.com/alrra/browser-logos/master/edge/edge_64x64.png);
	}
	&.state-webkit {
		background-image: url(https://raw.githubusercontent.com/alrra/browser-logos/master/safari/safari_64x64.png);
	}
}
.status-inner {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	color: inherit;
	&:hover, &:focus, &:active {
    text-decoration: none;
		color: inherit;
  }
}

$stateUnknown: $lightGray;
$stateNotPlanned: $firefoxOrange;
$stateDeprecated: $firefoxOrange;
$stateConsidering: $marketOrange;
$stateDeveloping: $flameYellow;
$stateShipped: $geckoGreen;

$stateUnknownLight: $lightGray;
$stateNotPlannedLight: $firefoxOrangeTint;
$stateDeprecatedLight: $firefoxOrangeTint;
$stateConsideringLight: $marketOrangeTint;
$stateDevelopingLight: $flameYellowTint;
$stateShippedLight: $geckoGreenTint;

$stateShade: -2%;
$stateAlpha: 100%;
$fadeStart: 70%;
$fadeMid: 10%;
$fadeHeight: 25%;

{'fraction_non_alphanumeric': 0.1654592612467579, 'fraction_numerical': 0.029872104462928182, 'mean_word_length': 4.292001893043067, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 8, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6049174', 'n_tokens_mistral': 4958, 'n_tokens_neox': 4514, 'n_words': 882}