feat: move Hilfe section into a detail tag

Just to have a clener app, move the whole help part into a closed detail
tag.

Signed-off-by: Conrad Zelck <git@simpel.cc>

index.php

@@ -130,9 +130,13 @@
         </tbody>
       </table>
       <div class="space"></div>
+      <details>
+        <summary>
+          <h2>Hilfe</h2>
+        </summary>
+        <div class="space"></div>
         <p>Freie TV-Kanäle mit Ortssuche finden: <a href="https://fmscan.org/locsearch.php?reset=1&r=t&m=s" target="_blank" rel="noopener noreferrer" lang="en">fmscan.org</a></p>
         <div class="space"></div>
-      <h2>Hilfe</h2>
         <p>Dieses Tool berechnet die besten, untereinander störungsfreien Funkfrequenzen innerhalb eines TV-Kanals (8 MHz-Raster).</p>
         <h3>Hinweis</h3>
         <p>Es wird nur ein TV-Kanal isoliert betrachtet. Zusätzliche Frequenzen aus anderen TV-Kanälen werden <b>nicht</b> auf Kompatibilität geprüft.</p>
@@ -168,6 +172,7 @@
           <li>Intermodulationsfestigkeit: <strong>F1</strong>: 54 %, <strong>F2</strong>: 65 %, <strong>F3</strong>: 49 %, <strong>F4</strong>: 67 %, <strong>F5</strong>: 81 %, <strong>F6</strong>: 63 %, <strong>F7</strong>: 82 %, <strong>F8</strong>: 66 % (Je höher die Prozentzahl, desto besser ist das Signal.)</li>
         </ul>
         <p>Die Mindestanforderungen zur Intermodulationsfestigkeit sind in jedem Fall erfüllt. Diese Werte gelten für die ansteigenden Frequenzabstände. Für die absteigenden Frequenzabstände ist die Reihenfolge umzudrehen.</p>
+      </details>
       <div class="space"></div>
     </main>
   </body>

style.css

@@ -299,6 +299,10 @@ th, td {
   margin-bottom: 1.2em;
 }
 
+summary h2 {
+  margin-left: 0.2em;
+}
+
 p.label {
   margin-right: 15px;
 }
@@ -375,6 +379,11 @@ select#channel {
   height: 1.3em;
 }
 
+summary h2 {
+  display: inline-block;
+  vertical-align: sub;
+}
+
 p#source {
   width: fit-content;
 }

style.min.css

