mehr anpassungen an mobile geräte

calliope-edu · Sep 9, 2024 · 41d0d0a · 41d0d0a
1 parent bbfde48
commit 41d0d0a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 20 deletions.
diff --git a/src/content/tech/[...02]hardware/[...02]pins/PinoutV3.svelte b/src/content/tech/[...02]hardware/[...02]pins/PinoutV3.svelte
@@ -103,7 +103,7 @@
         on:click={()=>{viewMode='interface'}}
         text="Schnittstelle"
 />
-
+<div class="pinout-wrapper">
 <nav class="pinout">
 	<ul>
 		{#each pins as pin, index}
@@ -124,6 +124,7 @@
 		{/each}
 	</ul>
 </nav>
+</div>
 
 <div class="legende">
 	<div style="color: var(--color-blau);">
@@ -157,9 +158,14 @@
 {/if}
 
 <style>
+
+	.pinout-wrapper {
+		overflow: auto;
+	}
 	.pinout {
 		background-color: #1E1E21;
 		width: 100%;
+		min-width: fit-content;
 		position: relative;
 		margin: 10em 0em;
         padding: 1em;
@@ -242,10 +248,11 @@
 		/* font-weight: bold; */
 		/* padding-top: 6px; */
 		/* border-radius: 30px; */
-		border: 2px solid var(--color-blau);
+		border: 4px solid var(--color-blau);
 	}
 	.legende {
 		display: flex;
+		flex-wrap: wrap;
 		gap: 1rem;
 	}
 
@@ -260,12 +267,12 @@
 
         }
         .pinout li:hover .dot {
-        display: block;
-		color: white;
-    }
-    .pinout li .dot {
-        width: 3.5vw;
-        height: 3.5vw;
-    }
+			display: block;
+			color: white;
+		}
+		.pinout li .dot {
+			width: 3.5vw;
+			height: 3.5vw;
+		}
     }
 </style>
diff --git a/src/lib/components/layout/PageHeader.svelte b/src/lib/components/layout/PageHeader.svelte
@@ -32,7 +32,7 @@
                 <BoardVersionSelector dropdown/>
             </div>
         </div> -->
-        <div class="ui secondary fluid right menu">
+        <div class="ui secondary fluid right menu" style="align-items: center;">
             <MainMenu />
         </div>
 

diff --git a/src/lib/components/menues/MainMenu.svelte b/src/lib/components/menues/MainMenu.svelte
@@ -39,9 +39,9 @@
 
 <button on:click={toggleMenu} aria-expanded={menuOpen} tabindex="1" class:none={!mobileMenu}>
     <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-        <title>Menu</title>
-        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-    </svg> Menü
+        <title>Suche</title>
+        <path fill="currentColor" d="M15.25 0a8.25 8.25 0 0 0-6.18 13.72L1 22.88l1.12 1l8.05-9.12A8.251 8.251 0 1 0 15.25.01zm0 15a6.75 6.75 0 1 1 0-13.5a6.75 6.75 0 0 1 0 13.5"/>
+    </svg> Suche
 </button>
 
 <nav class:none={!menuOpen || !mobileMenu} class="mobileMenu" bind:this={mobileMenuElement}>
@@ -122,7 +122,7 @@
         border-radius: 0.25rem; 
         border-width: 1px; 
         border: 1px var(--color-calliope) solid;
-        padding: 1rem 2rem;
+        padding: .5rem 1rem;
         background: transparent;
         color: var(--color-calliope);
         font-family: sans-serif;
@@ -143,9 +143,9 @@
         }
 
         svg {
-            width: 1rem; 
+            width: 1.5rem; 
             height: 1rem; 
-            margin-right: .5em;
+            margin-right: .5rem;
             fill: currentColor;
         }
     }

diff --git a/src/lib/templates/__layout-docs.svelte b/src/lib/templates/__layout-docs.svelte
@@ -257,10 +257,10 @@
     }
 
     .toc-menu-container {
-        padding-left: 2rem; 
-        margin-right: 2rem; 
-        flex: none; 
-        width: 0.25rem; 
+        // padding-left: 2rem; 
+        // margin-right: 2rem; 
+        // flex: none; 
+        // width: 0.25rem; 
 
         @media (min-width: 1280px) { 
             display: block;