vtuber list, fix homepage

static/css/custom.css

@@ -5,6 +5,9 @@
 .text-left {
   text-align: left;
 }
+.mb-large {
+  margin-bottom: 6rem;
+}
 /* LP-components nav */
 #navigation .navbar-nav .main-link {
   background-color: white;
@@ -167,6 +170,11 @@
   margin-bottom: 0 !important;
 }
 
+.sec-usecase .container {
+  width: 95%;
+  max-width: 1200px;
+}
+
 .sec-usecase::after {
   content: " ";
   position: absolute;
@@ -421,15 +429,16 @@
 .blog-tabs .blog-tabs-stage {
   width: 65%;
   padding: 3.5rem;
-  padding-bottom: 8rem;
+  padding-bottom: 6rem;
   box-shadow: 1px 1px 10px 2px grey;
   height: 48rem;
   overflow: hidden;
   text-align: left;
+  position: relative;
 }
 
 .blog-tab-box {
-  height: 95%;
+  height: 90%;
   overflow: scroll;
 }
 
@@ -465,6 +474,9 @@
 .blog-tabs .btn-light {
   margin-top: 1.5rem;
   color: #EA5413;
+  position: absolute;
+  bottom: 1rem;
+  left: 3.5rem;
 }
 
 /* sec-action */
@@ -1084,6 +1096,10 @@
 
 
 @media (max-width: 992px) {
+  .sec-usecase .container {
+    width: 85%;
+    max-width: 1200px;
+  }
   .sec-steps .steps-block {
     padding: 0rem;
   }
@@ -1192,6 +1208,19 @@
     padding-left: 2rem;
     padding-right: 2rem;
   }
+  .sec04 {
+  padding: 8rem 0;
+  background-color: #FFEBE2;
+  position: relative;
+  padding-top: 3rem;
+}
+.project {
+  max-height: 20rem;
+}
+  .sec04 {
+    padding: 12rem 0;
+    padding-top: 3rem;
+  }
   .sec-hero {
     padding: 4rem 0;
   }
@@ -1208,6 +1237,10 @@
   .sec-steps .steps-txt h3.steps-sub {
     font-size: 1.5rem;
   }
+  .sec-usecase .container {
+    width: 98%;
+    max-width: 1200px;
+  }
   .sec-usecase .row>div {
     width: 100%;
   }

static/css/customnft.css

@@ -38,6 +38,11 @@
 .nft-tabs {
     max-width: 100%;
 }
+
+.nft-tabs-nav {
+ margin-block-start: 0;
+ padding-left: 0;
+}
 .nft-tabs-nav li {
     float: left;
     width: 18%;
@@ -222,3 +227,18 @@
     background-color: hotpink;
     z-index: 0;
 }
+
+@media (max-width: 576px) {
+    .nft-tabs-nav li a {
+        color: #EA5413;
+        font-size: 1rem;
+        letter-spacing: 2px;
+        display: block;
+        font-weight: 600;
+        padding: 10px 0;
+        text-align: center;
+        text-decoration: none;
+        border: 1px solid #EA5413;
+        border-radius: 2rem;
+    }
+}

static/js/vtubers.js

@@ -367,6 +367,35 @@ const data = [
         ],
         "mp4": null
     },
+    {
+        "id": "12",
+        "name": "渡清夢",
+        "intro": "幽鬼與靈狐的禁忌之子，在隔離於夢與現世的夾縫小空間中獨自生活，現在來到現世探索中！",
+        "img": "https://i.imgur.com/gAIFIoI.png",
+        "images": ["https://i.imgur.com/gAIFIoI.png"],
+        "style": [],
+        "tags": ["#VTuber", "#TW_VTuber", "＃個人勢"],
+        "contact": "",
+        "demand": ["角色曝光"],
+        "follow": [
+            {
+                "channel": "Youtube",
+                "link": 'https://www.youtube.com/channel/UC_BjgwcygvQatWUh06QQHwg',
+                "img": "https://i.imgur.com/c4VdjRJ.png"
+            },
+            {
+                "channel": "twitter",
+                "link": 'https://twitter.com/KiyoyumeWataru',
+                "img": "https://i.imgur.com/4VKBo9w.png"
+            },
+            {
+                "channel": "twitch",
+                "link": 'https://www.twitch.tv/wataru_kiyoyum',
+                "img": "https://i.imgur.com/FjIaiz9.png"
+            },
+        ],
+        "mp4": null
+    },
 ];