<div id="dynamic-gradient">
    <header class="grid-pad">
        <h2>Dynamic Gradients</h2>

        <p>
            PHP loop that adjusts the linear-gradient based on the $index. Utilises the Masonry JavaScript library for jazzing up the responsive aspect. Design-wise, I've nicked a bit from Google's Material Design documentation.
        </p>
    </header>
    <section id="gradient-wrapper">
        <?php
        for ($i = 0; $i <= 10; $i++) {
            $title = array(
                'Article Title',
                'Longer Article Title',
                'Art Tit',
                'Article Title: With an extra bit',
                'Long Article Title',
                'Numbered Article Title #6',
                'Seventh Article Title',
                'This is possibly the longest of all of the Article Titles that I can possibly write',
                'Le title d\'article numero neuf',
                'Article Title',
                'Another Article Title',
                'Longer Article Title',
                'Seventh Article Title',
                'Art Tit',
                'Article Title: With an extra bit',
                'Long Article Title',
                'Numbered Article Title #6',
                'Le title d\'article numero neuf',
                'Another quite long Article Title (but not the longest)',
                'This is possibly the longest of all of the Article Titles that I can possibly write'

            );
            $classes = 'grid-item';
            switch ($i % 3) {
                case 0:
                    $classes .= ' tall';
                    break;
                case 1:
                    $classes .= ' wide';
                    break;
                case 2:
                    $classes .= ' small';
                    break;
            }
            if ($i == 0) {
                $classes .= ' large';
            }
            ?>
            <article class="<?php echo $classes; ?>">
                <?php if ($i >= 9) {
                    $col = ($i - 1);
                } else {
                    $col = $i;
                }

                if (strlen($title[$i]) >= 35) {
                    $fz = "16px";
                } else {
                    $fz = "27px";
                }

                ?>
                <div id="article-<?php echo $i; ?>" class="content" style="background: linear-gradient(#<?php echo $col; ?><?php echo $col; ?>0000, #<?php echo $col; ?><?php echo $col; ?>0055)">
                    <h2 style="font-size: <?php echo $fz; ?>;">
                        <?php echo $title[$i]; ?>
                    </h2>
                </div>
            </article>
        <?php }
        ?>
    </section>
    <script>
        function masonry() {
            $('#gradient-wrapper').masonry({
                // options
                itemSelector: '.grid-item',
                columnWidth: 200
            });
        }
        $(document).ready(function () {
            masonry();
        });
    </script>
</div>