No .collection, minhas imagens não ficaram com tamanho difentes como no video, no video sempre fica uma imagens ocupando toda largura e as proximas duas ocupando 50%, porém não ficaram iguais.
E no .contact, o texto que fica ao lado da imagem, ele da o espaçamento do padding, porém o fontSize não funcionou, devia cada frase ficar de um tamanho diferente, mas ficaram tudo do mesmo tamanho.
.collection
$half-width: 50%; $full-width: 100%;
@mixin theme-collection($half-post: true) { @include for-phone-only { width: $full-width; }
@if $half-post {
width: $half-post;
} @else {
width: $full-width;
}}
@mixin font-collection ($half-title: true){ @include for-phone-only { @include fontSize(16px); }
@if $half-title {
@include fontSize(18px);
} @else {
@include fontSize(22px);
}}
.collection { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 80%; margin-left: auto; margin-right: auto; font-family: Arial; @include for-phone-only { width: 90%; }
&__post {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
@include theme-collection($half-post: false);
&.half {
@include theme-collection($half-post: true);
}
}
&__figure {
width: 50%;
}
&__img {
width: 100%;
}
&__about {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 50%;
text-align: center;
}
&__title {
color: $dark-grey;
text-decoration: unset;
letter-spacing: 1px;
width: 100%;
margin: 10px 0;
@include font-collection($half-title: false);
&.half {
@include font-collection($half-title: true);
}
&:hover {
color: $purple;
text-decoration: underline;
}
}
&__date {
@extend %no-margin-top, %no-margin-bottom, %default-margin-left, %default-margin-right;
@include fontSize(12px);
font-style: italic;
width: 20%;
@include for-phone-only {
@include fontSize(10px);
}
@include for-tablet-only {
width: 30%;
}
}
&__tag {
@include fontSize(14px);
width: 50px;
padding: 5px 7px;
color: $purple;
border: 1px solid $purple;
@extend %no-margin-top, %no-margin-bottom, %default-margin-left, %default-margin-right;
@include for-phone-only {
width: 30px;
@include fontSize(12px);
}
@include for-tablet-only {
width: 35px;
@include fontSize(12px);
}
}
&__breadcrumb {
background-color: $light-grey;
text-align: center;
padding: 30px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.breadcrumb {
&__link {
@include fontSize(18px);
text-decoration: unset;
color: $dark-grey;
letter-spacing: 1px;
&:hover {
color: $purple;
text-decoration: underline;
}
}
&__img {
width: 14px;
margin: 10px;
}
}}
.contact
.contact { @include flx(justify-content, center); align-items: center; flex-wrap: wrap; @extend %double-margin-top; margin-left: auto; margin-right: auto; width: 90%;
&__figure {
width: 50%;
}
&__img {
width: 100%;
}
&__info {
width: 40%;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
$x: 1;
@while $x < 5 {
&__p-#{$x} {
@include fontSize(40px/$x);
padding-top: 5px*$x;
}
$x: $x + 1;
}}
