body {
  font-family: "Open Sans", Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.title {
  text-align: center;
}

.grid {
  display: flex;
  flex-direction: column;
}

.year {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.week {
  border: 1px solid lightgray;
  height: 8px;
  width: 8px;
  margin: 4px;
}

body {
  font-family: "Open Sans", Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.title {
  text-align: center;
}

@week-box-size: 8px;
@week-box-margin: 4px;
@year-line-length: 52 * (@week-box-size + (2 * @week-box-margin));
.grid {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.year {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: @year-line-length;
}

.week {
  border: 1px solid lightgray;
  height: @week-box-size;
  width: @week-box-size;
  margin: @week-box-margin;
}

Fix size of year line
Fix size of year line
