Songhay Studio: kintespace.com design notes
The layout. My latest design of kintespace.com will still be green (I would like to transition into more earth tones later—assuming there will be a “later.”) I assumed that this design would have to abandon the BiggestBox concept that I promoted years ago. But it is now obvious to me that Bootstrap has a max-width ‘concept’ of 1170 px (for .container—which why we would need .container-fluid to avoid this limitation). By specifying a height in pixels for my .container, I get the box effect in the world of Bootstrap:
The background “splash” image. I am using flickr.com to get a wide image. I have decided upon “Forest near Village of Ngon” from CIFOR. I experimented with a tall image for mobile devices—but I could not find a suitable portrait equivalent of the Ngon landscape (the colors particularly). The image I have selected (which is a kintespace.com policy) is of the Creative Commons. This moves me to find some cool widget that can display the attribution. I could go directly to creativecommons.org but the context there is for “content creators”—not respectful third parties (also it could be confusing to show a Creative Commons logo on the splash page because it might allow one to assume that all of kintespace.com is Creative Commons).
Responsively dropping out of the box layout. What is quite a pleasant move at the moment is what happens in the browser because this chunk of SCSS:
@media all and (min-width: 768px) /* Small devices Tablets (≥768px) */
{
#IndexBox
{
background-image: url('#{$backgroundUri}');
}
}
@media all and (max-width: 768px) /* Small devices Tablets (<768px) */
{
body
{
background-image: url('#{$backgroundUriSmall}');
}
}
The intent here is to make the background image fill a box by default and fill the entire screen on “small devices.”