<commit_before><!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Grids</title>

		<link rel="stylesheet" href="./assets/styles.css">
		<link rel="stylesheet" href="./assets/grid.css">
	</head>
	<body>
		<header class="row">
			<div class="col12">
				<h1>Octopus Grid</h1>

				<p>Essentially, the Octopus Grid is a 12 column grid that has adjustable behaviors for its "collapsed" and "expanded" states. Any given "row" of the grid will have:</p>
				<ul>
					<li>a "collapsed fluid" state for <640</li>
					<li>a "squished normal" state for 640 ---> <960</li>
					<li>a "normal" state for 960 ---> <1280</li>
					<li>an "expanded state" for >= 1280</li>
				</ul>
				<p>For example, if you used the class <em>.row.clp8.exp16</em>, it would be 12 columns for tablets and "normal" desktop, but on mobile it would be 8 columns and on "large" desktop it would be 16 columns. Using this setup, mobile would fit two 4-column items, "large" desktop would fit four 4-column items, and everything else would fit 3 as per "normal"</p>
			</div>
		</header>

		<main>
			<section>
				<div class="row">
					<div class="col12">Default Behavior</div>
				</div>

				<div class="row">
					<div class="col6">1 of 2</div>
					<div class="col6">2 of 2</div>
				</div>

				<div class="row">
					<div class="col4">1 of 3</div>
					<div class="col4">2 of 3</div>
					<div class="col4">3 of 3</div>
				</div>

				<div class="row">
					<div class="col3">1 of 4</div>
					<div class="col3">2 of 4</div>
					<div class="col3">3 of 4</div>
					<div class="col3">4 of 4</div>
				</div>

				<div class="row">
					<div class="col2">1 of 6</div>
					<div class="col2">2 of 6</div>
					<div class="col2">3 of 6</div>
					<div class="col2">4 of 6</div>
					<div class="col2">5 of 6</div>
					<div class="col2">6 of 6</div>
				</div>

				<div class="row">
					<div class="col1">1 of 12</div>
					<div class="col1">2 of 12</div>
					<div class="col1">3 of 12</div>
					<div class="col1">4 of 12</div>
					<div class="col1">5 of 12</div>
					<div class="col1">6 of 12</div>
					<div class="col1">7 of 12</div>
					<div class="col1">8 of 12</div>
					<div class="col1">9 of 12</div>
					<div class="col1">10 of 12</div>
					<div class="col1">11 of 12</div>
					<div class="col1">12 of 12</div>
				</div>

				<div class="row">
					<div class="col4 push4">.col4.push4</div>
				</div>
			</section>

			<section>
				<div class="row exp16 clp8">
					<div class="col12">exp16 clp8</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col6">1 of 2</div>
					<div class="col6">2 of 2</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col4">1 of 3</div>
					<div class="col4">2 of 3</div>
					<div class="col4">3 of 3</div>
					<div class="col4">4 of 3</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col3">1 of 4</div>
					<div class="col3">2 of 4</div>
					<div class="col3">3 of 4</div>
					<div class="col3">4 of 4</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col2">1 of 6</div>
					<div class="col2">2 of 6</div>
					<div class="col2">3 of 6</div>
					<div class="col2">4 of 6</div>
					<div class="col2">5 of 6</div>
					<div class="col2">6 of 6</div>
					<div class="col2">7 of 6</div>
					<div class="col2">8 of 6</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col1">1 of 12</div>
					<div class="col1">2 of 12</div>
					<div class="col1">3 of 12</div>
					<div class="col1">4 of 12</div>
					<div class="col1">5 of 12</div>
					<div class="col1">6 of 12</div>
					<div class="col1">7 of 12</div>
					<div class="col1">8 of 12</div>
					<div class="col1">9 of 12</div>
					<div class="col1">10 of 12</div>
					<div class="col1">11 of 12</div>
					<div class="col1">12 of 12</div>
					<div class="col1">13 of 12</div>
					<div class="col1">14 of 12</div>
					<div class="col1">15 of 12</div>
					<div class="col1">16 of 12</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col6 push3">.col6.push3</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col8 push2">.col8.push2</div>
				</div>
			</section>
		</main>
	</body>
</html><commit_msg>Updated example HTML for clarity<commit_after><!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Grids</title>

		<link rel="stylesheet" href="./assets/styles.css">
		<link rel="stylesheet" href="./assets/grid.css">
	</head>
	<body>
		<header class="row">
			<div class="col12">
				<h1>Octopus Grid</h1>

				<p>Essentially, the Octopus Grid is a 12 column grid that has adjustable behaviors for its "collapsed" and "expanded" states. Any given "row" of the grid will have:</p>
				<ul>
					<li>a "collapsed fluid" state for <640</li>
					<li>a "squished normal" state for 640 ---> <960</li>
					<li>a "normal" state for 960 ---> <1280</li>
					<li>an "expanded state" for >= 1280</li>
				</ul>
				<p>For example, if you used the class <em>.row.clp8.exp16</em>, it would be 12 columns for tablets and "normal" desktop, but on mobile it would be 8 columns and on "large" desktop it would be 16 columns. Using this setup, mobile would fit two 4-column items, "large" desktop would fit four 4-column items, and everything else would fit 3 as per "normal"</p>
			</div>
		</header>

		<main>
			<section>
				<div class="row">
					<div class="col12">.col12 (.row)</div>
				</div>

				<div class="row">
					<div class="col6">.col6</div>
					<div class="col6">.col6</div>
				</div>

				<div class="row">
					<div class="col4">.col4</div>
					<div class="col4">.col4</div>
					<div class="col4">.col4</div>
				</div>

				<div class="row">
					<div class="col3">.col3</div>
					<div class="col3">.col3</div>
					<div class="col3">.col3</div>
					<div class="col3">.col3</div>
				</div>

				<div class="row">
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
				</div>

				<div class="row">
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
				</div>

				<div class="row">
					<div class="col4 push4">.col4.push4</div>
				</div>
			</section>

			<section>
				<div class="row exp16 clp8">
					<div class="col12">.col12 (.row.exp16.clp8)</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col6">.col6</div>
					<div class="col6">.col6</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col4">.col4</div>
					<div class="col4">.col4</div>
					<div class="col4">.col4</div>
					<div class="col4">.col4</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col3">.col3</div>
					<div class="col3">.col3</div>
					<div class="col3">.col3</div>
					<div class="col3">.col3</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
					<div class="col2">.col2</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
					<div class="col1">.col1</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col6 push3">.col6.push3</div>
				</div>

				<div class="row exp16 clp8">
					<div class="col8 push2">.col8.push2</div>
				</div>
			</section>
		</main>
	</body>
</html>
{'fraction_non_alphanumeric': 0.2079419807395078, 'fraction_numerical': 0.06051599096421353, 'mean_word_length': 2.7755834829443446, 'pattern_counts': {'":': 0, '<': 413, '<?xml version=': 0, '>': 413, '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': '4168485', 'n_tokens_mistral': 4338, 'n_tokens_neox': 3297, 'n_words': 811}