From 2141715f56ba3f0016ac030aa11128ae3dd14566 Mon Sep 17 00:00:00 2001
From: HesterG <hestergong@gmail.com>
Date: Wed, 12 Jul 2023 03:55:43 +0000
Subject: [PATCH] update header to make it the same as blog (#43)

Follows https://gitea.com/gitea/blog/pulls/266, should wait for the PR because it has href points to https://blog.gitea.com

PC:

![Screen Shot 2023-07-12 at 08.53.32](/attachments/8742094d-bdca-404a-bd1f-ef34df5af328)

Mobile:

![Screen Shot 2023-07-12 at 08.53.45](/attachments/947785d6-535b-4867-91c6-1a3c465b6fdc)

Reviewed-on: https://gitea.com/gitea/gitea-docusaurus/pulls/43
Co-authored-by: HesterG <hestergong@gmail.com>
Co-committed-by: HesterG <hestergong@gmail.com>
---
 docusaurus.config.js | 15 ++++++++++-
 src/css/custom.css   | 63 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 00634dfa..668a1e00 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -152,6 +152,7 @@ const config = {
         logo: {
           alt: 'Gitea Logo',
           src: 'img/gitea.svg',
+          href: 'https://about.gitea.com/',
         },
         items: [
           {
@@ -166,6 +167,12 @@ const config = {
             position: 'left',
             activeBaseRegex: 'api/(1.19|1.20|next)/',
           },
+          {
+            position: 'left',
+            label: 'Blog',
+            href: 'https://blog.gitea.com',
+            className: 'internal-href',
+          },
           {
             type: 'custom-apiDropdown',
             label: 'API Version',
@@ -199,7 +206,13 @@ const config = {
             position: 'right',
             label: 'Support',
             activeBaseRegex: 'help/seek-help',
-          }
+          },
+          {
+            href: 'https://gitea.com/user/login',
+            label: 'Sign In', 
+            position: 'right',
+            className: 'internal-href signin-button',
+          },
         ],
       },
       footer: {
diff --git a/src/css/custom.css b/src/css/custom.css
index ce8a8acb..039d7e3e 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -112,3 +112,66 @@
     }
   }
 }
+
+.internal-href [class*='iconExternalLink'] {
+  display: none;
+}
+
+.signin-button {
+  --bs-btn-padding-x: .75rem;
+  --bs-btn-padding-y: .375rem;
+  --bs-btn-font-family: ;
+  --bs-btn-font-size: 1rem;
+  --bs-btn-font-weight: 400;
+  --bs-btn-line-height: 1.5;
+  --bs-btn-bg: transparent;
+  --bs-btn-border-width: 1px;
+  --bs-btn-border-radius: .375rem;
+  --bs-btn-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(29,45,53,0.075);
+  --bs-btn-disabled-opacity: .65;
+  --bs-btn-focus-box-shadow: 0 0 0 0 rgba(var(--bs-btn-focus-shadow-rgb), .5);
+  --bs-btn-color: #198754;
+  --bs-btn-border-color: #198754;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #198754;
+  --bs-btn-hover-border-color: #198754;
+  --bs-btn-focus-shadow-rgb: 25,135,84;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: #198754;
+  --bs-btn-active-border-color: #198754;
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(29,45,53,0.125);
+  --bs-btn-disabled-color: #198754;
+  --bs-btn-disabled-bg: transparent;
+  --bs-gradient: none;
+  display: inline-block;
+  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
+  font-family: var(--bs-btn-font-family);
+  font-size: var(--bs-btn-font-size);
+  font-weight: var(--bs-btn-font-weight);
+  line-height: var(--bs-btn-line-height);
+  color: var(--bs-btn-color);
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
+  border-radius: var(--bs-btn-border-radius);
+  background-color: var(--bs-btn-bg);
+  transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
+  margin-left: var(--ifm-navbar-item-padding-horizontal);
+  order: 1;
+}
+
+.signin-button:hover {
+  color: var(--bs-btn-hover-color);
+  background-color: var(--bs-btn-hover-bg);
+  border-color: var(--bs-btn-hover-border-color);
+}
+
+@media (max-width: 996px) {
+  .navbar__item.signin-button {
+    display: none;
+  }
+}