Skip to content

Instantly share code, notes, and snippets.

@MortenAndersen

MortenAndersen/index.html

Created August 16, 2013 08:39
Show Gist options
  • Save MortenAndersen/6248278 to your computer and use it in GitHub Desktop.
Save MortenAndersen/6248278 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Morten Andersen. Calendar
Raw
index.html
<ul class="kalender">
<li>
<a href="#">
<div class="dato">
<span>10</span><b>feb</b> 2013
</div>
<div class="kalender-text">
<h3>Posten kom til tiden...</h3>
<p>stormøde for postomdelere fra hele København og omegn. Godt 150 medlemmer var mødt op, hvilket gjorde til et af de største medlems</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="dato">
<span>20</span><b>feb</b> 2013
</div>
<div class="kalender-text">
<h3>Posten kom til tiden...</h3>
<p>stormøde for postomdelere fra hele København og omegn. Godt 150 medlemmer var mødt op, hvilket gjorde til et af de største medlems</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="dato">
<span>01</span><b>maj</b> 2013
</div>
<div class="kalender-text">
<h3>Posten kom til tiden...</h3>
<p>stormøde for postomdelere fra hele København og omegn. Godt 150 medlemmer var mødt op, hvilket gjorde til et af de største medlems</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="dato">
<span>03</span><b>maj</b> 2013
</div>
<div class="kalender-text">
<h3>Posten kom til tiden...</h3>
<p>stormøde for postomdelere fra hele København og omegn. Godt 150 medlemmer var mødt op, hvilket gjorde til et af de største medlems</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="dato">
<span>05</span><b>maj</b> 2013
</div>
<div class="kalender-text">
<h3>Posten kom til tiden...</h3>
<p>stormøde for postomdelere fra hele København og omegn. Godt 150 medlemmer var mødt op, hvilket gjorde til et af de største medlems</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="dato">
<span>11</span><b>maj</b> 2013
</div>
<div class="kalender-text">
<h3>Posten kom til tiden...</h3>
<p>stormøde for postomdelere fra hele København og omegn. Godt 150 medlemmer var mødt op, hvilket gjorde til et af de største medlems</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="dato">
<span>18</span><b>maj</b> 2013
</div>
<div class="kalender-text">
<h3>Posten kom til tiden...</h3>
<p>stormøde for postomdelere fra hele København og omegn. Godt 150 medlemmer var mødt op, hvilket gjorde til et af de største medlems</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="dato">
<span>22</span><b>maj</b> 2013
</div>
<div class="kalender-text">
<h3>Posten kom til tiden...</h3>
<p>stormøde for postomdelere fra hele København og omegn. Godt 150 medlemmer var mødt op, hvilket gjorde til et af de største medlems</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="dato">
<span>27</span><b>maj</b> 2013
</div>
<div class="kalender-text">
<h3>Posten kom til tiden...</h3>
<p>stormøde for postomdelere fra hele København og omegn. Godt 150 medlemmer var mødt op, hvilket gjorde til et af de største medlems</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="dato">
<span>01</span><b>okt</b> 2013
</div>
<div class="kalender-text">
<h3>Posten kom til tiden...</h3>
<p>stormøde for postomdelere fra hele København og omegn. Godt 150 medlemmer var mødt op, hvilket gjorde til et af de største medlems</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="dato">
<span>21</span><b>okt</b> 2013
</div>
<div class="kalender-text">
<h3>Posten kom til tiden...</h3>
<p>stormøde for postomdelere fra hele København og omegn. Godt 150 medlemmer var mødt op, hvilket gjorde til et af de største medlems</p>
</div>
</a>
</li>
</ul>
Raw
script.js
$( ".kalender .dato b" ).each(function() {
var s = $(this).text();
$(this).parents('li').addClass(s);
});
$('li.jan').each(function(n) {
$(this).addClass("nr-" + n);
});
$('li.feb').each(function(n) {
$(this).addClass("nr-" + n);
});
$('li.marts').each(function(n) {
$(this).addClass("nr-" + n);
});
$('li.april').each(function(n) {
$(this).addClass("nr-" + n);
});
$('li.maj').each(function(n) {
$(this).addClass("nr-" + n);
});
$('li.juni').each(function(n) {
$(this).addClass("nr-" + n);
});
$('li.juli').each(function(n) {
$(this).addClass("nr-" + n);
});
$('li.aug').each(function(n) {
$(this).addClass("nr-" + n);
});
$('li.sep').each(function(n) {
$(this).addClass("nr-" + n);
});
$('li.okt').each(function(n) {
$(this).addClass("nr-" + n);
});
$('li.nov').each(function(n) {
$(this).addClass("nr-" + n);
});
$('li.dec').each(function(n) {
$(this).addClass("nr-" + n);
});
Raw
style.less
/* Kalender */
.kalender {
margin: 1em;
padding: 0;
font-size: 0.85em;
border-left: 3px solid #999;
li{
margin: 0 0 2px 0;
padding: 0;
list-style-type: none;
border: 1px solid #999;
overflow: hidden;
border-radius: 0 5px 5px 0;
width: 96%;
background: rgb(255,255,255);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YxZjFmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2UxZTFlMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY2ZjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
transition: all 80ms;
&:hover {
width: 99%;
box-shadow: 1px 1px 1px #999;
}
&:last-child {
margin: 0;
}
b{
font-weight: normal;
}
}
a{
text-decoration: none;
color: #6d6e71;
padding: 0;
display: block;
overflow: hidden;
h3{
color: #414042;
}
}
h3{
text-transform: uppercase;
margin: 0;
padding: 3px 0 0 0;
font-size: 1em;
}
p {
margin: 0;
padding: 0;
}
.dato {
width: 25%;
float: left;
text-align: center;
background: #777;
color: #ffffff;
span{
display: block;
text-shadow: 1px 1px #ccc;
font-size: 2.5em;
line-height: 1.5em;
color: #ffffff;
margin: 0 0 0.1em 0;
box-shadow: inset 0px 0px 4px #ffffff;
}
}
.kalender-text {
float: right;
width: 70%;
padding: 0 2.5%;
}
}
.kalender li {
&.jan span{
background: #D2E9F7;
}
&.feb span{
background: #EACDE1;
}
&.marts span{
background: #0DB230;
}
&.april span{
background: #8443A9;
}
&.maj span{
background: #2D95D2;
}
&.juni span{
background: #F7FA2F;
}
&.juli span{
background: #FFEB01;
}
&.aug span{
background: #E9380F;
}
&.sep span{
background: #6F0B23;
}
&.okt span{
background: #E19C25;
}
&.nov span{
background: #A74613;
}
&.dec span{
background: #BAE0C9;
}
}
li.nr-0 span {
opacity: 1;
}
li.nr-1 span {
opacity: 0.8;
}
li.nr-2 span {
opacity: 0.6;
}
li.nr-3 span, li span {
opacity: 0.4;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment