An HTML5 framework with a lot of possibilities…

While browsing the examples I got an idea. At first I told myself why bother redesigning the site again and left it. But my brain wouldn't let it go and started forming ideas about what it could look like, what to use where... Until I redesigned the entire site. The photo gallery too. That's where I hit a problem. Bootstrap uses a slider called Carousel, which is great. I like it — but it can't handle a list of photos that are both landscape and portrait oriented. So what needs to be adjusted to make it work? CSS. The images will be on a white background, and I wanted the controls on a white background too (no gradients or effects). Basically nothing that distracts. The values are for photo dimensions of 800×535 and 535×800 px respectively. The photo will be centred on screen.

.carousel {height: 800px; margin-bottom: 60px;}  
.carousel .item {min-height: 801px; background-color: #FFF;}  
.carousel-inner > .item > img {margin-right: auto; margin-left: auto;}

There are still some tweaks to make to the bootstrap styles for Carousel. Including adjusting the appearance of the controls.

.carousel-inner {position: relative; overflow: hidden;}  
.carousel-inner > .item > a > img {display: block; height: auto; line-height: 1;}  
.carousel-control {max-height: 45%; color: #333; opacity: 0.7; filter: alpha(opacity=70); }  
.carousel-control.left {right: auto; left: 0; background-image: none;}  
.carousel-control.right {right: 0; left: auto; background-image: none;}  
.carousel-control:focus { color: #CCC; text-shadow: 0 1px 2px rgba(51, 51, 51, 1); text-decoration: none; outline: none; opacity: 0.9; filter: alpha(opacity=90); }