Skip to content

Commit

Permalink
fixing layout errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@seba-krawiec
seba-krawiec committed Oct 2, 2020
1 parent 61b0dbd commit 888e0dc
Showing 1 changed file with 117 additions and 61 deletions.
178 changes: 117 additions & 61 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
600px / 16px = 37.5em phone
900px / 16px = 52.25em tab-port
1200px / 16px = 75em tab-land
1280px / 16px = 80em BD-min
1800px / 16px = 112.5em big-desktop
*/
*,
Expand Down Expand Up @@ -211,12 +212,12 @@ section {
height: 20vh; } }
@media (max-width: 75em) {
.home__container {
width: 35rem;
width: 40rem;
margin: 40vh auto;
transform: translateY(-5rem); } }
@media (max-width: 37.5em) {
.home__container {
width: 30rem;
width: 35rem;
margin: 40vh auto;
transform: translateY(-5rem); } }

Expand All @@ -231,6 +232,9 @@ section {
content: "";
display: table;
clear: both; }
@media (max-width: 75em) {
.home__box {
height: 9vh; } }
@media (max-width: 52.3em) {
.home__box {
height: 8vh; } }
Expand Down Expand Up @@ -258,7 +262,7 @@ section {
margin-top: 3rem; }
@media (max-width: 52.3em) {
.home__btn-row {
max-width: 35rem;
max-width: 40rem;
margin-top: 2rem; } }

.home__btn--left, .home__btn--right {
Expand Down Expand Up @@ -296,26 +300,31 @@ section {
height: 30vh;
box-shadow: -1rem 1rem 2rem 0.1rem rgba(0, 0, 0, 0.3);
border: .3rem solid white; }
@media (max-width: 52.3em) {
.about__box {
height: 30vh; } }
@media (max-width: 75em) {
.about__box {
height: 28vh; } }
@media (max-width: 52.3em) {
height: 35vh; } }
@media (max-width: 37.5em) {
.about__box {
height: 25vh; } }
height: 40vh; } }
.about__box--img {
transform: skewX(25deg) translateX(3.7rem) translateY(1rem);
height: 90%;
border-radius: 50%; }
@media (max-width: 52.3em) {
.about__box--img {
transform: skewX(0) translateX(65%) translateY(0.9rem); } }
@media (max-width: 75em) {
.about__box--img {
height: 80%;
transform: skewX(0deg) translateX(19%) translateY(1.8rem); } }
height: 75%;
transform: skewX(0deg) translateX(6%) translateY(2rem); } }
@media (max-width: 52.3em) {
.about__box--img {
height: 90%;
transform: skewX(0) translateX(43%) translateY(1rem); } }
@media (max-width: 37.5em) {
.about__box--img {
transform: skewX(0) translateX(65%) translateY(1.5rem); } }
height: 80%;
transform: skewX(0) translateX(20%) translateY(2.5rem); } }
.about__box--content {
padding: 2rem;
color: white;
Expand All @@ -325,16 +334,16 @@ section {
.about__box--content {
padding: 1.5rem;
font-weight: 600;
font-size: 1.25rem; } }
font-size: 1.45rem; } }
@media (max-width: 52.3em) {
.about__box--content {
padding: 1rem;
font-weight: 500;
font-size: 1.13rem; } }
font-size: 1.51rem; } }
@media (max-width: 37.5em) {
.about__box--content {
padding: .8rem;
font-size: 1.12rem; } }
font-size: 1.3rem; } }

.proyects__container {
margin: 10vh auto;
Expand All @@ -361,6 +370,7 @@ section {
display: block;
width: 100%;
height: 72%;
top: 0;
background-color: rgba(0, 0, 0, 0.8);
transform: translateX(-100%);
transition: all .4s; }
Expand Down Expand Up @@ -391,30 +401,39 @@ section {
display: block;
padding: .5rem;
position: absolute;
top: 36%;
top: 37%;
left: -5rem;
background-color: white;
color: black;
border-radius: 10%;
transform: translateY(-50%); }
transform: translateY(-50%);
text-align: center; }

img {
max-width: 100%;
max-height: 100%; }

@media (min-width: 75em) {
__box--img::before {
height: 59%; }
--git {
top: 31%; }
--show {
top: 30%; } }

@media (max-width: 75em) {
.proyects__container {
margin: 20vh auto;
max-width: 70rem; }
max-width: 90rem; }
.proyects__box {
height: 20vh; }
.proyects__box.col-2-of-3 {
transform: skewX(0deg);
margin-top: -3rem;
margin-bottom: 2rem;
margin-left: 4rem; }
margin-left: 0; }
.proyects__box.col-1-of-3 {
width: 16rem;
width: 25rem;
margin-top: -3rem; }
.proyects__box--img img {
width: 100%;
Expand All @@ -423,8 +442,8 @@ img {
content: "";
position: absolute;
width: 100%;
height: 4rem;
bottom: 0;
height: 7rem;
top: 4.8rem;
right: 0;
background-color: rgba(71, 111, 221, 0.5);
transform: none; }
Expand All @@ -433,61 +452,68 @@ img {
opacity: 1; }
.proyects__box--img:hover .proyects--show {
transform: none; }
.proyects__box--content {
padding: 1.5rem;
font-weight: 600;
font-size: 1.45rem; }
.proyects--git {
display: block;
position: absolute;
top: 9.5rem;
right: 0;
top: 6rem;
right: 3rem;
opacity: 1;
transform: none; }
.proyects--git img {
width: 3rem; }
width: 4rem; }
.proyects--show {
display: block;
position: relative;
top: -3.9rem;
top: 8.1rem;
padding: .5rem;
left: 2rem;
width: 4rem;
transform: none;
font-size: 1rem;
color: rgba(71, 111, 221, 0.8); } }
width: 7rem;
font-size: 1.8rem;
color: rgba(71, 111, 221, 0.5); } }

@media (max-width: 52.3em) {
.proyects__container {
margin: 20vh auto;
max-width: 40rem; }
.proyects__box:not(.col-1-of-3) {
transform: skewX(0);
margin-left: 0;
margin-top: -3rem;
margin-bottom: 2rem;
border-top: none;
border-left: .3rem solid white;
border-right: .3rem solid white;
border-bottom: .3rem solid white; }
.proyects__box:not(.col-2-of-3) {
width: 5rem; }
.proyects__box--img img {
width: 100%;
object-fit: cover; }
.proyects__box--img::before {
content: "";
position: absolute;
width: 100%;
height: 5rem;
bottom: 0;
right: 0;
background-color: rgba(71, 111, 221, 0.5);
transform: none; }
.proyects__box--img:hover .proyects--git {
transform: none;
opacity: 1; }
.proyects__box--img:hover .proyects--show {
transform: none; }
.proyects__box {
height: 30vh; }
.proyects__box:not(.col-1-of-3) {
transform: skewX(0);
margin-left: 0;
margin-top: -4.5rem;
margin-bottom: 5rem;
border-top: none;
border-left: .3rem solid white;
border-right: .3rem solid white;
border-bottom: .3rem solid white; }
.proyects__box:not(.col-2-of-3) {
width: 5rem; }
.proyects__box--img img {
width: 100%;
object-fit: cover; }
.proyects__box--img::before {
content: "";
position: absolute;
width: 100%;
height: 6rem;
top: 12.8rem;
right: 0;
background-color: rgba(71, 111, 221, 0.5);
transform: none; }
.proyects__box--img:hover .proyects--git {
transform: none;
opacity: 1; }
.proyects__box--img:hover .proyects--show {
transform: none; }
.proyects__box--content {
font-weight: 500;
font-size: 1.45rem; }
.proyects--git {
display: block;
position: absolute;
top: 8.8rem;
top: 13.8rem;
right: 4rem;
opacity: 1;
transform: none; }
Expand All @@ -506,6 +532,36 @@ img {
@media (max-width: 37.5em) {
.proyects__container {
max-width: 30rem; }
.proyects__box {
height: 30vh; }
.proyects__box:not(.col-1-of-3) {
margin-top: -8.9rem;
height: 30vh; }
.proyects__box:not(.col-2-of-3) {
width: 5rem;
margin-bottom: 0; }
.proyects__box--img img {
width: 100%;
object-fit: cover; }
.proyects__box--img::before {
content: "";
position: absolute;
width: 100%;
height: 6rem;
top: 7.8rem;
right: 0;
background-color: rgba(71, 111, 221, 0.5);
transform: none; }
.proyects__box--img:hover .proyects--git {
transform: none;
opacity: 1; }
.proyects__box--img:hover .proyects--show {
transform: none; }
.proyects__box--content {
font-weight: 500;
font-size: 1.45rem; }
.proyects--show {
top: -5.3rem; }
.proyects--git {
top: 8.8rem; } }

Expand Down

0 comments on commit 888e0dc

Please sign in to comment.