Flexbox Calendar

Flexbox Calendar.markdown

Flexbox Calendar

A flexbox calendar with day animations.

A Pen by C-Rodg on CodePen.

License.

index.html

<h1>July 2015</h1>
<div class="month">
  <div class="week">
    <div class="day">1</div>
    <div class="day">2</div>
    <div class="day">3</div>
    <div class="day">4</div>
  </div>
  <div class="week">
    <div class="day">5</div>
    <div class="day">6</div>
    <div class="day">7</div>
    <div class="day">8</div>
    <div class="day">9</div>
    <div class="day">10</div>
    <div class="day">11</div>
  </div>
  <div class="week">
    <div class="day">12</div>
    <div class="day">13</div>
    <div class="day">14</div>
    <div class="day">15</div>
    <div class="day">16</div>
    <div class="day">17</div>
    <div class="day">18</div>
  </div>
  <div class="week">
    <div class="day">19</div>
    <div class="day">20</div>
    <div class="day">21</div>
    <div class="day">22</div>
    <div class="day">23</div>
    <div class="day">24</div>
    <div class="day">25</div>
  </div>
  <div class="week">
    <div class="day">26</div>
    <div class="day">27</div>
    <div class="day">28</div>
    <div class="day">29</div>
    <div class="day">30</div>
    <div class="day">31</div>
  </div>
</div>

style.css

html,body {
  font-family:sans-serif;
  height: 100%;
  background: linear-gradient(top, #34495e, #2c3e50);
  background-attachment: fixed;
}

h1 {
  text-align: center;
  color: rgba(255,255,255,0.8);
  margin: 20px auto;
  font-size: 2em;
}

.month {
  height:100%;
  margin: 30px auto;
  max-width: 600px;
}

.week {
  display: flex;
  height:80px;
}
.day {
  flex: 1 1 0;
  color: #ecf0f1;
  border-top: 1px solid #34495e;
  border-left: 1px solid #34495e;
  padding:5px;
  color: #34495e;
  background-color: rgba(255,255,255,0.4);
  transition: all .28s ease-in-out;
}
.day:last-child {
  border-right: 1px solid #34495e;
}
.week:last-child .day {
  border-bottom: 1px solid #34495e;
}

.week:first-child .day:first-child {
  margin-left:42.75%
}
.week:last-child .day:last-child {
  margin-right:14.4%;
}

.day:hover {
  background-color: rgba(255,255,255,1);
  font-size:4em;
}