Skinnable Site
This site is part of my own experimentation. As such, it has been made skinnable with several layouts that I'm toying with. You may choose your favorite one and it will be remembered in a cookie. If you select "Default" then whatever I have designated as the default layout will be used (which may change from time-to-time). If you do not have cookies enabled then the default will always be used.
Choose Skin
Select Layout Style:
Blank |
Blankish |
Simple |
Fractal |
Borders |
Starry |
Curve |
Curve Mobile |
Default
Skin Notes
I'm using the terms "skin", "layout", and "theme" interchangeably. These are "layouts" in the sense that they change the position of header, menu, and content. They are themes or skins since they change the colors, fonts, etc.
- Blank - Pretty much nothing, just html header, reset.css, and a margin.
- Blankish - Blank, but added background color, logo, and menu.
- Simple - A simple, clean layout that tries to be nice looking but not very fancy. It uses a white box in the middle to make reading the text on the page easier while still allowing the background to be colored. It was the first one to have a drop-down menu under the header.
- Fractal - This is a remnant from playing around on my university account. It uses a cool fractal-generated image as the background (I wanted to use it for something) and plays around with transparency. To make the background box transparent but not the contents themselves I had to use a short piece of Javascript to resize the background div to match the size of the content div, rather than just setting the background color on the content div.
- Borders - This was a quick layout I threw together for a college class project's page. It has been slightly improved with the side menu and a min-width property.
- Starry - This is a replication of the old style I had for my original web site (made in high school). When there is text on the page it is hideous (and hard to read because of the white dots in the background), but for the Links page, where everything is either magenta or blue, it doesn't look quite as bad. It also uses rollover buttons in the side menu that show how CSS does what Javascript used to do, and the images are background images now with dynamic text in front rather than the original pre-made images per button.
- Curve - This is the first layout I actually designed in a graphics program. It borrows influences from many places, including some small tweaks I've done to sites at work. I took the turquiose from the Webj2 (Starry) layout as the primary color and found a scheme with blue, yellow, and oranges that matched the Neptic logo.
- Curve Mobile - Same as Curve, but the CSS has a larger font. (And the CSS might be a bit older than Curve's). JavaScript selects this by default on a mobile device.