RanchiMall/ranchimall
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI update

Browse Source 
Minor UI changes
This commit is contained in:
sairaj mote 2021-06-06 15:06:26 +05:30
parent 4bac6388b6
commit c7980ebd1a
5 changed files with 132 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
bitcoinbonds.html
View File

@ -244,8 +244,11 @@
</section> </section>
<section> <section>
<a class="ext-link-tile" href="https://ranchimall.github.io/blockchain-bonds/" target="_blank" > <a class="ext-link-tile" href="https://ranchimall.github.io/blockchain-bonds/" target="_blank" >
<h4 class="tile__title">See this in action</h4> <div class="grid">
<p class="tile__brief">Visit the website to see investors and asset performance</p> <h4 class="tile__title">See Bitcoin Bonds in action</h4>
<p class="tile__brief">Visit the website to see investors and asset performance</p>
</div>
<button class="round">Visit</button>
</a> </a>
</section> </section>
</main> </main>

7
bob'sfund.html
View File

@ -165,8 +165,11 @@
</section> </section>
<section> <section>
<a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank" > <a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank" >
<h4 class="tile__title">See this in action</h4> <div class="grid">
<p class="tile__brief">Visit the website to see investors and asset performance</p> <h4 class="tile__title">See Bob's Fund in action</h4>
<p class="tile__brief">Visit the website to see investors and asset performance</p>
</div>
<button class="round">Visit</button>
</a> </a>
</section> </section>
</main> </main>

107
css/main.css
View File

