fix: small improvement on 4k screens
This commit is contained in:
Juan Di Toro
parent
b7e30f8cd6
commit
0bba290f28
|
|
@ -26,8 +26,7 @@ import abstractBg from "/src/assets/single-brand-bg-1.png";
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src={abstractBg.src}
|
||||
class="float-right -z-10 absolute right-0 w-[800px]"
|
||||
/>
|
||||
<div class="float-right w-1/2 -z-10 max-w-7xl">
|
||||
<img src={abstractBg.src} class="absolute max-xl:right-0 w-[800px]" />
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#cto {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
max-width: 185.6em;
|
||||
min-height: 58.8em;
|
||||
margin: 0 auto;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: min(0em, calc((100% - 95em) / 2));
|
||||
width: calc(100% - 64em - 7.5%);
|
||||
min-width: 95em;
|
||||
background-image: url("/src/assets/single-brand-bg-1.png");
|
||||
background-position: 50% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
box-sizing: content-box;
|
||||
margin: 6em 7.5%;
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
.bio {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-top: 1.5em;
|
||||
gap: 1.2em;
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.5rem);
|
||||
color: $color-cloud;
|
||||
|
||||
img {
|
||||
@include fluid-width-height(5.875rem, 5.875rem);
|
||||
}
|
||||
|
||||
strong {
|
||||
@include fluid-font-size(1.625rem);
|
||||
line-height: 133%;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
p, .bio div {
|
||||
background: rgba($color-blue-charcoal-2, 0.75);
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
padding: 0.3em 0.5em;
|
||||
margin: -0.3em -0.5em;
|
||||
}
|
||||
|
||||
.bio {
|
||||
margin-top: 1.27em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
---
|
||||
import './Grid.scss';
|
||||
---
|
||||
|
||||
<section id="grid" class="feature-grid">
|
||||
<div>
|
||||
<h3>Web3 Universal Storage</h3>
|
||||
<p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Gateway</h3>
|
||||
<p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Build Your Site, Censorship Free</h3>
|
||||
<p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Universal Storage</h3>
|
||||
<p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Web3 Gateway</h3>
|
||||
<p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Build Your Site, Censorship Free</h3>
|
||||
<p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
#grid {
|
||||
padding-top: 5.5em;
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
@import "/src/styles/mixins.scss";
|
||||
@import "/src/styles/vars.scss";
|
||||
|
||||
#meme {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12em 7.5%;
|
||||
gap: 10em;
|
||||
|
||||
.feature-group {
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
.meme-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.5em;
|
||||
}
|
||||
|
||||
.meme-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
|
||||
div {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
img {
|
||||
@include fluid-width(13.125rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 8.6em;
|
||||
@include fluid-font-size(1.5625rem);
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: $color-aquamarine;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.3125rem);
|
||||
line-height: 123.81%;
|
||||
color: $color-cloud;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 80rem) {
|
||||
flex-direction: column;
|
||||
gap: 5em;
|
||||
|
||||
.feature-group {
|
||||
max-width: none;
|
||||
margin: 2em 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 56rem) {
|
||||
.feature-group {
|
||||
max-width: 64em;
|
||||
}
|
||||
|
||||
.meme-items {
|
||||
gap: 3em;
|
||||
}
|
||||
|
||||
.meme-item {
|
||||
flex-direction: column;
|
||||
max-width: 64em;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
@include fluid-width(11.25rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 80.000001rem) and (max-width: 100rem) {
|
||||
.meme-item {
|
||||
h2 {
|
||||
width: 4.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<div class="pt-10 w-full">
|
||||
<a
|
||||
href="#"
|
||||
class="text-2xl w-full block text-center sm:w-auto rounded-md bg-primary py-3 px-10 text-[black] font-body"
|
||||
class="text-2xl w-full block text-center md:max-w-[350px] rounded-md bg-primary py-3 px-10 text-black font-body"
|
||||
>Download Extension</a
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="pt-10 w-full">
|
||||
<a
|
||||
href="#"
|
||||
class="text-2xl w-full block text-center sm:w-auto rounded-md bg-primary py-3 px-10 text-[black] font-body"
|
||||
class="text-2xl w-full block text-center md:max-w-[250px] rounded-md bg-primary py-3 px-10 text-[black] font-body"
|
||||
>Learn More</a
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const { view, title } = Astro.props;
|
|||
/>
|
||||
<meta name="keywords" content="Web3 Extension, Lume Web, Web3" />
|
||||
</head>
|
||||
<body>
|
||||
<body class="max-w-[1600px] mx-auto">
|
||||
<Navbar view={view} />
|
||||
<main class={view + " space-y-40"}>
|
||||
<slot />
|
||||
|
|
|
|||
Loading…
Reference in New Issue