added help to panel and updated css

Author: Ciphrox

src/assets/styles/panel.css

@@ -19,7 +19,7 @@
   --tz: 288px;
 }
 
-.panel-main {
+.container__panel {
   display: grid;
   grid-template-areas: "option" "panel";
   grid-auto-flow: row;
@@ -30,6 +30,25 @@
   height: calc(100dvh - 10rem);
   margin: 2rem;
   overflow: hidden;
+
+
+  & .panel {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform-style: preserve-3d;
+    transition: transform 1s;
+  }
+
+  & .scene {
+    grid-area: panel;
+    border: 1px solid var(--scene__border--5);
+    width: 15rem;
+    height: 10rem;
+    perspective: 1000px;
+    align-self: center;
+    justify-self: center;
+  }
 }
 
 .panel__options {
@@ -45,24 +64,6 @@
   color: var(--range__option__txt--4);
 }
 
-.scene {
-  grid-area: panel;
-  border: 1px solid var(--scene__border--5);
-  width: 15rem;
-  height: 10rem;
-  perspective: 1000px;
-  align-self: center;
-  justify-self: center;
-}
-
-.panel {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  transform-style: preserve-3d;
-  transition: transform 1s;
-}
-
 .panel__cell {
   position: absolute;
   height: 10rem;
@@ -269,4 +270,4 @@ input[type="range"]::-ms-fill-lower {
 
 input[type="range"]::-ms-fill-upper {
   background-color: #9a905d;
-}
+}

src/pages/panel.astro

@@ -1,26 +1,18 @@
 ---
 import "@/assets/styles/panel.css";
+import Help from "@/components/Help.astro";
 import BaseLayout from "@/layouts/Base";
+import "@/assets/styles/common.css";
 ---
 
-<style is:inline>
-  .tv {
-    container-type: inline-size;
-    container-name: main;
-    border: 0.5rem outset pink;
-    outline: 0.5rem solid khaki;
-    box-shadow: 0 0 0 2rem skyblue;
-    border-radius: 12px;
-    font: bold 1rem sans-serif;
-    margin-block: 5rem;
-    margin-inline: 5rem;
-    padding: 1rem;
-    outline-offset: 0.5rem;
-  }
-</style>
-
 <BaseLayout meta={{ title: "Panel" }}>
-  <article class="tv panel-main">
+  <Fragment slot="header-right">
+    <Help
+      title="Panel"
+      description="Press any arrow key from keyboard to cycle through the letters, up/down arrows changes the orientation to vertical and left/right keys changes to horizontal or  press any letter key, that letter will appears."
+    />
+  </Fragment>
+  <article class="tv container__panel">
     <section class="scene">
       <letter-panel>
         <div class="panel" id="panel"></div>