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.

Using HTML to Make Your Email Look Fancy!

UPDATE: I simplified my email signature significantly

Carter D. Lovelace

Journeyman Web Designer | Strategy Lab Marketing

306.537.1357
carter@strategylab.ca


strategylab.ca

 


<p style="color: teal; font-size: 16px;"><strong>Carter D. Lovelace</strong></p>
Journeyman Web Designer | <strong>Strategy Lab Marketing</strong>

▸ <a style="color: #000; text-decoration: none;" href="tel:3065371357">306.537.1357</a>
▸ <a style="color: #000; text-decoration: none;" href="mailto:carter@strategylab.ca">carter@strategylab.ca</a>

<hr style="margin: 2px; border: 1px dashed #333;" width="350px" />

<strong><a style="color: teal; text-decoration: none;" href="https://strategylab.ca"><sup>strategylab.ca</sup></a></strong>

 


Original post below:


Here’s how it looks on a mobile device.

So I’ve just decided to up and write a proper fancy signature for my email, being the web designer that I am.
As you can see by the picture, it looks pretty snazzy!
Below is how it is supposed to look, and below that is the actual code I wrote for it. As you may be able to tell, not all of the styling I did carried over to Gmail but enough did for it to look alright.


May all your adventures be worthy of telling,
Carter D. Lovelace
Strategy Lab Journeyman
(306) 537-1357

[StrategyLab.ca]


<table width="100%">
<tbody>
<tr style="background-color: #111111; border: 0px;">
<td>
<table width="100%" align="center">
<tbody>
<tr>
<td style="background-color: #343434; border: 0px;" width="76%">
<blockquote><span style="color: #ffffff;">May all your adventures be worthy of telling,</span>
<strong><span style="color: #ffffff;">Carter D. Lovelace</span></strong>
<em><span style="color: #ffffff;">Strategy Lab Journeyman</span></em>
<a style="color: #ffffff;" href="tel:3065371357">(306) 537-1357</a></blockquote>
</td>
<td style="background-color: #2f2f2f;" width="4%"></td>
<td style="background-color: #262626;" width="4%"></td>
<td style="background-color: #222222;" width="4%"></td>
<td style="background-color: #1b1b1b;" width="4%"></td>
<td style="background-color: #161616;" width="4%"></td>
<td style="background-color: #111111;" width="4%"></td>
</tr>
<tr>
<td style="background-color: #4ecac2; border: 0px;" colspan="6">
<p style="text-align: center;"><strong><a style="text-decoration: none; color: #ffffff; font-size: 16px;" href="https://strategylab.ca/" target="_blank" rel="noopener noreferrer">[StrategyLab.ca]</a></strong></p>
</td>
<td style="background-color: #4ecac2; border: 0px;">
<p style="text-align: center;"><strong><a style="text-decoration: none; color: #000000; font-size: 20px;" href="https://www.cybersandbox.ca/" target="_blank" rel="noopener noreferrer">♦</a></strong></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

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;
}