From 8ae383d260aa709e775c94194edb4a0fbe3df213 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Fri, 7 Jul 2023 00:45:06 +0200
Subject: [PATCH] layout prototype

---
 src/lib/components/LayoutCC1.svelte | 6 +++---
 src/lib/components/RingInput.svelte | 7 +++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/LayoutCC1.svelte b/src/lib/components/LayoutCC1.svelte
index dbd7030c..27cd4757 100644
--- a/src/lib/components/LayoutCC1.svelte
+++ b/src/lib/components/LayoutCC1.svelte
@@ -12,13 +12,13 @@
   {/each}
 </fieldset>
 
-<div class="col" style="gap: 0">
+<div class="col layout" style="gap: 0">
   <div class="row" style="gap: 156px">
     <div class="row">
       <RingInput {activeLayer} />
       <div class="col">
         <RingInput {activeLayer} />
-        <RingInput {activeLayer} />
+        <RingInput {activeLayer} type="secondary" />
       </div>
       <div class="col">
         <RingInput {activeLayer} />
@@ -62,7 +62,7 @@
     align-items: center;
     justify-content: center;
 
-    margin: 16px;
+    margin-block-end: -36px;
     padding: 0;
 
     border: none;
diff --git a/src/lib/components/RingInput.svelte b/src/lib/components/RingInput.svelte
index 3418173f..47142bf6 100644
--- a/src/lib/components/RingInput.svelte
+++ b/src/lib/components/RingInput.svelte
@@ -8,7 +8,10 @@
     ["j", "k", "l"],
   ]
 
-  export let layerNames = ["Primary Layer", "Number Layer", "Function Layer"]
+  /** @type {'primary' | 'secondary' | 'tertiary'} */
+  export let type = "primary"
+
+  const layerNames = ["Primary Layer", "Number Layer", "Function Layer"]
 
   const virtualLayerMap = [1, 0, 2]
   const characterOffset = 8
@@ -24,7 +27,7 @@
   }
 </script>
 
-<div class="radial">
+<div class="radial {type}">
   {#each layout as keys, quadrant}
     <button title={getKeyDescriptions(keys)}>
       {#each keys as value, layer}