Merge pull request #85 from liuboaibc/update/update-header

update header
2025-12-26 00:12:48 +00:00 · 2020-06-23 14:53:48 +08:00 · 2020-06-23 14:53:48 +08:00 · c853bc7879
parent b18ede0223 bbc9b04cb4
commit c853bc7879
26 changed files with 153 additions and 92 deletions
--- a/assets/scss/common.scss
+++ b/assets/scss/common.scss
@ -23,6 +23,10 @@ section {
  }
 }

+.padding {
+  padding-top: 40px;
+}
+
 .common-layout {
  width: 1160px;
  margin: 0 auto;
--- a/assets/scss/content.scss
+++ b/assets/scss/content.scss
@ -6,10 +6,9 @@
 }

 .main-section {
-  padding-top: 93px;
-
  & > div {
    position: relative;
+    padding-top: 93px;

    .breadcrumb {
      margin: 30px 0;
--- a/assets/scss/header.scss
+++ b/assets/scss/header.scss
@ -5,17 +5,51 @@
  top: 0;
  left: 0;
  right: 0;
-  height: 93px;
  color: #ffffff;
  border-bottom:  1px solid rgba($color: #e3e9ef, $alpha: 0.4);
  background-image: linear-gradient(to top, rgba(23, 188, 133, 0.18), rgba(0, 169, 113, 0.18));
+ 
+  .join-div {
+    padding: 10px 0;
+    background-image: linear-gradient(to left, #e7d44e 100%, #ecaf24 0%);
+    .content {
+      position: relative;
+      width: 900px;
+      margin: 0 auto;
+      text-align: center;
+      line-height: 20px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #3d3e49;
+      @media only screen and (max-width: $mobile-max-width) {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0 40px;
+      }

-  @media only screen and (max-width: $mobile-max-width) {
-    height: 74px;
+      a {
+        color: #3d3e49;
+
+        &:hover {
+          color: #55bc8a;
+        }
+      }
+
+      img {
+        position: absolute;
+        top: 50%;
+        right: 10px;
+        transform: translateY(-50%);
+        cursor: pointer;
+      }
+    }
  }

-  .common-layout {
-    height: 100%;
+  & > .common-layout {
+    height: 93px;
+    @media only screen and (max-width: $mobile-max-width) {
+      height: 74px;
+    }
  }

  .header-container {
--- a/config/upstream-zh/config.toml
+++ b/config/upstream-zh/config.toml
@ -1 +1,2 @@
 baseURL = "https://kubesphere.com.cn"
+defaultContentLanguage = "zh"
--- a/layouts/404.html
+++ b/layouts/404.html
@ -1,9 +1,9 @@
 {{ define "main" }}
 <section class="section-1">
-    <img class="img-1" data-src="/images/404/combined-shape.svg" alt="icon">
-    <img class="img-2" data-src="/images/404/fill.svg" alt="background image">
+    <img class="img-1" src="/images/404/combined-shape.svg" alt="icon">
+    <img class="img-2" src="/images/404/fill.svg" alt="background image">
    <div class="common-layout">
-        <img data-src="/images/404/404.png" alt="404 image">
+        <img src="/images/404/404.png" alt="404 image">
        <p>{{ i18n "We can’t find the page that you’re looking for :(" }}</p>
        <a href="{{ site.Home.RelPermalink }}">
            <button>{{ i18n "Go To Home" }}</button>
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -4,7 +4,7 @@

 <body>
 {{- partial "header.html" . -}}
-<main class="main-section">
+<main class='main-section {{ if eq .Site.Language.Lang "zh"}} padding{{ end }}'>
    {{- block "main" . }}{{- end }}
 </main>
 {{- partial "footer.html" . -}}
--- a/layouts/_default/scenario.html
+++ b/layouts/_default/scenario.html
@ -9,9 +9,9 @@
 {{ end }}

 <section class="section-img">
-  <img class="common-layout" data-src="{{ .Params.image }}" alt="{{ .Title }}">
+  <img class="common-layout" src="{{ .Params.image }}" alt="{{ .Title }}">
  {{ if .Params.bg }}
-  <img class="bg" data-src="{{ .Params.bg }}" alt="">
+  <img class="bg" src="{{ .Params.bg }}" alt="">
  {{ end }}
 </section>

@ -35,7 +35,7 @@
          </ul>
          {{ end }}
        </div>
-        <img data-src="{{ .image }}" alt="{{ .title }}">
+        <img src="{{ .image }}" alt="{{ .title }}">
      </li>
      {{ end }}
    </ul>
@ -45,8 +45,8 @@

 <section class="section-3">
  {{ with .Params.section3 }}
-  <img class="bg-left" data-src="{{ .bgLeft }}" alt="{{ i18n "background image" }}">
-  <img class="bg-right" data-src="{{ .bgRight }}" alt="{{ i18n "background image" }}">
+  <img class="bg-left" src="{{ .bgLeft }}" alt="{{ i18n "background image" }}">
+  <img class="bg-right" src="{{ .bgRight }}" alt="{{ i18n "background image" }}">
  <div class="common-layout">
    <h2 class="title-black-h2">{{ .title }}</h2>
    {{ if .videoLink }}
@ -60,7 +60,7 @@
        allowfullscreen>
    </iframe>
    {{ else }}
-    <img data-src="{{ .image }}" alt="">
+    <img src="{{ .image }}" alt="">
    {{ end }}
    <p class="common-p">{{ .content }}</p>
    <a href="{{ .link }}"><button class="common-btn">{{ .btnContent }}</button></a>
--- a/layouts/blogs/list.html
+++ b/layouts/blogs/list.html
@ -17,7 +17,7 @@
            {{ range .Data.Pages }}
            <li data-tag='{{ .Params.tag }}'>
                <div class='img-div'>
-                    <img data-src="{{ .Params.snapshot }}" alt="{{ .Title }}">
+                    <img src="{{ .Params.snapshot }}" alt="{{ .Title }}">
                </div>
                <div class='content-div'>
                    <p class='time'>{{ .Params.createTime }}</p>
--- a/layouts/blogs/single.html
+++ b/layouts/blogs/single.html
@ -10,7 +10,7 @@

 <body>
 {{- partial "header.html" . -}}
-<section class="main-section">
+<section class="main-section {{ if eq .Site.Language.Lang "zh"}} padding{{ end }}">
    <div class="common-layout">
        <div class='breadcrumb'>
            <span><a href='{{ "blogs" | relLangURL }}'>{{ i18n "introduction1"}}</a> > </span>
--- a/layouts/case/list.html
+++ b/layouts/case/list.html
@ -15,7 +15,7 @@
    <ul class="cases-ul common-layout">
        {{ range .caseList }}
            <li>
-                <img data-src="{{ .icon | relURL }}" alt="{{ .content }}">
+                <img src="{{ .icon | relURL }}" alt="{{ .content }}">
                <p class="title-p">{{ .content }}</p>
                <div>
                    <a class="common-green-a" href="{{ .link }}">{{ $tip }}</a>
@ -23,7 +23,7 @@
            </li>
        {{ end }}
    </ul>
-    <img data-src="{{ .icon | relURL }}" alt="{{ i18n "icon" }}">
+    <img src="{{ .icon | relURL }}" alt="{{ i18n "icon" }}">
    {{ end }}
 </section>

@ -42,7 +42,7 @@
            {{ $name := .name }}
            {{ range .children }}
            <li data-name="{{ $name }}">
-                <img data-src="{{ .icon | relURL }}" alt="{{ .name }}">
+                <img src="{{ .icon | relURL }}" alt="{{ .name }}">
            </li>
            {{ end }}
            {{ end }}
@ -51,7 +51,7 @@
        <p>{{ .content }} <a class="common-green-a" href="{{ .link }}">{{ .linkContent }}</a></p>
        {{ end }}
    </div>
-    <img data-src="{{ .icon | relURL }}" alt="{{ i18n "icon" }}">
+    <img src="{{ .icon | relURL }}" alt="{{ i18n "icon" }}">
    {{ end }}
 </section>
 <script>
--- a/layouts/case/single.html
+++ b/layouts/case/single.html
@ -14,7 +14,7 @@
  <div class="common-layout">
    <div>
      {{ with .rightPart}}
-      <img data-src="{{ .icon }}" alt="">
+      <img src="{{ .icon }}" alt="">
      <ul class='ul-right'>
        {{ range .list }}
        <li>
@ -40,7 +40,7 @@
        <div>
          <p class='p1'>{{ .content }}</p>
          <p class='p2'>{{ .author }}</p>
-          <img data-src="/images/case/ic-quote-right.svg" alt="">
+          <img src="/images/case/ic-quote-right.svg" alt="">
        </div>
        {{ else }}
          <h2>{{ .title }}</h2>
@ -48,14 +48,14 @@
          <p>{{ .content }}</p>
          {{ end }}
          {{ if .image }}
-          <img data-src="{{ .image }}" alt="">
+          <img src="{{ .image }}" alt="">
          {{ end }}
        {{ end }}
      </li>
      {{ end }}
    </ul>
  </div>
-  <img data-src="/images/common/hexagon.svg" alt="">
+  <img src="/images/common/hexagon.svg" alt="">
  {{ end }}
 </section>
 {{ end }}
--- a/layouts/conferences/list.html
+++ b/layouts/conferences/list.html
@ -8,10 +8,10 @@
                {{ range .Params.list }}
                <li>
                    <div class='top-div'>
-                        <img class='left-img' data-src="{{ .bg | relURL }}" alt="{{ .name }}">
+                        <img class='left-img' src="{{ .bg | relURL }}" alt="{{ .name }}">
                        <h3>{{ .name }}</h3>
                        <p>{{ .content }}</p>
-                        <img class='right-img' data-src="{{  .icon | relURL }}" alt="{{ .name }}">
+                        <img class='right-img' src="{{  .icon | relURL }}" alt="{{ .name }}">
                    </div>
                    <ul>
                        {{ range .children }}
@ -21,7 +21,7 @@
                            <p>{{ .summary }}</p>
                            <div class='line'></div>
                            <a href="{{ .link }}"><button>{{ $viewDetail }}</button></a>
-                            <img data-src="{{ .image | relURL }}" alt="{{ .name }}">
+                            <img src="{{ .image | relURL }}" alt="{{ .name }}">
                        </li>
                        {{ end }}
                    </ul>
--- a/layouts/conferences/single.html
+++ b/layouts/conferences/single.html
@ -10,7 +10,7 @@

 <body>
 {{- partial "header.html" . -}}
-<section class="main-section">
+<section class="main-section {{ if eq .Site.Language.Lang "zh"}} padding{{ end }}">
    <div class="common-layout">
        <div class='breadcrumb'>
            <span><a href='{{ "conferences" | relLangURL }}'>{{ i18n "introduction4"}}</a> > </span>
--- a/layouts/contribution/list.html
+++ b/layouts/contribution/list.html
@ -16,7 +16,7 @@
        {{ range .topType }}
            <li>
                <div class='title'>
-                    <img data-src="{{ .icon1 | relURL }}" alt="{{ .name }}">
+                    <img src="{{ .icon1 | relURL }}" alt="{{ .name }}">
                    <p>{{ .name }}</p>
                </div>
                <div class='line'></div>
@ -27,7 +27,7 @@
                    </li>
                    {{ end }}
                </ul>
-                <img class='bottom-img' data-src="{{ .icon2 | relURL }}" alt="{{ i18n "background image"}}">
+                <img class='bottom-img' src="{{ .icon2 | relURL }}" alt="{{ i18n "background image"}}">
            </li>
        {{ end }}
        </ul>
@ -37,19 +37,19 @@
            <h2 class="title-black-h2">{{ .topic }}</h2>
            <div>
                <div class='top-div'>{{ .name }}</div>
-                <img data-src="{{ .icon | relURL }}" alt="{{ .name }}">
+                <img src="{{ .icon | relURL }}" alt="{{ .name }}">
                <ul class="common-flex-layout">
                    {{ range $index, $element := .type }}
                    <li>
                        <div>
-                            <img data-src="{{ .icon | relURL }}" alt="{{ .name }}">
+                            <img src="{{ .icon | relURL }}" alt="{{ .name }}">
                            <span>{{ .name }}</span>
                        </div>
                        {{ if .children }}
                        <ul>
                            {{ range .children }}
                            <li class="">
-                                <img data-src="{{ $topIcon | relURL }}" alt="{{ .name }}">
+                                <img src="{{ $topIcon | relURL }}" alt="{{ .name }}">
                                <div>{{ .name }}</div>
                                {{ if eq $index 1}}
                                <p class='left'>{{ .content }}</p>
@ -85,7 +85,7 @@
            {{ $icon = $element.iconActive }}
            {{ end }}
            <li class="{{ $active }}" data-info='{{ . | jsonify }}' data-index='{{ $index }}'>
-                <img data-src="{{ $icon | relURL }}" alt="{{ .name }}">
+                <img src="{{ $icon | relURL }}" alt="{{ .name }}">
                <p>{{ $element.name }}</p>
            </li>
            {{ end }}
@ -95,7 +95,7 @@
        {{ with $first := index .children 0}}
        <div>
            <div class='btn-change btn-left' data-num='-1'></div>
-            <img class='bottom-img' data-src="{{ .iconActive | relURL }}" alt="">
+            <img class='bottom-img' src="{{ .iconActive | relURL }}" alt="">
            <div class='btn-change btn-right' data-num='1'></div>
        </div>
        <a class="common-green-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .linkContent }}</a>
@ -103,7 +103,7 @@
        <ul>
            {{ range .children }}
            <li>
-                <img data-src="{{ .icon | relURL }}" alt="">
+                <img src="{{ .icon | relURL }}" alt="">
            </li>
            {{ end }}
        </ul>
@ -114,12 +114,12 @@

 <section class='section-4'>
    {{ with .Params.section4.involved }}
-    <img data-src="/images/contribution/involve-bg.jpg" alt="{{ i18n "background image" }}">
+    <img src="/images/contribution/involve-bg.jpg" alt="{{ i18n "background image" }}">
    <h2 class="title-white-h2 ">{{ .title }}</h2>
    <div  class="common-flex-layout">
        {{ range .children}}
        <div>
-            <img data-src="{{ .icon | relURL }}" alt="{{ .title }}">
+            <img src="{{ .icon | relURL }}" alt="{{ .title }}">
            <h3 class="title-white-h3">{{ .title }}</h3>
            <p class="common-center-p">{{ .content }}</p>
            <div>
@ -139,7 +139,7 @@
        <ul>
            {{ range .list }}
            <li>
-                <img data-src="{{ .icon }}" alt="{{ $alt }}">
+                <img src="{{ .icon }}" alt="{{ $alt }}">
            </li>
            {{ end }}
        </ul>
--- a/layouts/contribution/request.html
+++ b/layouts/contribution/request.html
@ -19,7 +19,7 @@
 </section>

 <section class='section-4' style="min-height: 445px; padding-bottom: 0;">
-  <img data-src="/images/contribution/involve-bg.jpg" alt="">
+  <img src="/images/contribution/involve-bg.jpg" alt="">
 </section>

 {{ end }}
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@ -16,7 +16,7 @@
 </head>
 <body>
    <header>
-        <a href="{{ site.Home.RelPermalink }}"><img data-src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
+        <a href="{{ site.Home.RelPermalink }}"><img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
        <div class="header-div">
            <h1>{{ i18n "introduction8" }}</h1>
            <p>{{ i18n "introduction9" }}</p>
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@ -20,7 +20,7 @@
    </div>
    <div class="middle-div">
        <div class="header-div">
-            <a href="{{ site.Home.RelPermalink }}"><img data-src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
+            <a href="{{ site.Home.RelPermalink }}"><img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
        </div>
        <div class="content-div">
            <div class="md-body">
--- a/layouts/index.html
+++ b/layouts/index.html
@ -2,9 +2,9 @@
 {{ $data := index .Site.Data .Site.Language.Lang }}
 <section class='section-1'>
  {{ with .Params.section1 }}
-  <img class='img1' data-src="/images/home/bg.jpg" alt="{{ i18n "background image"}}">
-  <img class='img2' data-src="/images/home/12-3.png" alt="{{ i18n "background image"}}">
-  <img class='img3' data-src="/images/home/2.svg" alt="{{ i18n "background image"}}">
+  <img class='img1' src="/images/home/bg.jpg" alt="{{ i18n "background image"}}">
+  <img class='img2' src="/images/home/12-3.png" alt="{{ i18n "background image"}}">
+  <img class='img3' src="/images/home/2.svg" alt="{{ i18n "background image"}}">
  <div class="common-layout">
    <div>
      <p class='p1'>{{ .title | safeHTML }}</p>
@ -17,9 +17,9 @@
        <button class='btn2 common-btn'>{{ .btnContent2 }}</button>
      </a>
    </div>
-    <img class='img1' data-src="/images/home/53.png" alt="{{ i18n "kubesphere console screenshot"}}">
-    <img class='img2' data-src="/images/home/left.svg" alt="{{ i18n "background image"}}">
-    <img class='img4' data-src="/images/home/46.svg" alt="{{ i18n "background image"}}">
+    <img class='img1' src="/images/home/53.png" alt="{{ i18n "kubesphere console screenshot"}}">
+    <img class='img2' src="/images/home/left.svg" alt="{{ i18n "background image"}}">
+    <img class='img4' src="/images/home/46.svg" alt="{{ i18n "background image"}}">
  </div>
  {{ end }}
 </section>
@ -64,7 +64,7 @@
          <li>{{ .content | safeHTML }}</li>
          {{ end }}
        </ul>
-        <img data-src="{{ .icon | relURL }}" alt="{{ .name }}">
+        <img src="{{ .icon | relURL }}" alt="{{ .name }}">
      </div>
      {{ end }}

@ -75,8 +75,8 @@

 <section class='section-4'>
  {{ with .Params.section4 }}
-  <img class='bg-1' data-src="/images/home/section4-left.png" alt="{{ i18n "background image"}}">
-  <img class='bg-2' data-src="/images/home/section4-right.svg" alt="{{ i18n "background image"}}">
+  <img class='bg-1' src="/images/home/section4-left.png" alt="{{ i18n "background image"}}">
+  <img class='bg-2' src="/images/home/section4-right.svg" alt="{{ i18n "background image"}}">
  <div class="common-layout">
    <div>
      <h2>{{ .title }}</h2>
@ -84,7 +84,7 @@
      <ul>
        {{ range .children }}
        <li>
-          <img data-src="{{ .icon }}" alt="{{ .name }}">
+          <img src="{{ .icon }}" alt="{{ .name }}">
          <div>
            <h3 class="title-white-h3">{{ .name }}</h3>
            <p class="common-p">{{ .content | safeHTML }}</p>
@ -100,7 +100,7 @@
        <div>
          <div class='top-line {{ .color }}'></div>
          <div class='img-span-div'>
-            <img class="common-middle-inline" data-src="{{ .icon }}" alt="{{ .name }}">
+            <img class="common-middle-inline" src="{{ .icon }}" alt="{{ .name }}">
            <span class="common-middle-inline">{{ .name }}</span>
          </div>
          <p class="common-p">{{ .content | safeHTML }}</p>
@ -131,7 +131,7 @@
        <ul>
          {{ range .children }}
          <li>
-            <img data-src="{{ .icon }}" alt="{{ $alt }}">
+            <img src="{{ .icon }}" alt="{{ $alt }}">
          </li>
          {{ end }}
        </ul>
@ -149,8 +149,8 @@
          </ul>
        </div>
        <div class='image'>
-          <img data-src="/images/home/applications.png" alt="{{ .project }}">
-          <img data-src="/images/home/applications.png" alt="{{ .project }}">
+          <img src="/images/home/applications.png" alt="{{ .project }}">
+          <img src="/images/home/applications.png" alt="{{ .project }}">
        </div>
      </div>
      {{ end }}
@ -168,7 +168,7 @@
      {{ $alt := .title }}
      {{ range .children }}
      <li>
-        <img data-src="{{ .icon }}" alt="{{ $alt }}}">
+        <img src="{{ .icon }}" alt="{{ $alt }}">
      </li>
      {{ end }}
    </ul>
@ -181,12 +181,12 @@
    <a class='join-div' href="{{ .joinLink }}">
      <p class='p1'>{{ .joinTitle }}</p>
      <p class='p2'>{{ .joinContent }}</p>
-      <img data-src="/images/home/join-right.svg" alt="{{ i18n "background image"}}">
+      <img src="/images/home/join-right.svg" alt="{{ i18n "background image"}}">
    </a>
-    <img class='bottom-img' data-src="{{ .image }}" alt="cncf">
+    <img class='bottom-img' src="{{ .image }}" alt="cncf">
  </div>
-  <img class='bg-1' data-src="/images/home/section6-left.svg" alt="{{ i18n "icon" }}">
-  <img class='bg-2' data-src="/images/home/section6-right.svg" alt="{{ i18n "icon" }}">
+  <img class='bg-1' src="/images/home/section6-left.svg" alt="{{ i18n "icon" }}">
+  <img class='bg-2' src="/images/home/section6-right.svg" alt="{{ i18n "icon" }}">
  {{ end }}
 </section>

--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -4,7 +4,7 @@
        <div class="footer-main common-layout">
            <div class="up-main">
                <div class="left-div">
-                    <img data-src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="foot-logo">
+                    <img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="foot-logo">
                    <p>{{ i18n "introduction7" }}</p>
                    <div>
                        <form 
@ -45,7 +45,7 @@
                        {{ "/static/images/footer/wechat.svg" | readFile | safeHTML }}
                        <div class="hide-div">
                            <p>Follow the official account</p>
-                            <img data-src="/images/footer/wechat_code.svg" alt="">
+                            <img src="/images/footer/wechat_code.svg" alt="">
                        </div>
                    </a>
                    <!-- <a class='wechat' href="javascript:void(0);">
@ -111,7 +111,7 @@
                continue
            }
            if (img.offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
-                var src = img.attr("data-src")
+                var src = img.attr("src")
                img.attr("src", src)
                img.attr("data-loaded", true)
            }
@ -127,7 +127,7 @@
        });
    }

-    bindLayLoad()
+    // bindLayLoad()
    bindSubmit()
    bindHideMessage()
 </script>
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -1,9 +1,18 @@
 <!-- Header Start -->
 <header class="navigation">
+    {{ if eq .Site.Language.Lang "zh"}}
+    <div class="join-div">
+        <div class="content">
+            👏 6 月 30 日 KubeSphere 3.0 发布会！带你一键解锁容器混合云！
+            <a href="https://datayi.cn/w/1P6jWZmP" target="_blank" rel="noopener noreferrer">免费报名线上直播 →</a>
+            <img id="close-join" src="/images/header/close.svg" alt="close">
+        </div>
+    </div>
+    {{ end }}
    <div class="common-layout">
        <div class="header-container">
            <a href="{{ site.Home.RelPermalink }}">
-                <img data-src="/images/header/logo.svg" alt="{{ .Site.Title }}" class="logo">
+                <img src="/images/header/logo.svg" alt="{{ .Site.Title }}" class="logo">
            </a>

            <ul class="nav">
@ -49,7 +58,7 @@
                <ul>
                    <li class="language-menu">
                        <div>
-                            <img data-src="/images/header/black.svg" alt="">
+                            <img src="/images/header/black.svg" alt="">
                            <span>{{ .Site.Language.LanguageName }}</span>
                        </div>
                        <ul class="dropdown-menu">
@ -74,7 +83,7 @@
                        <a class='link-3' href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer"></a>
                    </li>
                    <li class="menu-icon">
-                        <img data-src="/images/header/menu.svg" alt="">
+                        <img src="/images/header/menu.svg" alt="">
                    </li>
                </ul>
            </div>
@ -118,13 +127,13 @@
        </div>
        <div class="link-div">
            <a href="{{ .Site.Params.slackLink }}" target="_blank" rel="noopener noreferrer">
-                <img data-src="/images/header/slack-hover.svg" alt="">
+                <img src="/images/header/slack-hover.svg" alt="">
            </a>
            <a href="{{ .Site.Params.twitterLink }}" target="_blank" rel="noopener noreferrer">
-                <img data-src="/images/header/twitter-hover.svg" alt="">
+                <img src="/images/header/twitter-hover.svg" alt="">
            </a>
            <a href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer">
-                <img data-src="/images/header/github-hover.svg" alt="">
+                <img src="/images/header/github-hover.svg" alt="">
            </a>
        </div>
    </div>
@ -179,6 +188,15 @@ var bindClickModalLi = function() {
    }) 
 }

+var bindClickClose = function() {
+    $('#close-join').click(function() {
+        $('.navigation .join-div').hide()
+        $('.main-section').removeClass('padding')
+    })
+}
+
+bindClickClose()
+
 bindScrollChangeHeader()

 bindNavMouseEvent('.header-container .menu-li')
--- a/layouts/partials/openSource.html
+++ b/layouts/partials/openSource.html
@ -20,7 +20,7 @@
    {{ $menus := (index .Site.Menus.main 1).Children }}
    {{ range $menus }}
    <li class="">
-      <a {{ if eq $section .URL }} class="active"{{ end }} href="{{ .URL | relLangURL }}">{{ .Name }}</a>
+      <a {{ if hasPrefix .URL $section }} class="active"{{ end }} href="{{ .URL | relLangURL }}">{{ .Name }}</a>
    </li>
    {{ end }}
  </ul>
--- a/layouts/partner/list.html
+++ b/layouts/partner/list.html
@ -15,32 +15,32 @@
        <div class="left-div">
            <div class="common-content">{{ .title }}</div>
            <p class="common-p">{{ .content }}</p>
-            <img class='img-1' data-src="{{ .bg2 | relURL }}" alt="{{ i18n "icon" }}">
-            <img class='img-2' data-src="{{ .bg3 | relURL }}" alt="{{ i18n "icon" }}">
+            <img class='img-1' src="{{ .bg2 | relURL }}" alt="{{ i18n "icon" }}">
+            <img class='img-2' src="{{ .bg3 | relURL }}" alt="{{ i18n "icon" }}">
        </div>
        <div class="right-div">
-            <img data-src="{{ .mapImage | relURL }}" alt="{{ .title }}">
+            <img src="{{ .mapImage | relURL }}" alt="{{ .title }}">
            <div class='btn-div div-1'>
                <p>{{ .name1 }}</p>
                <div>
-                    <img data-src="{{ .icon1 | relURL }}" alt="{{ .name1 }}">
+                    <img src="{{ .icon1 | relURL }}" alt="{{ .name1 }}">
                </div>
            </div>
            <div class='btn-div div-2'>
                <p>{{ .name2 }}</p>
                <div>
-                    <img data-src="{{ .icon2 | relURL }}" alt="{{ .name2 }}">
+                    <img src="{{ .icon2 | relURL }}" alt="{{ .name2 }}">
                </div>
            </div>
            <div class='btn-div div-3'>
                <p>{{ .name3 }}</p>
                <div>
-                    <img data-src="{{ .icon3 | relURL }}" alt="{{ .name3 }}">
+                    <img src="{{ .icon3 | relURL }}" alt="{{ .name3 }}">
                </div>
            </div>
        </div>
    </div>
-    <img data-src="{{ .bg1 | relURL }}" alt="{{ i18n "icon" }}">
+    <img src="{{ .bg1 | relURL }}" alt="{{ i18n "icon" }}">
    {{ end }}
 </section>

@ -71,7 +71,7 @@
        <ul class="partner-ul">
            {{ range .featuredPartnerList }}
                <li>
-                    <img data-src="{{ .icon | relURL }}" alt="{{ .content }}">
+                    <img src="{{ .icon | relURL }}" alt="{{ .content }}">
                    <div class='type'>{{ .partnerType }}</div>
                    <div class='content'>{{ .content }}</div>
                </li>
--- a/layouts/partner/request.html
+++ b/layouts/partner/request.html
@ -15,32 +15,32 @@
        <div class="left-div">
            <div class="common-content">{{ .title }}</div>
            <p class="common-p">{{ .content }}</p>
-            <img class='img-1' data-src="{{ .bg2 | relURL }}" alt="">
-            <img class='img-2' data-src="{{ .bg3 | relURL }}" alt="">
+            <img class='img-1' src="{{ .bg2 | relURL }}" alt="">
+            <img class='img-2' src="{{ .bg3 | relURL }}" alt="">
        </div>
        <div class="right-div">
-            <img data-src="{{ .mapImage | relURL }}" alt="">
+            <img src="{{ .mapImage | relURL }}" alt="">
            <div class='btn-div div-1'>
                <p>{{ .name1 }}</p>
                <div>
-                    <img data-src="{{ .icon1 | relURL }}" alt="">
+                    <img src="{{ .icon1 | relURL }}" alt="">
                </div>
            </div>
            <div class='btn-div div-2'>
                <p>{{ .name2 }}</p>
                <div>
-                    <img data-src="{{ .icon2 | relURL }}" alt="">
+                    <img src="{{ .icon2 | relURL }}" alt="">
                </div>
            </div>
            <div class='btn-div div-3'>
                <p>{{ .name3 }}</p>
                <div>
-                    <img data-src="{{ .icon3 | relURL }}" alt="">
+                    <img src="{{ .icon3 | relURL }}" alt="">
                </div>
            </div>
        </div>
    </div>
-    <img data-src="{{ .bg1 | relURL }}" alt="">
+    <img src="{{ .bg1 | relURL }}" alt="">
    {{ end }}
 </section>

--- a/layouts/projects/list.html
+++ b/layouts/projects/list.html
@ -17,7 +17,7 @@
                {{ $name := .name }}
                {{ range .children }}
                <li data-name="{{ $name }}">
-                    <img data-src="{{ .icon | relURL }}" alt="{{ .title }}">
+                    <img src="{{ .icon | relURL }}" alt="{{ .title }}">
                    <a href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .title }}</a>
                    <p>{{ .description }}</p>
                    <div>
--- a/layouts/videos/list.html
+++ b/layouts/videos/list.html
@ -98,7 +98,7 @@
    }

    var createVideoLi = function(video) {
-        var img = '<img data-src="' + video.snapshot + '" alt="background image">'
+        var img = '<img src="' + video.snapshot + '" alt="background image">'
        var button = '<img class="btn" src="/images/videos/play.svg" alt="play button">'
        var title = '<h3>' + video.title + '</h3>'
        var group = '<p>' + video.group + '</p>'
--- a/static/images/header/close.svg
+++ b/static/images/header/close.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <g fill="none">
+        <path fill="#3D3E49" d="M6.834 6.138l4.398-4.398c.222-.222.222-.588 0-.81l-.024-.024c-.222-.222-.588-.222-.81 0L6 5.31 1.602.906c-.222-.222-.588-.222-.81 0L.768.93c-.228.222-.228.588 0 .81l4.398 4.398-4.398 4.398c-.222.222-.222.588 0 .81l.024.024c.222.222.588.222.81 0L6 6.972l4.398 4.398c.222.222.588.222.81 0l.024-.024c.222-.222.222-.588 0-.81L6.834 6.138z"/>
+    </g>
+</svg>