A New Look for The Front Door

One of the most significant changes made on the Home Page (cuba.htm) is the removal of the left side div which, for years, was the place where the logo would hang out. On small screens the div would disappear and the logo would relocate to the very top.

Removing it wasn’t an easy decision to make, but combined with other changes, it allowed for a more stream-lined page.  

The left side was there for over fifteen years, serving the larger screens of the time and going through various cosmetic updates along the way. But now that screens are both larger and smaller than ever, it’s time for an evolutionary change.

This change would invoke CSS grid and Flexbox to power the page. A new version of the home page is currently being developed, tested (and cursed at—in Spanish) for the near future. Here’s a peak, though it’s not quite ready for prime time.

But first, as they say in morning news, a little something about a 17-year-old home page that has recently retired.

Seventeen years is a long time for a home page (the “front door”). Over the years it has featured different looks, and for a brief time at the beginning, it even included pictures of Fidel Castro and Che Guevara.

Those were the early days, during the Clinton Administration, when I was still in denial about the hate that existed towards the only names and faces widely recognized in the U.S. as “Cubans.” A friend suggested that I use a picture of “Ricky Ricardo” instead.

“You mean, Desi Arnaz?” I said to her.

“Who!? No! Ricky Ricardo. Lucy’s first husband.”

The third most recognizable Cuban at the time was not even remembered by his own name. And the 2^nd most recognizable Cuban (Che) was born in Argentina. Castro and Che were evicted off the Home Page and replaced by Martí and Maceo. It didn’t matter that Americans didn’t know who they are. I would gladly tell them.

Eventually, as the site grew, the Front Door and the Timetables became the most worked pages.  

An early Home Page (Front Door) made
with HTML tables

Initially both were built with clumsy HTML tables for layout.  This early screenshot shows a tables layout with a JavaScript gallery showing a Martí stamp. At the top, next to the logo, a mouse-over effect invites you to wave the Cuban flag.

At some point David-Siegel-like single-pixel-Gifs were everywhere. I remember staying up nights with Siegel’s first book considering how to improve the look of the site.

As the specifications for HTML evolved, so did the timetables, though not the Front Door. The new HTML 4.01 pages (on the timetables), built with CSS and embracing floats and positioning became, almost by accident, mobile-friendly. The effort to adhere to the demands of assisted technologies paid off in unexpected ways, though I didn’t really “get it” at the time.

Today, the new CSS Grid frontdoor seems an awfully serious decision. Here’s what’s happening;

While I know what I want the small screen to do and look like (a variation of the current one shown at left, but more streamlined) it’s the large screen that’s giving me trouble. It’s always easier to throw things on top of each other than to assemble them into meaningful coherence.

Background Image

A background “hero” image is loaded with the body, depicting true heroes of Cuban history inone of their most heroic moments;

.bod2 {
background-image: url(http://historyofcuba.com/images/New/HoC-NewCover-4.jpg);
 background-repeat: no-repeat;
 background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}   

   Martí on the left side to greet us, with rebels behind him… this image appears at screens at least 600 pixels wide and disappear from smaller screens.

I used this image because of its “history” with the site. “Crossing of the Trocha, Jan 1, 1896,” symbolizes the relentless struggle for independence inspired by Martí and led by Maceo and Gómez… the image has been desaturated a bit for the front door.

Part of the central image is repeated on the .article2 div (without Martí) that appears on screens 1200 pixels or higher. The image links to the Gallery page in which this image is further explored.

On pages 900 pixels wide, Grid-template areas provide for a 6-column, 4-row grid, leaving the left area open for Martí.

 grid-template-columns: repeat(6, 1fr);

    grid-template-rows: 80px 180px 1fr 90px;

    grid-template-areas:

    " . header header  header  header  header"

    " . mainbar mainbar article article sidebar"

    " . article2   . article3 article3 sidebar"

    " . search footer footer footer footer";

The grid-template-areas reassemble themselves d for different screen sizes, leaving out sidebar1 and article2 from the smaller screens.

Firefox screen shot shows grid-template-areas

Various grid items feature semi-transparent colors (rgba) to separate and isolate the section. This includes article3, article, sidebar and mainbar. This is still in the testing stage.

SEARCH

The search window appears at the bottom… I want the visitor to glance through my offerings before they go searching for stuff. On the other places where it is used (contents.htm & content2.htm) the Google Search appears at the top right.

I don’t recall when the Google Search was established, but it must be approaching legal age and it still works like a Laker point guard in their prime.

Screen breaks come at screen widths of 500, 600, 800, 900 and 1200 pixels. Aside from reorganizing the grid-template-areas, they mostly adjust font sizes …

A Chrome screen shot shows the basic idea for the page

Along the way I came across various peculiarities in how the same exact page displays on Firefox and on Chrome…

On Chrome the page lays out as expected… and it shrinks as you’d want it to. The Firefox page is a different story.

Once established, this layout may be used on different menu pages… with slight variations relating to different site topics. I can’t wait to get there.