new design

app/pub/css/an.css

@@ -3,6 +3,10 @@ header {
     justify-content: space-between;
     align-items: center;
 }
+    header ul li {
+        list-style-type: none;
+        float:left;
+    }
     header .lite-logo {
         width:25%;
     }
@@ -49,11 +53,88 @@ h1 {
 }
 #auth a {
     color: #4d4e55;
-    font-size:1.1em;
+    font-size:1em;
     font-weight:bold;
     letter-spacing: 0.3px;
     text-transform: uppercase;
 }
+
+#lk-menu {
+    display:flex;
+    justify-content: start;
+    align-items: center;
+    margin: 15px 0px 20px;
+}
+    #lk-menu #menu_category, #lk-menu #menu_category ul {
+        padding: 0px;
+    }
+    #lk-menu #menu_category ul {
+        margin: 0px;
+    }
+    #lk-menu div, .header-div {
+        margin-right: 15px;
+        padding: 10px;
+        background: white;
+        border: 1px solid #b1bad0;
+        border-radius: 9px;
+        font-weight: bold;
+    }
+        #lk-menu div p, #lk-menu div a, .header-div a {
+            margin:0px;
+            color: #4d4e55;
+        }
+    #menu_category ul {
+        border-radius: 9px;
+    }
+    #menu_category ul li {
+        margin: 0px;
+        list-style-type: none;
+        float: left;
+        background: #7f7f7f;
+    }
+    #menu_category ul li:first-child{
+        border-radius: 9px 0px 0px 9px;
+    }
+    #menu_category ul li:last-child{
+        border-radius: 0px 9px 9px 0px;
+    }
+    #menu_category ul li.active {
+        background: #69c;
+        padding: 10px 20px;
+    }
+        #menu_category ul li a, #menu_category ul li {
+            color:white;
+            padding: 5px 10px;
+            display: block;
+        }
+#lk-menu #years {
+    padding: 0px;
+}
+    #lk-menu #years .fas {
+        position: relative;
+        right: 4px;
+        top: 2px;
+    }
+#year_filter {
+    border: 0px;
+    background: white;
+    color: #4d4e55;
+    font-weight: bold;
+    font-size: 1em;
+    -ms-appearance: none;
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    font-family: times;
+    padding: 10px;
+    border-radius: 9px;
+    cursor: pointer;
+    margin-right: -7px;
+    outline: none;
+}
+#year_filter::-ms-expand {
+    display: none;
+}
 #downloadtitle{
     width: 100%;
     background: #69c;
@@ -198,15 +279,34 @@ input[type="email"],input[type="password"]{
    }  
    
 .lib_container {
-    display: grid;
-    grid-gap: 5px;
-    grid-template-columns: repeat(auto-fit, 300px);
-    grid-template-rows: repeat(2, 400px);
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    flex-wrap: wrap;
 }  
-
+.book_skeleton {
+    width:25%;
+    margin-bottom: 50px;
+    margin-top: 30px;
+}
+.book_mini {
+    width: 60%;
+    padding-bottom: 5px;
+    box-sizing: border-box;
+    background: white;
+    border-radius: 7px;
+    border: 1px solid #cdd8e2;
+    text-align: center;
+    font-weight: bold;
+}
 .book_mini img{
-    border: 1px solid black;
-    padding: 4px;
+    width:100%;
+    border-radius: 7px 7px 0px 0px;
+}
+.book_mini p{
+    color: #4d4e55;
+    text-decoration: underline;
+    letter-spacing: 0.3px;
 }
 #info {
     margin-top: 5%;
@@ -232,17 +332,8 @@ input[type="email"],input[type="password"]{
     font-size: 1.2em;
 }
 
+@media screen and (max-width: 1260px) {
 
-#pages{
-    
-}
-
-#menu_category{
-    margin-bottom: 12px; 
-}
-
-#year_filter{
-    margin-bottom: 12px;   
 }
 
 @media screen and (max-width: 1000px) {