자기전 정리 2022.10.17(01.)

templates/anime_downloader_ohli24_category.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %} {% block content %}
-
+<div id="yommi_wrapper">
     <div class="input-group mb-2">
         <input
                 id="input_search"
@@ -42,6 +42,7 @@
             <div id="episode_list"></div>
         </form>
     </div>
+</div>
 <!--전체-->
 
 <script
@@ -671,6 +672,7 @@
     button.btn-favorite {
         background-color: #e0ff42;
     }
+
     /*.card-columns {*/
     /*    @include media-breakpoint-only(lg) {*/
     /*        column-count: 4;*/
@@ -683,10 +685,12 @@
         .container {
             max-width: 100%;
         }
+
         .card-columns {
             column-count: 2;
             column-gap: 1.25rem;
         }
+
         .card-columns .card {
             display: inline-block;
         }
@@ -694,12 +698,16 @@
 
 
     @media (min-width: 768px) {
-        .card-columns {column-count: 3;}
+        .card-columns {
+            column-count: 3;
+        }
     }
 
     /* Large devices (desktops, 992px and up) */
     @media (min-width: 992px) {
-        .card-columns {column-count: 3;}
+        .card-columns {
+            column-count: 3;
+        }
     }
 
     /* Extra large devices (large desktops, 1200px and up) */
@@ -707,23 +715,34 @@
         .card-columns {
             column-count: 5;
         }
+
+        #yommi_wrapper {
+            max-width: 80%;
+            margin: 0 auto;
         }
+    }
+
     .card {
         margin-bottom: 0.75rem;
     }
+
     .card-columns .card {
         margin-bottom: 0.75rem;
     }
+
     .card-columns .card img {
         width: 100%;
     }
+
     button#add_whitelist {
         /*top: -70px;*/
         position: relative;
     }
+
     body {
         font-family: NanumSquareNeo, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
     }
+
     body {
         background-image: linear-gradient(90deg, #233f48, #6c6fa2, #768dae);
     }