Recreating ThinkShout's home page--with one hand tied behind my back (part 1)

Recently, I was visiting the sites of Drupal development shops and came across ThinkShout. The home page has a number of UI elements and behaviors that are familiar but well-done:

  • a logo that reduces size upon scrolling down
  • a sticky header
  • overlining of menu items on hover
  • a semi-opaque dark overlay on images with text on hover
  • re-ordered footer elements on mobile
    ThinkShout Home Page Screenshot
    Figure 1: Screenshot of the ThinkShout Home Page from 6 Sept 2021


I decided to try to create my own version of this homepage to flex my HTML, Javascript, and CSS (Sass-in particular) muscles. 

I've been as superstitious as a traditional groom on his wedding day so as not to look at the ThinkShout code. That way, I have had to reverse engineer the HTML, CSS, and JavaScript underneath as if it were a black box. It's been tempting, though, especially when it comes to colors; but so far, I have kept my eyes averted.

Top Menu Item Overline on Hover

For the sake of simplicity (and what I was working on just today), I'll discuss the top menu behavior on hover. On that menu, there's a line (which I'm calling an overline) that appears at the very top of the window (see Figure 2). 

I eventually noticed that the color was slightly lighter on each subsequent menu item (from left to right), even though the text color of the menu item did not change. I little searching on the web brought me to the Sass @for.

The example from that page (below) was remarkably similar to what I wanted to:

		$base-color: #036;

		@for $i from 1 through 3 {
		  ul:nth-child(3n + #{$i}) {
			background-color: lighten($base-color, $i * 5%);

Final(?) implementation

I played around with the color gradations until I arrived at one that looked acceptable (See Figure 3). It turned out 7% was the sweet spot for border-top-color: lighten($secondary, $i * 7%);.

	$secondary: #f07c00;

	ul.desktop {
			a {
				height: 103px;
				padding-top: 45px;
				box-sizing: border-box;
				&:hover {
					color: $secondary;
					border-top-width: 5px;
					border-top-style: solid;
					padding-top: 40px;
			li {
				display: flex;
				@for $i from 1 through 5 {
					&:nth-child(1n+#{$i}) a:hover {
					  border-top-color: lighten($secondary, $i * 5%);

thinkshout menu overline for comparison original
Figure 2: ThinkShout menu hover behavior (original)

thinkshout menu overline for comparison (my version)
Figure 3: ThinkShoul menu hover behavior (my implementation)


Making one view look like another one

To take one view and make it look like another can be pretty trivial. 

Let's call them "old style view" and "new style view". 

In my case, most of the presentational work of both views was being done with custom text, which means that I was bringing the fields in earlier in the view, but excluding them from displaying. Then, I used the tokens created by the view of those excluded fields in a custom text field, wrapping them in tags and classes that made sense. 

<!-- vertical -->
<div class="event-item">
<div class="event-calendar-left">    
    <div class="event-calendar-box">
        <div class="box-top-month">
        <div class="box-bottom-day">
    </div><!-- END of .event-calendar-box -->
</div><!-- END of .event-calendar-left -->
    <div class="event-calendar-right">
        <div class="event-brief-desc">
        <div class="event-desc-top">
            <div class="event-name">
        <div class="event-date">
        <div class="event-time">

        </div><!-- .event-desc-top -->
        <div class="event-desc-bottom">
            <div class="event-summary">[body]</div>
            <div class="event-more-info"><a href="[field_imported_cal_link]">More Information</a>
        </div><!-- .event-desc-bottom -->
    </div><!-- .event-brief-desc -->
    </div><!-- .event-calendar-right -->
</div><!-- .event-item -->