Super Fast Lightbox

Super Fast Lightbox
One of the things I always make sure to include on any of my site designs is a cool way to view larger versions of images, and that usually involves using some sort of "lightbox." Nobody wants to click on an image and have it totally replace the page that they were browsing, or have it open in a new tab, right? Or maybe that's just me.

A lightbox is a cool way to have a full image display on a page without navigating to a new page, and without popping open a new window or a new tab in the process. Many many years ago light boxes were giant monstrosities of javascript and css that seemed to barely ever work when I tried to use them on my sites, but these days thanks to advancements in both js and css they've become a lot more simple to implement.

For my new blog design I went with a super simple lightweight bare bones light box called Lity. Lity boils down to a single css file, and a single javascript file, and was incredibly easy to toss into my design. There aren't any themes, or images, or crazy styles to worry about like so many of the other lightbox solutions I've tried in the past. Once the files are properly included in the html, all you have to do is add a data-lity attribute to a link element (the "a" tag) and Lity takes care of the rest.

Image


I guess that's all there is to this post! Lity is a simple and fast solution to lightboxes, and seems to work well on mobile too which is pretty dang important these days. If you have any other suggestions on lightbox stuff let me know

Doodle Post

Image

Quick CSS Animations

Quick CSS Animations
While I'm on a web development kick I thought it would be neato to point out some of the cool stuff I used for my new layout. I'm still working on game stuff that I am not allowed to share just yet so I gotta figure out other stuff to talk about on here!

Turns out in the modern era of browsers and css you can get animations with almost just pure css. When I redesigned the Super Meat Boy website I added some animations to a bunch of elements with just pure css. For more info on css animations check this out.

I wanted to get some animations going for hovering over image links on my new design, and some quick searching lead to animate.css. This handy stylesheet is full of animations that are super useful, but not exactly what I was totally looking for so I had to modify some things to come up with my own.

Doodle Post

Image


Also now on my new webzone you can click on it for the big version!

Doodle Post

Image

Fresh New Look!

Fresh New Look!
It is done!

The fresh coat of paint is still drying so some things might be still broken, but overall I think this is looking pretty good.

I really wanted to get a redesign of my site going because I honestly hated the artwork on the old one. If you draw you know what I mean. Your art doesn't age well usually. When you're constantly improving at your craft over time, you notice how horrible your older work is compared to your newer. I mean it may have not looked objectively horrible, but man it was so gosh dang old I couldn't stand it anymore.

I've been drawing a whole lot more lately so I thought my new website should reflect that and look all totally hand drawn. I tried to simplify a lot of things like the shapes and colors and textures of the site. My old site was flashy and a little complicated. I liked it, but I'm feeling like much more of a simpler look now without paint brush splatters and gradients everywhere.

Still to come is some more visual polish. You might notice that the site is now left aligned instead of centered (when it at maximum browser window size.) The right side that looks totally empty right now will eventually have some cool art in it. I just have to figure out what that art is going to be.

You might also notice that the website changes based on how large your browser window is! I hope to improve my site's performance on mobile, and also hope to keep the site pretty viewable on smaller screens while also taking full advantage of how high res everyone's desktops are now. The site's width has increased from 960 pixels to 1100 pixels or so, but that changes based on your browser's width.

Image


I also went through and took a lot of my "doodle posts" and rolled them into my newly named "draws" page. Everything that was on there before is now filed under "ancient" and you definitely shouldn't look at it because old artwork is terrible and embarrassing.

Image


That's all for now! More updates to come.