<header class="intro">Hello, Chris, enjoy today.</header>
<div class="today">
<div class="today-piece top day"></div>
<div class="today-piece middle month"></div>
<div class="today-piece middle date"></div>
<div class="today-piece bottom year"></div>
</div>
<footer>Crafted by <a href="//codepen.io/ChrisNager" target="_blank">Chris Nager</a></footer>
/* Base
-------------------------------------------------- */
html {
max-width: 23em;
margin: 0 auto;
padding: 1.25em;
font: 100% "Helvetica Neue", sans-serif;
text-align: center;
color: #222;
background: #e2e7e8;
}
a {
color: #d74435;
}
a:hover,
a:focus {
color: #e94939;
}
/* Intro
-------------------------------------------------- */
.intro {
margin-bottom: 0.85em;
border-radius: 0.25rem;
padding: 1.25rem;
font-size: 1.2em;
font-weight: 200;
text-align: left;
background: rgba(255, 255, 255, 0.75);
}
/* Today
-------------------------------------------------- */
.today-piece {
border-radius: 0.25rem;
padding: 1.6rem;
font-size: 1.25em;
text-align: center;
background: white;
}
/* Piece positions
-------------------------------------------------- */
.top {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.middle {
border-radius: 0;
}
.bottom {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
/* Piece categories
-------------------------------------------------- */
.day,
.year {
font-size: 0.65em;
font-weight: 500;
letter-spacing: 0.35em;
text-transform: uppercase;
color: white;
background: #e94939;
}
.month {
padding-top: 1.75rem;
padding-bottom: 0;
font-size: 1.5em;
font-weight: 200;
}
.date {
padding-top: 0;
padding-bottom: 1.75rem;
font-size: 3em;
font-weight: 100;
}
/* Footer
-------------------------------------------------- */
footer {
margin-top: 0.75rem;
font-size: 0.65em;
}
/**
* Credit where credit is due:
*
* Thanks, SpYk3HH for your sweet fiddlin'.
* http://jsfiddle.net/SpYk3/rYzAY/
*/
function DateTime() {
function getDaySuffix(a) {
var b = "" + a,
c = b.length,
d = parseInt(b.substring(c-2, c-1)),
e = parseInt(b.substring(c-1));
if (c == 2 && d == 1) return "th";
switch(e) {
case 1:
return "st";
break;
case 2:
return "nd";
break;
case 3:
return "rd";
break;
default:
return "th";
break;
};
};
this.getDoY = function(a) {
var b = new Date(a.getFullYear(),0,1);
return Math.ceil((a - b) / 86400000);
}
this.date = arguments.length == 0 ? new Date() : new Date(arguments);
this.weekdays = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
this.months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
this.daySuf = new Array( "st", "nd", "rd", "th" );
this.day = {
index: {
week: "0" + this.date.getDay(),
month: (this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()
},
name: this.weekdays[this.date.getDay()],
of: {
week: ((this.date.getDay() < 10) ? "0" + this.date.getDay() : this.date.getDay()) + getDaySuffix(this.date.getDay()),
month: ((this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()) + getDaySuffix(this.date.getDate())
}
}
this.month = {
index: (this.date.getMonth() + 1) < 10 ? "0" + (this.date.getMonth() + 1) : this.date.getMonth() + 1,
name: this.months[this.date.getMonth()]
};
this.year = this.date.getFullYear();
this.sym = {
d: {
d: this.date.getDate(),
dd: (this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate(),
ddd: this.weekdays[this.date.getDay()].substring(0, 3),
dddd: this.weekdays[this.date.getDay()],
ddddd: ((this.date.getDate() < 10) ? "0" + this.date.getDate() : this.date.getDate()) + getDaySuffix(this.date.getDate()),
m: this.date.getMonth() + 1,
mm: (this.date.getMonth() + 1) < 10 ? "0" + (this.date.getMonth() + 1) : this.date.getMonth() + 1,
mmm: this.months[this.date.getMonth()].substring(0, 3),
mmmm: this.months[this.date.getMonth()],
yy: (""+this.date.getFullYear()).substr(2, 2),
yyyy: this.date.getFullYear()
}
};
this.formats = {
pretty: {
a: this.sym.d.dddd,
b: this.sym.d.ddddd,
c: this.sym.d.mmmm,
d: this.sym.d.yyyy
}
};
};
var dt = new DateTime();
$('.day').text(dt.formats.pretty.a);
$('.date').text(dt.formats.pretty.b);
$('.month').text(dt.formats.pretty.c);
$('.year').text(dt.formats.pretty.d);
This Pen doesn't use any external CSS resources.