Add basic css

.gitignore

@@ -8,3 +8,4 @@
 /var/
 /vendor/
 ###< symfony/framework-bundle ###
+/node_modules/

assets/.gitignore

@@ -0,0 +1 @@
+/node_modules/

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);
+    }
+}

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;
+}

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);
+    }
+}

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);
+    }
+}

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);
+    }
+}

assets/sass/index.scss

@@ -0,0 +1,5 @@
+@import 'variables';
+@import 'elements';
+@import 'components/header';
+@import 'components/sidebar';
+@import 'components/footer';

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",

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",

config/packages/twig.yaml

@@ -1,2 +1,4 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
+    globals:
+        app_name: RSS Reader

config/routes.yaml

@@ -1,3 +1,6 @@
-#index:
+# Static pages / templates
-#    path: /
+start:
-#    controller: App\Controller\DefaultController::index
+    path: /
+    controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
+    defaults:
+        template: 'static/start.html.twig'

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;

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"
+}

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); }

symfony.lock

@@ -99,6 +99,9 @@
     "psr/log": {
         "version": "1.1.3"
     },
+    "symfony/asset": {
+        "version": "v5.0.8"
+    },
     "symfony/cache": {
         "version": "v5.0.8"
     },

templates/base.html.twig

@@ -3,10 +3,27 @@
     <head>
         <meta charset="UTF-8">
         <title>{% block title %}Welcome!{% endblock %}</title>
-        {% block stylesheets %}{% endblock %}
+        {% block stylesheets %}
+            <link href="{{ asset('css/style.css') }}" rel="stylesheet">
+        {% endblock %}
     </head>
     <body>
+        <header>
+            <h1><a href="{{ path('start') }}">{{ app_name }}</a></h1>
+        </header>
+
+        <nav>
+            <a href="#">Bucket 1</a>
+            <a href="#">Bucket 2</a>
+            <a href="#">Bucket 3</a>
+        </nav>
+
         {% block body %}{% endblock %}
+
+        <footer>
+            © by <a href="https://daniel-siepmann.de">Daniel Siepmann</a> since 2020
+        </footer>
+
         {% block javascripts %}{% endblock %}
     </body>
 </html>

templates/static/start.html.twig

@@ -0,0 +1 @@
+{% extends 'base.html.twig' %}