자기전 정리 2022.10.17(01.)

templates/anime_downloader_ohli24_category.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %} {% block content %}
-
-<div class="input-group mb-2">
+<div id="yommi_wrapper">
+    <div class="input-group mb-2">
         <input
                 id="input_search"
                 type="search"
@@ -12,9 +12,9 @@
         <button id="btn_search" type="button" class="btn btn-primary">
             search
         </button>
-</div>
+    </div>
 
-<div>
+    <div>
         <div
                 id="anime_category"
                 class="btn-group"
@@ -41,6 +41,7 @@
         <form id="program_auto_form">
             <div id="episode_list"></div>
         </form>
+    </div>
 </div>
 <!--전체-->
 
@@ -405,7 +406,7 @@
         let data_code = $(this).attr("data-code");
         console.log(data_code);
         $.ajax({
-            url: "/" + package_name + "/ajax/"+sub+"/add_whitelist",
+            url: "/" + package_name + "/ajax/" + sub + "/add_whitelist",
             type: "POST",
             cache: false,
             data: JSON.stringify({data_code: data_code}),
@@ -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{
+
+    .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;
+        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);
     }