opdavies/workshop-tailwind-css
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: opdavies:main
Branches Tags
opdavies:main
opdavies:finish
opdavies:task/1-add-tailwind-css
opdavies:task/2-intro-text
opdavies:task/3-navbar
opdavies:task/4-configuration
opdavies:task/5-refactor-menu-item-loop
opdavies:task/6-video
opdavies:task/7-sponsors
opdavies:task/8-repsonsive
...
pull from: opdavies:task/5-refactor-menu-item-loop
Branches Tags
opdavies:finish
opdavies:main
opdavies:task/1-add-tailwind-css
opdavies:task/2-intro-text
opdavies:task/3-navbar
opdavies:task/4-configuration
opdavies:task/5-refactor-menu-item-loop
opdavies:task/6-video
opdavies:task/7-sponsors
opdavies:task/8-repsonsive

10 commits
main ... task/5-ref

Author SHA1 Message Date
Oliver Davies b97482c642 Task 5 - Refactor menu items using a loop 2021-02-18 21:19:13 +00:00
Oliver Davies 97d4382dd3 Task 4 - Use updated classes 2021-02-18 21:19:13 +00:00
Oliver Davies 8dee798782 Task 4 - Add Bebas font 2021-02-18 21:19:13 +00:00
Oliver Davies cb8ad1178a Task 4 - Add our own configuration 2021-02-18 21:19:13 +00:00
Oliver Davies b032e99b31 Task 3 - Add navbar classes 2021-02-18 21:19:13 +00:00
Oliver Davies 0ca58316c0 Task 3 - Add navbar markup 2021-02-18 21:19:13 +00:00
Oliver Davies a5dff0b493 Task 2 - Add intro text classes 2021-02-18 21:19:13 +00:00
Oliver Davies 4014f12395 Task 2 - Add intro text 2021-02-18 21:19:13 +00:00
Oliver Davies d6a5af062a Remove old classes 2021-02-18 21:19:13 +00:00
Oliver Davies 11705f7a4c Task 1 - Add Tailwind CSS 2021-02-18 21:19:13 +00:00
14 changed files with 1242 additions and 5 deletions
Show stats Expand all files Collapse all files

2
.gitignore vendored
View file

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

3
assets/css/tailwind.pcss Normal file
View file

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

2
config/packages/twig.yaml
View file

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

14
package.json
View file

@ -1,5 +1,15 @@
{ {
"private": true, "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"
}
} }

6
postcss.config.js Normal file
View file

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

34
src/Repository/MenuItemArrayRepository.php Normal file
View file

@ -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,
],
];
}
}

8
src/Repository/MenuItemRepository.php Normal file
View file

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

31
tailwind.config.js Normal file
View file

@ -0,0 +1,31 @@
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',
},
gray: {
dark: '#333333',
},
orange: '#fcb040',
white: '#ffffff',
},
extend: {
fontSize: {
'2xl': '1.5625rem', // 25px
'3xl': '1.6875rem', // 27px
},
},
},
variants: {
extend: {},
},
plugins: [],
};

7
templates/html.html.twig
View file

@ -4,10 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>{% block title %}Tailwind CSS workshop{% endblock %}</title> <title>{% block title %}Tailwind CSS workshop{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <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 %} {% block stylesheets %}{% endblock %}
</head> </head>
<body class="py-20 font-sans bg-blue-600"> <body>
<div class="container px-4 mx-auto"> <div>
{% block body %}{% endblock %} {% block body %}{% endblock %}
</div> </div>
{% block javascripts %}{% endblock %} {% block javascripts %}{% endblock %}

5
templates/includes/home/intro-text.html.twig Normal file
View file

@ -0,0 +1,5 @@
<div class="max-w-3xl px-4 py-8 mx-auto text-center">
<p class="text-3xl leading-loose 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-5 py-4 mt-8 text-3xl transition-colors duration-200 ease-in-out border-2 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>

24
templates/includes/navbar.html.twig Normal file
View file

@ -0,0 +1,24 @@
<div class="sticky top-0 z-30 px-4 mx-auto bg-white max-w-screen-2xl">
<div class="grid grid-cols-2 gap-4">
<div>
<a class="absolute" href="#0">
<img src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/header-logo-general.svg">
</a>
</div>
<div>
<ul class="flex justify-end h-full">
{% 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>

2
templates/page.html.twig
View file

@ -1,5 +1,7 @@
{% extends 'html.html.twig' %} {% extends 'html.html.twig' %}
{% block body %} {% block body %}
{% include 'includes/navbar.html.twig' %}
{% block content %}{% endblock %} {% block content %}{% endblock %}
{% endblock %} {% endblock %}

2
templates/pages/home.html.twig
View file

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

1107
yarn.lock
View file

File diff suppressed because it is too large Load diff