CSS Me

Published Categorised as Development

I was bored in work, and just days after migrating this blog to hosted WordPress.com, I decided to move it back to a self-hosted one at sarkymarky.com, which in hindsight was a good idea as it’s cleared all the shit from the site.

Anyhoo, I was stuck on what to put on this crap, so while actually doing some work in CSS, I had a little bit of an idea… why not CSS myself. Wow Mark, you have too much spare┬átime.

So I set up a little Text widget in the footer and started writing, which is always a struggle for myself as I’m relatively modest, yes seriously :p

I use the Monokai theme in Sublime Text, Brackets and VSCode and since the footer on this theme is black, let’s run with it.

Add some DIV tags to seperate the content, a little padding to make it a little more legible and wrap the selector, property and values in span’s and ta-dah!

<code id='about-me'>
<span class='id-css-selector'>#mark-hall</span> {
<div>
	<span class='id-css-property'>skills</span>: <span class='id-css-value'>WordPress, HTML, CSS, Mobile, jQuery, PHP, MySQL, PostgreSQL, Server Administration</span>;
<div>
</div>
	<span class='id-css-property'>experience</span>: <span class='id-css-value'>30 years programming, 20 years web development</span>;
</div>
<div>
	<span class='id-css-property'>tools</span>: <span class='id-css-value'>MacBook Pro, SublimeText, Brackets, VSCode, Chrome, Photoshop</span>;
</div>
}
</code>

Now let’s copy the colours from Monokai, and drop them into CSS.

<style>
#about-me {
	color: #fff;
}
#about-me div {
	padding: .2em 0 .2em 2em;
}
.id-css-selector {
	color: #a6e22e;
}
.id-css-property {
	color: #66d9ef;
}
.id-css-value {
	color: #ae81ff;
}
</style>

And boom.

If you don’t have a dark background, here’s the Visual Studio scheme.

<style>
#about-me {
	color: #000;
}
#about-me div {
	padding: .2em 0 .2em 2em;
}
.id-css-selector {
	color: #800000;
}
.id-css-property {
	color: #ff0000;
}
.id-css-value {
	color: #0000ff;
}
</style>

Leave a Reply