Write some more about quickfacts

templates/shortcodes/carousel.html

@@ -0,0 +1,126 @@
+<ul class="carousel">
+  {{ body | safe }}
+</ul>
+
+<style>
+.carousel {
+  width: 100%;
+  height: 300px;
+  padding: 20px;
+  display: flex;
+  gap: 4vw;
+
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+
+  /* this will hide the scrollbar in mozilla based browsers */
+  overflow: -moz-scrollbars-none;
+  scrollbar-width: none;
+  /* this will hide the scrollbar in internet explorers */
+  -ms-overflow-style: none;
+}
+/* this will hide the scrollbar in webkit based browsers - safari, chrome, etc */
+.carousel ul::-webkit-scrollbar { 
+  width: 0 !important;
+  display: none; 
+}
+
+.carousel>li {
+  list-style-type: none;
+  /* background-color: #eeeeee; */
+  /* border: 1px solid #dddddd; */
+  padding: 20px;
+
+  flex: 0 0 100%;
+
+  scroll-snap-align: center;
+}
+
+.carousel>li:nth-child(even) {
+  /* background-color: cyan; */
+}
+
+.carousel>li::after {
+  visibility: hidden;
+}
+
+.carousel::scroll-button(*) {
+  border: 0;
+  font-size: 2rem;
+  background: none;
+  color: white;
+  opacity: 0.7;
+  cursor: pointer;
+}
+
+.carousel::scroll-button(*):hover,
+.carousel::scroll-button(*):focus {
+  opacity: 1;
+}
+
+.carousel::scroll-button(*):active {
+  translate: 1px 1px;
+}
+
+.carousel::scroll-button(*):disabled {
+  opacity: 0.2;
+  cursor: unset;
+}
+
+.carousel::scroll-button(left) {
+  content: "◄" / "Previous";
+}
+
+.carousel::scroll-button(right) {
+  content: "►" / "Next";
+}
+
+.carousel {
+  anchor-name: --my-carousel;
+}
+
+.carousel::scroll-button(*) {
+  position: absolute;
+  position-anchor: --my-carousel;
+}
+
+.carousel::scroll-button(left) {
+  right: calc(anchor(left) - 70px);
+  bottom: calc(anchor(bottom) + 10px);
+}
+
+.carousel::scroll-button(right) {
+  left: calc(anchor(right) - 70px);
+  bottom: calc(anchor(bottom) + 10px);
+}
+
+.carousel {
+  scroll-marker-group: after;
+}
+
+.carousel::scroll-marker-group {
+  position: absolute;
+  position-anchor: --my-carousel;
+  bottom: calc(anchor(bottom) + 10px);
+  justify-self: anchor-center;
+
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+.carousel>li::scroll-marker {
+  content: attr(data-accName);
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+  border: 2px solid white;
+  border-radius: 50%;
+  overflow: hidden;
+  text-indent: 16px;
+}
+
+.carousel>li::scroll-marker:target-current {
+  background-color: white;
+}
+</style>

templates/shortcodes/carousel_item.html

@@ -0,0 +1,3 @@
+<li>
+  {{ body | safe }}
+</li>

templates/shortcodes/svg.html

@@ -0,0 +1,2 @@
+{% set data = load_data(path=path) -%}
+{{ data | safe }}