<commit_before>.hover-img {
	opacity: .3;

	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-ms-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
  transition: opacity .5s ease;

	&:hover {
		opacity: 1;
	}
}

.hover-link {
	opacity: .3;

	-webkit-transition: opacity .5s ease, color .6s ease-in;
	-moz-transition: opacity .5s ease, color .5s ease;
	-ms-transition: opacity .5s ease, color .5s ease;
	-o-transition: opacity .5s ease, color .5s ease;
  transition: opacity .5s ease, color .6s ease-in;

	&:hover {
		opacity: 1;
	}
}

// !!! make this nicer
.golden-content {
	max-width: 77.1rem;
  padding: 0px 1.1rem;
}

a {
	// color: @gray-light;
	color: @text-color;
	font-family: @headings-font-family;

	&:hover {
		text-decoration: none;
	}
}

// !!! this is also gross
// should be using the font-size variable
p {
	font-size: 14px; font-size: 1.4rem;
	a {
		font-size: 24px; font-size: 2.4rem;
		font-weight: bold;
		// consider text-transform uppercase
	}
}

// # Variables
// ____________

@border-color: @golden-gray-lighter;

// # Header
// _________

@trim-height: 8px;
@header-height: 50px;
@num-trim-colors: 12;

#header {
 position: fixed;
 height: @trim-height + @header-height;
 width: 100%;
 z-index: @zindex-navbar;
}

.trim-color-block {
	height: @trim-height;
	width: 100% / @num-trim-colors;
	margin: 0;
	padding: 0;
	float: left;
	opacity: 1;
}

.header {
	margin-top: @trim-height;
	height: @header-height;
	background-color: @white;
	opacity: .9;
	border-bottom: 1px solid @border-color;

	text-align: left;

	.header-icon {
		font-size: 26px; font-size: 2.6rem;
		line-height: @header-height;
		margin-left: 13px;
	}

	// TODO(joe): consider changing this image to something with color
	// TODO(joe): consider turning this into a font format
	.header-icon-image {
		height: 35px;
		margin-bottom: 8px;
		margin-left: 8px;
		margin-right: -4px;
	}
}

// # Nav
// _______

@nav-margin-top: @trim-height;
@nav-height: @header-height;
@nav-item-horizontal-spacing: 14px;
@nav-border-color: @border-color;

.nav-fixed-buffer {
	height: @nav-height;
	margin-top: @nav-margin-top;
}

.nav-container {
  height: @nav-height;
  margin-top: @nav-margin-top;

  text-align: right;

  .nav-icon {
		padding: 0 20px; padding: 0 2rem;
		font-size: 26px; font-size: 2.6rem;
		line-height: @nav-height;
	}
}

.nav {
	display: inline-block;
  padding: 0px @nav-item-horizontal-spacing;
}

.nav-item,
.nav-item a {
  display: inline-block;
  line-height: @nav-height;
  padding: 0px @nav-item-horizontal-spacing;

  font-size: 18px; font-size: 1.8rem;
  font-weight: lighter;

  &:hover {
  	// !!! perhaps transition this
  	// !!! need to not use line height for vert centering
  	// causes pixel jumping in stacked layouts
  	font-weight: bold;
  }
}

// # Nav not fixed

.nav-container {
	.nav {
		border-bottom: 1px solid @nav-border-color;
	}
}

// # Nav fixed

.nav-container {

	// Reusable styles a fixed nav
	.fixed() {
		position: fixed;
		width: 100%;
		top: 0px;
		left: 0px;
		z-index: @zindex-navbar-fixed;
		margin: 0px;
		margin-top: @trim-height;
	}

	&.fixed {
		.nav-container.fixed();
	}

	&.fixed .nav {
		// Already a border being shown from the header
		border: none;
	}
}

// # Nav on phones
// - fix to the top

@media (max-width: @screen-xs-max) {
  .nav-container {

		.nav-container.fixed();

		text-align: left;

  	&.fixed .nav {
  		// Show a bottom border on expanded nav in mobile
  		border-bottom: 1px solid @nav-border-color;
  	}

	  .nav-icon {
			position: absolute;
			top: 0px;
			right: 0px;
		}
  }

  .nav {
  	left: 0px;
  	display: block;
  	width: 100%;
  	margin-top: @header-height;

  	background-color: @white;
  }

  .nav-item {
  	display: block;
  }
}

// # Content
// ___________

#content {
	padding-top: @trim-height + @header-height;
}

// # Intro
// ___________

@intro-title-height: 203px;

#intro {
	.intro-img {
		width: @intro-title-height;
	}
	.intro-title-header {
		margin: 0;
		line-height: @intro-title-height;
	}

}

// # Responsive
// - font-size
// - spacing
// !!! perfect this later by asking people if they like it
// ____________

// Smaller than xs (so even more so mobile)
@screen-xxs-max: 565px;

