[incubator-streampark-website] branch dev updated: style: footer wechat (#142)

[be...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

benjobs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampark-website.git


The following commit(s) were added to refs/heads/dev by this push:
     new 011bcc63 style: footer wechat (#142)
011bcc63 is described below

commit 011bcc630e9fa2b49546e11ec3d0029f3585c0a5
Author: WangSizhu0504 <39...@users.noreply.github.com>
AuthorDate: Thu Sep 22 10:58:22 2022 +0800

    style: footer wechat (#142)
    
    * style: footer wechat
    
    * fix: footer wechat
---
 docusaurus.config.js |  7 ++++++-
 src/css/custom.css   | 30 +++++++++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 4d9b3841..de18e4d8 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -253,7 +253,12 @@ const config = {
                       </div>
                     </div>
                     <ul class="icon-bottom">
-                        <li><a href="javascript:void(0)"><i class="fa fa-wechat"></i></a></li>
+                        <li>
+                          <a href="javascript:void(0)">
+                            <i class="fa fa-wechat"></i>
+                            <div class="wechat-dropdown"><img src="/image/join_wechat.png" alt="weChat"></div>
+                          </a>
+                        </li>
                         <li><a href="javascript:void(0)"><i class="fa fa-twitter"></i></a></li>
                         <li><a href="javascript:void(0)"><i class="fa fa-slack"></i></a></li>
                         <li><a href="javascript:void(0)"><i class="fa fa-facebook"></i></a></li>
diff --git a/src/css/custom.css b/src/css/custom.css
index 79672e43..f7bd0326 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -273,11 +273,15 @@ footer .subscribe-box ul li a {
   border: 1px solid #8d95a6;
   transition: all 0.3s ease-in-out;
   color: #d5d8dd;
+  position: relative;
 }
 footer .subscribe-box ul li a:hover {
   border-color: #ffffff;
   color: #ffffff;
 }
+footer .subscribe-box ul li a:hover .wechat-dropdown {
+  display:block;
+}
 
 .subscribe-input input{
   border-top-right-radius: 0;
@@ -297,4 +301,28 @@ footer .subscribe-box ul li a:hover {
 
 .subscribe-submit-inner:hover {
   background: #0099FF;
-}
\ No newline at end of file
+}
+
+.wechat-dropdown{
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 6px 16px #ffffff1a;
+  display:none;
+  height: 8.75rem;
+  padding: 0.625rem;
+  position: absolute;
+  right: -3rem;
+  top: 3.5rem;
+  width: 8.75rem;
+  z-index: 2;
+  transition: all 0.25s ease-in-out;
+}
+.wechat-dropdown::before{
+  border: .5rem solid #0000;
+  border-bottom: .5rem solid #fff;
+  content: "";
+  display: block;
+  position: absolute;
+  right: 3.625rem;
+  top: -1rem
+}