Skip to content

Commit

Permalink
Merge pull request #464 from consensusnetworks/bug/mobile-view
Browse files Browse the repository at this point in the history
  • Loading branch information
@ccali11
ccali11 authored Nov 21, 2023
2 parents 000d761 + be64811 commit b975a26
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 111 deletions.
18 changes: 9 additions & 9 deletions apps/landing/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -612,7 +612,7 @@ ul li {
font-size: 0.833rem;
background-color: hsl(240, 20%, 98%);
border: 1px solid hsl(236, 10.6%, 87.9%);
padding: 8px 18px;
padding: 8px 16px;
color: hsl(227, 5.2%, 51.8%);
}

Expand Down Expand Up @@ -842,11 +842,18 @@ ul li {
gap: 10px;
}

.overview__container__mobile {
margin-top: 55px;
display: grid;
grid-template-columns: repeat(3, 1fr);
/* gap: 20px; */
}

.overview__container {
margin-top: 55px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
/* gap: 40px; */
}

.overview__item {
Expand Down Expand Up @@ -881,13 +888,6 @@ ul li {
gap: 20px;
}

.overview__container {
margin-top: 55px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}

.overview__item {
display: flex;
flex-direction: column;
Expand Down
71 changes: 58 additions & 13 deletions apps/landing/src/pages/landing/Landing.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const toggleQuestionItem = (index: number) => {
</script>

<template>
<div>
<div class="csm:m-[16px] overflow-x-hidden">
<nav class="nav">
<div class="nav__container">
<a href="/">
Expand Down Expand Up @@ -112,15 +112,17 @@ const toggleQuestionItem = (index: number) => {
<div class="cta__container">
<a
:href="appUrl"
class="btn-primary"
class="btn-primary flex justify-center csm:min-w-[145px]"
>
Launch Staking App
<span class="csm:hidden">Launch Staking App</span>
<span class="md-lg:hidden">Launch App</span>
</a>
<a
href="https://drive.google.com/file/d/1giIojTS-4gf0xWXUirmd2AaqalFmgA72/view"
class="btn-secondary"
>
Read the Whitepaper
<span class="csm:hidden">Read the Whitepaper</span>
<span class="md-lg:hidden">Read Whitepaper</span>
</a>
</div>
</div>
Expand All @@ -132,16 +134,19 @@ const toggleQuestionItem = (index: number) => {
<section class="overview">
<div class="overview__header">
<!-- <span class="highlight text-8">Minimized Risk & Maximized Rewards</span> -->
<h2>
<h2 class="csm:hidden">
Casimir is built to maximize your rewards <br>
without compromising security.
</h2>
<h2 class="md-lg:hidden">
Casimir is built to maximize your rewards without compromising security.
</h2>
</div>
<!-- <div class="mock"><img src="/hero.png" /></div> -->
<div class="overview__container">
<div class="overview__container csm:gap-[20px] md-lg:gap-[40px]">
<div class="overview__item">
<div class="overview__item__header">
<div class="icon">
<div class="icon csm:hidden">
<img
src="/disc.svg"
width="17"
Expand All @@ -156,7 +161,7 @@ const toggleQuestionItem = (index: number) => {

<div class="overview__item">
<div class="overview__item__header">
<div class="icon">
<div class="icon csm:hidden">
<img
src="/key.svg"
width="17"
Expand All @@ -172,7 +177,7 @@ const toggleQuestionItem = (index: number) => {

<div class="overview__item">
<div class="overview__item__header">
<div class="icon">
<div class="icon csm:hidden">
<img
src="/disc.svg"
width="17"
Expand All @@ -188,7 +193,7 @@ const toggleQuestionItem = (index: number) => {

<div class="overview__item">
<div class="overview__item__header">
<div class="icon">
<div class="icon csm:hidden">
<img
src="/flash.svg"
width="17"
Expand All @@ -203,7 +208,7 @@ const toggleQuestionItem = (index: number) => {

<div class="overview__item">
<div class="overview__item__header">
<div class="icon">
<div class="icon csm:hidden">
<img
src="/credit-card.svg"
width="17"
Expand All @@ -219,7 +224,7 @@ const toggleQuestionItem = (index: number) => {

<div class="overview__item">
<div class="overview__item__header">
<div class="icon">
<div class="icon csm:hidden">
<img
src="/users.svg"
width="17"
Expand All @@ -233,8 +238,48 @@ const toggleQuestionItem = (index: number) => {
</div>
</div>
</section>

<!-- Hide this section on small screens for now -->
<section class="bento md-lg:hidden">
<div class="overview__header">
<h2 class="csm:hidden">
One place to connect your wallets, <br> stake, withdraw, and see your analytics.
</h2>
<h2 class="md-lg:hidden">
One place to connect your wallets, stake, withdraw, and see your analytics.
</h2>
</div>
<div class="bento__container">
<div class="bento__base__card bento__card__1">
<h2 class="text-6">
Track all of your historical balances, rewards, and <br> withdrawals in one dashboard.
</h2>
<div><img src="/analytics-chart.png"></div>
</div>

<div class="bento__base__card bento__card__4">
<h2 class="text-6">
Natively stake or withdraw ETH.
</h2>
<div><img src="/staking-component.png"></div>
</div>

<div class="bento__base__card bento__card__3">
<h2 class="text-6">
Get your transaction history <br> for any connected address.
</h2>
<div><img src="/tx.png"></div>
</div>

<section class="bento">
<div class="bento__base__card bento__card__2">
<h2 class="text-6">
Connect any number of wallets at the same time.
</h2>
<div><img src="/multi-wallet.png"></div>
</div>
</div>
</section>
<section class="bento csm:hidden">
<div class="overview__header">
<h2>
One place to connect your wallets, <br> stake, withdraw, and see your analytics.
Expand Down
Loading

0 comments on commit b975a26

Please sign in to comment.