// making the font bigger on mobile
@media (max-width: @screen-xxs-max) {
	.intro-title-header {
		font-size: 68px;
	}

	.golden-content {
		padding: 0px;

		p {
			font-size: 24px; font-size: 2.4rem;
			a {
				font-size: 18px; font-size: 1.8rem;
			}
		}
	}
}

// set the splash area spacing by abusing media queries
@media (max-width: @screen-xs-max) {
  #intro {
		padding-top: 196px;
		padding-bottom: 94px;
	}

	#intro-summary {
		margin-top: 73px;
		margin-bottom: 23px;
	}

	#projects {
		padding-top: 94px;
	}
}
// xxs overrides xs if necessary
@media (max-width: @screen-xxs-max) {
  #intro {
		padding-top: 105px;
		padding-bottom: 94px;
	}

	#intro-summary {
		margin-top: 92px;
		margin-bottom: 0px;
	}

	#projects {
		padding-top: 94px;
	}
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  #intro {
		padding-top: 196px;
		padding-bottom: 94px;
	}

	#intro-summary {
		margin-top: 73px;
		margin-bottom: 49px;
	}

	#projects {
		padding-top: 94px;
	}
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
	#intro {
		padding-top: 277px;
		padding-bottom: 94px;
	}

	#intro-summary {
		margin-top: 170px;
		margin-bottom: 62px;
	}

	#projects {
		padding-top: 94px;
	}
}
@media (min-width: @screen-lg-min) {
	#intro {
		padding-top: 277px;
		padding-bottom: 94px;
	}

	#intro-summary {
		margin-top: 170px;
		margin-bottom: 62px;
	}

	#projects {
		padding-top: 94px;
	}
}

// # Projects
// ____________

#projects {
	// padding-top is handling by # Spacing
	padding-bottom: 80px;
	border-top: 1px solid @border-color;
	border-bottom: 1px solid @border-color;
}

// # Posts
// ____________

#posts {
	padding-top: 80px; padding-top: 9vh;
	padding-bottom: 80px; padding-bottom: 9vh;
	border-bottom: 1px solid @border-color;
}

// # Pics
// ____________

#pics {
	padding-top: 80px; padding-top: 9vh;
	padding-bottom: 80px; padding-bottom: 9vh;
	border-bottom: 1px solid @border-color;
}<commit_msg>comments<commit_after>// # General utilities
// !!! consider pulling these out into better modules
// ______________________

.hover-img {
	opacity: .3;

	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-ms-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
  transition: opacity .5s ease;

	&:hover {
		opacity: 1;
	}
}

.hover-link {
	opacity: .3;

	-webkit-transition: opacity .5s ease, color .6s ease-in;
	-moz-transition: opacity .5s ease, color .5s ease;
	-ms-transition: opacity .5s ease, color .5s ease;
	-o-transition: opacity .5s ease, color .5s ease;
  transition: opacity .5s ease, color .6s ease-in;

	&:hover {
		opacity: 1;
	}
}




// ________________________
// !!! edit this stuff

// !!! make this nicer
.golden-content {
	max-width: 77.1rem;
  padding: 0px 1.1rem;
}

a {
	// color: @gray-light;
	color: @text-color;
	font-family: @headings-font-family;

	&:hover {
		text-decoration: none;
	}
}

// !!! this is also gross
// should be using the font-size variable
p {
	font-size: 14px; font-size: 1.4rem;
	a {
		font-size: 24px; font-size: 2.4rem;
		font-weight: bold;
		// consider text-transform uppercase
	}
}

// __________________________________





// # Variables
// ____________

@border-color: @golden-gray-lighter;

// # Header
// _________

@trim-height: 8px;
@header-height: 50px;
@num-trim-colors: 12;

#header {
 position: fixed;
 height: @trim-height + @header-height;
 width: 100%;
 z-index: @zindex-navbar;
}

.trim-color-block {
	height: @trim-height;
	width: 100% / @num-trim-colors;
	margin: 0;
	padding: 0;
	float: left;
	opacity: 1;
}

.header {
	margin-top: @trim-height;
	height: @header-height;
	background-color: @white;
	opacity: .9;
	border-bottom: 1px solid @border-color;

	text-align: left;

	.header-icon {
		font-size: 26px; font-size: 2.6rem;
		line-height: @header-height;
		margin-left: 13px;
	}

	// TODO(joe): consider changing this image to something with color
	// TODO(joe): consider turning this into a font format
	.header-icon-image {
		height: 35px;
		margin-bottom: 8px;
		margin-left: 8px;
		margin-right: -4px;
	}
}

// # Nav
// _______

@nav-margin-top: @trim-height;
@nav-height: @header-height;
@nav-item-horizontal-spacing: 14px;
@nav-border-color: @border-color;

.nav-fixed-buffer {
	height: @nav-height;
	margin-top: @nav-margin-top;
}

.nav-container {
  height: @nav-height;
  margin-top: @nav-margin-top;

  text-align: right;

  .nav-icon {
		padding: 0 20px; padding: 0 2rem;
		font-size: 26px; font-size: 2.6rem;
		line-height: @nav-height;
	}
}

