Task 8 - Add responsive tweaks

Add a mobile navigation button, change text sizes, change the layout of
the sponsors block.

.gitignore

@@ -1,3 +1,5 @@
+/node_modules/
+/public/build/
 
 ###> symfony/framework-bundle ###
 /.env.local

assets/css/tailwind.pcss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

composer.json

@@ -15,6 +15,7 @@
         "symfony/maker-bundle": "^1.26",
         "symfony/twig-bundle": "5.2.*",
         "symfony/yaml": "5.2.*",
+        "tightenco/collect": "^8.19",
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/twig": "^2.12|^3.0"
     },

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "78370320905a72a021718c801ce79a79",
+    "content-hash": "4bd1788348537b838b512b44b6eda8e4",
     "packages": [
         {
             "name": "doctrine/annotations",
@@ -3135,6 +3135,56 @@
             ],
             "time": "2020-12-08T17:02:38+00:00"
         },
+        {
+            "name": "tightenco/collect",
+            "version": "v8.19.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/tighten/collect.git",
+                "reference": "0c0243a0dc0b66f54d0ec409f36cd9889665b132"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/tighten/collect/zipball/0c0243a0dc0b66f54d0ec409f36cd9889665b132",
+                "reference": "0c0243a0dc0b66f54d0ec409f36cd9889665b132",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2|^8.0",
+                "symfony/var-dumper": "^3.4 || ^4.0 || ^5.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.0",
+                "nesbot/carbon": "^2.23.0",
+                "phpunit/phpunit": "^8.3"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "src/Collect/Support/helpers.php",
+                    "src/Collect/Support/alias.php"
+                ],
+                "psr-4": {
+                    "Tightenco\\Collect\\": "src/Collect"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylorotwell@gmail.com"
+                }
+            ],
+            "description": "Collect - Illuminate Collections as a separate package.",
+            "keywords": [
+                "collection",
+                "laravel"
+            ],
+            "time": "2020-12-19T00:06:29+00:00"
+        },
         {
             "name": "twig/extra-bundle",
             "version": "v3.1.1",

config/packages/twig.yaml

@@ -1,2 +1,5 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
+    globals:
+        menu_items: '@App\Repository\MenuItemRepository'
+        sponsors: '@App\Repository\SponsorRepository'

package.json

@@ -1,5 +1,15 @@
 {
   "private": true,
-  "scripts": {},
+  "scripts": {
-  "dependencies": {}
+    "dev": "cross-env NODE_ENV=development postcss assets/css/tailwind.pcss -o public/build/tailwind.css",
+    "prod": "cross-env NODE_ENV=production postcss assets/css/tailwind.pcss -o public/build/tailwind.css",
+    "watch": "cross-env NODE_ENV=development postcss assets/css/tailwind.pcss -o public/build/tailwind.css --watch"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.2.4",
+    "cross-env": "^7.0.3",
+    "postcss": "^8.2.6",
+    "postcss-cli": "^8.3.1",
+    "tailwindcss": "^2.0.3"
+  }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/Collection/SponsorCollection.php

@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Collection;
+
+use Tightenco\Collect\Support\Collection;
+
+final class SponsorCollection extends Collection
+{
+    public function byType(string $type): self
+    {
+        return $this->filter(function (array $sponsor) use ($type): bool {
+            return $sponsor['type'] == $type;
+        });
+    }
+}

src/Repository/MenuItemArrayRepository.php

@@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Repository;
+
+final class MenuItemArrayRepository implements MenuItemRepository
+{
+    public function findAll(): array
+    {
+        return [
+            [
+                'title' => 'Conference',
+                'is_active' => false,
+            ],
+            [
+                'title' => 'Sponsors',
+                'is_active' => false,
+            ],
+            [
+                'title' => 'Community',
+                'is_active' => false,
+            ],
+            [
+                'title' => 'FAQ',
+                'is_active' => false,
+            ],
+            [
+                'title' => 'Register',
+                'is_active' => true,
+            ],
+        ];
+    }
+}

src/Repository/MenuItemRepository.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace App\Repository;
+
+interface MenuItemRepository
+{
+    public function findAll(): array;
+}

src/Repository/SponsorArrayRepository.php

@@ -0,0 +1,111 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Repository;
+
+use App\Collection\SponsorCollection;
+
+final class SponsorArrayRepository implements SponsorRepository
+{
+    private const TYPE_PLATINUM = 'platinum';
+    private const TYPE_GOLD = 'gold';
+    private const TYPE_SILVER = 'silver';
+    private const TYPE_BRONZE = 'bronze';
+    private const TYPE_IN_KIND = 'in_kind';
+
+    private const SPONSORS = [
+        [
+            'name' => 'DDEV',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/ddev1000.png',
+            'type' => self::TYPE_PLATINUM,
+        ],
+        [
+            'name' => 'Acquia',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/Acquia_no_tagline.png',
+            'type' => self::TYPE_GOLD,
+        ],
+        [
+            'name' => 'Palantir.net',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/palantir-logo_0.png',
+            'type' => self::TYPE_GOLD,
+        ],
+        [
+            'name' => 'Drupal Contractors, by esteemed',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/dcont-logo-v1-stacked-black-01.png',
+            'type' => self::TYPE_GOLD,
+        ],
+        [
+            'name' => 'Lullabot',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/lullabot.jpg',
+            'type' => self::TYPE_GOLD,
+        ],
+        [
+            'name' => 'Florida Realtors Association',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/florida-realtors-logo.png',
+            'type' => self::TYPE_SILVER,
+        ],
+        [
+            'name' => 'DrupalEasy',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/DrupalEasy%20CMYK%20Layered_0.png',
+            'type' => self::TYPE_SILVER,
+        ],
+        [
+            'name' => 'Specbee',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/SpecbeeLogo-800x800.png',
+            'type' => self::TYPE_SILVER,
+        ],
+        [
+            'name' => 'devPanel',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/logo_devPanel_800x800_3.png',
+            'type' => self::TYPE_BRONZE,
+        ],
+        [
+            'name' => 'Promet Source',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/Promet_Logo_Master-04.png',
+            'type' => self::TYPE_BRONZE,
+        ],
+        [
+            'name' => 'Hot Sauce',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/hotsauce_logo.png',
+            'type' => self::TYPE_BRONZE,
+        ],
+        [
+            'name' => 'CLoud NYNE Design',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/CLoud-NYNE-Design.jpg',
+            'type' => self::TYPE_BRONZE,
+        ],
+        [
+            'name' => 'Bluehorn Digital',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/Bluehorn%20Digital%20Logo%20-%204C.png',
+            'type' => self::TYPE_BRONZE,
+        ],
+        [
+            'name' => 'Pantheon',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/newlogo-webops_New%20logo%20-black%20fist%20tagline.png',
+            'type' => self::TYPE_BRONZE,
+        ],
+        [
+            'name' => 'DesignHammer',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/DesignHammer%20%281%29.png',
+            'type' => self::TYPE_BRONZE,
+        ],
+        [
+            'name' => 'The Weekly Drop',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/twd-square-logo.png',
+            'type' => self::TYPE_IN_KIND,
+        ],
+        [
+            'name' => 'Kanopi Studios',
+            'logo_url' => 'https://www.fldrupal.camp/sites/default/files/styles/medium/public/Kanopi_Logo_Horiz_RGB.png',
+            'type' => self::TYPE_IN_KIND,
+        ]
+    ];
+
+    public function findByType(string $type): array
+    {
+        $sponsors = new SponsorCollection(self::SPONSORS);
+
+        return $sponsors->byType($type)->toArray();
+    }
+}

src/Repository/SponsorRepository.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace App\Repository;
+
+interface SponsorRepository
+{
+    public function findByType(string $type): array;
+}

symfony.lock

@@ -209,6 +209,9 @@
     "symfony/yaml": {
         "version": "v5.2.1"
     },
+    "tightenco/collect": {
+        "version": "v8.19.0"
+    },
     "twig/extra-bundle": {
         "version": "v3.1.1"
     },

tailwind.config.js

@@ -0,0 +1,36 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    fontFamily: {
+      display: ['Bebas Neue', 'Arial Narrow', 'Arial', 'sans-serif'],
+      sans: ['Helvetica', 'Arial', 'sans-serif'],
+    },
+    colors: {
+      blue: {
+        DEFAULT: '#56a9db',
+        dark: '#1772ae',
+      },
+      bronze: '#998100',
+      gold: '#e6c200',
+      gray: {
+        light: '#fafafa',
+        dark: '#333333',
+      },
+      orange: '#fcb040',
+      platinum: '#666666',
+      silver: '#999999',
+      white: '#ffffff',
+    },
+    extend: {
+      fontSize: {
+        '2xl': '1.5625rem', // 25px
+        '3xl': '1.6875rem', // 27px
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};

templates/html.html.twig

@@ -4,10 +4,13 @@
         <meta charset="UTF-8">
         <title>{% block title %}Tailwind CSS workshop{% endblock %}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="/build/tailwind.css"/>
         {% block stylesheets %}{% endblock %}
     </head>
-    <body class="py-20 font-sans bg-blue-600">
+    <body>
-        <div class="container px-4 mx-auto">
+        <div>
             {% block body %}{% endblock %}
         </div>
         {% block javascripts %}{% endblock %}

templates/includes/home/intro-text.html.twig

@@ -0,0 +1,5 @@
+<div class="max-w-3xl px-4 py-8 mx-auto text-center">
+    <p class="text-xl leading-loose lg:text-3xl text-blue-dark">Florida DrupalCamp is an annual conference that brings together web developers from all over the world to learn, network and discuss web development and the Drupal content management system.</p>
+
+    <a class="inline-block px-4 py-3 mt-8 text-xl transition-colors duration-200 ease-in-out border-2 lg:px-5 lg:py-4 lg:text-3xl text-blue-dark border-blue-dark hover:bg-blue-dark focus:bg-blue-dark hover:text-white focus:text-white" href="#0">Learn more</a>
+</div>

templates/includes/home/sponsors.html.twig

@@ -0,0 +1,30 @@
+<div class="px-4 mx-auto mt-10 mb-10 max-w-screen-xl">
+    <h2 class="sr-only">Sponsors</h2>
+
+    <div>
+        {% include 'includes/sponsor-list.html.twig' with {
+            title: 'Platinum Sponsors',
+            type: 'platinum',
+        } only %}
+
+        {% include 'includes/sponsor-list.html.twig' with {
+            title: 'Gold Sponsors',
+            type: 'gold',
+        } only %}
+
+        {% include 'includes/sponsor-list.html.twig' with {
+            title: 'Silver Sponsors',
+            type: 'silver',
+        } only %}
+
+        {% include 'includes/sponsor-list.html.twig' with {
+            title: 'Bronze Sponsors',
+            type: 'bronze',
+        } only %}
+
+        {% include 'includes/sponsor-list.html.twig' with {
+            title: 'In Kind Sponsors',
+            type: 'in_kind',
+        } only %}
+    </div>
+</div>

templates/includes/home/video.html.twig

@@ -0,0 +1,11 @@
+<div class="relative flex items-center justify-center px-4 mx-auto max-w-screen-2xl">
+    <video class="w-full opacity-60" poster="https://www.fldrupal.camp/sites/all/themes/fldc17/images/video-poster.jpg" preload="auto">
+        <source src="https://www.fldrupal.camp/sites/default/files/FLDC17%20Promo-high.mp4" type="video/mp4">
+    </video>
+
+    <img class="absolute w-96" src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/logo-general.svg" alt="Florida Drupalcamp Logo">
+
+    <img class="absolute w-24 h-auto left-32 top-48" src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/stars-1.svg" alt="">
+    <img class="absolute w-24 h-auto top-32 right-48" src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/stars-2.svg" alt="">
+    <img class="absolute w-20 h-auto right-80 bottom-32" src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/stars-3.svg" alt="">
+</div>

templates/includes/navbar.html.twig

@@ -0,0 +1,30 @@
+<div class="sticky top-0 z-30 px-4 mx-auto bg-white max-w-screen-2xl">
+    <div class="grid h-full grid-cols-2 gap-4">
+        <div>
+            <a class="absolute" href="#0">
+                <img class="relative z-20 w-auto h-20 md:h-24" src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/header-logo-general.svg">
+            </a>
+        </div>
+        <div class="flex items-center justify-end h-full">
+            <button class="my-4 lg:hidden" type="button" aria-label="Toggle menu">
+                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+                </svg>
+            </button>
+
+            <ul class="justify-end hidden h-full md:flex">
+                {% for menu_item in menu_items.findAll() %}
+                    {% set linkClasses = [
+                        'block px-2 py-3 text-2xl uppercase duration-200 ease-out transition-color font-display text-blue-dark hover:bg-orange focus:bg-orange hover:text-gray-dark focus:text-gray-dark',
+                        menu_item.is_active ? 'text-white bg-blue'
+                    ] %}
+                    <li>
+                        <a class="{{ linkClasses|join(' ')|trim }}" href="#0">
+                            {{ menu_item.title }}
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+</div>

templates/includes/sponsor-list.html.twig

@@ -0,0 +1,27 @@
+{% set titleClasses = [
+    'text-5xl font-display',
+    type == 'bronze' ? 'text-bronze',
+    type == 'gold' ? 'text-gold',
+    type == 'in_kind' ? 'text-blue-dark',
+    type == 'platinum' ? 'text-platinum',
+    type == 'silver' ? 'text-silver',
+] %}
+
+<div class="mt-10 text-center">
+    <h2 class="{{ titleClasses|join(' ')|trim }}">{{ title }}</h2>
+
+    <div class="mt-6">
+        <ul class="flex flex-wrap justify-center mx-auto -mt-2 -ml-2">
+            {% for sponsor in sponsors.findByType(type) %}
+            <li class="w-full mt-2 ml-2 sm:w-auto">
+                <a class="flex flex-col items-center justify-center p-4 sm:w-64 sm:h-48 sm:bg-gray-light" href="#0">
+                    <span class="flex items-center h-full">
+                        <img class="block w-4/5 max-h-full mx-auto" src="{{ sponsor.logo_url }}" alt="">
+                    </span>
+                    <p class="sr-only">{{ sponsor.name }}</p>
+                </a>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+</div>

templates/page.html.twig

@@ -1,5 +1,13 @@
 {% extends 'html.html.twig' %}
 
 {% block body %}
+    {% include 'includes/navbar.html.twig' %}
+
     {% block content %}{% endblock %}
+
+    <footer class="py-10 bg-blue-dark">
+        <div class="px-4 mx-auto max-w-screen-2xl">
+            <p class="text-white">A clone of the <a class="underline" href="https://www.fldrupal.camp">DrupalCamp Florida website</a>, built by <a class="underline" href="https://www.oliverdavies.uk">Oliver Davies</a>, for his Tailwind CSS training workshop.</p>
+        </div>
+    </footer>
 {% endblock %}

templates/pages/home.html.twig

@@ -1,5 +1,9 @@
 {% extends 'page.html.twig' %}
 
 {% block content %}
-    <h1 class="text-5xl font-bold text-center text-white">Welcome to the Tailwind CSS workshop</h1>
+    {% include 'includes/home/video.html.twig' %}
+
+    {% include 'includes/home/intro-text.html.twig' %}
+
+    {% include 'includes/home/sponsors.html.twig' %}
 {% endblock %}