Layout

Section Nav Menu as buttons/boxes

Current setup converts items to boxes when Section nav is placed in the Second content region (right one on the side-by-side)

 

.region-content-second .section-nav ul.menu li {

list-style: none;

background-color: #fff;

text-align: center;

}

.region-content-second .section-nav ul.menu li {
    list-style: none;
    background-color: #fff;
    text-align: center;
}

.region-content-second #boxes-box-os_pages_section_nav {
 ...

Read more about Section Nav Menu as buttons/boxes

CSS Grid using flex or grid

Using CSS flex

First on the ul:

    display: flex;
    grid-gap: 0 35px;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;

And then on the li:

    list-style: none;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    min-height: 90px;
    flex-basis: 220px;
    flex-flow: column;
    align-items: flex-start;
    vertical-...

Read more about CSS Grid using flex or grid

Custom Branding Header

As seen http://hwpi.harvard.edu/hks/home

Custom HTML widget with class = "branding" containg School logo and link needs to be added.

AND

custom CSS:

<style>

.branding {
    width: 100%!important;
}
.logo img{
width:400px;
}
.region-header-second .block:first-child p:last-child {
    float: right;
    font-weight: bold;
    text-transform: uppercase;
}
.region-header-second .block:first-child p:last-child a, .region-header-second .block:first-child p:...

Read more about Custom Branding Header

Equal Heights jQuery

https://codepen.io/micahgodbolt/pen/FgqLc

Replace classes at bottom

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
/* Thanks to CSS Tricks for pointing out this bit of jQuery
http://css-tricks.com/equal-height-blocks-in-rows/
It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */

equalheight = function(container){...

Read more about Equal Heights jQuery