Posts

The CSS-Only Webpage

Recently, while in the shower, I was contemplating how versatile CSS has become compared to how it used to be. I thought about how the appearance and even behaviour of a website can be changed so utterly as to be unrecognizable without its bespoke stylesheet. Then I had another thought. An idea really, and a rather silly one:

What if I were to create a webpage using ONLY Cascading Style Sheets?

Well, a stylesheet is somewhat of a code parasite; it can’t live independently and must always exist inside a host body in order to function (in this case, it’s the host head). So that’s what I limited myself to. The head, shoulders, knees, and toes of an HTML document with nothing else inside it. Save for the meta tags in the head, this document is completely barren. Without the sheet, you’d be faced with a completely blank white page with nary a stray bracket to its name.

But enough blathering about my nonsense! You want to see what I did, right? I mean, I can’t imagine you’d have read this far without being at least a LITTLE curious…

Anyway, here you go. Click the button below to view my experiment!

P.S. the background colour is #00beef. That made me chuckle.

The Magic of CSS: Calendar Calamity

Look how much nicer I made that calendar!…

THEN look at this absolute SPAGHETTI MESS of CSS I had to fart out in order to get the damn thing to look presentable!


div.my-calendar-date-switcher {
   width: 100%;
}

div.my-calendar-nav {
   float: left;
}

div.mc-time {
   margin-bottom: 15px;
}

#my-calendar input.button{
   float: left;
   width: 20%;
   border: none;
   background: #e25551;
   font-weight: 600;
   padding: 5px !important;
   border-radius: 100px;
   margin-bottom: 10px !important;
}

.mc-main .my-calendar-header span {
   color: inherit;
   border-radius: 100px;
   padding: 7px;
   font-size: 16px;
   font-family: proxima-nova, sans-serif;
   background: inherit;
   font-weight: 500;
}

.mc-main .my-calendar-header a:focus {
   background: #555 !important;
   color: #fff !important;
}

a.list.mcajax {
   padding: 7px;
}

.mc-main .my-calendar-header a {
   background: #f0f0f0;
   color: #555;
   border: none;
   border-radius: 100px;
   font-size: 16px;
   font-family: proxima-nova, sans-serif;
   font-weight: 500;
   text-decoration: none !important;
}

.mc-main .mc-time .month {
   border-radius: 100px 0px 0px 100px;
   border-right: 1px solid #efefef;
   padding: 7px;
   font-size: 16px;
}

.mc-main .mc-time .week {
   border-radius: 0px 0px 0px 0px;
   border-right: 1px solid #efefef;
   border-left: 1px solid #555;
   padding: 7px;
   font-size: 16px;
}

.mc-main .mc-time .day {
   border-radius: 0px 100px 100px 0px;
   border-left: 1px solid #555;
   padding: 7px;
   font-size: 16px;
}

span.mc-date {
   border-radius: 5px;
}

select#my-calendar-month, select#my-calendar-year {
   border-radius: 100px !important;
   width: 50%;
}

.mc-main td .event-title {
   border-radius: 5px;
   border: 1px solid #555;
}