Sheffugees: list

by Laura Kishimoto

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.teal-green.min.css">
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
        <div aria-expanded="false" role="button" tabindex="0" class="mdl-layout__drawer-button">
            <i class="material-icons">î—’</i>
        </div>
        <div class="mdl-layout__header-row">
            <!-- Title -->
            <span class="mdl-layout-title">Sheffugees wayfinder</span>
            <!-- Add spacer, to align navigation to the right -->
            <div class="mdl-layout-spacer"></div>
            <!-- Navigation. We hide it in small screens. -->
            <nav class="mdl-navigation mdl-layout--large-screen-only">
                <a class="mdl-navigation__link" href="">My home</a>
                <a class="mdl-navigation__link" href="">Settings</a>
            </nav>
        </div>
    </header>
    <div class="mdl-layout__drawer">
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Legal help</a>
            <a class="mdl-navigation__link" href="">Community, leisure, and worship</a>
            <a class="mdl-navigation__link" href="">Transportation</a>
            <a class="mdl-navigation__link" href="">Food, clothing, and housing</a>
            <a class="mdl-navigation__link" href="">Money</a>
            <a class="mdl-navigation__link" href="">Education and family</a>
            <a class="mdl-navigation__link" href="">Work and volunteering</a>
            <a class="mdl-navigation__link" href="">Libraries and internet access</a>
            <a class="mdl-navigation__link" href="">Health and emergency services</a>
        </nav>
        <hr>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">My home location</a>
    ...

SCSS

$colour-white:     #fff;
$colour-accent:    #46B6AC;

.page-content {
    margin: 0 auto;
    max-width: 1200px;
}

.mdl-card {
  text-decoration: none;
  &:hover {
  }
  &-square {
    width: 100%;
    min-height: 300px;
    > .mdl-card__title {
        color: $colour-white;
        background: $colour-accent;
    }
  }
}