update navbar

layouts/partials/components/nav.html

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <div class="container-fluid justify-content-start">
+  <div class="container-fluid justify-content-between justify-content-lg-start">
     <a class="navbar-brand home" href="/">
       <img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Title }} logo" class="d-none d-lg-block logo">
       <img src="{{ .Site.Params.logo_small | relURL }}" alt="{{ .Title }} logo" class="d-block d-lg-none logo-sm">
@@ -9,7 +9,7 @@
       aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <div class="collapse navbar-collapse w-100" id="navbarSupportedContent">
 
       <ul class="navbar-nav me-auto mb-2 mb-lg-0 mt-4 mt-lg-0">
         {{ $currentPage := . }}
@@ -41,6 +41,10 @@
         {{ end }}
       </ul>
 
+      <ul class="nav navbar-nav navbar-right flex-row ms-auto my-3 my-lg-0">
+        <li><a href="https://video.choozmo.com/login.html" class="signin-link">登入</a></li>
+        <li><a href="https://video.choozmo.com/register.html" class="signup-link">註冊</a></li>
+      </ul>
       <!-- <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <li class="nav-item">
           <a class="nav-link active" aria-current="page" href="#">Home</a>
@@ -68,9 +72,5 @@
         <button class="btn btn-outline-success" type="submit">Search</button>
       </form> -->
     </div>
-    <ul class="nav navbar-nav navbar-right ms-auto">
-      <li><a href="https://video.choozmo.com/login.html" class="signin-link">登入</a></li>
-      <li><a href="https://video.choozmo.com/register.html" class="signup-link">註冊</a></li>
-    </ul>
   </div>
 </nav>

layouts/partials/navbar.html

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-light fixed-top">
-  <div class="container-fluid justify-content-start">
+  <div class="container-fluid justify-content-between justify-content-lg-start">
     <a class="navbar-brand" href="/">
       <img src="https://ai.choozmo.com/img/Choozmo%20cloud%20logo.png" alt="" width="180" height="48"
         class="d-inline-block align-text-top">
@@ -8,7 +8,7 @@
       aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="collapse navbar-collapse" id="navbarNav">
+    <div class="collapse navbar-collapse w-100" id="navbarNav">
       <ul class="navbar-nav">
         <li class="nav-item">
           <a class="nav-link active" aria-current="page" href="/">首頁</a>
@@ -56,10 +56,11 @@
           <a class="nav-link" href="/aboutus/info/">關於我們</a>
         </li>
       </ul>
+
+      <ul class="nav navbar-nav navbar-right flex-row ms-auto my-3 my-lg-0">
+        <li><a href="https://video.choozmo.com/login.html" class="signin-link">登入</a></li>
+        <li><a href="https://video.choozmo.com/register.html" class="signup-link">註冊</a></li>
+      </ul>
     </div>
-    <ul class="nav navbar-nav navbar-right ms-auto">
-      <li><a href="https://video.choozmo.com/login.html" class="signin-link">登入</a></li>
-      <li><a href="https://video.choozmo.com/register.html" class="signup-link">註冊</a></li>
-    </ul>
   </div>
 </nav>

layouts/video-making/single.html

@@ -79,31 +79,31 @@
       </div>
     </section>
     <!-- <section class="category container text-center img-block">
