diff --git a/docs/images/hexpansions/nullsector.jpg b/docs/images/hexpansions/nullsector.jpg new file mode 100644 index 0000000..fdb6141 Binary files /dev/null and b/docs/images/hexpansions/nullsector.jpg differ diff --git a/docs/index.js b/docs/index.js new file mode 100644 index 0000000..845fb95 --- /dev/null +++ b/docs/index.js @@ -0,0 +1,20 @@ +showmoreBtn = document.getElementById("showmore"); +if (showmoreBtn) { + collapsibleItems = document.getElementsByClassName("img-container collapsible collapsed"); + showmoreBtn.textContent = "SHOW " + collapsibleItems.length + " MORE"; + showmoreBtn.addEventListener('click', function () { + if (showmoreBtn.textContent.endsWith("MORE")) { + collapsibleItems = document.getElementsByClassName("img-container collapsible collapsed"); + Array.prototype.forEach.call(collapsibleItems, item => { + item.classList.remove("collapsed"); + showmoreBtn.textContent = "SHOW LESS"; + }); + } else { + collapsibleItems = document.getElementsByClassName("img-container collapsible"); + Array.prototype.forEach.call(collapsibleItems, item => { + item.classList.add("collapsed"); + showmoreBtn.textContent = "SHOW " + collapsibleItems.length + " MORE"; + }); + } + }); +} diff --git a/docs/index.md b/docs/index.md index b727777..0c8e8f7 100644 --- a/docs/index.md +++ b/docs/index.md @@ -49,7 +49,7 @@ Hexpansions are accessories that plug into the badge's expansion connectors. Alm 1. If you want to add your hexpansions to this gallery, you can [add them to the registry](https://github.com/hughrawlinson/hexpansion-registry) or [add them to this issue](https://github.com/emfcamp/badge-2024-documentation/issues/149) or let us know on the IRC/Matrix! We'd love to feature all of your creations! -
+
hexpansion exposing pins @@ -100,283 +100,293 @@ Hexpansions are accessories that plug into the badge's expansion connectors. Alm

Link: GitHub

- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + + + + +
diff --git a/docs/style.css b/docs/style.css index 96461a5..2fbe07a 100644 --- a/docs/style.css +++ b/docs/style.css @@ -1,11 +1,4 @@ div.scroll-container { - background-color: transparent; - overflow: auto; - white-space: nowrap; - padding: 10px; -} - -div.scroll-container.scroll-container-large { background-color: transparent; overflow: auto; padding: 10px; @@ -14,19 +7,12 @@ div.scroll-container.scroll-container-large { white-space: normal; } -div.scroll-container img, div.scroll-container-large img { +div.scroll-container img { padding: 0px 10px; max-height: 150px; } div.scroll-container .img-container { - display: inline-flex; - flex-direction: column; - max-width: 200px; - padding: 10px 0px; -} - -div.scroll-container-large .img-container { display: inline-flex; flex-direction: column; max-width: 200px; @@ -35,7 +21,7 @@ div.scroll-container-large .img-container { } @media (max-width: 768px) { - div.scroll-container-large .img-container { + div.scroll-container .img-container { max-width: 120px; width: 120px; } @@ -53,3 +39,24 @@ div.scroll-container-large .img-container { line-height: normal; } +.scroll-container.scroll-container > .img-container.collapsed { + display: none; +} + +.button-container { + width: 100%; + display: flex; + padding-top: 1rem; +} + +#showmore { + background-color: #a47bea; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + width: 100%; +} \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 5c1127d..3815309 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -33,6 +33,8 @@ theme: name: Switch to system preference extra_css: - style.css +extra_javascript: + - index.js markdown_extensions: - attr_list - md_in_html