commit 59ee4efe79d9c749eac769ba4fc05f32a9fe9c40
Author: Travis Shears <t@travisshears.com>
Date: Sat Aug 29 16:09:18 2020 +0200
use css accordions
following: https://supfort.com/pure-css-accordion-without-javascript
diff --git a/themes/base/layouts/_default/baseof.html b/themes/base/layouts/_default/baseof.html
index 72ee63f..e60b3b9 100755
--- a/themes/base/layouts/_default/baseof.html
+++ b/themes/base/layouts/_default/baseof.html
@@ -68,7 +68,6 @@
window.hugoEnv = {{hugo.Environment}};
</script>
- <script src="/generated/js/general.js"></script>
<script src="https://travisshears.com/apps/ascii-forect-connect/0.0.1/index.js"></script>
<script src="https://travisshears.com/apps/random_arena_block/0.1.0/bundle.js"></script>
<script src="https://travisshears.com/apps/pic-zoom/0.0.1/bundle.js"></script>
diff --git a/themes/base/layouts/partials/site-info-bar.html b/themes/base/layouts/partials/site-info-bar.html
index de8dd2c..776be91 100644
--- a/themes/base/layouts/partials/site-info-bar.html
+++ b/themes/base/layouts/partials/site-info-bar.html
@@ -26,55 +26,55 @@
</div>
{{ end }}
- <div class="posts">
- <div class="toggle__wrapper">
- <div class="toggle js-toggle">
- <h2 class="toggle__text">accounts</h2>
- <div class="toggle__icon">{{ partial "svg/arrow.svg" }}</div>
- </div>
- <ul class="toggle__content">
- <li class="toggle__item">t(at)travisshears(dot)com</li>
- <li class="toggle__item">
- <a rel="me" href="/gpg">gpg</a>
- </li>
- <li class="toggle__item">
- <a rel="me" href="https://social.travisshears.xyz/users/travisshears">fediverse</a>
- </li>
- <li class="toggle__item">
- <a href="https://video.travisshears.xyz/">peertube instance</a>
- </li>
- <li class="toggle__item">
- <a href="https://git.sr.ht/~travisshears/">sourcehut</a>
- </li>
- <li class="toggle__item">
- <a href="https://github.com/btbtravis">github</a>
- </li>
- <li class="toggle__item">
- <a href="https://gitlab.com/BTBTravis">gitlab</a>
- </li>
- </ul>
- </div>
- </div>
+ <input class="toggle__input" type="checkbox" id="accounts" />
+ <label for="accounts" class="toggle__label">
+ <h2 class="toggle__text">accounts</h2>
+ <div class="toggle__icon">{{ partial "svg/arrow.svg" }}</div>
+ </label>
- <div class="posts">
- <div class="toggle__wrapper">
- <div class="toggle js-toggle">
- <h2 class="toggle__text">rss feeds</h2>
- <div class="toggle__icon">{{ partial "svg/arrow.svg" }}</div>
- </div>
- <ul class="toggle__content">
- <p>To keep up to date with me, follow my RSS feeds:</p>
- <li class="toggle__item">
- <a href="{{ .Site.BaseURL }}index.xml">this site's rss feed</a>
- </li>
- <li class="toggle__item">
- <a href="https://social.travisshears.xyz/users/travisshears/feed.atom">fediverse</a>
- </li>
- <li class="toggle__item">
- <a href="https://video.travisshears.xyz/feeds/videos.atom?sort=-publishedAt&filter=local">my videos</a>
- </li>
- </ul>
- </div>
+ <div class="toggle__content">
+ <p>To keep up to date with me, follow my RSS feeds:</p>
+ <ul>
+ <li class="toggle__item">t(at)travisshears(dot)com</li>
+ <li class="toggle__item">
+ <a rel="me" href="/gpg">gpg</a>
+ </li>
+ <li class="toggle__item">
+ <a rel="me" href="https://social.travisshears.xyz/users/travisshears">fediverse</a>
+ </li>
+ <li class="toggle__item">
+ <a href="https://video.travisshears.xyz/">peertube instance</a>
+ </li>
+ <li class="toggle__item">
+ <a href="https://git.sr.ht/~travisshears/">sourcehut</a>
+ </li>
+ <li class="toggle__item">
+ <a href="https://github.com/btbtravis">github</a>
+ </li>
+ <li class="toggle__item">
+ <a href="https://gitlab.com/BTBTravis">gitlab</a>
+ </li>
+ </ul>
</div>
+ <input class="toggle__input" type="checkbox" id="rss_feeds" />
+ <label for="rss_feeds" class="toggle__label">
+ <h2 class="toggle__text">rss feeds</h2>
+ <div class="toggle__icon">{{ partial "svg/arrow.svg" }}</div>
+ </label>
+
+ <div class="toggle__content">
+ <p>To keep up to date with me, follow my RSS feeds:</p>
+ <ul>
+ <li class="toggle__item">
+ <a href="{{ .Site.BaseURL }}index.xml">this site's rss feed</a>
+ </li>
+ <li class="toggle__item">
+ <a href="https://social.travisshears.xyz/users/travisshears/feed.atom">fediverse</a>
+ </li>
+ <li class="toggle__item">
+ <a href="https://video.travisshears.xyz/feeds/videos.atom?sort=-publishedAt&filter=local">my videos</a>
+ </li>
+ </ul>
+ </div>
</div>
diff --git a/themes/base/src/css/main.scss b/themes/base/src/css/main.scss
index a17718b..aea0399 100644
--- a/themes/base/src/css/main.scss
+++ b/themes/base/src/css/main.scss
@@ -129,7 +129,7 @@ h2 {
margin-bottom: 3em;
}
-.toggle {
+.toggle__label {
display: flex;
align-items: center;
margin-bottom: 1em;
@@ -137,6 +137,10 @@ h2 {
user-select: none;
}
+.toggle__label:hover {
+ color: red;
+}
+
.toggle__icon {
position: relative;
}
@@ -146,20 +150,23 @@ h2 {
top: -5px;
}
-h2.toggle__text {
+.toggle__text {
margin: 0 0.5em 0 0;
}
-.toggle:hover {
- color: red;
+.toggle__content {
+ overflow: hidden;
}
-.toggle__wrapper {
- max-height: 2em;
- overflow: hidden;
+.toggle__input {
+ display: none;
+}
+
+.toggle__input + .toggle__label + .toggle__content {
+ max-height: 0;
}
-.toggle__wrapper.is-open {
+.toggle__input:checked + .toggle__label + .toggle__content {
max-height: none;
}
@@ -170,7 +177,7 @@ h2.toggle__text {
}
}
-.is-open .accent {
+.toggle__input:checked + .toggle__label .accent {
display: none;
}
diff --git a/themes/base/src/js/general.js b/themes/base/src/js/general.js
deleted file mode 100644
index 29bb337..0000000
--- a/themes/base/src/js/general.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import ready from './util';
-
-// init toggles
-ready(() => {
- let toggles = Array.from(document.querySelectorAll('.js-toggle'));
- toggles = toggles.map(t => ({toggle: t, parent: t.parentElement}));
- toggles.forEach(p => {
- p.toggle.addEventListener('click', e => {
- p.parent.classList.toggle('is-open');
- });
- });
-});
diff --git a/themes/base/src/js/util.js b/themes/base/src/js/util.js
deleted file mode 100644
index dfb2a21..0000000
--- a/themes/base/src/js/util.js
+++ /dev/null
@@ -1,12 +0,0 @@
-function ready(cb) {
- if (
- document.readyState === "complete" ||
- (document.readyState !== "loading" && !document.documentElement.doScroll)
- ) {
- cb();
- } else {
- document.addEventListener("DOMContentLoaded", cb);
- }
-}
-
-export default ready;