Bom dia, pessoal.
Queria uma ajudinha no seguinte, na parte das condicionais na Collection, eu aparentemente criei os mixins theme-collection e font-collection e os incluí nos locais necessários, como a professora, mas meus posts inteiros não estão ficando com a fonte-size 22px no título (para mobile e posts divididos funcionou certinho).
Segue o meu código, para quem puder dar uma olhadinha no que eu possa estar errando:
collection.html:
<!DOCTYPE html>
<html>
<head>
<title>Gatito PetShop</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<header class="header">
<figure class="header__logo">
<img src="assets/img/logo.png" alt="Logo" class="header__img" />
</figure>
<nav class="header__menu menu">
<ul class="menu__list">
<li class="menu__links"><a href="index.html" class="menu__link">Página inicial</a></li>
<li class="menu__links"><a href="about.html" class="menu__link">Sobre nós</a></li>
<li class="menu__links"><a href="collection.html" class="menu__link">Cães</a></li>
<li class="menu__links"><a href="collection.html" class="menu__link">Gatos</a></li>
<li class="menu__links"><a href="collection.html" class="menu__link">Pássaros</a></li>
<li class="menu__links"><a href="contact.html" class="menu__link">Contato</a></li>
</ul>
</nav>
</header>
<div class="collection">
<div class="collection__breadcrumb breadcrumb">
<a href="index.html" class="breadcrumb__link">Home</a>
<img src="assets/img/arrow.svg" alt="Seta" class="breadcrumb__img" />
<a href="collection.html" class="breadcrumb__link">Posts</a>
</div>
<div class="collection__post">
<figure class="collection__figure">
<img src="assets/img/dog.jpg" alt="Cachorro" class="collection__img" />
</figure>
<div class="collection__about">
<a href="article.html" class="collection__title">Cuidados com os animais durante a quarentena</a>
<p class="collection__date">20/08/2020</p>
<span class="collection__tag">Cães</span>
</div>
</div>
<div class="collection__post half">
<figure class="collection__figure">
<img src="assets/img/party.jpg" alt="Cachorro festa" class="collection__img" />
</figure>
<div class="collection__about">
<a href="article.html" class="collection__title half">Como manter a saúde do seu pet</a>
<p class="collection__date">09/08/2020</p>
<span class="collection__tag">Cães</span>
</div>
</div>
<div class="collection__post half">
<figure class="collection__figure">
<img src="assets/img/car.jpg" alt="Cachorro carro" class="collection__img" />
</figure>
<div class="collection__about">
<a href="article.html" class="collection__title half">Como transportar seu pet com segurança</a>
<p class="collection__date">23/07/2020</p>
<span class="collection__tag">Cães</span>
</div>
</div>
<div class="collection__post">
<figure class="collection__figure">
<img src="assets/img/sun.jpg" alt="Cachorro oculos" class="collection__img" />
</figure>
<div class="collection__about">
<a href="article.html" class="collection__title">Cuidados com os animais no verão</a>
<p class="collection__date">12/07/2020</p>
<span class="collection__tag">Cães</span>
</div>
</div>
<div class="collection__post half">
<figure class="collection__figure">
<img src="assets/img/kid.jpg" alt="Cachorro e criança" class="collection__img" />
</figure>
<div class="collection__about">
<a href="article.html" class="collection__title half">5 raças de cachorro para quem tem crianças</a>
<p class="collection__date">02/07/2020</p>
<span class="collection__tag">Cães</span>
</div>
</div>
<div class="collection__post half">
<figure class="collection__figure">
<img src="assets/img/adopt.jpg" alt="Cachorro adotado" class="collection__img" />
</figure>
<div class="collection__about">
<a href="article.html" class="collection__title half">Lugares para adotar cachorros em São Paulo</a>
<p class="collection__date">16/06/2020</p>
<span class="collection__tag">Cães</span>
</div>
</div>
</div>
<footer class="footer">
<img src="assets/img/footer-logo.png" alt="Footer logo" class="footer__logo" />
<p class="footer__txt">© 2020 Gatito Blog . All rights reserved.</p>
</footer>
</body>
</html>_collection.scss:
$half-width: 50%;
$full-width: 100%;
@mixin theme-collection ($half-post: true) {
@include for-phone-only {
width: $full-width;
}
@if $half-post {
width: $half-width;
} 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;
}
}
}