Skip to content

Instantly share code, notes, and snippets.

@ptb

ptb/calendar.html

Last active August 29, 2015 13:57
Show Gist options
  • Save ptb/9924516 to your computer and use it in GitHub Desktop.
Save ptb/9924516 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
calendar.html
<!DOCTYPE html>
<html class='no-js' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='UTF-8' />
<title>April 2014</title>
<meta content='initial-scale=1, width=device-width' name='viewport' />
<style type='text/css'>
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
}
a {
text-decoration: none;
}
.calendar {
font-weight: 700;
font-family: "Helvetica Neue", sans-serif;
border-collapse: collapse;
margin-right: auto;
margin-left: auto;
width: 100%;
min-width: 320px;
max-width: 320px;
}
.calendar thead a[rel='prev'] {
content: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'><path d='m3 60l93 54v-108z'/></svg>");
}
.calendar thead a[rel='next'] {
content: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'><path d='m24 114v-108l93 54z'/></svg>");
}
.calendar thead a[rel='prev'],
.calendar thead a[rel='next'] {
display: inline-block;
width: 15px;
height: 15px;
}
.calendar thead abbr {
text-shadow: 0 1px white;
font-size: 10px;
color: #545454;
border-bottom: 0 none transparent;
}
.calendar tbody {
background-color: #d5d5d9;
}
.calendar th, .calendar td {
text-align: center;
padding: 0;
width: 14.28571%;
}
.calendar td {
font-size: 24px;
line-height: 1.8;
border-color: #a1a4ad;
border: 1px solid rgba(117, 124, 138, 0.55);
}
.calendar td:first-child {
border-left: 0 none transparent;
}
.calendar td:last-child {
border-right: 0 none transparent;
}
.calendar time, .calendar a {
display: block;
width: 100%;
height: 100%;
}
.calendar time {
box-shadow: inset -1px 1px rgba(255, 255, 255, 0.6);
}
.calendar time a {
text-shadow: 0 1px white;
position: relative;
color: #293649;
}
.calendar time a[aria-disabled='true'] {
cursor: not-allowed;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.125, rgba(0, 0, 0, 0.25)), color-stop(0.125, transparent), color-stop(0.25, transparent), color-stop(0.25, rgba(0, 0, 0, 0.25)), color-stop(0.375, rgba(0, 0, 0, 0.25)), color-stop(0.375, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(0, 0, 0, 0.25)), color-stop(0.625, rgba(0, 0, 0, 0.25)), color-stop(0.625, transparent), color-stop(0.75, transparent), color-stop(0.75, rgba(0, 0, 0, 0.25)), color-stop(0.875, rgba(0, 0, 0, 0.25)), color-stop(0.875, transparent));
background-image: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0.25) 12.5%, transparent 12.5%, transparent 25%, rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0.25) 37.5%, transparent 37.5%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 62.5%, transparent 62.5%, transparent 75%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.25) 87.5%, transparent 87.5%);
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.25) 12.5%, transparent 12.5%, transparent 25%, rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0.25) 37.5%, transparent 37.5%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 62.5%, transparent 62.5%, transparent 75%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.25) 87.5%, transparent 87.5%);
}
.calendar time a:not([aria-disabled='true']):hover {
background-color: #babac1;
}
.calendar time.today a {
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
color: white;
box-shadow: inset 0 0 6px black;
background-color: #7389a5;
}
.calendar time.today a:hover {
background-color: #5a708b;
}
.calendar time.today a span::before {
content: "Today: ";
}
.calendar time a[aria-selected='true'] {
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
color: white;
background-color: #1980e5;
}
.calendar time a[aria-selected='true']:hover {
background-color: #1466b7;
}
.calendar time:not(.today) a[aria-selected='true'] {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), color-stop(2%, rgba(223, 223, 223, 0.5098)), color-stop(50%, rgba(163, 163, 163, 0.26275)), color-stop(50%, rgba(0, 0, 0, 0.11373)));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5), rgba(223, 223, 223, 0.5098) 1px, rgba(163, 163, 163, 0.26275) 50%, rgba(0, 0, 0, 0.11373) 50%);
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(223, 223, 223, 0.5098) 1px, rgba(163, 163, 163, 0.26275) 50%, rgba(0, 0, 0, 0.11373) 50%);
}
.calendar time.prev a,
.calendar time.next a {
opacity: 0.45;
}
.calendar [aria-hidden='false'] {
font-size: 0;
position: absolute;
width: 0;
height: 0;
overflow: hidden;
color: transparent;
}
.calendar time a[aria-selected='true'].start:hover::before {
white-space: nowrap;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
font-weight: bold;
font-size: 15px;
line-height: 1;
display: inline-block;
padding: 2px 2px 0;
min-width: 23px;
min-height: 23px;
-webkit-background-clip: padding;
background-clip: padding-box;
border: 2px solid white;
-webkit-border-radius: 11.5px;
border-radius: 11.5px;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 3px rgba(0, 0, 0, 0.3);
background-image: -webkit-gradient(radial, center 125%, 0, center 125%, 26.5, color-stop(59%, rgba(22, 22, 22, 0.39216)), color-stop(62%, rgba(105, 105, 105, 0.50196)), color-stop(100%, rgba(164, 164, 164, 0.62745)));
background-image: -webkit-radial-gradient(center 102%, 120% 100%, rgba(22, 22, 22, 0.39216) 59%, rgba(105, 105, 105, 0.50196) 62%, rgba(164, 164, 164, 0.62745) 100%);
background-image: radial-gradient(ellipse 120% 100% at center 101%, rgba(22, 22, 22, 0.39216) 59%, rgba(105, 105, 105, 0.50196) 62%, rgba(164, 164, 164, 0.62745) 100%);
background-color: #ff001e;
color: white;
content: url("data:image/svg+xml;charset=utf-8,<svg height='15' viewBox='0 0 120 120' width='15' xmlns='http://www.w3.org/2000/svg'><path d='m40 92l20-20 20 20c16 16 28 4 12-12l-20-20 20-20c16-16 4-28-12-12l-20 20-20-20c-16-16-28-4-12 12l20 20-20 20c-16 16-4 28 12 12z' fill='%23fff'/></svg>");
cursor: pointer;
position: absolute;
top: -8px;
left: -8px;
}
.calendar time a[aria-selected='true'].start:active:hover::before {
background-color: #a30013;
}
</style>
<link href='calendar.css' rel='stylesheet' />
</head>
<body ontouchstart=''>
<table aria-labelledby='month' class='calendar vevent' itemscope='' itemtype='http://schema.org/Event' role='presentation'>
<thead>
<tr>
<th>
<a href='/availability?during=Mar-2014' rel='prev' role='button' title='Previous Month'></a>
</th>
<th colspan='5'>
<time datetime='2014-04' id='month'>April 2014</time>
</th>
<th>
<a href='/availability?during=May-2014' rel='next' role='button' title='Next Month'></a>
</th>
</tr>
<tr aria-hidden='true'>
<th scope='col'>
<abbr title='Sunday'>Sun</abbr>
</th>
<th scope='col'>
<abbr title='Monday'>Mon</abbr>
</th>
<th scope='col'>
<abbr title='Tuesday'>Tue</abbr>
</th>
<th scope='col'>
<abbr title='Wednesday'>Wed</abbr>
</th>
<th scope='col'>
<abbr title='Thursday'>Thu</abbr>
</th>
<th scope='col'>
<abbr title='Friday'>Fri</abbr>
</th>
<th scope='col'>
<abbr title='Saturday'>Sat</abbr>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<time class='prev' datetime='2014-03-30'><a aria-disabled='true' aria-selected='false' href='/availability?during=Mar-2014&amp;starting=2014-03-30' role='button'><span aria-hidden='false'>Sunday, March </span>30</a></time>
</td>
<td>
<time class='prev' datetime='2014-03-31'><a aria-disabled='true' aria-selected='false' href='/availability?during=Mar-2014&amp;starting=2014-03-31' role='button'><span aria-hidden='false'>Monday, March </span>31</a></time>
</td>
<td>
<time datetime='2014-04-01'><a aria-disabled='true' aria-selected='false' href='/availability?starting=2014-04-01' role='button'><span aria-hidden='false'>Tuesday, April </span>1</a></time>
</td>
<td>
<time class='today' datetime='2014-04-02'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-02' role='button'><span aria-hidden='false'>Wednesday, April </span>2</a></time>
</td>
<td>
<time datetime='2014-04-03'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-03' role='button'><span aria-hidden='false'>Thursday, April </span>3</a></time>
</td>
<td>
<time datetime='2014-04-04'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-04' role='button'><span aria-hidden='false'>Friday, April </span>4</a></time>
</td>
<td>
<time datetime='2014-04-05'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-05' role='button'><span aria-hidden='false'>Saturday, April </span>5</a></time>
</td>
</tr>
<tr>
<td>
<time datetime='2014-04-06'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-06' role='button'><span aria-hidden='false'>Sunday, April </span>6</a></time>
</td>
<td>
<time datetime='2014-04-07'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-07' role='button'><span aria-hidden='false'>Monday, April </span>7</a></time>
</td>
<td>
<time datetime='2014-04-08'><a aria-disabled='false' aria-selected='true' class='start' href='/availability?starting=2014-04-08' role='button'><span aria-hidden='false'>Tuesday, April </span>8</a></time>
</td>
<td>
<time datetime='2014-04-09'><a aria-disabled='false' aria-selected='true' href='/availability?starting=2014-04-09' role='button'><span aria-hidden='false'>Wednesday, April </span>9</a></time>
</td>
<td>
<time datetime='2014-04-10'><a aria-disabled='false' aria-selected='true' href='/availability?starting=2014-04-10' role='button'><span aria-hidden='false'>Thursday, April </span>10</a></time>
</td>
<td>
<time datetime='2014-04-11'><a aria-disabled='false' aria-selected='true' href='/availability?starting=2014-04-11' role='button'><span aria-hidden='false'>Friday, April </span>11</a></time>
</td>
<td>
<time datetime='2014-04-12'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-12' role='button'><span aria-hidden='false'>Saturday, April </span>12</a></time>
</td>
</tr>
<tr>
<td>
<time datetime='2014-04-13'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-13' role='button'><span aria-hidden='false'>Sunday, April </span>13</a></time>
</td>
<td>
<time datetime='2014-04-14'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-14' role='button'><span aria-hidden='false'>Monday, April </span>14</a></time>
</td>
<td>
<time datetime='2014-04-15'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-15' role='button'><span aria-hidden='false'>Tuesday, April </span>15</a></time>
</td>
<td>
<time datetime='2014-04-16'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-16' role='button'><span aria-hidden='false'>Wednesday, April </span>16</a></time>
</td>
<td>
<time datetime='2014-04-17'><a aria-disabled='true' aria-selected='false' href='/availability?starting=2014-04-17' role='button'><span aria-hidden='false'>Thursday, April </span>17</a></time>
</td>
<td>
<time datetime='2014-04-18'><a aria-disabled='true' aria-selected='false' href='/availability?starting=2014-04-18' role='button'><span aria-hidden='false'>Friday, April </span>18</a></time>
</td>
<td>
<time datetime='2014-04-19'><a aria-disabled='true' aria-selected='false' href='/availability?starting=2014-04-19' role='button'><span aria-hidden='false'>Saturday, April </span>19</a></time>
</td>
</tr>
<tr>
<td>
<time datetime='2014-04-20'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-20' role='button'><span aria-hidden='false'>Sunday, April </span>20</a></time>
</td>
<td>
<time datetime='2014-04-21'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-21' role='button'><span aria-hidden='false'>Monday, April </span>21</a></time>
</td>
<td>
<time datetime='2014-04-22'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-22' role='button'><span aria-hidden='false'>Tuesday, April </span>22</a></time>
</td>
<td>
<time datetime='2014-04-23'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-23' role='button'><span aria-hidden='false'>Wednesday, April </span>23</a></time>
</td>
<td>
<time datetime='2014-04-24'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-24' role='button'><span aria-hidden='false'>Thursday, April </span>24</a></time>
</td>
<td>
<time datetime='2014-04-25'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-25' role='button'><span aria-hidden='false'>Friday, April </span>25</a></time>
</td>
<td>
<time datetime='2014-04-26'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-26' role='button'><span aria-hidden='false'>Saturday, April </span>26</a></time>
</td>
</tr>
<tr>
<td>
<time datetime='2014-04-27'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-27' role='button'><span aria-hidden='false'>Sunday, April </span>27</a></time>
</td>
<td>
<time datetime='2014-04-28'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-28' role='button'><span aria-hidden='false'>Monday, April </span>28</a></time>
</td>
<td>
<time datetime='2014-04-29'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-29' role='button'><span aria-hidden='false'>Tuesday, April </span>29</a></time>
</td>
<td>
<time datetime='2014-04-30'><a aria-disabled='false' aria-selected='false' href='/availability?starting=2014-04-30' role='button'><span aria-hidden='false'>Wednesday, April </span>30</a></time>
</td>
<td>
<time class='next' datetime='2014-05-01'><a aria-disabled='false' aria-selected='false' href='/availability?during=May-2014&amp;starting=2014-05-01' role='button'><span aria-hidden='false'>Thursday, May </span>1</a></time>
</td>
<td>
<time class='next' datetime='2014-05-02'><a aria-disabled='false' aria-selected='false' href='/availability?during=May-2014&amp;starting=2014-05-02' role='button'><span aria-hidden='false'>Friday, May </span>2</a></time>
</td>
<td>
<time class='next' datetime='2014-05-03'><a aria-disabled='false' aria-selected='false' href='/availability?during=May-2014&amp;starting=2014-05-03' role='button'><span aria-hidden='false'>Saturday, May </span>3</a></time>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment