IuryNogueira/myreef

View on GitHub
thereef/src/app/pages/home/home.component.scss

Summary

Maintainability
Test Coverage
.container {
display: flex;
height: 100%;
width: 100%;
background: rgb(75,165,184);
background: linear-gradient(90deg, rgba(75,165,184,1) 46%, rgba(199,162,165,1) 76%, rgba(245,130,154,1) 95%);
color: #eefeff;
}
 
.content {
display: flex;
flex-direction: column;
width: 100%;
// padding: 16px 32px;
}
 
.content-inner {
padding: 60px 80px;
 
display: flex;
flex-direction: column;
gap: 100px;
}
 
.welcome-banner {
display: flex;
}
 
.left {
width: 50%;
}
 
.right {
width: 50%;
 
img {
width: auto;
}
}
 
.title {
font-size: 60px;
font-weight: 600;
}
 
.reef-shape {
background-image: url('/images/reef-shapes.png');
height: 345px;
background-repeat: no-repeat;
background-position: right;
 
div {
max-width: 50%;
}
}
 
p {
color: #cfffff;
}
 
.aqua-info {
padding: 1rem 0px;
}
 
.data-infos {
display: flex;
width: 100%;
gap: 1rem;
padding: 2rem 0px;
flex-direction: row;
 
div {
width: 100%;
}
}
 
.sensors-grid-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
 
reef-chart {
max-width: 650px;
}
 
.row-charts {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
 
@media screen and (max-width: 1000px) {
.content-inner {
padding: 60px 20px;
}
}
 
@media screen and (max-width: 800px) {
.data-infos {
flex-direction: column;
}
}
 
@media screen and (max-width: 650px) {
reef-menu {
position: relative;
}
 
.content-inner {
gap: 0px;
}
 
.reef-shape {
background-image: none;
display: flex;
justify-content: center;
text-align: center;
}
 
.title {
font-size: 20px;
}
}