add x icon to header and footer (#153)

* add x icon to header and footer * 🤖 auto update minified files ♻️ Signed-off-by: vdaas-ci <[email protected]> * 🤖 auto update stage ⬆️ Signed-off-by: vdaas-ci <[email protected]> * add sns icons to the footer and modified layouts * 🤖 auto update minified files ♻️ Signed-off-by: vdaas-ci <[email protected]> * 🤖 auto update stage ⬆️ Signed-off-by: vdaas-ci <[email protected]> --------- Signed-off-by: vdaas-ci <[email protected]> Co-authored-by: vdaas-ci <[email protected]>
vdaas · Dec 26, 2023 · 2bda607 · 2bda607
1 parent 19b9fc4
commit 2bda607
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 28 deletions.
diff --git a/preview b/preview
diff --git a/themes/vald/layouts/partials/footer.html b/themes/vald/layouts/partials/footer.html
@@ -2,15 +2,15 @@
 {{ $ver := "" }}
 {{ $docsBaseURL := "/docs" }}
 <footer class="footer">
-  <div class="footer__content cf">
+  <div class="footer__content">
     {{ if ne .Page.Permalink .Site.BaseURL }}
     {{ $setURL := urls.Parse .Page.Permalink }}
       {{ if (in $setURL.Path "docs/v") }}
         {{ $ver = index (split $setURL.Path "/") 2 }}
         {{ $docsBaseURL = path.Join $docsBaseURL $ver }}
       {{ end }}
     {{ end }}
-    <ul class="footer__list">
+    <ul class="footer__index">
       <li class="footer__item">
         <a href="{{ $docsBaseURL }}/overview/about-vald" class="footer__link">About<br/></a>
       </li>
@@ -26,6 +26,24 @@
       <li class="footer__item">
         <a href="https://vdaas-vald.medium.com/" target="_blank" class="footer__link">Blog<br/></a>
       </li>
+    </ul>
+    <ul class="footer__sns">
+      <li class="footer__item">
+        <a class="footer__item footer__icon" href="https://twitter.com/vdaas_vald" target="_blank">
+          <picture>
+            <source srcset="{{ .Site.BaseURL }}/images/logo_x_white.svg" media="(prefers-color-scheme: dark)" class="icon__image" width="24" height="24">
+            <img src="{{ .Site.BaseURL }}/images/logo_x_black.svg" alt="x" class="icon__image">
+          </picture>
+        </a>
+      </li>
+      <li class="footer__item">
+        <a class="footer__item footer__icon" href="https://join.slack.com/t/vald-community/shared_invite/zt-db2ky9o4-R_9p2sVp8xRwztVa8gfnPA" target="_blank">
+          <picture>
+            <source srcset="{{ .Site.BaseURL }}/images/logo_slack_white.svg" media="(prefers-color-scheme: dark)" class="icon__image" width="24" height="24">
+            <img src="{{ .Site.BaseURL }}/images/logo_slack_black.svg" alt="slack" class="icon__image">
+          </picture>
+        </a>
+      </li>
       <li class="footer__item">
         <a class="footer__item footer__icon" href="https://github.com/vdaas/vald" target="_blank">
           <picture>

diff --git a/themes/vald/static/css/footer.css b/themes/vald/static/css/footer.css
@@ -3,32 +3,41 @@
   z-index: 999;
   border-top: 2px solid #f8f8f8;
   text-align: center;
-  padding-bottom: 72px;
+  padding-bottom: 64px;
 }
 
 .footer__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   margin: 0 auto;
-  padding: 0 24px;
+  padding: 32px 0 24px 0;
 }
 
-@media screen and (min-width: 768px) {
-  .footer__content {
-    max-width: 1108px;
-    padding: 0 24px;
-  }
+.footer__icon:last-child {
+  margin-left: 4px;
+}
+
+.footer__index{
+  display: flex;
+  padding-bottom: 12px;
+  flex-direction: column;
 }
 
-.footer__list {
-  padding: 24px 0;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.6, 0.1, 0.9);
-  transition-timing-function: cubic-bezier(0.1, 0.6, 0.1, 0.9);
+.footer__sns{
+  display: flex;
+  padding-bottom: 24px;
+  flex-direction: row;
+}
+
+.footer__sns .footer__item{
+  margin: 0 4px;
 }
 
 .footer__link {
   display: inline-block;
-  padding: 12px 0;
+  padding: 0 0 12px 0;
   font-weight: bold;
   color: #006076;
 }
@@ -58,22 +67,31 @@
 }
 
 @media screen and (min-width: 768px) {
+  .footer__content {
+    max-width: 1108px;
+    flex-direction: row;
+  }
+  .footer__index{
+    flex-direction: row;
+    padding-bottom: 0;
+  }
+  .footer__sns{
+    flex-direction: row;
+    padding-bottom: 0;
+  }
+  .footer__item {
+    margin-right: 24px;
+  }
   .footer__icon {
-    position: absolute;
-    margin-left: 12px;
-    margin-top: -18px;
+    margin-right: 12px;
   }
   .icon__image{
     width: 24px;
     height: 24px;
     margin-top: 0;
   }
-}
-
-@media screen and (min-width: 768px) {
-  .footer__item {
-    display: inline-block;
-    margin-right: 24px;
+  .footer__link {
+    padding: 0;
   }
 }
 

diff --git a/themes/vald/static/css/footer.min.css b/themes/vald/static/css/footer.min.css
diff --git a/themes/vald/static/css/header.css b/themes/vald/static/css/header.css
@@ -100,6 +100,12 @@
   align-items: center;
 }
 
+.x__logo{
+  padding: 4px 7px 5px 8px;
+  display: flex;
+  align-items: center;
+}
+
 
 .git__logo::after{
   content: '';

diff --git a/themes/vald/static/css/header.min.css b/themes/vald/static/css/header.min.css
diff --git a/themes/vald/static/images/logo_slack_black.svg b/themes/vald/static/images/logo_slack_black.svg