@ -996,39 +996,36 @@ ol[type="1"] {
align-items: center; align-items: center;
justify-self: flex-start; justify-self: flex-start;
color: var(--accent-color); color: var(--accent-color);
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.2rem;
padding: 0.8rem 0.8rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem; font-size: 1.1rem;
gap: 0.5rem; gap: 0.5rem;
} }
.outlet-label .icon { .outlet-label .icon {
height: 1.6rem;
width: 1.6rem;
fill: var(--accent-color); fill: var(--accent-color);
} }
scroll-tab-header { /* scroll-tab-header{
--padding: 0.5rem 0; --padding: 0.5rem 0;
--border-radius: 0.3rem; --border-radius: 0.3rem;
--background: transparent; --background: transparent;
} }
scroll-tab-panels{
scroll-tab-panels { --gap: 1.5rem;
--gap: 1.5rem; --background: transparent;
--background: transparent; margin-bottom: 6rem;
margin-bottom: 6rem; & > *{
} opacity: 0.4;
scroll-tab-panels > * { flex-shrink: 0;
opacity: 0.4; min-width: 100%;
flex-shrink: 0; transition: opacity 0.6s;
min-width: 100%; align-self: start;
transition: opacity 0.6s; }
align-self: start; & > [active]{
} opacity: 1;
scroll-tab-panels > [active] { }
opacity: 1; } */
}
.auto-grid-layout { .auto-grid-layout {
justify-content: flex-start; justify-content: flex-start;
overflow-x: auto; overflow-x: auto;
@ -1198,6 +1195,18 @@ scroll-tab-panels > [active] {
font-weight: calc(700 * var(--font-weight-factor)); font-weight: calc(700 * var(--font-weight-factor));
} }
/* .room-carousel{
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
height: 100%;
scroll-behavior: smooth;
& > *{
min-width: 100%;
scroll-snap-align: start;
}
} */
.room-container__footer { .room-container__footer {
position: sticky; position: sticky;
display: flex; display: flex;
@ -1230,21 +1239,21 @@ scroll-tab-panels > [active] {
.ext-link-tile { .ext-link-tile {
position: relative; position: relative;
display: flex; display: flex;
width: min(24rem, 100%); padding: 1.5rem;
padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
flex-direction: column;
background-size: contain; background-size: contain;
justify-content: flex-end; align-items: center;
justify-content: space-between;
background-color: var(--banner-color); background-color: var(--banner-color);
box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2); box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
overflow: hidden; overflow: hidden;
} }
.ext-link-tile::after, .ext-link-tile::before { .grid .ext-link-tile::after, .ext-link-tile::before {
position: absolute; position: absolute;
content: ""; content: "";
border-radius: 50%; border-radius: 50%;
z-index: 0;
} }
.ext-link-tile::before { .ext-link-tile::before {
top: 5rem; top: 5rem;
@ -1262,16 +1271,29 @@ scroll-tab-panels > [active] {
} }
.tile__title { .tile__title {
padding-top: 1em; font-size: 1.25rem;
font-size: 3rem; line-height: 1;
line-height: 0.9;
color: white; color: white;
font-weight: calc(900 * var(--font-weight-factor)); font-weight: calc(500 * var(--font-weight-factor));
z-index: 1;
} }
.tile__brief { .tile__brief {
margin-top: 1rem; margin-top: 0.5rem;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
z-index: 1;
}
.round {
display: inline-flex;
flex-shrink: 0;
padding: 0.4rem 1rem;
border-radius: 0.3rem;
background-color: white;
color: var(--banner-color);
font-weight: 700 !important;
font-size: 1rem;
z-index: 1;
} }
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
@ -1334,16 +1356,23 @@ scroll-tab-panels > [active] {
} }
.room-tile__icon { .room-tile__icon {
height: 3rem; height: 2.5rem;
width: 3rem; width: 2.5rem;
margin-bottom: 2rem;
} }
#hero_title { #hero_title {
margin-top: 2rem; margin-top: 2rem;
} }
.tile__title { .ext-link-tile {
font-size: 2.4rem; padding: 1rem;
flex-direction: column;
align-items: flex-start;
}
.round {
margin-top: 1rem;
} }
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

72
css/main.scss
View File

@ -889,18 +889,20 @@ ol[type="1"]{
align-items: center; align-items: center;
justify-self: flex-start; justify-self: flex-start;
color: var(--accent-color); color: var(--accent-color);
background-color: rgba(var(--text-color), 0.06); // background-color: rgba(var(--text-color), 0.06);
border-radius: 0.2rem; // border-radius: 0.2rem;
padding: 0.8rem 0.8rem; // padding: 0.8rem 0.8rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem; font-size: 1.1rem;
gap: 0.5rem; gap: 0.5rem;
.icon{ .icon{
height: 1.6rem;
width: 1.6rem;
fill: var(--accent-color); fill: var(--accent-color);
} }
} }
scroll-tab-header{ /* scroll-tab-header{
--padding: 0.5rem 0; --padding: 0.5rem 0;
--border-radius: 0.3rem; --border-radius: 0.3rem;
--background: transparent; --background: transparent;
@ -919,7 +921,7 @@ scroll-tab-panels{
& > [active]{ & > [active]{
opacity: 1; opacity: 1;
} }
} } */
.auto-grid-layout{ .auto-grid-layout{
justify-content: flex-start; justify-content: flex-start;
overflow-x: auto; overflow-x: auto;
@ -1079,6 +1081,19 @@ scroll-tab-panels{
font-weight: calc(700 * var(--font-weight-factor)); font-weight: calc(700 * var(--font-weight-factor));
} }
/* .room-carousel{
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
height: 100%;
scroll-behavior: smooth;
& > *{
min-width: 100%;
scroll-snap-align: start;
}
} */
.room-container__footer{ .room-container__footer{
position: sticky; position: sticky;
display: flex; display: flex;
@ -1110,21 +1125,22 @@ scroll-tab-panels{
.ext-link-tile{ .ext-link-tile{
position: relative; position: relative;
display: flex; display: flex;
width: min(24rem, 100%); padding: 1.5rem;
padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
flex-direction: column;
background-size: contain; background-size: contain;
justify-content: flex-end; align-items: center;
justify-content: space-between;
background-color: var(--banner-color); background-color: var(--banner-color);
box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2); box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
overflow: hidden; overflow: hidden;
.grid
&::after, &::after,
&::before{ &::before{
position: absolute; position: absolute;
content: ''; content: '';
border-radius: 50%; border-radius: 50%;
z-index: 0;
} }
&::before{ &::before{
top: 5rem; top: 5rem;
@ -1142,15 +1158,27 @@ scroll-tab-panels{
} }
} }
.tile__title{ .tile__title{
padding-top: 1em; font-size: 1.25rem;
font-size: 3rem; line-height: 1;
line-height: 0.9;
color: white; color: white;
font-weight: calc(900 * var(--font-weight-factor)); font-weight: calc(500 * var(--font-weight-factor));
z-index: 1;
} }
.tile__brief{ .tile__brief{
margin-top: 1rem; margin-top: 0.5rem;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
z-index: 1;
}
.round{
display: inline-flex;
flex-shrink: 0;
padding: 0.4rem 1rem;
border-radius: 0.3rem;
background-color: white;
color: var(--banner-color);
font-weight: 700 !important;
font-size: 1rem;
z-index: 1;
} }
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
@ -1204,14 +1232,20 @@ scroll-tab-panels{
} }
} }
.room-tile__icon{ .room-tile__icon{
height: 3rem; height: 2.5rem;
width: 3rem; width: 2.5rem;
margin-bottom: 2rem;
} }
#hero_title{ #hero_title{
margin-top: 2rem; margin-top: 2rem;
} }
.tile__title{ .ext-link-tile{
font-size: 2.4rem; padding: 1rem;
flex-direction: column;
align-items: flex-start;
}
.round{
margin-top: 1rem;
} }
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {