cleanup: some more css and html tags

This commit is contained in:
Ivana Andersson 2023-08-16 16:23:18 +03:00
parent f1b8d76841
commit 443fc23e41
4 changed files with 40 additions and 82 deletions

View File

@ -1,6 +1,10 @@
#root {
width: 100%;
}
.nimbus-logomark{
width: auto;
height: 30%;
}
ul{
list-style-type: none;
padding: 0;

View File

@ -33,84 +33,42 @@
display: flex;
flex-direction: column;
}
header {
width: 100%;
display: flex;
justify-content: space-between;
padding: 1.5rem 0;
}
.logo-title {
font-size: 27px;
font-weight: 700;
display: flex;
align-items: center;
}
.logo-title .beta{
color: #FFF;
font-size: 10px;
font-weight: 600;
border-radius: 66.667px;
background-color: #2A4AF5;
padding: 4px 6px;
margin-left: 10px;
}
.content {
flex-grow: 1;
}
.content .title {
font-size: 27px;
font-weight: 600;
margin-bottom: 0.25em;
}
.content .subtitle {
font-size: 15px;
margin: 0.1em;
}
.content .subtitle span{
font-weight: 700;
}
.content button {
display: flex;
align-items: center;
}
.content button span {
padding-right: 10px;
/* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
.layout-right {
flex: 0 0 45%;
max-width: 45%;
z-index: 0;
}
/* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
.layout-right {
flex: 0 0 45%;
max-width: 45%;
z-index: 0;
}
.image-container {
height: 100%;
position: relative;
overflow: hidden;
}
.image-container::before {
display: block;
content: "";
padding-bottom: 100%;
}
.image-container::after {
display: block;
content: "";
position: absolute;
top: 0;
left: -1%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0));
}
.image-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 140%;
width: auto;
}
.image-container {
height: 100%;
position: relative;
overflow: hidden;
}
.image-container::before {
display: block;
content: "";
padding-bottom: 100%;
}
.image-container::after {
display: block;
content: "";
position: absolute;
top: 0;
left: -1%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0));
}
.image-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 140%;
width: auto;
}

View File

@ -46,10 +46,6 @@ button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.nimbus-logomark{
width: auto;
height: 30%;
}
@media (prefers-color-scheme: light) {
:root {
color: #09101C;

View File

@ -12,9 +12,9 @@ function LandingPage() {
<>
<PageWrapperShadow rightImageSrc="/background-images/landing-page-bg.png">
<div className="landing-page">
<header>
<XStack>
<NimbusLogo />
</header>
</XStack>
<YStack>
<Titles
title="Light and performant clients, for all Ethereum validators."