Achievement unlocked!

By   2015-09-27

The biggest change to this blog since its initial setup was its initial setup. After I’ve installed WordPress on the server and settled with a theme (it had to be green and simple, all I knew) I was busy just adding posts. I wanted to avoid the pitfall of developing bells and whistles without gaining actual content that might attract real people.

But since there’s some actual reading material around here I decided it was a good moment to upgrade my dominion a bit. So: time to shell out some wood and 1000 gold pieces to build some extra stuff for the blog!


One of the things I really wanted for years and even had in the previous incarnation of the blog was a list of my personal achievements. The idea is far from new and everyone with a Steam account can tell you this. I had the *.html and *.css parts just lying around on my computer so I was up and running within moments.

When beginning my adventure with this idea (some 2+ years ago) I had some general ideas and ideals. I wanted to keep it simple, but not dumb simple [pol. proste, lecz nie prostackie]. Some graphics on the left, obviously square, text on the right, a list structure. How hard can it be? As I’ve described in my previous post, it can be hard. I actually spent more time fighting with WordPress than developing and testing the code. I even had to create the tag “devHell” just for the occasion. Oh, why do I have the feeling it won’t be one time add-on?


This is what I begun with:intro_ach_biuld_01

This design really was showing both its age and low maturity. The placeholder images were not aligned to anything in particular. If you look closely, you’ll notice that the distance between the image and the bottom, left and top are different. It’s also not easy to read the first entry since the dark font and the dark background have too little contrast.

The next design was this:


Much cleaner! The red dotted lines were placeholders. Whenever I work on something I like to add some lines so I can see the borders of the divs. Any misalignment becomes apparent before I go too much into developing something around it. The black borders around the images in the previous screenshot were also removed.

Because I wanted each entry belonging to the same category to look similar, color was used (also visible in the first image). I restored the appropriate CSS styles:


Your professional opinion?


Yeah, mine too. Thankfully all the coloring was in a separate piece of the css (that’s because the colors are added only to the paragraphs depending on their classes, so if an entry is Python related it gets a paragraph using the dev_python class of element p.

So, after removing the colors:


The color bonanza was too much, this was in turn too little. I wanted the entries to stand out, categories ought to be easy to separate despite being crammed together. After a few experiments with borders again (didn’t even bother to make a screenshot here) I’ve set sail for inspiration and not long after found this little piece of advice.

CSS shadows! They’re dead easy to use, look Good Enough and don’t make me want to fix me eyes with a screwdriver.


After some twiddling with the spacing, this is what I’ve settled on (for now):


You can view the final result here. There’s still some work to be done: CSS cleanup (why have styles you won’t use?), adding badges that I actually deserve but never had time to input, prepare some graphics. The last part especially: I can’t live on placeholders all the time. This may be the pretext I was waiting for to learn more about Krita!

Easter Egg!: Every color on the list has some special meaning. Can you guess?