use more semantic html
This commit is contained in:
parent
92b1e1c822
commit
537fe69462
|
@ -4,16 +4,11 @@ import accordionStyles from "./accordion.module.css"
|
|||
export default ({ title, children }) => {
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
hidden={true}
|
||||
type="checkbox"
|
||||
id={`tab-${title}`}
|
||||
name={`tab-${title}`}
|
||||
/>
|
||||
<input type="checkbox" id={`tab-${title}`} name={`tab-${title}`} />
|
||||
<label htmlFor={`tab-${title}`} className={accordionStyles.header}>
|
||||
{title}
|
||||
</label>
|
||||
<div className={accordionStyles.content}>{children}</div>
|
||||
<section className={accordionStyles.content}>{children}</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -12,6 +12,17 @@ label:after {
|
|||
right: 1em;
|
||||
}
|
||||
|
||||
input:focus + label {
|
||||
border: 1px dotted white;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
input:checked + label:after {
|
||||
content: "∧";
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@ import footerStyles from "./footer.module.css"
|
|||
import { Link } from "gatsby"
|
||||
|
||||
export default ({ editLink }) => (
|
||||
<div className={footerStyles.footer}>
|
||||
<footer className={footerStyles.footer}>
|
||||
<div className={footerStyles.footerContent}>
|
||||
{editLink ? (
|
||||
<a
|
||||
|
@ -22,5 +22,5 @@ export default ({ editLink }) => (
|
|||
Datenschutzerklärung
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
|
|
@ -6,7 +6,9 @@ import layoutStyles from "./layout.module.css"
|
|||
export default ({ path, editLink, children }) => (
|
||||
<>
|
||||
<Nav path={path} />
|
||||
<div className={layoutStyles.layout}>{children}</div>
|
||||
<main className={layoutStyles.layout}>
|
||||
<article>{children}</article>
|
||||
</main>
|
||||
<Footer editLink={editLink} />
|
||||
</>
|
||||
)
|
||||
|
|
|
@ -18,12 +18,12 @@ export default ({ path }) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className={navStyles.header}>
|
||||
<header className={navStyles.header}>
|
||||
<div className={navStyles.headerContent}>
|
||||
<span className={navStyles.chaos}>Chaostreff</span> Dortmund
|
||||
</div>
|
||||
</div>
|
||||
<div className={navStyles.nav}>
|
||||
</header>
|
||||
<nav className={navStyles.nav}>
|
||||
<div className={navStyles.navContent}>
|
||||
{pages.map(([title, link]) => (
|
||||
<Link
|
||||
|
@ -37,7 +37,7 @@ export default ({ path }) => {
|
|||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue