use more semantic html

This commit is contained in:
neri 2020-01-23 22:06:44 +01:00
parent 92b1e1c822
commit 537fe69462
5 changed files with 22 additions and 14 deletions

View File

@ -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>
)
}

View File

@ -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: "∧";
}

View File

@ -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>
)

View File

@ -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} />
</>
)

View File

@ -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>
</>
)
}