-:root{--default-top-padding:1.5em;--default-body-bottom-margin:2vmin;--default-min-font-size-px:12px;--default-min-font-size:12;--default-max-font-size-px:18px;--default-max-font-size:18;}html{font-size:calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560));font-size:clamp(var(--default-min-font-size-px),calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560)),var(--default-max-font-size-px));}body{height:calc(100vh - 3vmin);font-size:inherit;font-family:helvetica,Arial,sans-serif;background-color:#555;color:white;margin:3vmin 4vmin calc(var(--default-body-bottom-margin) - var(--default-body-bottom-margin)) 4vmin;}*:focus{outline:2px solid white;outline-offset:2px;}a{color:#ffffff;}header a{text-decoration:none;}a:not([href]){color:#AAAAAA;}header{margin-bottom:1.0;}header a{display:inline-flex;}header img{width:1.9em;height:auto;}nav{display:flex;align-items:center;column-gap:.7em;}h1{font-size:1.5em;margin:0;}#github{margin-left:auto;}#github-cat{transform:scale(.5) translate(50%,-50%);}*,*::before,*::after{box-sizing:unset;}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0;}ul[role='list'],ol[role='list']{list-style:none;}html:focus-within{scroll-behavior:smooth;}body{text-rendering:optimizeSpeed;line-height:1.5;}a:not([class]){text-decoration-skip-ink:auto;}img,picture{max-width:100%;font-style:italic;}input,button,textarea,select{font:inherit;}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body{font-size:2em;}#dialogText{font-size:23vw;line-height:.8em;}#dialog-wrapper{background:rgba(85,85,85,.97);}#dialogText{color:#fff;background-color:#555;}select{color:#000;}button,input{color:white;background-color:#333;}input[type=radio]{accent-color:#333;}th{background-color:#444444;}tr:nth-child(even){background-color:#505050;}#dialogText{border:1px solid white;border-radius:10px;}button,input,select{border:2px solid white;}button,input{-webkit-border-radius:5px;border-radius:5px;}select#channel{border-radius:5px;}body{hyphens:auto;}body:has(dialog[open]){overflow:hidden;}button,input,select,details summary{cursor:pointer;}#dialog-wrapper{cursor:pointer;}#dialogText{cursor:pointer;}#copyIcon{text-decoration:none;}td:nth-child(even){cursor:pointer;}main .first-in-main{padding-top:calc(var(--default-top-padding) - .8em);}.horizontal{margin-top:10px;}.horizontal label{margin-right:10px;}#dialogText{padding:.25em;}th,td{padding:0;padding-left:10px;padding-right:10px;}#copyIcon{margin-left:10px;}.space{margin-bottom:1.2em;}p.label{margin-right:15px;}p{margin-block-start:0;}ul{margin-block-start:0;}p#source{margin-top:2em;margin-left:auto;}body{display:flex;flex-direction:column}main{display:flex;flex-direction:column;height:100%}#dialog-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}.horizontal{display:inline-flex;}th{text-align:left;}table,tr,td{overflow:hidden;}th:nth-child(1),td:nth-child(1){width:2ch;}th:nth-child(2),td:nth-child(2){width:13ch;}th:nth-child(3),td:nth-child(3){width:fit-content;}select#channel{width:fit-content;height:1.3em;}p#source{width:fit-content;}
\ No newline at end of file
+:root{--default-top-padding:1.5em;--default-body-bottom-margin:2vmin;--default-min-font-size-px:12px;--default-min-font-size:12;--default-max-font-size-px:18px;--default-max-font-size:18;}html{font-size:calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560));font-size:clamp(var(--default-min-font-size-px),calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560)),var(--default-max-font-size-px));}body{height:calc(100vh - 3vmin);font-size:inherit;font-family:helvetica,Arial,sans-serif;background-color:#555;color:white;margin:3vmin 4vmin calc(var(--default-body-bottom-margin) - var(--default-body-bottom-margin)) 4vmin;}*:focus{outline:2px solid white;outline-offset:2px;}a{color:#ffffff;}header a{text-decoration:none;}a:not([href]){color:#AAAAAA;}header{margin-bottom:1.0;}header a{display:inline-flex;}header img{width:1.9em;height:auto;}nav{display:flex;align-items:center;column-gap:.7em;}h1{font-size:1.5em;margin:0;}#github{margin-left:auto;}#github-cat{transform:scale(.5) translate(50%,-50%);}*,*::before,*::after{box-sizing:unset;}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0;}ul[role='list'],ol[role='list']{list-style:none;}html:focus-within{scroll-behavior:smooth;}body{text-rendering:optimizeSpeed;line-height:1.5;}a:not([class]){text-decoration-skip-ink:auto;}img,picture{max-width:100%;font-style:italic;}input,button,textarea,select{font:inherit;}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body{font-size:2em;}#dialogText{font-size:23vw;line-height:.8em;}#dialog-wrapper{background:rgba(85,85,85,.97);}#dialogText{color:#fff;background-color:#555;}select{color:#000;}button,input{color:white;background-color:#333;}input[type=radio]{accent-color:#333;}th{background-color:#444444;}tr:nth-child(even){background-color:#505050;}#dialogText{border:1px solid white;border-radius:10px;}button,input,select{border:2px solid white;}button,input{-webkit-border-radius:5px;border-radius:5px;}select#channel{border-radius:5px;}body{hyphens:auto;}body:has(dialog[open]){overflow:hidden;}button,input,select,details summary{cursor:pointer;}#dialog-wrapper{cursor:pointer;}#dialogText{cursor:pointer;}#copyIcon{text-decoration:none;}td:nth-child(even){cursor:pointer;}main .first-in-main{padding-top:calc(var(--default-top-padding) - .8em);}.horizontal{margin-top:10px;}.horizontal label{margin-right:10px;}#dialogText{padding:.25em;}th,td{padding:0;padding-left:10px;padding-right:10px;}#copyIcon{margin-left:10px;}.space{margin-bottom:1.2em;}summary h2{margin-left:.2em;}p.label{margin-right:15px;}p{margin-block-start:0;}ul{margin-block-start:0;}p#source{margin-top:2em;margin-left:auto;}body{display:flex;flex-direction:column}main{display:flex;flex-direction:column;height:100%}#dialog-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}.horizontal{display:inline-flex;}th{text-align:left;}table,tr,td{overflow:hidden;}th:nth-child(1),td:nth-child(1){width:2ch;}th:nth-child(2),td:nth-child(2){width:13ch;}th:nth-child(3),td:nth-child(3){width:fit-content;}select#channel{width:fit-content;height:1.3em;}summary h2{display:inline-block;vertical-align:sub;}p#source{width:fit-content;}
\ No newline at end of file