A Pen by Rob.

index.html

<div class="wrapper">
  <table id="header-table">
    <tbody>
      <tr>
        <td>July 2013</td>
      </tr>
      <tr>
        <td>Your date with a Cold Beer is tomorrow</td>
      </tr>
    </tbody>
  </table>
  <table id="day-names">
    <tbody>
      <tr>
        <td>Monday</td>
        <td>Tuesday</td>
        <td>Wednesday</td>
        <td>Thursday</td>
        <td>Friday</td>
        <td>Saturday</td>
        <td>Sunday</td>
      </tr>
    </tbody>
  </table>
  <table class="week">
    <tr>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td class="event holiday">5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>Independence Day (USA)</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td class="today date">7</td>
      <td class="event important">8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
    </tr>
    <tr>
      <td class="today">&nbsp;</td>
      <td class="description">Date with Cold Beer</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td class="event holiday">14</td>
      <td>15</td>
      <td>16</td>
      <td>17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
    </tr>
    <tr>
      <td class="description">Bastille Day (France)</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td>21</td>
      <td>22</td>
      <td class="event appointment">23</td>
      <td>24</td>
      <td>25</td>
      <td>26</td>
      <td>27</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>Doctor's Appointment</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>Work Picnic</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  <table class="week">
    <tr>
      <td>28</td>
      <td>29</td>
      <td>30</td>
      <td>31</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

Responsive-Calendar.markdown

Responsive Calendar

Playing with html and responsive CSS in the form of a calendar. Resize the screen to see how it changes.

A Pen by Rob on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto);

body {
  background-color: #f1f1f1;
  font-family: 'Roboto', sans-serif;
}

.wrapper {
  width: 800px;
  padding: 4px;
}

table {
  width: 100%;
  font-size: 14px;
  border-left: 1px solid #d6d6d6;
}

td {
  border-right: 1px solid #d6d6d6;
}

#header-table tr:first-child {
  text-align: center;
  color: #0055ff;
  border-top: 1px solid #d6d6d6;
  text-shadow: 1px 1px 3px rgba(0, 85, 255, 0.3);
}

#header-table tr:nth-child(2) {
  background-color: #A4C739;
  color: white;
  border: 1px solid #d6c1d6;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

#header-table td {
  padding: 4px;
}

#day-names {
  text-align: center;
  border-bottom: 1px solid #d6d6d6;
}

#day-names td {
  width: 14.2857%;
  height: 22px;
}

table.week {
  font-size: 75%;
}

table.week {
  height: 80px;
  border-bottom: 1px solid #d6d6d6;
}

table.week td {
  width: 14.2857%;
  padding: 2px 3px;
}

td.today {
  font-weight: bold;
  background-color: rgba(181, 228, 206, .4);
}

td.today.date {
  font-size: 110%;
  text-shadow: 1px 1px 3px rgba(25,25,25, 0.3);
}

table.week tr:first-child {
  height: 25%;
}

table.week tr:nth-child(2) {
  height: 75%;
}

.event.holiday {
  background-color: #c5c5ee;
}

td.event.important {
  background-color: #A4C739;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
  .wrapper {
    width: inherit;
    min-width: 220px;
  }
  #day-names {
    display: none;
  }
  table.week{
    height: 30px;
  }
  .week td {
    padding: auto;
    text-align: center;
  }
  .week tr:nth-child(2) {
    display: none;
  }
}