lk redesign

app/pub/css/an.css

@@ -3,9 +3,14 @@ header {
     justify-content: space-between;
     align-items: center;
 }
+    header ul {
+        padding: 0px;
+        display: flex;
+        align-items: center;
+    }
     header ul li {
         list-style-type: none;
-        float:left;
+        margin-right:17px;
     }
     header .lite-logo {
         width:25%;
@@ -13,6 +18,9 @@ header {
     .lite-logo IMG {
         width:100%;
     }
+#logo {
+    width: 200px;
+}
 body {
     width: 80%;
     margin: 0px auto;
@@ -286,18 +294,18 @@ input[type="email"],input[type="password"]{
 }  
 .book_skeleton {
     width:25%;
-    margin-bottom: 50px;
+    margin-bottom: 30px;
     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;
+    padding: 2px;
+    box-sizing: border-box;
 }
 .book_mini img{
     width:100%;
@@ -333,22 +341,83 @@ input[type="email"],input[type="password"]{
 }
 
 @media screen and (max-width: 1260px) {
-
+    .book_skeleton{
+        margin-top: 20px;
+    }
+    .book_mini{
+        width: 70%;
+        font-size: .9em;
+    }
+}
+@media screen and (max-width: 1100px) {
+    .book_skeleton{
+        margin-top: 15px;
+    }
+    #logo {
+        width: 170px;
+    }
+    header {
+        font-size: .9em;
+    }
 }
-
 @media screen and (max-width: 1000px) {
+    .book_mini{
+        width: 75%;
+    }
+    .book_skeleton{
+        margin-top: 10px;
+    }
     header .lite-logo {
         width: 30%;
     }
+    #logo {
+        width: 150px;
+    }
+    header, #lk-menu {
+        font-size: .8em;
+    }
+
 }
 
 @media screen and (max-width: 768px) {
     header .lite-logo {
         width: 35%;
     }
+    .book_skeleton{
+        width: 50%;
+    }
+    .book_mini{
+        width: 75%;
+    }
+    #logo {
+        width: 125px;
+    }
+    header, #lk-menu {
+        font-size: .7em;
+    }
+    header ul li {
+        margin-right: 6px;
+    }
+    .header-div, #lk-menu div {
+        padding: 6px;
+        margin-right: 6px;
+    }
+    #menu_category ul li, #menu_category ul li.active {
+        padding: 6px 10px;
+    }
+    #menu_category ul li a {
+        padding: 0px;
+    }
+    #year_filter {
+        padding:6px;
+        margin-right: 0px;
+    }
 }
 
 @media screen and (max-width: 560px) {
+    body {
+        width:90%;
+    }
     header .lite-logo {
         width: 45%;
     }
@@ -361,7 +430,7 @@ input[type="email"],input[type="password"]{
         line-height: 16px;
         text-align: center;
     }
-    .adv {
+    .adv, .mob-hidden {
         display:none;
     }
     #zoomnav div, #pagenav div {
@@ -373,4 +442,74 @@ input[type="email"],input[type="password"]{
     #info, #info span {
         font-size: 1em;
     }
+    #logo, .mob-full {
+        width: 83%;
+        margin: 0px auto;
+        text-align: center;
+    }
+    header {
+        font-size:.9em;
+    }
+    header, header ul {
+        flex-wrap:wrap;
+        justify-content: center;
+    }
+    header ul li {
+        margin-right: 10px;
+        margin-top: 15px;
+    }
+    #auth {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        font-size: .9em;
+    }
+    #lk-menu {
+        font-size: .65em;
+        justify-content: center;
+    }
 }
+@media screen and (max-width: 460px) {
+    header {
+        font-size:.8em;
+    }
+    #logo, .mob-full {
+        width: 75%;
+    }
+
+    .book_skeleton {
+        width: 100%;
+    }
+    .book_mini {
+        width: 70%;
+        margin: 0px auto;
+    }
+    #lk-menu {
+        font-size: .6em;
+    }
+    #lk-menu div, #year_filter {
+        padding: 4px;
+        margin-right: 4px;
+    }
+    #menu_category ul li, #menu_category ul li.active {
+        padding: 4px 8px;
+    }
+}
+@media screen and (max-width: 390px) {
+    body {
+        width:98%;
+    }
+    #lk-menu {
+        font-size: .7em;
+    }
+    .small-mob-hidden {
+        display:none;
+    }
+    #menu_category ul li, #menu_category ul li.active {
+        padding: 6px 10px;
+    }
+    #lk-menu div, #year_filter {
+        padding: 6px;
+        margin-right: 6px;
+    }
+}