bumped symfony to 5.3

assets/app.js

@@ -0,0 +1,12 @@
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+
+// any CSS you import will output into a single css file (app.css in this case)
+import './styles/app.css';
+
+// start the Stimulus application
+import './bootstrap';

assets/bootstrap.js

@@ -0,0 +1,11 @@
+import { startStimulusApp } from '@symfony/stimulus-bridge';
+
+// Registers Stimulus controllers from controllers.json and in the controllers/ directory
+export const app = startStimulusApp(require.context(
+    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+    true,
+    /\.(j|t)sx?$/
+));
+
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -0,0 +1,4 @@
+{
+    "controllers": [],
+    "entrypoints": []
+}

assets/controllers/hello_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from 'stimulus';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+    connect() {
+        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+    }
+}

assets/images/Spookie/Spookie.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.0" width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+  <g transform="matrix(0.1, 0, 0, -0.1, -6.266793, 1030.994141)" fill="#000000" stroke="none">
+    <path d="M 1568.308 10309.078 C 564.548 10309.078 62.668 9803.508 62.668 8792.368 C 62.668 8339.535 62.668 1727.029 62.668 1714.388 C 62.668 703.248 564.548 197.678 1568.308 197.678 C 1591.463 197.678 7590.868 197.678 8594.628 197.678 C 9598.388 197.678 10100.268 703.248 10100.268 1714.388 C 10100.268 2725.528 10100.268 6486.982 10100.268 8792.368 C 10100.268 9803.508 9598.388 10309.078 8594.628 10309.078 C 5583.348 10309.078 1568.308 10309.078 1568.308 10309.078 Z M 3672.54 7275.658 C 4244.339 8047.825 5331.794 8472.407 6085.228 8392.819 C 7558.724 8237.167 7711.517 7222.701 7669.179 6891 C 7601.342 6359.52 7261.927 6120.025 7215.766 6046.83 C 7054.424 5790.996 7112.956 5590 7129.487 5573 C 7140.184 5562 7284.674 5550.452 7381.343 5616 C 7983.187 6016.375 8092.748 6264.518 8434.473 6410 C 9054.145 6673.811 9255.358 5797.308 9262.001 5720 C 9313.839 5116.734 9046.297 5272.999 8804.116 5495.788 C 8923.874 4704.112 8630.922 4160.925 8514.503 4156.928 C 8067.033 4141.565 7890.303 4557.157 7878.388 4495.295 C 7651.349 3316.524 6684.687 4203.602 6680.894 4195 C 6408.836 3577.95 6794.683 3431.998 6849.431 3394 C 7072.287 3239.325 7829.534 3522.262 7901.588 3527 C 8353.345 3556.705 8404.386 3093.747 8337.202 2842.622 C 8300.167 2704.19 8116.008 3110.391 8098.694 3056.379 C 7905.831 2454.74 7286.79 1799.512 5252.72 1970 C 2634.673 2189.435 3169.554 3982.907 3145.643 3965.989 C 2508.377 3515.099 2335 4324.288 2233.361 4750 C 2228.393 4770.808 2005.604 4213.617 1673.29 4210.931 C 1340.976 4208.245 1180.756 5173.068 1418.474 5904 C 1278.78 5813.12 1110.84 5657.594 908.927 5784 C 768.062 5872.188 787.568 6952.627 1704.288 7206 C 1828.193 7240.246 2045.681 7168.896 2123.478 7041 C 2259.345 6817.638 2477.148 6490.068 2526.059 6431 C 2665.475 6262.634 3023.704 6040.791 3220.366 6417 C 3444.851 6846.434 3309.293 6770.088 3672.54 7275.658 Z" style="stroke: rgb(218, 85, 85); fill: #ff8040;"/>
+    <path d="M 4218 7190 C 3843.862 7161.67 3684.337 6798.411 3725.003 6362.026 C 3760.674 5979.24 4109.523 6050.046 4179.282 6064.14 C 4462.744 6121.409 4624.226 6383.444 4672.836 6857.022 C 4686.564 6990.762 4563.698 7216.176 4218 7190 Z" style="stroke: rgb(218, 85, 85); fill: #ff8040;"/>
+    <path d="M 5340 6904 C 5231.393 6881.963 5107.694 6745.696 4939 6400 C 4867.75 6253.991 4906.668 6046.567 4987 5945 C 5126.502 5768.621 5353.992 5737.6 5564.869 5909.852 C 5636.594 5968.439 5788.19 6124.729 5832.272 6408.204 C 5894.908 6810.991 5662.601 6969.457 5340 6904 Z" style="stroke: rgb(218, 85, 85); fill: #ff8040;"/>
+  </g>
+</svg>

