bumped symfony to 5.3

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