v0.14.19
Changes --Elevator layout and design tweaks
This commit is contained in:
sairaj mote
parent
8fd379dc82
commit
c179114c09
61
css/main.css
61
css/main.css
@ -216,6 +216,10 @@ ul {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.justify-self-start {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
@ -407,15 +411,11 @@ ul {
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
#elevator_sections {
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
padding: 1.5rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.elevator__header {
|
||||
padding: 1.5rem;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 1.2rem 1.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
@ -423,6 +423,16 @@ ul {
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 1;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
#elevator_sections {
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
padding: 1.5rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
#elevator_button_panel {
|
||||
@ -430,13 +440,19 @@ ul {
|
||||
overflow: auto;
|
||||
-ms-scroll-snap-type: x proximity;
|
||||
scroll-snap-type: x proximity;
|
||||
grid-template-columns: repeat(3, min(20rem, 80%));
|
||||
grid-template-columns: repeat(3, min(40ch, 80%));
|
||||
}
|
||||
#elevator_button_panel li {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
-ms-flex-line-pack: start;
|
||||
align-content: flex-start;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
#elevator_button_panel sup {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.outlet-section {
|
||||
display: grid;
|
||||
@ -452,6 +468,7 @@ ul {
|
||||
}
|
||||
|
||||
.floor__button {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
@ -469,6 +486,13 @@ ul {
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
|
||||
.elevator__floor-line {
|
||||
width: 100%;
|
||||
height: 0.1rem;
|
||||
margin-left: 2rem;
|
||||
background-color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
#main_header {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
@ -480,7 +504,7 @@ ul {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
#main_logo {
|
||||
.main-logo {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
@ -982,6 +1006,10 @@ table {
|
||||
padding: 1.2rem 2rem;
|
||||
}
|
||||
|
||||
#elevator_sections {
|
||||
padding: 1.5rem 3rem 4rem 4.6rem;
|
||||
}
|
||||
|
||||
#home_page {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
@ -1109,6 +1137,19 @@ table {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
.outlet-section .icon {
|
||||
-webkit-transform: translateX(-0.5rem);
|
||||
transform: translateX(-0.5rem);
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
}
|
||||
.outlet-section:hover .icon {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.floor__button:hover {
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -169,6 +169,9 @@ ul{
|
||||
.justify-self-center{
|
||||
justify-self: center;
|
||||
}
|
||||
.justify-self-start{
|
||||
justify-self: start;
|
||||
}
|
||||
.direction-column{
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -320,29 +323,40 @@ ul{
|
||||
grid-template-rows: auto 1fr;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#elevator_sections{
|
||||
align-content: flex-start;
|
||||
padding: 1.5rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
.elevator__header{
|
||||
padding: 1.5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 1.2rem 1.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 1;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
}
|
||||
#elevator_sections{
|
||||
align-content: flex-start;
|
||||
padding: 1.5rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
#elevator_button_panel{
|
||||
gap: 2rem;
|
||||
overflow: auto;
|
||||
scroll-snap-type: x proximity;
|
||||
grid-template-columns: repeat(3, min(20rem, 80%));
|
||||
grid-template-columns: repeat(3, min(40ch, 80%));
|
||||
li{
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
align-content: flex-start;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
sup{
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.outlet-section{
|
||||
display: grid;
|
||||
@ -356,6 +370,7 @@ ul{
|
||||
|
||||
|
||||
.floor__button{
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
@ -369,6 +384,12 @@ ul{
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
}
|
||||
.elevator__floor-line{
|
||||
width: 100%;
|
||||
height: 0.1rem;
|
||||
margin-left: 2rem;
|
||||
background-color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
|
||||
#main_header{
|
||||
@ -380,7 +401,7 @@ ul{
|
||||
justify-self: flex-start;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
#main_logo{
|
||||
.main-logo{
|
||||
justify-self: center;
|
||||
}
|
||||
#main_header__logo{
|
||||
@ -803,6 +824,9 @@ table{
|
||||
#main_header{
|
||||
padding: 1.2rem 2rem;
|
||||
}
|
||||
#elevator_sections{
|
||||
padding: 1.5rem 3rem 4rem 4.6rem;
|
||||
}
|
||||
#home_page{
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
@ -908,6 +932,15 @@ table{
|
||||
}
|
||||
}
|
||||
}
|
||||
.outlet-section{
|
||||
.icon{
|
||||
transform: translateX(-0.5rem);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
&:hover .icon{
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.floor__button:hover{
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
}
|
||||
|
||||
46
index.html
46
index.html
@ -118,42 +118,48 @@
|
||||
|
||||
<section id="elevator_popup" class="grid hide-completely">
|
||||
<header class="elevator__header">
|
||||
<button class="close-button" onclick="hideSiteMap()">
|
||||
<button class="close-button justify-self-start" onclick="hideSiteMap()">
|
||||
<svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
|
||||
</button>
|
||||
<h4>Elevator</h4>
|
||||
<div class="main-logo flex align-center page-link" data-target="home_page">
|
||||
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
|
||||
<h4 class="h4 header__company-name">RanchiMall</h4>
|
||||
</div>
|
||||
</header>
|
||||
<div id="elevator_sections" class="grid hide-completely">
|
||||
<h4 class="h4 margin-bottom-2r">Floors</h4>
|
||||
<ul id="elevator_button_panel" class="grid">
|
||||
<li>
|
||||
<button class="button floor__button" data-target="floor_1">
|
||||
<span>
|
||||
1<sup>st</sup>
|
||||
</span>
|
||||
</button>
|
||||
<div class="flex align-center">
|
||||
<button class="button floor__button" data-target="floor_1">
|
||||
<span>
|
||||
1<sup>st</sup>
|
||||
</span>
|
||||
</button>
|
||||
<div class="elevator__floor-line"></div>
|
||||
</div>
|
||||
<div class="outlet-section page-link interact" data-target="bitbonds">
|
||||
<h3 class="h3 margin-bottom-0-5r">BitCoin Bonds</h3>
|
||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||
<svg class="icon justify-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||
</div>
|
||||
<div class="outlet-section page-link interact" data-target="bob'sfund">
|
||||
<h3 class="h3 margin-bottom-0-5r">Bob's Fund</h3>
|
||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||
<svg class="icon justify-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||
</div>
|
||||
<div class="outlet-section page-link interact" data-target="ico">
|
||||
<h3 class="h3 margin-bottom-0-5r">ICO</h3>
|
||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||
<svg class="icon justify-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<button class="button floor__button" data-target="floor_2">
|
||||
<span>
|
||||
2<sup>nd</sup>
|
||||
</span>
|
||||
</button>
|
||||
<div class="flex align-center">
|
||||
<button class="button floor__button" data-target="floor_2">
|
||||
<span>
|
||||
2<sup>nd</sup>
|
||||
</span>
|
||||
</button>
|
||||
<div class="elevator__floor-line"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<button class="button floor__button" data-target="floor_3">
|
||||
@ -175,7 +181,7 @@
|
||||
Elevator
|
||||
</span>
|
||||
</button>
|
||||
<div id="main_logo" class="flex align-center page-link" data-target="home_page">
|
||||
<div class="main-logo flex align-center page-link" data-target="home_page">
|
||||
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
|
||||
<h4 class="h4 header__company-name">RanchiMall</h4>
|
||||
</div>
|
||||
@ -962,7 +968,7 @@
|
||||
]
|
||||
const slideInDown = [
|
||||
{
|
||||
transform: 'translateY(-1rem)',
|
||||
transform: 'translateY(-100%)',
|
||||
opacity: 0
|
||||
},
|
||||
{
|
||||
@ -986,7 +992,7 @@
|
||||
opacity: 1
|
||||
},
|
||||
{
|
||||
transform: 'translateY(-1rem)',
|
||||
transform: 'translateY(-100%)',
|
||||
opacity: 0
|
||||
},
|
||||
]
|
||||
@ -1425,7 +1431,7 @@
|
||||
let isSiteMapOpen = false
|
||||
|
||||
const animeOptions = {
|
||||
duration: 300,
|
||||
duration: 600,
|
||||
fill: 'forwards',
|
||||
easing: 'ease'
|
||||
}
|
||||
@ -1443,7 +1449,7 @@
|
||||
function hideSiteMap(){
|
||||
const scrollY = document.body.style.top;
|
||||
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
||||
getRef('elevator_popup').animate(slideOutUp, animeOptions).onfinish = () => {
|
||||
getRef('elevator_popup').animate(slideOutUp, {...animeOptions, duration: 300}).onfinish = () => {
|
||||
getRef('elevator_popup').classList.add('hide-completely')
|
||||
getRef('elevator_sections').classList.add('hide-completely')
|
||||
document.body.style.overflow = 'auto';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user