Suche in <search> element eingebettet

Siehe #60
fossgis · Nov 11, 2024 · 6af49e4 · 6af49e4
1 parent 3d7c411
commit 6af49e4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -397,7 +397,7 @@ figcaption {
 }
 
 @media screen and (min-width: 981px) {
-    .top form {
+    .search {
         margin-right: 15%;
         margin-top: 26px;
         z-index: 2;
@@ -409,7 +409,7 @@ figcaption {
         margin-right: 5%;
     }
 
-    .top form {
+    .search {
         display: none;
     }
 }
@@ -481,7 +481,7 @@ p {
     }
 }
 
-input#search-query {
+.search input {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><path d="M456.69,421.39,362.6,327.3a173.81,173.81,0,0,0,34.84-104.58C397.44,126.38,319.06,48,222.72,48S48,126.38,48,222.72s78.38,174.72,174.72,174.72A173.81,173.81,0,0,0,327.3,362.6l94.09,94.09a25,25,0,0,0,35.3-35.3ZM97.92,222.72a124.8,124.8,0,1,1,124.8,124.8A124.95,124.95,0,0,1,97.92,222.72Z"/></svg>');
     background-position: right;
     background-repeat: no-repeat;
@@ -964,7 +964,7 @@ table.sitemap td.sitemap-source {
         padding-left: 20px;
     }
 
-    nav, #button-karte, .top form {
+    nav, #button-karte, .search {
         display: none;
     }
 

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -8,7 +8,7 @@
         {{ end }}
     </div>
     <div class="footer-licence">
-        Diese Webseiten: © <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA 4.0</a> &middot;
+        Diese Webseiten: © <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="license">CC-BY-SA 4.0</a> &middot;
         Karten auf diesen Seiten: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap Beitragende (ODbL)</a>
     </div>
 </footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -2,9 +2,11 @@
     <div class="top">
         <a id="title" href="/" title="OpenStreetMap - Deutschland" rel="home"><img src="/img/logos/osmde.svg" alt="OpenStreetMap Deutschland"/></a>
         <a id="button-karte" href="/karte/">Zur Karte</a>
-        <form action="/suche" method="GET">
-            <input type="search" name="q" id="search-query" placeholder="Suche..."/>
-        </form>
+        <search class="search">
+            <form action="/suche" method="GET">
+                <input type="search" name="q" id="search-query" placeholder="Suche..."/>
+            </form>
+        </search>
     </div>
     {{ partial "menu.html" . -}}
 </header>