супер попа (обновление)

This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich
2022-04-16 17:30:06 +10:00
parent c8025acc79
commit 30fd8f0ec3
14 changed files with 623 additions and 338 deletions

View File

@@ -8,9 +8,8 @@ main>section#books>* {
}
main>section#books>form.upload {
width: calc(100% / 3 - 20px - 9px * 2);
height: calc(220px - 9px * 2);
margin: 5px;
width: calc(100% / 3 - 20px - 8px);
height: 212px;
margin-right: 20px;
}
@@ -22,31 +21,86 @@ main>section#books>form.upload>p {
main>section#books>article.book {
width: calc(100% / 3 - 20px);
height: 220px;
position: relative;
margin-right: 20px;
display: flex;
flex-direction: column;
}
main>section#books>article.book:nth-child(3) {
width: calc(100% / 3);
main>section#books>article.book:nth-child(3n) {
margin-right: unset;
}
main>section#books>:is(form.upload, article.book):nth-last-child(1),
main>section#books>:is(form.upload, article.book):nth-last-child(2),
main>section#books>:is(form.upload, article.book):nth-last-child(3) {
margin-bottom: 0;
}
main>section#books>article.book>img {
height: 220px;
height: 100%;
object-fit: cover;
object-position: right;
overflow: hidden;
clip-path: polygon(5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 5px, 5px 5px);
/* clip-path: polygon(5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 5px, 5px 5px); */
}
main>section#books>article.book>h4 {
margin-top: 5px;
margin-bottom: 10px;
height: 50px;
text-align: center;
width: calc(100% - 20px);
position: absolute;
bottom: 0;
margin: 0;
padding: 10px;
text-align: left;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
color: #fff;
background: rgba(0, 0, 0, 50%);
}
main>section#books>article.book>p {
margin: unset;
}
main>section#book>img,
main>section#book>img::before {
margin-bottom: 20px;
width: 100%;
}
main>section#book>img::before{
margin-top: -1em;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
main>section#book>nav>ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
}
main>section#book>nav>ul>li[type="button"] {
padding: 6px 20px;
}
main>section#book>nav>ul>li:only-of-type {
margin-left: auto;
margin-right: auto;
}
main>section#book>nav>ul>li.previous {
margin-left: auto;
margin-right: 15px;
}
main>section#book>nav>ul>li.next {
margin-right: auto;
}