Add item content layer

README.md

@@ -13,7 +13,7 @@
 - OK orbit alignment> lower upper
 - OK Stationary- geostationary/gyroscope: comportamiento de lo selementos
 - responsiveness: crear dos versiones? media query & vh vw units? ...
-- dentro de los items ver alignment: ubicacion del elementos izq, centro, der; arriba medio, abajo
+- OK layer para contenido dentro de los items. Todo lo referido a alignment: ubicacion del elementos izq, centro, der; arriba medio, abajo qued aara el usuario o algo para armar especialemnte
 - OK draw rings and sectors
 - Armar defaults
 - Abstraer variables de color, backgrpund etc

css/index.css

@@ -30,6 +30,10 @@
   --l: 110px;
   --xl: 180px;
   --xxl: 288px;
+  /* Color */
+  --transparent: transparent;
+  --white: white;
+  --black: black;
   /* width connector */
   --connector-width: 40px;
   --label-width: 50px;
@@ -49,13 +53,30 @@
 
 .item {
   display: grid;
-  background-color: rgba(255, 255, 255, 0.151);
+  background-color: rgba(247, 0, 0, 0.363);
   border: 1px solid black;
   grid-area: 1/1/1/1;
   align-items: center;
   justify-items: center;
   align-content: center;
   justify-content: center;
+  z-index: 1;
+}
+
+.content {
+  padding: 5px;
+  width: inherit;
+  height: inherit;
+  display: grid;
+  border-radius: inherit;
+  background-color: rgba(0, 170, 248, 0.815);
+  grid-area: 1/1/1/1;
+  align-items: center;
+  justify-items: center;
+  align-content: center;
+  justify-content: center;
+  overflow: hidden;
+  z-index: 10;
 }
 
 .item.line {

index.html

@@ -20,17 +20,10 @@
         <hr class="item line">
 
       </div>
-      <div class="ring-1 items-5 ">
-        <div class="item s box">A</div>
-        <div class="item s rounded">N</div>
-        <div class="item l">D</div>
-        <div class="item s">Y</div>
-        <div class="item s">!</div>
-      </div>
       <div class="ring-3 items-3 ccw">
-        <div class="item m box lower">one</div>
+        <div class="item m box lower"><div class="content">ONU <br> dos</div></div>
         <div class="item m">
-          <div class="label pos-135">
+          <div class="label pos-315">
             <hr class="label__connector">
             <div
               class="label__text">
@@ -41,21 +34,32 @@
         </div> 
 
         <div class="item m upper">
+          <div class="content">sub 1 <br> sub2 sub 1 </div>
           <div class="ring-2 items-4 offset-45 arc-90">
             <div class="item xs ">U</div>
             <div class="item xs upper">L</div>
             <div class="item xs stationary" >N</div>
             <div class="item xs">
-              <div class="ring-3 items-3">
+              <div class="ring-3 items-3"> 
                 <div class="item xxs upper"></div>
                 <div class="item xxs"></div>
-                <div class="item xxs upper"></div>
+                <div class="item xxs upper">
+
+                </div>
               </div>
             </div>
           </div>
 
         </div>
       </div>
+      <div class="ring-1 items-5 ">
+        <div class="item s box">A</div>
+        <div class="item s rounded">N</div>
+        <div class="item l">D</div>
+        <div class="item s">Y</div>
+        <div class="item s">!</div>
+      </div>
+
     </div>
   </body>
 </html>

src/index.scss

@@ -80,6 +80,11 @@
    --xl: 180px;
    --xxl: 288px;
 
+  /* Color */
+  --transparent: transparent;
+  --white: white;
+  --black: black;
+
    /* width connector */
    --connector-width: 40px;
    --label-width: 50px;
@@ -96,11 +101,24 @@
 
  .item {
    display: grid;
-   background-color: rgba(255, 255, 255, 0.151);
+   background-color: rgba(247, 0, 0, 0.363);
    border: 1px solid black;
    grid-area: 1/1/1/1;
    @include alignment;
+   z-index: 1;
  }
+ .content {
+  padding: 5px;
+  width: inherit;
+  height: inherit;
+  display: grid;
+  border-radius: inherit;
+  background-color: rgba(0, 170, 248, 0.815);
+  grid-area: 1/1/1/1;
+  @include alignment;
+  overflow: hidden;
+  z-index: 10;
+}
  .item.line {
   transform-origin: 0 0;
   width: calc(var(--radius) * var(--ring-3-factor));