jAdYzV

index.haml

.month
  - (0..3).each do |i|
    .week
      - (1..7).each do |j|
        .day{:class => (j%7 == 0 || j%6 == 0) && "day--is-weekend"}
          %p
            %span #{(i*7)+j}
  .week
    .day
      %p
        %span 29
    .day
      %p 
        %span 30
    .day
      %p 
        %span 31
    - (1..4).each do |i|
      .day.day--outside

jadyzv.markdown

jAdYzV

A Pen by Johan Stenehall on CodePen.

License.

style.scss

.month {
  margin: 0 auto;
  max-width: 500px;
  border-bottom: 1px solid #ddd;
}

.week {
  display: flex;
  flex-direction: row;
  border: 1px solid #ddd;
  border-width: 1px 0px 0 1px
}

.day {
  flex-grow:1;
  flex-basis: 0;
  border-right: 1px solid #ddd;
  position: relative;

   &:before {
    display: block;
    content: "";
    padding-top: 100%;
  }
}

p {
  margin: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justfify-content: center;
  align-items: center;
}

span {
  width: 100%;
  text-align: center;
  
  &:before {
    position: absolute;
    bottom: 20%;
    left: 30%;
    width: 40%;
    border: 2px solid #ddd;
    content: "";
  }
}