Skip to content

Commit 063bc5f

Browse files
mich-elle-lunamich-elle-luna
committed
Complete redis.io dark theme implementation
- Update docs home page to match redis.io color scheme (#091a23 background) - Change all text to white for proper contrast on dark background - Update navigation borders from dark to white with opacity - Change button colors to match redis.io 'Get a demo' button (#163341) - Add light blue accent line under banner for visual separation Header Navigation Updates: - Change header background to redis.io dark blue theme - Update all dropdown menus (Products, Resources) to dark blue with white text - Replace magnifying glass with oval 'Search' button matching redis.io style - Update 'Try Redis' button to red outline style with white text and hover fill - Change 'Knowledge Base' to 'FAQs' in Resources menu - Add proper right margin to 'Try Redis' button Footer Updates: - Change footer background to dark blue theme - Update all text to white/light gray for proper contrast - Update all section headings and links to white hover states - Maintain social media icons with white hover effects This creates a cohesive dark theme that perfectly matches the main redis.io site aesthetic while preserving all existing functionality and navigation structure.
1 parent 2521d25 commit 063bc5f

File tree

9 files changed

+174
-174
lines changed

9 files changed

+174
-174
lines changed

‎layouts/home.html‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
{{ end }}
55

66
{{ define "main" }}
7-
<main>
7+
<main class="bg-redis-ink-900 text-white">
88
<header class="relative h-48 bg-redis-ink-900 text-white overflow-hidden">
99
<div class="absolute w-1/2 h-full top-0 left-1/4">
1010
<div class="absolute w-fit -top-10 md:-top-6 -right-80 md:-left-96 scale-75 md:scale-100">
@@ -20,50 +20,51 @@ <h1 class="text-5xl font-medium">{{ .Title }}</h1>
2020
<label class="" for="search-home" id="search-label-home">
2121
{{ partial "icons/search.html" }}
2222
</label>
23-
<input id="seach-home" name="q" class="appearance-none bg-transparent text-base sm:text-lg text-white placeholder-white w-full h-16 focus:outline-none"
23+
<input id="seach-home" name="q" class="appearance-none bg-transparent text-base sm:text-lg text-white placeholder-white w-full h-16 focus:outline-none"
2424
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
2525
placeholder="Ask our AI-powered Redis copilot a question…" maxlength="500" type="text" value="" tabindex=""/>
2626
<!--<input type="submit" class="hover:text-redis-pen-300" value="&#x23CE;"/>-->
2727
<input class="invisible" type="submit" class="hover:text-redis-pen-300" value=""/>
2828
</form>
2929
</div>
3030
</header>
31+
<div class="w-full h-1 bg-[#163341]"></div>
3132
{{ partial "second-header.html" "disabled" }}
32-
<div class="flex flex-col lg:flex-row gap-8 mx-auto px-4 md:px-11 py-6 md:py-28 max-w-[1920px]">
33+
<div class="flex flex-col lg:flex-row gap-8 mx-auto px-4 md:px-11 py-6 md:py-28 max-w-[1920px] bg-redis-ink-900 text-white">
3334
<div class="lg:sticky lg:top-32 w-full lg:w-64 h-fit lg:h-full shrink-0 text-sm font-mono font-normal">
34-
<nav class="lg:hidden w-full lg:w-64 z-40 bg-white h-fit lg:h-full leading-7">
35-
<div class="border border-opacity-50 border-redis-ink-900 rounded-md flex flex-col">
36-
<button class="px-6 py-4 text-redis-ink-900 font-medium flex justify-between cursor-pointer lg:cursor-default" onclick="dropdownToggle()">
35+
<nav class="lg:hidden w-full lg:w-64 z-40 bg-redis-ink-900 h-fit lg:h-full leading-7">
36+
<div class="border border-opacity-50 border-white rounded-md flex flex-col bg-redis-ink-900">
37+
<button class="px-6 py-4 text-white font-medium flex justify-between cursor-pointer lg:cursor-default" onclick="dropdownToggle()">
3738
<div class="uppercase">Docs</div>
3839
<div id="dropdownChevron" class="lg:hidden self-center">{{ partial "icons/chevron.html" }}</div>
3940
</button>
40-
<div id="dropdown" class="hidden lg:block border-t border-opacity-50 border-redis-ink-900 text-redis-pen-800">
41+
<div id="dropdown" class="hidden lg:block border-t border-opacity-50 border-white text-gray-300 bg-redis-ink-900">
4142
<ul class="p-6">
42-
<li><a class="py-2 hover:underline hover:text-redis-pen-600" href='{{ relURL "develop" }}'>Develop with Redis</a></li>
43-
<li><a class="py-2 hover:underline hover:text-redis-pen-600" href='{{ relURL "integrate" }}'>Libraries and tools</a></li>
44-
<li><a class="py-2 hover:underline hover:text-redis-pen-600" href='{{ relURL "operate" }}'>Redis products</a></li>
45-
<li><a class="py-2 hover:underline hover:text-redis-pen-600" href='{{ relURL "commands" }}'>Commands</a></li>
46-
<li><a class="py-2 hover:underline hover:text-redis-pen-600" href='{{ relURL "apis" }}'>APIs</a></li>
43+
<li><a class="py-2 hover:underline hover:text-white" href='{{ relURL "develop" }}'>Develop with Redis</a></li>
44+
<li><a class="py-2 hover:underline hover:text-white" href='{{ relURL "integrate" }}'>Libraries and tools</a></li>
45+
<li><a class="py-2 hover:underline hover:text-white" href='{{ relURL "operate" }}'>Redis products</a></li>
46+
<li><a class="py-2 hover:underline hover:text-white" href='{{ relURL "commands" }}'>Commands</a></li>
47+
<li><a class="py-2 hover:underline hover:text-white" href='{{ relURL "apis" }}'>APIs</a></li>
4748
</ul>
4849
</div>
4950
</div>
5051
</nav>
5152
<nav class="hidden lg:block w-full lg:w-64 z-40 h-full leading-7">
5253
<div class="flex flex-col gap-4">
53-
<div class="flex flex-col border border-redis-ink-900 border-opacity-50 rounded-md">
54-
<a class="px-6 py-4 rounded-t-md hover:bg-redis-pen-200" href='{{ relURL "develop" }}'>Develop with Redis</a>
55-
<a class="px-6 py-4 hover:bg-redis-pen-200 border-y border-redis-ink-900 border-opacity-50" href='{{ relURL "integrate" }}'>Libraries and tools</a>
56-
<a class="px-6 py-4 rounded-b-md hover:bg-redis-pen-200" href='{{ relURL "operate" }}'>Redis products</a>
54+
<div class="flex flex-col border border-white border-opacity-50 rounded-md bg-redis-ink-900">
55+
<a class="px-6 py-4 rounded-t-md hover:bg-redis-pen-800 text-white" href='{{ relURL "develop" }}'>Develop with Redis</a>
56+
<a class="px-6 py-4 hover:bg-redis-pen-800 border-y border-white border-opacity-50 text-white" href='{{ relURL "integrate" }}'>Libraries and tools</a>
57+
<a class="px-6 py-4 rounded-b-md hover:bg-redis-pen-800 text-white" href='{{ relURL "operate" }}'>Redis products</a>
5758
</div>
58-
<div class="flex flex-col border border-redis-ink-900 border-opacity-50 rounded-md">
59-
<a class="px-6 py-4 rounded-t-md hover:bg-redis-pen-200 text-redis-red-600" href='{{ relURL "commands" }}'>Commands</a>
60-
<a class="px-6 py-4 rounded-b-md hover:bg-redis-pen-200 border-t border-redis-ink-900 border-opacity-50" href='{{ relURL "apis" }}'>APIs</a>
59+
<div class="flex flex-col border border-white border-opacity-50 rounded-md bg-redis-ink-900">
60+
<a class="px-6 py-4 rounded-t-md hover:bg-redis-pen-800 text-redis-red-500" href='{{ relURL "commands" }}'>Commands</a>
61+
<a class="px-6 py-4 rounded-b-md hover:bg-redis-pen-800 border-t border-white border-opacity-50 text-white" href='{{ relURL "apis" }}'>APIs</a>
6162
</div>
6263
</div>
6364
</nav>
6465
</div>
6566
<div class="lg:px-11 w-full flex flex-col gap-3">
66-
<h2 class="text-5xl font-medium" id="operate">Get Started</h2>
67+
<h2 class="text-5xl font-medium text-white" id="operate">Get Started</h2>
6768
{{ partial "docs-section.html" (dict
6869
"Title" "Quickly set up a Redis cache, primary, vector, or custom database"
6970
"Description" "Set up a Free Redis-managed database on AWS, GCP, or Azure"
@@ -116,7 +117,7 @@ <h2 class="text-5xl font-medium" id="operate">Get Started</h2>
116117
) ) }}
117118
</div>
118119
<div class="lg:px-11 w-full flex flex-col gap-3">
119-
<h2 class="text-5xl font-medium" id="operate">Deploy</h2>
120+
<h2 class="text-5xl font-medium text-white" id="operate">Deploy</h2>
120121
{{ partial "docs-section.html" (dict
121122
"Title" "Control your Redis deployments on-premises and on cloud platforms"
122123
"Description" "Robust support for hybrid and multi-AZ environments"

‎layouts/partials/components/button-link.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{ $defaultWidth := "fit" }}
22
{{ if eq .AltColors true }}
3-
<a class="w-{{- .Width | default $defaultWidth }} p-4 text-sm font-mono bg-white text-redis-ink-900 border border-redis-pen-600 rounded hover:bg-redis-yellow-500 hover:border-redis-yellow-500 transition-colors" href="{{ .Href }}">{{ .Text }}</a>
3+
<a class="w-{{- .Width | default $defaultWidth }} p-4 text-sm font-mono bg-white text-redis-ink-900 border border-redis-pen-600 rounded hover:bg-[#163341] hover:border-[#163341] hover:text-white transition-colors" href="{{ .Href }}">{{ .Text }}</a>
44
{{ else }}
5-
<a class="w-{{- .Width | default $defaultWidth }} p-4 text-sm font-mono bg-redis-yellow-500 text-redis-ink-900 border border-redis-pen-600 rounded hover:bg-redis-ink-900 hover:text-white transition-colors" href="{{ .Href }}">{{ .Text }}</a>
5+
<a class="w-{{- .Width | default $defaultWidth }} p-4 text-sm font-mono bg-[#163341] text-white border border-[#163341] rounded hover:bg-[#1a3a4a] hover:border-[#1a3a4a] transition-colors" href="{{ .Href }}">{{ .Text }}</a>
66
{{ end }}

‎layouts/partials/docs-section.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
<div class="w-full border-t border-t-redis-pen-300 mt-14 pt-14 flex flex-col md:flex-row gap-11 md:gap-0">
1+
<div class="w-full border-t border-t-white border-opacity-30 mt-14 pt-14 flex flex-col md:flex-row gap-11 md:gap-0">
22
<div class="flex flex-col gap-5 flex-1">
3-
<h3 class="text-2xl">{{ .Title }}</h3>
4-
<p>{{ .Description }}</p>
3+
<h3 class="text-2xl text-white">{{ .Title }}</h3>
4+
<p class="text-gray-300">{{ .Description }}</p>
55
{{ partial "components/button-link.html" (dict "Href" .ButtonLink "Text" .ButtonLabel) }}
66
</div>
77
<div class="flex-1 font-mono">
8-
<div class="h-full flex flex-col md:flex-row gap-11 md:gap-8 md:pl-8 md:ml-8 md:border-l md:border-l-redis-pen-300">
8+
<div class="h-full flex flex-col md:flex-row gap-11 md:gap-8 md:pl-8 md:ml-8 md:border-l md:border-l-white md:border-opacity-30">
99
<div class="flex flex-col gap-5 flex-1">
10-
<p class="uppercase">{{ .LinksLeftTitle }}</p>
10+
<p class="uppercase text-gray-400">{{ .LinksLeftTitle }}</p>
1111
{{ range .LinksLeft }}
12-
<a class="hover:text-redis-red-500 transition-colors text-balance" href="{{ .URL }}">{{ .Text }}&nbsp;→</a>
12+
<a class="hover:text-redis-red-500 transition-colors text-balance text-gray-300" href="{{ .URL }}">{{ .Text }}&nbsp;→</a>
1313
{{ end }}
1414
</div>
1515
{{ if .LinksRight }}
1616
<div class="flex flex-col gap-5 flex-1">
17-
<p class="uppercase">{{ .LinksRightTitle }}</p>
17+
<p class="uppercase text-gray-400">{{ .LinksRightTitle }}</p>
1818
{{ range .LinksRight }}
19-
<a class="hover:text-redis-red-500 transition-colors text-balance" href="{{ .URL }}">{{ .Text }}&nbsp;→</a>
19+
<a class="hover:text-redis-red-500 transition-colors text-balance text-gray-300" href="{{ .URL }}">{{ .Text }}&nbsp;→</a>
2020
{{ end }}
2121
</div>
2222
{{ end }}

0 commit comments

Comments
 (0)