feat: add components/nav-socials.html template

lepture · Apr 11, 2024 · 9b4d352 · 9b4d352
1 parent 28c4cbf
commit 9b4d352
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 26 deletions.
diff --git a/src/shibuya/theme/shibuya/components/nav-socials.html b/src/shibuya/theme/shibuya/components/nav-socials.html
@@ -0,0 +1,25 @@
+<div class="sy-head-socials flex items-center">
+  {%- if theme_github_url %}
+    <a href="{{ theme_github_url }}" aria-label="GitHub">
+      <i class="i-icon github"></i>
+    </a>
+  {%- elif theme_gitlab_url %}
+    <a href="{{ theme_gitlab_url }}" aria-label="Gitlab">
+      <i class="i-icon gitlab"></i>
+    </a>
+  {%- elif theme_bitbucket_url %}
+    <a href="{{ theme_bitbucket_url }}" aria-label="Bitbucket">
+      <i class="i-icon bitbucket"></i>
+    </a>
+  {%- endif %}
+  {%- if theme_twitter_url %}
+  <a href="{{ theme_twitter_url }}" aria-label="X (Twitter)">
+    <i class="i-icon x-twitter"></i>
+  </a>
+  {%- endif %}
+  {%- if theme_discord_url %}
+    <a href="{{ theme_discord_url }}" aria-label="Discord">
+      <i class="i-icon discord"></i>
+    </a>
+  {%- endif %}
+</div>
diff --git a/src/shibuya/theme/shibuya/components/site-head.html b/src/shibuya/theme/shibuya/components/site-head.html
@@ -26,26 +26,7 @@
         {% include "components/searchbox.html" %}
         {% include "components/nav-versions.html" %}
         {% include "components/nav-languages.html" %}
-        <div class="sy-head-social flex items-center">
-          {%- if theme_github_url %}
-            <a class="flex items-center" href="{{ theme_github_url }}" aria-label="GitHub">
-              <i class="i-icon github"></i>
-            </a>
-          {%- elif theme_gitlab_url %}
-            <a class="flex items-center" href="{{ theme_gitlab_url }}" aria-label="Gitlab">
-              <i class="i-icon gitlab"></i>
-            </a>
-          {%- elif theme_bitbucket_url %}
-            <a class="flex items-center" href="{{ theme_bitbucket_url }}" aria-label="Bitbucket">
-              <i class="i-icon bitbucket"></i>
-            </a>
-          {%- endif %}
-          {%- if theme_discord_url %}
-            <a class="flex items-center" href="{{ theme_discord_url }}" aria-label="Discord">
-              <i class="i-icon discord"></i>
-            </a>
-          {%- endif %}
-        </div>
+        {% include "components/nav-socials.html" %}
       </div>
     </div>
     <div class="sy-head-actions flex items-center shrink-0 print:hidden">

diff --git a/static/css/layout/head.css b/static/css/layout/head.css
@@ -120,8 +120,10 @@
   font-weight: 400;
 }
 
-.sy-head-social a {
+.sy-head-socials a {
   padding: 0.5rem;
+  display: flex;
+  align-items: center;
 }
 
 .sy-head-actions button {
@@ -245,11 +247,7 @@
     padding: 0.2rem 0;
   }
 
-  .sy-head-social {
+  .sy-head-socials {
     margin-left: 0.5rem;
   }
-
-  .sy-head-social a {
-    padding: 0.5rem;
-  }
 }