<commit_before>/*================================================*\
	COLUMNS STYLING FILE
----------------------------------------------------
	This file holds all the classes that handle
	general site structure. A three column module
	would have the "column" and "thirds"
	class on it
\*================================================*/

//The styling for the central box that holds the whole page content
.container { margin:0 auto; max-width:$bp-large; }

//place on an element holding columns to contain them
//and also remove dot points
.columns { @extend %clearfix; @extend %noDots; }

.column { float: left; padding: 0; margin: 0; }

.full { width: 100%; }
.halves { width: 50%;
	@include M-mq(max,$bp-mobile){
		width: 100%;
	}
}
.thirds { width: 33.33%;
	@include M-mq(max,$bp-mobile){
		width: 100%;
	}
	&.colspan2 { width: 66.66%;
		@include M-mq(max,$bp-mobile){
			width: 100%;
		}
	}
}
.quarters { width: 25%;
	@include M-mq(max,$bp-tablet){
		width: 50%;
	}
	@include M-mq(max,$bp-mobile){
		width: 100%;
	}
}
.fiths { width: 20%;
	@include M-mq(max,$bp-tablet){
		width: 100%;
	}
	&.colspan2 { width: 40%;
		@include M-mq(max,$bp-tablet){
			width: 100%;
		}
	}
	&.colspan3 { width: 60%;
		@include M-mq(max,$bp-tablet){
			width: 100%;
		}
	}
	&.colspan4 { width: 80%;
		@include M-mq(max,$bp-tablet){
			width: 100%;
		}
	}
}
.sixths { width: 16.66%;
	@include M-mq(max,$bp-tablet){
		width: 50%;
	}
	@include M-mq(max,$bp-mobile){
		width: 100%;
	}
	//colspan2 = 1/3
	//colspan3 = 1/2
	//colspan4 = 2/3
	&.colspan5 { width: 83.33%; }
}<commit_msg>X - new column system progress<commit_after>/*================================================*\
	COLUMNS STYLING FILE
----------------------------------------------------
	This file holds all the classes that handle
	general site structure. A three column module
	would have the "column" and "thirds"
	class on it
\*================================================*/

//The styling for the central box that holds the whole page content
.container { margin:0 auto; max-width:$bp-tablet; }


.columns {
/*================================================*\
	FLOATED COLUMNS
----------------------------------------------------
	These columns all share the same repeating
	width. They will not share the same heights
	without the help of js.
	They will wrap.
\*================================================*/
	&--floated { @extend %clearfix; @extend %noDots;
		.column { float: left; padding: 0; margin: 0;
			&-padding { padding: 0 5%; }

			@include M-mq(max,$bp-mobile){
				margin-bottom: 20px;
			}
		}
	}
	@include M-mq(max,$bp-phablet){
		&--fiths { text-align: center; }
	}


/*================================================*\
	TABULAR COLUMNS
----------------------------------------------------
	These columns act like table cells. They will
	all be the same height but will vary in width
	based on the content inside them. They will
	not wrap.
\*================================================*/
	&--tabular {
		display: table;
		width: 100%;
		@extend %noDots;
		@include M-mq(max,$bp-mobile){
			display: block;
			@include M-after { clear: both; }
		}

		.column {
			display: table-cell;
			@include M-mq(max,$bp-mobile){
				width: 100%;
				display: block;
				float: left;
			}

			&--vAlign { vertical-align: middle; }
		}
	}

/*================================================*\
	COLUMN WIDTHS
----------------------------------------------------
	Quickly and easily apply standard percentage
	widths to columns based on fractions
\*================================================*/
	$colWidths: (
		class: full,
		breaks: false,
	), (
		class: halves,
		breaks: (
			(
				bp:$bp-mobile,
				width: 100%,
			),
		)
	), (
		class: thirds,
		breaks: (
			$bp-mobile 100%,
		)
	), (
		class: quarters,
		breaks: (
			(
				bp: $bp-tablet,
				width: 50%,
			), (
				bp:$bp-mobile,
				width: 100%,
			),
		),
	), (
		class: fiths,
		breaks: (
			(
				bp: $bp-phablet,
				width: 33.33%,
			), (
				bp:$bp-mobile,
				width: 50%,
			), (
				bp: $bp-small,
				width: 100%,
			),
		),
	), (
		class: sixths,
		breaks:	(
			(
				bp: $bp-phablet,
				width: 33.33%,
			), (
				bp:$bp-mobile,
				width: 50%,
			), (
				bp: $bp-small,
				width: 100%,
			),
		),
	);

	@for $i from 1 through length($colWidths) {
		$array: nth($colWidths, $i);
		$class: map-get($array, class);
		$breaks: nth(map-get($array, breaks),1);

		&--#{$class} .column {
			width: percentage(1/$i);

			@if ($i > 2){
				@for $x from 2 through ($i - 1) {
					&--span#{$x} { width: percentage($x/$i); }
				}
			}

			@if ($breaks != false) {
				@debug $breaks;
				@for $y from 1 through length(nth($breaks,1)) {
					$device : nth($breaks, 1);
					$width : nth($breaks, 2);
					@include M-mq(max,$device){ width: $width }
				}
			}
		}
	}


}
{'fraction_non_alphanumeric': 0.3034267912772586, 'fraction_numerical': 0.027206645898234683, 'mean_word_length': 2.5153284671532847, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 4, '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': '4494161', 'n_tokens_mistral': 2004, 'n_tokens_neox': 1626, 'n_words': 432}