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

mirzaev/surikovlib/system/public/css/auth.css

@@ -65,3 +65,13 @@
     list-style: none;
     background-color: #ae8f8f;
 }
+
+#authentication>div#account>p>b {
+    margin-right: 8px;
+}
+
+#authentication>div#account>p>span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}

mirzaev/surikovlib/system/public/css/books.css

@@ -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;
+}

mirzaev/surikovlib/system/public/css/main.css

@@ -3,11 +3,16 @@
     text-decoration: none;
 }
 
+::selection,
+::-moz-selection {
+    background-color: #544f7f;
+}
+
 body {
     margin: 0;
     display: grid;
     grid-template-rows: auto auto 150px;
-    grid-template-columns: auto 300px 600px auto;
+    grid-template-columns: minmax(100px, auto) 300px minmax(500px, auto) minmax(100px, auto);;
     background-color: #e5ddd1;
 }
 
@@ -54,8 +59,9 @@ main {
 }
 
 main>section>h2 {
-    margin-left: 1.5rem;
-    margin-top: unset;
+    margin-top: 0;
+    margin-bottom: 2rem;
+    text-align: center;
     font-size: 1.8rem;
 }
 
@@ -168,7 +174,7 @@ footer {
 }
 
 .button,
-:is(a, label)[type="button"],
+:is(li, a, label)[type="button"],
 input[type="submit"] {
     padding: 10px 20px;
     cursor: pointer;
@@ -180,14 +186,14 @@ input[type="submit"] {
 }
 
 .button:hover,
-:is(a, label)[type="button"]:hover,
+:is(li, a, label)[type="button"]:hover,
 input[type="submit"]:hover {
     color: #fff;
     background-color: #c5531f;
 }
 
 .button:active:is(:active, :focus),
-:is(a, label)[type="button"]:is(:active, :focus),
+:is(li, a, label)[type="button"]:is(:active, :focus),
 input[type="radio"]:checked+label[type="button"],
 input[type="submit"]:is(:active, :focus) {
     color: #ddd;
@@ -247,6 +253,11 @@ input:is([type="text"], [type="password"]).measured+.unit {
     user-select: none;
 }
 
+.unselectable::selection,
+.unselectable *::-moz-selection {
+    background: none;
+}
+
 .divider {
     width: 100%;
     border-radius: 2px;