Skip to content

Commit

Permalink
Header responsive styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@ColetteOrdz
ColetteOrdz committed Jan 25, 2022
1 parent 81a8b02 commit 145a6ac
Show file tree
Hide file tree
Showing 2 changed files with 125 additions and 105 deletions.
53 changes: 36 additions & 17 deletions blackrock/src/app/components/header/header.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,41 +89,60 @@ header {

@media (max-width: 420px) and (orientation: portrait) {
header {
flex-direction: row;
margin-right:0;
flex-direction: column;
margin-right: 0;
align-items: flex-start;
padding: 1rem 0 1rem 2rem;
img{
img {
margin: 10px 10px 20px;
align-self: baseline;
}
.main {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
justify-content: flex-end;
gap:2rem;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between !important;

grid-gap: 0;
gap: 0;

.section-user {
display: flex;
flex-direction: column;
align-items: flex-start;

.name-user {
display: flex;
position: relative;
margin-right: 20px;
flex-wrap: wrap;
}
.container-logout{
h3{
padding-left: 18px;
}
}
}

.session {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
gap:0;
align-items: flex-start;
gap: 0;

h3 {
width: fit-content;
flex:100%;
flex: 100%;
text-align: right;
margin-left: 8px;
}
}
span{
span {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-left: 4rem;
// padding-left: 4rem;
}

}

}
}


177 changes: 89 additions & 88 deletions blackrock/src/app/pages/results/results.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ $pink: #fd9bb4;
background-color: #fd9bb4;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 3rem;
padding: 3rem 1rem 5rem 10rem;
z-index: 0;
Expand Down Expand Up @@ -111,12 +111,11 @@ $pink: #fd9bb4;
font-size: 30px;
cursor: pointer;
}
share-buttons{
share-buttons {
background-color: black;
width: fit-content;
transform: scale(1.5);
}

}
}

Expand All @@ -126,105 +125,107 @@ $pink: #fd9bb4;
width: 90vw;
}

@media (max-width: 1250px), screen and (orientation: portrait){
.container {
background-color: #fd9bb4;
display: flex;
flex-direction: column;
margin-top: 3rem;
padding: 3rem 1rem 5rem 2rem;
z-index: 0;
position: relative;

.data {
@media (max-width: 1250px), screen and (orientation: portrait) {
.container {
background-color: #fd9bb4;
display: flex;
flex-direction: column;
margin-top: 3rem;
padding: 3rem 1rem 5rem 2rem;
z-index: 0;
position: relative;
box-sizing: border-box;
.label-level {
@include noto($black, $noto-dis, 36px, 900);
margin-left: 0;
box-sizing: border-box;
}
.level {
margin-left: 10px;
margin-top: 60px;
margin-right: 0;

.data {
display: flex;
justify-content: flex-start;
align-items: center;
background-color: black;
color: white;
line-height: 60px;
height: 70px;
width: 88vw;
padding: 3%;
z-index: 1;
flex-direction: column;
position: relative;
box-sizing: border-box;
.label-level {
@include noto($black, $noto-dis, 36px, 900);
margin-left: 0;
box-sizing: border-box;
}
.level {
margin-left: 10px;
margin-top: 60px;
margin-right: 0;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: black;
color: white;
line-height: 60px;
height: 70px;
width: 88vw;
padding: 3%;
z-index: 1;
box-sizing: border-box;

h2 {
@include noto($white, $noto-dis, 32px, 900);
margin-bottom: 0;
h2 {
@include noto($white, $noto-dis, 32px, 900);
margin-bottom: 0;
width: 100%;
}
}
.description {
background-color: white;
color: black;
height: 100%;
width: 100%;
line-height: 20px;
padding: 1%;
margin-left: 0;
box-sizing: border-box;
z-index: inherit;
p {
box-sizing: border-box;
padding: 1rem 1rem 1rem 3rem;
@include noto($black, $noto-fam, 18px, 400);
}
}
}
.description {
background-color: white;
color: black;
height: 100%;
width: 100%;
line-height: 20px;
padding: 1%;
margin-left: 0;
box-sizing: border-box;
z-index: inherit;
p {
.img {
top: 10%;
left: 55%;
width: 170px;
position: absolute;
height: 200px;
z-index: 1;
img {
width: 100%;
z-index: 2;
box-sizing: border-box;
padding: 1rem 1rem 1rem 3rem;
@include noto($black, $noto-fam, 18px, 400);
margin-top: 14rem;
}
}
}
.img {
top: 10%;
left: 55%;
width: 170px;
position: absolute;
height: 200px;
z-index: 1;
img {
width: 100%;
z-index: 2;
box-sizing: border-box;
margin-top: 14rem;
}
}
.register {
display: flex;
flex-direction: column;
gap: 2rem;
margin-top: 12rem;
padding-left: 0;
padding-bottom: 5%;
h3 {
@include noto($black, $noto-fam, 20px, 700);
text-decoration: underline;
cursor: pointer;
padding-top: 3rem;
}
.btns-share{
.register {
display: flex;
flex-direction:row ;
flex-wrap: wrap;
justify-items: center;
width: 40%;
margin-left: 25%;

.container, .register, share-buttons {
font-size: 30px;
flex-direction: column;
gap: 2rem;
margin-top: 12rem;
padding-left: 0;
padding-bottom: 5%;
h3 {
@include noto($black, $noto-fam, 20px, 700);
text-decoration: underline;
cursor: pointer;
}
padding-top: 3rem;
}
.btns-share {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-items: center;
width: 40%;
margin-left: 25%;

.container,
.register,
share-buttons {
font-size: 30px;
cursor: pointer;
}
}
}
}
}
}

0 comments on commit 145a6ac

Please sign in to comment.