-            <div class="row row-cols-1 row-cols-md-2">
-                <div class="col my-auto">
-                  <h4>{{ .Params.block2_title }}</h4>
-                  <strong>{{ .Params.block2_strong }}</strong>
-                  <p>{{ .Params.block2_text | markdownify }}</p>
-                </div>
-                <div class="col position-relative">
-                  <img class="img-block-img" src="{{ .Params.block2_img }}" alt="">
-                  <img class="img-block-linecir right" src="/imgs/裝飾圓.webp" alt="">
-              </div>
-            </div>
-          </section>
-          <section class="category container text-center img-block">
-            <div class="row row-cols-1 row-cols-md-2">
-                <div class="col position-relative">
-                    <img class="img-block-img" src="{{ .Params.block3_img }}" alt="">
-                    <img class="img-block-linecir left" src="/imgs/裝飾圓.webp" alt="">
-                </div>
-                <div class="col my-auto">
-                  <h4>{{ .Params.block3_title }}</h4>
-                  <strong>{{ .Params.block3_strong }}</strong>
-                  <p>{{ .Params.block3_text | markdownify }}</p>
-                </div>
-            </div>
-          </section> -->
+      <div class="row row-cols-1 row-cols-md-2">
+        <div class="col my-auto">
+          <h4>{{ .Params.block2_title }}</h4>
+          <strong>{{ .Params.block2_strong }}</strong>
+          <p>{{ .Params.block2_text | markdownify }}</p>
+        </div>
+        <div class="col position-relative">
+          <img class="img-block-img" src="{{ .Params.block2_img }}" alt="">
+          <img class="img-block-linecir right" src="/imgs/裝飾圓.webp" alt="">
+        </div>
+      </div>
+    </section>
+    <section class="category container text-center img-block">
+      <div class="row row-cols-1 row-cols-md-2">
+        <div class="col position-relative">
+          <img class="img-block-img" src="{{ .Params.block3_img }}" alt="">
+          <img class="img-block-linecir left" src="/imgs/裝飾圓.webp" alt="">
+        </div>
+        <div class="col my-auto">
+          <h4>{{ .Params.block3_title }}</h4>
+          <strong>{{ .Params.block3_strong }}</strong>
+          <p>{{ .Params.block3_text | markdownify }}</p>
+        </div>
+      </div>
+    </section> -->
     <section class="category container text-center img-block">
       <div class="row row-cols-1 row-cols-md-2">
         <div class="col my-auto pt-3 pt-md-0">

static/css/style.css

@@ -13,6 +13,27 @@
   flex-grow: 0;
 }
 
+.navbar-nav .nav-item {
+  margin: 0 3px;
+}
+.navbar-nav .dropdown-menu {
+  padding: 0;
+  top: 138%;
+}
+.navbar-nav .dropdown-menu .dropdown-item {
+  font-size: 14px;
+  padding: 8px 20px;
+  border-bottom: 1px solid #eeeeee;
+  color: #999999;
+}
+.navbar-nav .dropdown-menu .dropdown-item:active {
+  background-color: #fff;
+}
+.navbar-nav .dropdown-menu .dropdown-item:hover {
+  color: #EA5413;
+  background-color: #fff;
+  padding: 8px 18px 8px 23px;
+}
 .navbar-nav .signin-link {
   padding: 8px 18px;
   text-decoration: none;
@@ -23,7 +44,7 @@
 }
 .navbar-nav .signup-link {
   padding: 8px 18px;
-  margin: 13px 10px;
+  margin: 13px;
   text-decoration: none;
   color: #fff;
   font-weight: 400;
@@ -2065,10 +2086,13 @@
   font-weight: bold;
   letter-spacing: 5px;
 }
+#ad-operation .header-right-cir {
+  right: -15%;
+  top: 30%;
+}
 #ad-operation .img-content {
   display: flex;
   justify-content: center;
-  margin: -550px auto 0;
   position: relative;
   z-index: 100;
   width: 1300px;

static/css/style.scss

@@ -13,6 +13,27 @@
 }
 
 .navbar-nav {
+  .nav-item {
+    margin: 0 3px;
+  }
+  .dropdown-menu {
+    padding: 0;
+    top: 138%;
+    .dropdown-item {
+      font-size: 14px;
+      padding: 8px 20px;
+      border-bottom: 1px solid #eeeeee;
+      color: #999999;
+      &:active {
+        background-color: #fff;
+    }
+    &:hover {
+      color: #EA5413;
+      background-color: #fff;
+      padding: 8px 18px 8px 23px;
+  }
+    }
+  }
   .signin-link {
     padding: 8px 18px;
     text-decoration: none;
@@ -23,7 +44,7 @@
   }
   .signup-link {
     padding: 8px 18px;
-    margin: 13px 10px;
+    margin: 13px;
     text-decoration: none;
     color: #fff;
     font-weight: 400;
@@ -32,9 +53,9 @@
     background-color: #ea5413;
   }
   a {
-    transition: all .3s;
+    transition: all 0.3s;
     &:hover {
-      opacity: .8;
+      opacity: 0.8;
     }
   }
 }
@@ -1978,10 +1999,15 @@
     letter-spacing: 5px;
   }
 
+  .header-right-cir {
+    right: -15%;
+    top: 30%;
+  }
+
   .img-content {
     display: flex;
     justify-content: center;
-    margin: -550px auto 0;
+    // margin: -550px auto 0;
     position: relative;
     z-index: 100;
     width: 1300px;