Improve accessability (learned from lighthouse)

src/sass/app.scss

@@ -1,4 +1,7 @@
 // Bootstrap
+$theme-colors: (
+    "primary":    #2b3bb4,
+);
 @import '~bootstrap/scss/bootstrap';
 
 // FontAwesome

templates/home.html.twig

@@ -36,6 +36,7 @@ <h1 class="d-inline">
     <hr class="mb-4">
     {% set news_page = pages.find('/news') %}
     {% if news_page and news_page.collection() and news_page.collection()|first %}
+        <h2>Letzte Neuigkeit</h2>
         {% set text_class = 'col-12' %}
         {% set news_latest = news_page.collection()|first %}
         <div class="row">

templates/partials/base.html.twig

@@ -47,7 +47,7 @@
                             {% include 'partials/logo.html.twig' with {style: 'filter: invert(100%); margin-right: 0.5rem;'} %}
                             {% for media_item in header_page.media.images %}
                                 {% set aspect = media_item.width / media_item.height %}
-                                {% set new_height = 100 %}
+                                {% set new_height = 160 %}
                                 {% set new_width = new_height * aspect %}
                                 <img alt="" src="{{ media_item.cropResize(new_width,new_height).quality(75).url }}" />
                             {% endfor %}
@@ -80,7 +80,7 @@
                         <p class="mx-auto">&#169; Heike Tischler</p>
                     </div>
                     <div class="row">
-                        <p class="mx-auto">Diese Webseite nutzt <a target="_blank" href="http://getgrav.org">Grav</a> von <a target="_blank" href="http://www.rockettheme.com">RocketTheme</a>.</p>
+                        <p class="mx-auto">Diese Webseite nutzt <a target="_blank" rel="noopener" href="http://getgrav.org">Grav</a> von <a target="_blank" rel="noopener" href="http://www.rockettheme.com">RocketTheme</a>.</p>
                     </div>
                 </footer>
             {% endblock %}

templates/partials/osm.html.twig

@@ -1,11 +1,10 @@
 <div class="w-100 h-100 d-flex flex-column">
-    <object class="flex-grow-1 w-100" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" data="https://www.openstreetmap.org/export/embed.html?bbox=13.033527382649483%2C52.712566473741454%2C13.342174538411202%2C52.8193422424879&layer=mapnik&marker=52.76598708705365%2C13.18785096053034"></object>
+    <object class="flex-grow-1 w-100" scrolling="no" title="Diese Karte zeigt unseren Hof" role="presentation" data="https://www.openstreetmap.org/export/embed.html?bbox=13.033527382649483%2C52.712566473741454%2C13.342174538411202%2C52.8193422424879&layer=mapnik&marker=52.76598708705365%2C13.18785096053034"></object>
-    <small>
+    <small class="py-2 row">
-        <a target="_blank" href="https://www.openstreetmap.org/?mlat=52.7660&mlon=13.1879#map=13/52.7660/13.1879">
+        <a class="py-2 py-md-0 col-12 col-md-6" target="_blank" rel="noopener" href="https://www.openstreetmap.org/?mlat=52.76605&mlon=13.18774#map=18/52.76605/13.18774">
             Auf OpenStreetMaps öffnen
         </a>
-        <span class="mx-1"> | </span>
+        <a class="py-2 py-md-0 col-12 col-md-6 text-md-right" target="_blank" rel="noopener" href="https://goo.gl/maps/WFYcPCQVA5u2vegy8">
-        <a target="_blank" href="https://goo.gl/maps/WFYcPCQVA5u2vegy8">
             Auf Google Maps öffnen
         </a>
     </small>

templates/partials/socialmedia.html.twig

@@ -1,3 +1,4 @@
-<a role="button" class="btn btn-facebook" target="_blank" href="https://www.facebook.com/Reitanlage-Oranienburg-Heike-Tischler-456154271116487/">
+<a role="button" class="btn btn-primary btn-facebook" target="_blank" rel="noopener" href="https://www.facebook.com/Reitanlage-Oranienburg-Heike-Tischler-456154271116487/">
     <i class="fab fa-facebook-f"></i>
+    <span class="sr-only">zu unserer Facebook-Seite</span>
 </a>