UI update

-- Adding new room layout

bitcoinbonds.html

@@ -100,7 +100,7 @@
         </section>
         <div class="rooms__header">
             <h4 class="room__label">Rooms</h4>
-            <scroll-tab-header data-target="bit_bond_page_group">
+            <scroll-tab-header data-target="bit_bond_page_group" class="hide-completely">
                 <button class="room-button">
                     <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                         height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
@@ -144,7 +144,25 @@
                 </button>
             </scroll-tab-header>
         </div>
-        <scroll-tab-panels id="bit_bond_page_group">
+        <section class="rooms-layout">
+            <div id="expanding_tile" class="hide-completely"></div>
+            <div class="room-tile room-tile--main">
+                <div class="tile-content">
+                    <h4 class="room-tile__title">Performance</h4>
+                </div>
+            </div>
+            <div class="room-tile">
+                <div class="tile-content">
+                    <h4 class="room-tile__title">Product</h4>
+                </div>
+            </div>
+            <div class="room-tile">
+                <div class="tile-content">
+                    <h4 class="room-tile__title">Purchase</h4>
+                </div>
+            </div>
+        </section>
+        <scroll-tab-panels id="bit_bond_page_group" class="hide-completely">
             <section class="grid">
                 <h3 class="h3 margin-bottom-1-5r">Performance</h3>
                 <div id="bit_bond_series__container" class="grid series-container"></div>
@@ -279,6 +297,39 @@
             getRef('bit_bond_series__container').append(frag)
         }
         renderAllSeries()
+
+        document.addEventListener('click', e => {
+            if(e.target.closest('.room-tile')){
+                const tile = e.target.closest('.room-tile')
+                const tileParent = tile.parentNode
+                const tileDimensions = tile.getBoundingClientRect()
+                const tileParentDimensions = tileParent.getBoundingClientRect()
+                getRef('expanding_tile').classList.remove('hide-completely')
+                getRef('expanding_tile').animate([
+                    {
+                        height: `${tileDimensions.height}px`,
+                        width: `${tileDimensions.width}px`,
+                        transform: `translate(${tileDimensions.left - tileParentDimensions.left}px, ${tileDimensions.top - tileParentDimensions.top - window.pageYOffset}px)`
+                    },
+                    {
+                        height: `${window.innerHeight}px`,
+                        width: `${document.querySelector('main').getBoundingClientRect().width}px`,
+                        transform: `translate(${- tileParentDimensions.left}px, ${- tileParentDimensions.top - window.pageYOffset}px)`
+                    },
+                ],
+                {
+                    duration: 300,
+                    fill: 'forwards',
+                    easing: 'ease'
+                })
+                .onfinish = () => {
+                    setTimeout(() => {
+                        getRef('expanding_tile').classList.add('hide-completely')
+        
+                    }, 500);
+                }
+            }
+        })
     </script>
 </body>
 </html>

css/main.css

@@ -420,13 +420,15 @@ ol[type="1"] {
 .banner {
   display: grid;
   gap: 1rem;
-  padding: 0.2rem 1rem;
+  padding: 0.2rem 0 0.2rem 1rem;
   align-items: center;
   background-color: #1E88E5;
   grid-template-columns: 1fr auto;
 }
 .banner .close-icon {
   fill: white;
+  width: 2.2rem;
+  height: 2.2rem;
 }
 
 .banner__text {
@@ -1180,6 +1182,43 @@ scroll-tab-panels > [active] {
   page-break-inside: avoid;
 }
 
+.rooms-layout {
+  position: relative;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+  margin-bottom: 4rem;
+}
+
+.room-tile {
+  display: flex;
+  position: relative;
+  border-radius: 0.5rem;
+  transition: transform 0.3s;
+  background-color: rgba(var(--foreground-color), 1);
+}
+.room-tile--main {
+  padding-top: 100%;
+  grid-row: span 2;
+}
+.room-tile--main .tile-content {
+  position: absolute;
+  top: 0;
+}
+.room-tile .tile-content {
+  padding: 1rem;
+}
+.room-tile:active {
+  transform: scale(0.9);
+}
+
+#expanding_tile {
+  position: fixed;
+  border-radius: 0.5rem;
+  background-color: rgba(var(--foreground-color), 1);
+  z-index: 5;
+}
+
 @media only screen and (max-width: 640px) {
   .hide-on-mobile {
     display: none;
@@ -1222,6 +1261,17 @@ scroll-tab-panels > [active] {
   .rooms__header scroll-tab-header {
     width: calc(100vw - 2rem);
   }
+
+  .room-tile {
+    padding-top: 100%;
+  }
+  .room-tile--main {
+    grid-column: span 2;
+  }
+  .room-tile .tile-content {
+    top: 0;
+    position: absolute;
+  }
 }
 @media only screen and (min-width: 640px) {
   #home_page, .page {
@@ -1363,6 +1413,10 @@ scroll-tab-panels > [active] {
     columns: 3;
     column-gap: 2rem;
   }
+
+  .rooms-layout {
+    grid-template-rows: 1fr 1fr;
+  }
 }
 @media only screen and (min-width: 1280px) {
   #home_page, .page {

css/main.scss

@@ -351,12 +351,14 @@ ol[type="1"]{
 .banner{
     display: grid;
     gap: 1rem;
-    padding: 0.2rem 1rem;
+    padding: 0.2rem 0 0.2rem 1rem;
     align-items: center;
     background-color: #1E88E5;
     grid-template-columns: 1fr auto;
     .close-icon{
         fill: white;
+        width: 2.2rem;
+        height: 2.2rem;
     }
 }
 .banner__text{
@@ -1077,6 +1079,41 @@ scroll-tab-panels{
     }
 }
 
+.rooms-layout{
+    position: relative;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr 1fr;
+    margin-bottom: 4rem;
+}
+.room-tile{
+    display: flex;
+    position: relative;
+    border-radius: 0.5rem;
+    transition: transform 0.3s;
+    background-color: rgba(var(--foreground-color), 1);
+    &--main{
+        padding-top: 100%;
+        grid-row: span 2;
+        .tile-content{
+            position: absolute;
+            top: 0;
+        }
+    }
+    .tile-content{
+        padding: 1rem;
+    }
+    &:active{
+        transform: scale(0.9);
+    }
+}
+#expanding_tile{
+    position: fixed;
+    border-radius: 0.5rem;
+    background-color: rgba(var(--foreground-color), 1);
+    z-index: 5;
+}
+
 @media only screen and (max-width: 640px) {
     .hide-on-mobile{
         display: none;
@@ -1113,6 +1150,16 @@ scroll-tab-panels{
             width: calc(100vw - 2rem);
         }
     }
+    .room-tile{
+        padding-top: 100%;
+        &--main{
+            grid-column: span 2;
+        }
+        .tile-content{
+            top: 0;
+            position: absolute;
+        }
+    }
 }
 @media only screen and (min-width: 640px) {
     #home_page,.page{
@@ -1245,6 +1292,9 @@ scroll-tab-panels{
         columns: 3;
         column-gap: 2rem;
     }
+    .rooms-layout{
+        grid-template-rows: 1fr 1fr;
+    }
 }
 @media only screen and (min-width: 1280px) {
     #home_page, .page{