assets/js/app.js

@@ -0,0 +1,12 @@
+// assets/js/app.js
+
+
+import '../styles/app.scss';
+
+// import $ from 'jquery';
+// global.$ = $;
+
+import 'bootstrap';
+
+require('@fortawesome/fontawesome-free/css/all.min.css');
+require('@fortawesome/fontawesome-free/js/all.js');

assets/styles/app.css

@@ -0,0 +1,3 @@
+body {
+    background-color: lightgray;
+}

assets/styles/app.scss

@@ -0,0 +1,185 @@
+/*
+	jet black (tiefschwarz) - RAL 9005: #0e0e10, rgba(14, 14, 16, 1.0);
+	mango: #ff8040, rgba(255, 130, 67, 1.0);
+	gray: #a1a1a1, rgba(161, 161, 161, 1.0)
+*/
+
+/*
+@media (prefers-color-scheme: light) {}
+@media (prefers-color-scheme: dark) {}
+*/
+
+/* debug */
+* {
+  border: 0 solid gray;
+}
+
+// customize some Bootstrap variables
+
+
+$primary: #FF8040;
+$body-bg: #0E0E10;
+$body-color: darken(white, 20);
+
+// the ~ allows you to reference things in node_modules
+@import "~bootstrap/scss/bootstrap";
+
+body {
+  padding-top: 95px;
+  padding-bottom: 155px;
+}
+
+.row.content {
+  height: 350px;
+}
+
+.col-center {
+  margin: 0 auto;
+}
+
+.sidenav-left {
+  padding-top: 20px;
+  background-color: #f1f1f1;
+  height: 100%;
+  margin-left: 3em;
+}
+
+.sidenav-right {
+  padding-top: 20px;
+  background-color: #f1f1f1;
+  height: 100%;
+}
+
+@media screen and (max-width: 767px) {
+  .sidenav {
+    height: auto;
+    padding: 15px;
+  }
+  .row.content {height:auto;}
+}
+
+
+.navbar-top {
+  border-bottom-width: 1px;
+  border-bottom-color: #FF8040;
+  padding-top: 0;
+  padding-bottom: 0;
+  opacity: 0.9;
+}
+
+.navbar-bottom {
+  border-top-width: 1px;
+  border-top-color: #FF8040;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 125px;
+  opacity: 0.9;
+
+}
+
+.navbar-nav > li > .dropdown-menu {
+  background-color: #A1A1A1;
+}
+
+
+@include media-breakpoint-down(sm) {
+  .dropdown-toggle:after {
+    content: none;
+  }
+  #dropdown-menu {
+    display: block;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .navbar {
+    padding-left: 100px;
+    padding-right: 100px;
+  }
+}
+
+
+.button-login {
+  margin-top: 25px;
+}
+
+.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ff8040;
+  border-radius: 10px;
+  padding: 15px;
+  background-image: url('../images/bg.jpeg');
+  background-position: center;
+  align-content: center;
+}
+
+/* BlogPosts */
+
+.main-article {
+  border: 2px solid #efefee;
+  Background: #fff;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+.main-article img {
+  width: 100%;
+  height: 250px;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  border-top: 5px solid lightblue;
+}
+
+.blog-container {
+  border: 1px solid #FF8040;
+  border-radius: 5px;
+  background: #0E0E10;
+  margin-bottom: 25px;
+  background-image: url('../images/bg.jpeg');
+  background-position: center;
+}
+
+.main-article-link, .article-container a {
+  text-decoration: none;
+  color: #000;
+}
+
+.main-article-link:hover {
+  text-decoration: none;
+  color: #000;
+}
+
+.article-title {
+  min-width: 300px;
+
+}
+
+@media (max-width: 440px) {
+  .article-title {
+    min-width: 100px;
+    max-width: 245px;
+  }
+}
+
+.blog-img {
+  height: 100px;
+  width: 100px;
+  border-radius: 5px;
+  margin: 7px;
+}
+
+.article-author-img {
+  height: 25px;
+  border: 1px solid darkgray;
+  margin-left: 25px;
+}
+
+.blog-details {
+  font-size: .8em;
+  margin-right: 15px;
+}
+
+.blog-teaser {
+  margin-left: 15px;
+}