diff --git a/.gitignore b/.gitignore
index a67f91e..4816dca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@
/var/
/vendor/
###< symfony/framework-bundle ###
+/node_modules/
diff --git a/assets/.gitignore b/assets/.gitignore
new file mode 100644
index 0000000..2ccbe46
--- /dev/null
+++ b/assets/.gitignore
@@ -0,0 +1 @@
+/node_modules/
diff --git a/assets/sass/_elements.scss b/assets/sass/_elements.scss
new file mode 100644
index 0000000..7f21c80
--- /dev/null
+++ b/assets/sass/_elements.scss
@@ -0,0 +1,28 @@
+body {
+ font: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
+
+ background: --color-background;
+ color: --color-foreground;
+
+ margin: 0;
+ padding: 0;
+}
+
+h1 {
+ color: var(--color-blue-dark);
+}
+
+a {
+ color: var(--color-wihte-light);
+ text-decoration: underline;
+
+ &:active,
+ &:visited {
+ color: var(--color-wihte-light);
+ }
+
+ &:hover {
+ color: var(--color-black-dark);
+ background: var(--color-blue-light);
+ }
+}
diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
new file mode 100644
index 0000000..2792e2a
--- /dev/null
+++ b/assets/sass/_variables.scss
@@ -0,0 +1,16 @@
+:root {
+ --color-background: #2E3436;
+ --color-foreground: #D3D7CF;
+ --color-blue-light: #9CD9F0;
+ --color-blue-dark: #72B3CC;
+ --color-black-light: #5D5D5D;
+ --color-black-dark: #000000;
+ --color-white-light: #F7F7F7;
+ --color-white-dark: #B0B0B0;
+
+ --spacing-elements: 1rem;
+
+ --width-border-default: 0.2rem;
+
+ --width-sidebar-max: 10rem;
+}
diff --git a/assets/sass/components/_footer.scss b/assets/sass/components/_footer.scss
new file mode 100644
index 0000000..1ccc099
--- /dev/null
+++ b/assets/sass/components/_footer.scss
@@ -0,0 +1,7 @@
+body > footer {
+ padding: var(--spacing-elements);
+
+ border: {
+ top: var(--color-blue-light) solid var(--width-border-default);
+ }
+}
diff --git a/assets/sass/components/_header.scss b/assets/sass/components/_header.scss
new file mode 100644
index 0000000..758db7d
--- /dev/null
+++ b/assets/sass/components/_header.scss
@@ -0,0 +1,11 @@
+body > header {
+ padding: var(--spacing-elements);
+
+ h1 {
+ margin: 0;
+ }
+
+ border: {
+ bottom: var(--color-blue-light) solid var(--width-border-default);
+ }
+}
diff --git a/assets/sass/components/_sidebar.scss b/assets/sass/components/_sidebar.scss
new file mode 100644
index 0000000..1c9c64b
--- /dev/null
+++ b/assets/sass/components/_sidebar.scss
@@ -0,0 +1,11 @@
+body > nav {
+ max-width: var(--width-sidebar-max);
+ border: {
+ right: var(--color-blue-light) solid var(--width-border-default);
+ }
+
+ a {
+ display: block;
+ padding: var(--spacing-elements);
+ }
+}
diff --git a/assets/sass/index.scss b/assets/sass/index.scss
new file mode 100644
index 0000000..dea2c91
--- /dev/null
+++ b/assets/sass/index.scss
@@ -0,0 +1,5 @@
+@import 'variables';
+@import 'elements';
+@import 'components/header';
+@import 'components/sidebar';
+@import 'components/footer';
diff --git a/composer.json b/composer.json
index 8a8cc25..1b58a1a 100644
--- a/composer.json
+++ b/composer.json
@@ -5,6 +5,7 @@
"php": "^7.2.5",
"ext-ctype": "*",
"ext-iconv": "*",
+ "symfony/asset": "5.0.*",
"symfony/console": "5.0.*",
"symfony/dotenv": "5.0.*",
"symfony/flex": "^1.3.1",
diff --git a/composer.lock b/composer.lock
index fc6a19a..7a09235 100644
--- a/composer.lock
+++ b/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": "f5f287a8a8950e4398c1b309fe77101d",
+ "content-hash": "f28137780ed4bbe2e8ff224340449ea7",
"packages": [
{
"name": "doctrine/annotations",
@@ -1629,6 +1629,76 @@
],
"time": "2020-03-23T09:12:05+00:00"
},
+ {
+ "name": "symfony/asset",
+ "version": "v5.0.8",
+ "source": {
+ "type": "git",
+ "url": "https://github.com/symfony/asset.git",
+ "reference": "be35f49cf2cf1c54de30bc31d2c5ff3c1d880be8"
+ },
+ "dist": {
+ "type": "zip",
+ "url": "https://api.github.com/repos/symfony/asset/zipball/be35f49cf2cf1c54de30bc31d2c5ff3c1d880be8",
+ "reference": "be35f49cf2cf1c54de30bc31d2c5ff3c1d880be8",
+ "shasum": ""
+ },
+ "require": {
+ "php": "^7.2.5"
+ },
+ "require-dev": {
+ "symfony/http-foundation": "^4.4|^5.0",
+ "symfony/http-kernel": "^4.4|^5.0"
+ },
+ "suggest": {
+ "symfony/http-foundation": ""
+ },
+ "type": "library",
+ "extra": {
+ "branch-alias": {
+ "dev-master": "5.0-dev"
+ }
+ },
+ "autoload": {
+ "psr-4": {
+ "Symfony\\Component\\Asset\\": ""
+ },
+ "exclude-from-classmap": [
+ "/Tests/"
+ ]
+ },
+ "notification-url": "https://packagist.org/downloads/",
+ "license": [
+ "MIT"
+ ],
+ "authors": [
+ {
+ "name": "Fabien Potencier",
+ "email": "fabien@symfony.com"
+ },
+ {
+ "name": "Symfony Community",
+ "homepage": "https://symfony.com/contributors"
+ }
+ ],
+ "description": "Symfony Asset Component",
+ "homepage": "https://symfony.com",
+ "funding": [
+ {
+ "url": "https://symfony.com/sponsor",
+ "type": "custom"
+ },
+ {
+ "url": "https://github.com/fabpot",
+ "type": "github"
+ },
+ {
+ "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+ "type": "tidelift"
+ }
+ ],
+ "time": "2020-04-12T14:40:17+00:00"
+ },
{
"name": "symfony/cache",
"version": "v5.0.8",
diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
index b3cdf30..747b309 100644
--- a/config/packages/twig.yaml
+++ b/config/packages/twig.yaml
@@ -1,2 +1,4 @@
twig:
default_path: '%kernel.project_dir%/templates'
+ globals:
+ app_name: RSS Reader
diff --git a/config/routes.yaml b/config/routes.yaml
index c3283aa..14a7559 100644
--- a/config/routes.yaml
+++ b/config/routes.yaml
@@ -1,3 +1,6 @@
-#index:
-# path: /
-# controller: App\Controller\DefaultController::index
+# Static pages / templates
+start:
+ path: /
+ controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
+ defaults:
+ template: 'static/start.html.twig'
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..cc49a40
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,45 @@
+const autoprefixer = require('autoprefixer');
+const concat = require('gulp-concat');
+const del = require('delete');
+const path = require('path');
+const postcss = require('gulp-postcss');
+const sass = require('gulp-sass');
+const {src, dest, series, watch} = require('gulp');
+
+const destDirs = {
+ css: path.join('public', 'css'),
+};
+const srcDir = path.join('assets');
+const srcDirs = {
+ sass: path.join(srcDir, 'sass'),
+};
+
+function cssTask() {
+ const sources = [
+ path.join('node_modules',),
+ path.join(srcDirs.sass, 'index.scss'),
+ ];
+ const postCssPlugins = [
+ autoprefixer(),
+ ];
+
+ return src(sources)
+ .pipe(sass().on('error', sass.logError))
+ .pipe(postcss(postCssPlugins))
+ .pipe(concat('style.css'))
+ .pipe(dest(destDirs.css));
+}
+
+function cleanTask(cb) {
+ del([
+ destDirs.css,
+ ], cb);
+}
+
+function watchTask() {
+ watch([srcDirs.sass], {ignoreInitial: false}, cssTask);
+}
+
+exports.css = cssTask;
+exports.default = series(cleanTask, cssTask);
+exports.watch = watchTask;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..598fd45
--- /dev/null
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "assets",
+ "version": "1.0.0",
+ "description": "Assets for this project",
+ "main": "index.js",
+ "engines": {
+ "node": "12"
+ },
+ "dependencies": {},
+ "devDependencies": {
+ "autoprefixer": "^9.8.0",
+ "delete": "^1.1.0",
+ "gulp": "^4.0.2",
+ "gulp-concat": "^2.6.1",
+ "gulp-postcss": "^8.0.0",
+ "gulp-sass": "^4.1.0",
+ "node-sass": "^4.14.1"
+ },
+ "scripts": {
+ "build": "gulp default",
+ "build-css": "gulp css",
+ "watch": "gulp watch",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "",
+ "license": "GPL-2.0-or-later"
+}
diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 0000000..f080c96
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,48 @@
+:root {
+ --color-background: #2E3436;
+ --color-foreground: #D3D7CF;
+ --color-blue-light: #9CD9F0;
+ --color-blue-dark: #72B3CC;
+ --color-black-light: #5D5D5D;
+ --color-black-dark: #000000;
+ --color-white-light: #F7F7F7;
+ --color-white-dark: #B0B0B0;
+ --spacing-elements: 1rem;
+ --width-border-default: 0.2rem;
+ --width-sidebar-max: 10rem; }
+
+body {
+ font: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
+ background: --color-background;
+ color: --color-foreground;
+ margin: 0;
+ padding: 0; }
+
+h1 {
+ color: var(--color-blue-dark); }
+
+a {
+ color: var(--color-wihte-light);
+ text-decoration: underline; }
+ a:active, a:visited {
+ color: var(--color-wihte-light); }
+ a:hover {
+ color: var(--color-black-dark);
+ background: var(--color-blue-light); }
+
+body > header {
+ padding: var(--spacing-elements);
+ border-bottom: var(--color-blue-light) solid var(--width-border-default); }
+ body > header h1 {
+ margin: 0; }
+
+body > nav {
+ max-width: var(--width-sidebar-max);
+ border-right: var(--color-blue-light) solid var(--width-border-default); }
+ body > nav a {
+ display: block;
+ padding: var(--spacing-elements); }
+
+body > footer {
+ padding: var(--spacing-elements);
+ border-top: var(--color-blue-light) solid var(--width-border-default); }
diff --git a/symfony.lock b/symfony.lock
index 2bd84c1..159dccc 100644
--- a/symfony.lock
+++ b/symfony.lock
@@ -99,6 +99,9 @@
"psr/log": {
"version": "1.1.3"
},
+ "symfony/asset": {
+ "version": "v5.0.8"
+ },
"symfony/cache": {
"version": "v5.0.8"
},
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 043f42d..6b39044 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -3,10 +3,27 @@
{% block title %}Welcome!{% endblock %}
- {% block stylesheets %}{% endblock %}
+ {% block stylesheets %}
+
+ {% endblock %}
+
+
+
+
{% block body %}{% endblock %}
+
+
+
{% block javascripts %}{% endblock %}