Skip to content

Instantly share code, notes, and snippets.

@lucasad

lucasad/dabblet.css

Created Aug 7, 2013
Embed
What would you like to do?
CSS Calendar
/**
* CSS Calendar
*/
.cal {
width: 14.4375rem;
border: solid black;
border-width: 0 1px 1px 0;
}
.cal > .days > .prev, .cal > .days > .next {
color: grey;
}
.cal > header {
text-align: center;
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
border-top: 0.0625rem solid;
border-left: 0.0625rem solid;
}
.cal > header > ul {
list-style-type: none;
padding: 0;
margin: 0;
border-top: 1px solid black;
background: grey;
}
.cal > header > ul > li {
display: inline-block;
width: 2rem;
}
.cal > header > ul > li:not(:first-child) {
border-left: .0625rem solid;
}
.cal > .days > ol {
list-style-type: none;
display: inline;
margin: 0;
padding: 0;
}
.cal > .days ol > li{
width: 2em;
display: inline-block;
}
div.cal ol > li {
border-top: .0625rem solid black;
border-left:.0625rem solid black;
}
<!-- content to be placed inside <body>…</body> -->
<div class="cal">
<header>
<h2>August</h2>
<ul><!--
--><li>Mon</li><!--
--><li>Tue</li><!--
--><li>Wed</li><!--
--><li>Thu</li><!--
--><li>Fri</li><!--
--><li>Sat</li><!--
--><li>Sun</li><!--
--></ul>
</header><!--
--><div class="days">
<ol class="prev"><!--
--><li>29</li><!--
--><li>30</li><!--
--><li>31</li><!--
--></ol><!--
--><ol class="cur"><!--
--><li>1</li><!--
--><li>2</li><!--
--><li>3</li><!--
--><li>4</li><!--
--><li>5</li><!--
--><li>6</li><!--
--><li>7</li><!--
--><li>8</li><!--
--><li>9</li><!--
--><li>10</li><!--
--><li>11</li><!--
--><li>12</li><!--
--><li>13</li><!--
--><li>14</li><!--
--><li>15</li><!--
--><li>16</li><!--
--><li>17</li><!--
--><li>18</li><!--
--><li>19</li><!--
--><li>20</li><!--
--><li>21</li><!--
--><li>22</li><!--
--><li>23</li><!--
--><li>24</li><!--
--><li>25</li><!--
--><li>26</li><!--
--><li>27</li><!--
--><li>28</li><!--
--><li>29</li><!--
--><li>30</li><!--
--><li>31</li><!--
--></ol><!--
--><ol class="next"><!--
--><li>1</li><!--
--></ol>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment