UI update
Minor UI changes
This commit is contained in:
sairaj mote
parent
4bac6388b6
commit
c7980ebd1a
@ -244,8 +244,11 @@
|
||||
</section>
|
||||
<section>
|
||||
<a class="ext-link-tile" href="https://ranchimall.github.io/blockchain-bonds/" target="_blank" >
|
||||
<h4 class="tile__title">See this in action</h4>
|
||||
<p class="tile__brief">Visit the website to see investors and asset performance</p>
|
||||
<div class="grid">
|
||||
<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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@ -165,8 +165,11 @@
|
||||
</section>
|
||||
<section>
|
||||
<a class="ext-link-tile" href="https://ranchimall.github.io/bobs-fund/" target="_blank" >
|
||||
<h4 class="tile__title">See this in action</h4>
|
||||
<p class="tile__brief">Visit the website to see investors and asset performance</p>
|
||||
<div class="grid">
|
||||
<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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
107
css/main.css
107
css/main.css
@ -996,39 +996,36 @@ ol[type="1"] {
|
||||
align-items: center;
|
||||
justify-self: flex-start;
|
||||
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;
|
||||
font-size: 1rem;
|
||||
font-size: 1.1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.outlet-label .icon {
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
scroll-tab-header {
|
||||
--padding: 0.5rem 0;
|
||||
--border-radius: 0.3rem;
|
||||
--background: transparent;
|
||||
/* scroll-tab-header{
|
||||
--padding: 0.5rem 0;
|
||||
--border-radius: 0.3rem;
|
||||
--background: transparent;
|
||||
}
|
||||
|
||||
scroll-tab-panels {
|
||||
--gap: 1.5rem;
|
||||
--background: transparent;
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
scroll-tab-panels > * {
|
||||
opacity: 0.4;
|
||||
flex-shrink: 0;
|
||||
min-width: 100%;
|
||||
transition: opacity 0.6s;
|
||||
align-self: start;
|
||||
}
|
||||
scroll-tab-panels > [active] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
scroll-tab-panels{
|
||||
--gap: 1.5rem;
|
||||
--background: transparent;
|
||||
margin-bottom: 6rem;
|
||||
& > *{
|
||||
opacity: 0.4;
|
||||
flex-shrink: 0;
|
||||
min-width: 100%;
|
||||
transition: opacity 0.6s;
|
||||
align-self: start;
|
||||
}
|
||||
& > [active]{
|
||||
opacity: 1;
|
||||
}
|
||||
} */
|
||||
.auto-grid-layout {
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
@ -1198,6 +1195,18 @@ scroll-tab-panels > [active] {
|
||||
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 {
|
||||
position: sticky;
|
||||
display: flex;
|
||||
@ -1230,21 +1239,21 @@ scroll-tab-panels > [active] {
|
||||
.ext-link-tile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: min(24rem, 100%);
|
||||
padding: 1rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
flex-direction: column;
|
||||
background-size: contain;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--banner-color);
|
||||
box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ext-link-tile::after, .ext-link-tile::before {
|
||||
.grid .ext-link-tile::after, .ext-link-tile::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
}
|
||||
.ext-link-tile::before {
|
||||
top: 5rem;
|
||||
@ -1262,16 +1271,29 @@ scroll-tab-panels > [active] {
|
||||
}
|
||||
|
||||
.tile__title {
|
||||
padding-top: 1em;
|
||||
font-size: 3rem;
|
||||
line-height: 0.9;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
color: white;
|
||||
font-weight: calc(900 * var(--font-weight-factor));
|
||||
font-weight: calc(500 * var(--font-weight-factor));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tile__brief {
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
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) {
|
||||
@ -1334,16 +1356,23 @@ scroll-tab-panels > [active] {
|
||||
}
|
||||
|
||||
.room-tile__icon {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#hero_title {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.tile__title {
|
||||
font-size: 2.4rem;
|
||||
.ext-link-tile {
|
||||
padding: 1rem;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.round {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -889,18 +889,20 @@ ol[type="1"]{
|
||||
align-items: center;
|
||||
justify-self: flex-start;
|
||||
color: var(--accent-color);
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.8rem 0.8rem;
|
||||
// background-color: rgba(var(--text-color), 0.06);
|
||||
// border-radius: 0.2rem;
|
||||
// padding: 0.8rem 0.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
font-size: 1.1rem;
|
||||
gap: 0.5rem;
|
||||
.icon{
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
scroll-tab-header{
|
||||
/* scroll-tab-header{
|
||||
--padding: 0.5rem 0;
|
||||
--border-radius: 0.3rem;
|
||||
--background: transparent;
|
||||
@ -919,7 +921,7 @@ scroll-tab-panels{
|
||||
& > [active]{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
} */
|
||||
.auto-grid-layout{
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
@ -1079,6 +1081,19 @@ scroll-tab-panels{
|
||||
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{
|
||||
position: sticky;
|
||||
display: flex;
|
||||
@ -1110,21 +1125,22 @@ scroll-tab-panels{
|
||||
.ext-link-tile{
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: min(24rem, 100%);
|
||||
padding: 1rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
flex-direction: column;
|
||||
background-size: contain;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: var(--banner-color);
|
||||
box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.2);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
overflow: hidden;
|
||||
.grid
|
||||
&::after,
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
}
|
||||
&::before{
|
||||
top: 5rem;
|
||||
@ -1142,15 +1158,27 @@ scroll-tab-panels{
|
||||
}
|
||||
}
|
||||
.tile__title{
|
||||
padding-top: 1em;
|
||||
font-size: 3rem;
|
||||
line-height: 0.9;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1;
|
||||
color: white;
|
||||
font-weight: calc(900 * var(--font-weight-factor));
|
||||
font-weight: calc(500 * var(--font-weight-factor));
|
||||
z-index: 1;
|
||||
}
|
||||
.tile__brief{
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
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) {
|
||||
@ -1204,14 +1232,20 @@ scroll-tab-panels{
|
||||
}
|
||||
}
|
||||
.room-tile__icon{
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
#hero_title{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.tile__title{
|
||||
font-size: 2.4rem;
|
||||
.ext-link-tile{
|
||||
padding: 1rem;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.round{
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user