<commit_before>
/* Variables */

$timeline-color: $primary;
$timeline-inactive-color: $medium-gray;

$timeline-padding: 1rem;



/* Timeline */

.timeline {
	list-style: none;
  margin: 2rem 0 0;
	transition: all .4s ease;
}

.timeline__item {
  padding-bottom: 2em;
  position: relative;
  &:before {
		content:"";
		width: 3px;
		height: 100%;
		background: $timeline-color;
		left: 1rem;
		top: 0;
		position: absolute;
    @include breakpoint(medium){
      left: 50%;
    }
	}
	&:after {
		content: "";
		clear: both;
		display: table;
		width: 100%;
	}
  &:last-of-type:before{
    width: 0;
  }
}

.timeline__phase{
  width: 30px;
  height: 30px;
  margin-left: -13px;
  position: absolute;
  top: 0;
  left: 1rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: $timeline-color;
  border: 2px solid $white;
  box-shadow: 0 0 0 1px $medium-gray;
  @include breakpoint(medium){
    left: 50%;
  }
}

.timeline__phase__number{
  display: block;
  text-align: center;
  line-height: 1;
  color: $white;
  font-weight: 600;
  font-size: 1.2em;
  align-self: center;
  margin-left: 1px;
  margin-top: -1px;
}

.timeline__desc{
  width: 90%;
  float: right;
  padding: $timeline-padding/2 $timeline-padding 0;
  border: 1px solid $timeline-color;
  transition: all .3s ease;
  transform: translateY(-.4rem);
  @include breakpoint(medium){
    width: 45%;
    float: left;
  }
  &:before {
    content: '';
    position: absolute;
    right: 100%;
    top: .6rem;
    width: 0;
    height: 0;<commit_msg>timeline description width - better for small screen<commit_after>
/* Variables */

$timeline-color: $primary;
$timeline-inactive-color: $medium-gray;

$timeline-padding: 1rem;



/* Timeline */

.timeline {
	list-style: none;
  margin: 2rem 0 0;
	transition: all .4s ease;
}

.timeline__item {
  padding-bottom: 2em;
  position: relative;
  &:before {
		content:"";
		width: 3px;
		height: 100%;
		background: $timeline-color;
		left: 1rem;
		top: 0;
		position: absolute;
    @include breakpoint(medium){
      left: 50%;
    }
	}
	&:after {
		content: "";
		clear: both;
		display: table;
		width: 100%;
	}
  &:last-of-type:before{
    width: 0;
  }
}

.timeline__phase{
  width: 30px;
  height: 30px;
  margin-left: -13px;
  position: absolute;
  top: 0;
  left: 1rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: $timeline-color;
  border: 2px solid $white;
  box-shadow: 0 0 0 1px $medium-gray;
  @include breakpoint(medium){
    left: 50%;
  }
}

.timeline__phase__number{
  display: block;
  text-align: center;
  line-height: 1;
  color: $white;
  font-weight: 600;
  font-size: 1.2em;
  align-self: center;
  margin-left: 1px;
  margin-top: -1px;
}

.timeline__desc{
  width: 90%;
  width: calc(100% - 45px);
  float: right;
  padding: $timeline-padding/2 $timeline-padding 0;
  border: 1px solid $timeline-color;
  transition: all .3s ease;
  transform: translateY(-.4rem);
  @include breakpoint(medium){
    width: 45%;
    float: left;
  }
  &:before {
    content: '';
    position: absolute;
    right: 100%;
    top: .6rem;
    width: 0;
    height: 0;
{'fraction_non_alphanumeric': 0.1506763133060711, 'fraction_numerical': 0.03806228373702422, 'mean_word_length': 3.097938144329897, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '3004941', 'n_tokens_mistral': 1359, 'n_tokens_neox': 1227, 'n_words': 302}