style: adjust navigation text styling - Make desktop nav links smaller (text-base) - Keep mobile nav links larger (text-xl) - Remove class settings from config - Use consistent bold font weight

This commit is contained in:
Chaoming Li 2024-11-19 17:34:27 +11:00
parent 956ab747b5
commit edd7d9844d
2 changed files with 7 additions and 7 deletions

View file

@ -61,7 +61,7 @@
} }
.nav-link { .nav-link {
@apply text-gray-600 hover:text-primary-600 font-medium transition duration-200; @apply text-gray-600 hover:text-primary-600 font-bold transition duration-200;
} }
.feature-grid { .feature-grid {

View file

@ -19,7 +19,7 @@
<!-- Navigation --> <!-- Navigation -->
<div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}"> <div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<a href="{{ .URL }}" class="{{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-gray-600 hover:text-primary-600 font-bold transition duration-200{{ end }}">{{ .Name }}</a> <a href="{{ .URL }}" class="{{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-base text-gray-900 hover:text-primary-600 font-bold transition duration-200{{ end }}">{{ .Name }}</a>
{{ end }} {{ end }}
</div> </div>
@ -27,13 +27,13 @@
{{ if not $headerConfig.hideButtons }} {{ if not $headerConfig.hideButtons }}
<div class="hidden md:flex items-center space-x-4"> <div class="hidden md:flex items-center space-x-4">
{{ with $headerConfig.buttons.signIn }} {{ with $headerConfig.buttons.signIn }}
<a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}"> <a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}">
{{ .text | default "Sign in" }} {{ .text | default "Sign in" }}
</a> </a>
{{ end }} {{ end }}
{{ with $headerConfig.buttons.getStarted }} {{ with $headerConfig.buttons.getStarted }}
<a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}"> <a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
{{ .text | default "Get Started" }} {{ .text | default "Get Started" }}
</a> </a>
{{ end }} {{ end }}
@ -55,19 +55,19 @@
<div class="nav-content md:hidden w-full fixed left-0 right-0 top-20 bg-white border-t border-gray-100 shadow-lg"> <div class="nav-content md:hidden w-full fixed left-0 right-0 top-20 bg-white border-t border-gray-100 shadow-lg">
<div class="w-full px-6 py-4"> <div class="w-full px-6 py-4">
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<a href="{{ .URL }}" class="{{ with $headerConfig.menu.mobileLinkClass }}{{ . }}{{ else }}block text-gray-600 hover:text-primary-600 font-bold transition duration-200 py-2{{ end }}">{{ .Name }}</a> <a href="{{ .URL }}" class="{{ with $headerConfig.menu.mobileLinkClass }}{{ . }}{{ else }}block text-xl text-gray-900 hover:text-primary-600 font-bold transition duration-200 py-2{{ end }}">{{ .Name }}</a>
{{ end }} {{ end }}
{{ if not $headerConfig.hideButtons }} {{ if not $headerConfig.hideButtons }}
<div class="pt-4 space-y-4"> <div class="pt-4 space-y-4">
{{ with $headerConfig.buttons.signIn }} {{ with $headerConfig.buttons.signIn }}
<a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}"> <a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}">
{{ .text | default "Sign in" }} {{ .text | default "Sign in" }}
</a> </a>
{{ end }} {{ end }}
{{ with $headerConfig.buttons.getStarted }} {{ with $headerConfig.buttons.getStarted }}
<a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-medium transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}"> <a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
{{ .text | default "Get Started" }} {{ .text | default "Get Started" }}
</a> </a>
{{ end }} {{ end }}