.nav {
	display: inline-block;
  padding: 0px @nav-item-horizontal-spacing;
}

.nav-item,
.nav-item a {
  display: inline-block;
  line-height: @nav-height;
  padding: 0px @nav-item-horizontal-spacing;

  font-size: 18px; font-size: 1.8rem;
  font-weight: lighter;

  &:hover {
  	// !!! perhaps transition this
  	// !!! need to not use line height for vert centering
  	// causes pixel jumping in stacked layouts
  	font-weight: bold;
  }
}

// ## Nav not fixed

.nav-container {
	.nav {
		border-bottom: 1px solid @nav-border-color;
	}
}

// ## Nav fixed

.nav-container {

	// Reusable styles a fixed nav
	.fixed() {
		position: fixed;
		width: 100%;
		top: 0px;
		left: 0px;
		z-index: @zindex-navbar-fixed;
		margin: 0px;
		margin-top: @trim-height;
	}

	&.fixed {
		.nav-container.fixed();
	}

	&.fixed .nav {
		// Already a border being shown from the header
		border: none;
	}
}

// ## Nav on phones
// - fix to the top

@media (max-width: @screen-xs-max) {
  .nav-container {

		.nav-container.fixed();

		text-align: left;

  	&.fixed .nav {
  		// Show a bottom border on expanded nav in mobile
  		border-bottom: 1px solid @nav-border-color;
  	}

	  .nav-icon {
			position: absolute;
			top: 0px;
			right: 0px;
		}
  }

  .nav {
  	left: 0px;
  	display: block;
  	width: 100%;
  	margin-top: @header-height;

  	background-color: @white;
  }

  .nav-item {
  	display: block;
  }
}

// # Content
// ___________

#content {
	padding-top: @trim-height + @header-height;
}

// # Intro
// ___________

@intro-title-height: 203px;

#intro {
	.intro-img {
		width: @intro-title-height;
	}
	.intro-title-header {
		margin: 0;
		line-height: @intro-title-height;
	}

}

// # Responsive sizing
// - font-size
// - margin and padding
// !!! improve this later by asking people if they like it
// ________________________

// Smaller than xs (so even more so mobile)
@screen-xxs-max: 565px;

// making the font bigger on mobile
@media (max-width: @screen-xxs-max) {
	.intro-title-header {
		font-size: 68px;
	}

	.golden-content {
		padding: 0px;

		p {
			font-size: 24px; font-size: 2.4rem;
			a {
				font-size: 18px; font-size: 1.8rem;
			}
		}
	}
}

// set the intro area spacing by abusing media queries
@media (max-width: @screen-xs-max) {
  #intro {
		padding-top: 196px;
		padding-bottom: 94px;
	}

	#intro-summary {
		margin-top: 73px;
		margin-bottom: 23px;
	}

	#projects {
		padding-top: 94px;
	}
}
// xxs overrides xs if necessary
@media (max-width: @screen-xxs-max) {
  #intro {
		padding-top: 105px;
		padding-bottom: 94px;
	}

	#intro-summary {
		margin-top: 92px;
		margin-bottom: 0px;
	}

	#projects {
		padding-top: 94px;
	}
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  #intro {
		padding-top: 196px;
		padding-bottom: 94px;
	}

	#intro-summary {
		margin-top: 73px;
		margin-bottom: 49px;
	}

	#projects {
		padding-top: 94px;
	}
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
	#intro {
		padding-top: 277px;
		padding-bottom: 94px;
	}

	#intro-summary {
		margin-top: 170px;
		margin-bottom: 62px;
	}

	#projects {
		padding-top: 94px;
	}
}
@media (min-width: @screen-lg-min) {
	#intro {
		padding-top: 277px;
		padding-bottom: 94px;
	}

	#intro-summary {
		margin-top: 170px;
		margin-bottom: 62px;
	}

	#projects {
		padding-top: 94px;
	}
}

// # Sections
// !!! consider pulling more of this into a general class
// ____________

@section-padding-vertical: 90px;

// # Projects
// ____________

#projects {
	// padding-top is handling by #Responsive
	padding-bottom: @section-padding-vertical;
	border-top: 1px solid @border-color;
	border-bottom: 1px solid @border-color;
}

// # Posts
// ____________

#posts {
	padding-top: @section-padding-vertical;
	padding-bottom: @section-padding-vertical;
	border-bottom: 1px solid @border-color;
}

// # Pics
// ____________

#pics {
	padding-top: @section-padding-vertical;
	padding-bottom: @section-padding-vertical;
	border-bottom: 1px solid @border-color;
}
{'fraction_non_alphanumeric': 0.15848582423623656, 'fraction_numerical': 0.027801774915573705, 'mean_word_length': 2.924191063174114, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 4, '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': '5033481', 'n_tokens_mistral': 5582, 'n_tokens_neox': 4965, 'n_words': 1176}