adds layout for accessibility description

ckanext/odsh/public/base/images/icon_eye.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.6 17.59"><title>eye</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M13.8,17.59C6.3,17.59.42,9.67.17,9.33a.92.92,0,0,1,0-1.07C.42,7.92,6.3,0,13.8,0S27.17,7.92,27.42,8.26a.92.92,0,0,1,0,1.07c-.25.34-6.12,8.26-13.62,8.26M2.07,8.79c1.42,1.72,6.2,7,11.73,7s10.31-5.25,11.73-7c-1.42-1.72-6.21-7-11.73-7S3.48,7.07,2.07,8.79" fill="#00a0cc"/><path d="M13.8,14.25a5.46,5.46,0,1,1,5.46-5.46,5.47,5.47,0,0,1-5.46,5.46m0-9.09a3.64,3.64,0,1,0,3.64,3.63A3.64,3.64,0,0,0,13.8,5.16" fill="#00a0cc"/></g></g></svg>
\ No newline at end of file

ckanext/odsh/public/odsh.css

@@ -2818,3 +2818,30 @@ body.filters-modal div.row > aside.secondary.span3 {
 .tpsh-collection-list {
     list-style-type: none;
 }
+
+
+.accessibility-headline {
+    display: flex;
+    align-items: center;
+}
+
+.accessibility-icon {
+    content: "";
+    background-image: url(/base/images/icon_eye.svg);
+    background-repeat: no-repeat;
+    background-size: 1.5rem 1.5rem;
+    background-position: 50% 50%;
+    width: 1.5rem;
+    height: 1.5rem;
+    vertical-align: middle;
+}
+
+.accessibility-header {
+    margin-left: 0.7rem;
+    color: #00a0cc;
+}
+
+.accessibility-text {
+    padding: 1.5rem;
+    background-color: #e4f2f8;
+}
\ No newline at end of file

ckanext/odsh/templates/package/read.html

@@ -83,7 +83,15 @@
 {% endif %} {# pkg.notes #}
 {% endblock package_notes %}
 {% if pkg.accessibility and not pkg.accessibility.lower() == "ja"%}
+<section class="accessibility-container">
+    <div class="accessibility-headline">
+        <span class="accessibility-icon"></span>
+        <h3 class="accessibility-header">Barrierefreiheit</h3>
+    </div>
+    <p class="accessibility-text">
         {{ pkg.accessibility }}
+    </p>
+</section>
 {% endif %} {# pkg.accessibility #}
 
 {% endblock package_description %}