Styling to match theme

This commit is contained in:
thomas.ekstrand 2024-02-13 16:38:13 -06:00
parent 401364d746
commit c53625948e
3 changed files with 50 additions and 3 deletions

View file

@ -85,11 +85,11 @@ export const PythonFaq = [
export const DevicesFaq = [
{
title: "How do I turn **off** an ESP32 T-Beam based device?",
title: "How do I turn off an ESP32 T-Beam based device?",
content: `Hold down the left PWR button for about 10 seconds and the display should turn off.`,
},
{
title: "How do I turn **on** an ESP32 T-Beam based device?",
title: "How do I turn on an ESP32 T-Beam based device?",
content: `Push the left PWR button for about 1 second.`,
},
{

View file

@ -6,9 +6,10 @@ import {
AccordionItemHeading,
AccordionItemPanel,
} from "react-accessible-accordion";
import "react-accessible-accordion/dist/fancy-example.css";
import ReactMarkdown from "react-markdown";
import "../css/faq.css";
export interface Faq {
title: string;
content: string;

46
src/css/faq.css Normal file
View file

@ -0,0 +1,46 @@
.accordion {
border-radius: 2px;
border: 1px solid var(--ifm-color-emphasis-200);
}
.accordion__item + .accordion__item {
border-top: 1px solid var(--ifm-color-emphasis-200);
}
.accordion__button {
background-color: var(--ifm-background-surface-color);
border: none;
cursor: pointer;
padding: calc(var(--ifm-pre-padding)/1.5);
text-align: left;
width: 100%;
}
.accordion__button:hover {
background-color: var(--ifm-footer-background-color);
}
.accordion__button:before {
border-bottom: 2px solid currentColor;
border-right: 2px solid currentColor;
content: '';
display: inline-block;
height: 10px;
margin-right: 12px;
transform: rotate(-45deg);
width: 10px;
}
.accordion__button[aria-expanded='true']::before,
.accordion__button[aria-selected='true']::before {
transform: rotate(45deg);
}
[hidden] {
display: none;
}
.accordion__panel {
background: var(--ifm-footer-background-color);
padding: var(--ifm-pre-padding);
}