Merge pull request #60 from ViktorSvertoka/paginationstyles

src/css/layout/03-exercises.css

@@ -505,12 +505,20 @@
 }
 .aside__container {
   width: 100%;
+  padding-top: 80px;
+}
+@media screen and (min-width: 768px) {
+  .aside__container {
+    padding-top: 64px;
+  }
 }
 @media screen and (min-width: 1440px) {
   .aside__container {
     width: 444px;
+    padding-top: 0;
   }
 }
+
 /* Aside Block */
 .aside__container {
   height: 100%;

src/css/layout/04-footer.css

@@ -17,6 +17,12 @@
   }
 }
 
+@media screen and (min-width: 1440px) {
+  .footer__container {
+    margin-top: 68px;
+  }
+}
+
 .footer__logo {
   fill: var(--color-white);
 }

src/css/utils/command.css

@@ -84,22 +84,45 @@ body {
   }
 }
 
-#pagination-number {
+#pagination-numbers {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
 }
 
 .pagination-button {
-  background-color: transparent;
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  letter-spacing: 0.96px;
+  padding: 0;
   border: none;
+  color: #d4d4d4;
+  background-color: transparent;
+  transition: all var(--transition-dur-and-func);
 }
 
 .active-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 31px;
+  height: 31px;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.8px;
+  border-radius: 50%;
+  border: 1px solid var(--color-black);
+  color: var(--color-black);
   background-color: transparent;
-  width: 32px;
-  padding: 5px 12px;
-  border-radius: 18px;
-  border: 1px solid #242424;
+  transition: all var(--transition-dur-and-func);
+}
+
+.pagination-button:hover,
+.pagination-button:focus,
+.active-btn:hover,
+.active-btn:focus {
+  transform: scale(1.05);
 }