Skip to content

Commit 93f87f8

Browse files
authored
add get help button (#243)
1 parent f6fa950 commit 93f87f8

File tree

2 files changed

+78
-0
lines changed

2 files changed

+78
-0
lines changed

src/css/custom.css

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,3 +151,62 @@ article header h1,
151151
.header h1 {
152152
font-size: 2.2rem !important;
153153
}
154+
155+
156+
/* Floating "Get Help" Button - Fully Themed with Hex Colors */
157+
.floating-help-button {
158+
position: fixed;
159+
bottom: 20px;
160+
right: 20px;
161+
z-index: 1000;
162+
padding: 12px 20px;
163+
font-size: 14px;
164+
font-family: "RubikMedium", sans-serif;
165+
font-weight: bold;
166+
border-radius: 999px;
167+
text-decoration: none;
168+
color: #FFF8DC;
169+
background-color: #FF5E00; /* Neon orange */
170+
border: 2px solid #FF5E00;
171+
transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
172+
}
173+
174+
.floating-help-button:hover {
175+
background-color: #FF8500; /* Brighter neon */
176+
border-color: #FF8500;
177+
box-shadow: 0 0 15px #FF8500;
178+
}
179+
180+
/* Dark mode - same neon orange theme */
181+
[data-theme='dark'] .floating-help-button {
182+
background-color: #FF5E00;
183+
border-color: #FF5E00;
184+
color: #FFF8DC;
185+
}
186+
187+
[data-theme='dark'] .floating-help-button:hover {
188+
background-color: #FF8500;
189+
border-color: #FF8500;
190+
box-shadow: 0 0 15px #FF8500;
191+
}
192+
193+
/* Fix text color in .alert--info for light mode */
194+
.alert--info {
195+
background-color: #007ACC; /* Already defined, reaffirm for clarity */
196+
color: #FFF8DC; /* Light beige text for contrast */
197+
}
198+
199+
/* Ensure links inside info boxes are also light-colored */
200+
.alert--info a {
201+
color: #FFF8DC;
202+
text-decoration: underline;
203+
}
204+
205+
.alert--info a:hover {
206+
color: #FFAE42; /* Matches your hover color */
207+
}
208+
209+
/* Ensure info icon is visible in light mode */
210+
.alert--info .admonitionIcon_Rf37 svg path {
211+
fill: #FFF8DC !important;
212+
}

src/theme/Layout/index.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// src/theme/Layout/index.js
2+
import React from 'react';
3+
import Layout from '@theme-original/Layout';
4+
5+
export default function LayoutWrapper(props) {
6+
return (
7+
<>
8+
<Layout {...props} />
9+
<a
10+
href="https://discord.com/channels/799027393297514537/811574542069137449"
11+
className="floating-help-button"
12+
target="_blank"
13+
rel="noopener noreferrer"
14+
>
15+
💬 Get Help
16+
</a>
17+
</>
18+
);
19+
}

0 commit comments

Comments
 (0)