Add carousel for RSMD recommendations

Author: meldra

layouts/shortcodes/rsmd.html

@@ -0,0 +1,55 @@
+
+<div id="rsmd-carousel" class="carousel slide rounded-2 text-center pb-4" data-bs-ride="carousel" data-bs-touch="true">
+  <div class="carousel-inner">
+    <div class="carousel-item active rounded-2" data-bs-interval="20000">
+      <dl class="m-3 px-md-5">
+        <dt>RSMD 4.1</dt>
+        <dd class="px-5">Add software name and description of the software's functionality and purpose <a class="fw-bold" href="https://fair-impact.github.io/RSMD-guidelines/4.Description_Classification/#rsmd-41">[...]</a></dd>
+        <dd class="fst-italic fw-bold">Essential</dd>
+      </dl>
+    </div>
+    <div class="carousel-item rounded-2" data-bs-interval="20000">
+      <dl class="m-3 px-md-5">
+        <dt>RSMD 4.2</dt>
+        <dd class="px-5">Add descriptive metadata for classification purposes embedded in the code <a class="fw-bold" href="https://fair-impact.github.io/RSMD-guidelines/4.Description_Classification/#rsmd-42">[...]</a></dd>
+        <dd class="fst-italic fw-bold">Important</dd>
+      </dl>
+    </div>
+    <div class="carousel-item rounded-2" data-bs-interval="20000">
+      <dl class="m-3 px-md-5">
+        <dt>RSMD 4.3</dt>
+        <dd class="px-5">Cite related resources (e.g journal articles) describing the software with a persistent identifier or stable URL <a class="fw-bold" href="https://fair-impact.github.io/RSMD-guidelines/4.Description_Classification/#rsmd-43">[...]</a></dd>
+        <dd class="fst-italic fw-bold">Important</dd>
+      </dl>
+    </div>
+    <div class="carousel-item rounded-2" data-bs-interval="20000">
+      <dl class="m-3 px-md-5">
+        <dt>RSMD 4.4</dt>
+        <dd class="px-5">Add descriptive metadata of the software in a machine readable format <a class="fw-bold" href="https://fair-impact.github.io/RSMD-guidelines/4.Description_Classification/#rsmd-44" >[...]</a></dd>
+        <dd class="fst-italic fw-bold">Important</dd>
+      </dl>
+    </div>
+    <div class="carousel-item rounded-2" data-bs-interval="20000">
+      <dl class="m-3 px-md-5">
+        <dt>RSMD 5.1</dt>
+        <dd class="px-5">Add intrinsic metadata about authors, this information can be captured in a human readable format <a class="fw-bold" href="https://fair-impact.github.io/RSMD-guidelines/5.Credit_Attribution/#rsmd-51">[...]</a></dd>
+        <dd class="fst-italic fw-bold">Essential</dd>
+      </dl>
+    </div>
+  <button class="carousel-control-prev" type="button" data-bs-target="#rsmd-carousel" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </button>
+  <button class="carousel-control-next" type="button" data-bs-target="#rsmd-carousel" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </button>
+  </div>
+  <div class="carousel-indicators my-0">
+    <button type="button" data-bs-target="#rsmd-carousel" data-bs-slide-to="0" class="carousel-indicator active" aria-current="true" aria-label="Slide 1"></button>
+    <button type="button" data-bs-target="#rsmd-carousel" data-bs-slide-to="1" class="carousel-indicator" aria-label="Slide 2"></button>
+    <button type="button" data-bs-target="#rsmd-carousel" data-bs-slide-to="2" class="carousel-indicator" aria-label="Slide 3"></button>
+    <button type="button" data-bs-target="#rsmd-carousel" data-bs-slide-to="3" class="carousel-indicator" aria-label="Slide 4"></button>
+    <button type="button" data-bs-target="#rsmd-carousel" data-bs-slide-to="4" class="carousel-indicator" aria-label="Slide 5"></button>
+  </div>
+</div>

themes/CodeMeta-Pyramids/static/css/codemeta.css

@@ -124,6 +124,44 @@ div.highlight {
  justify-content:center;
 }
 
+/*!
+ * Carousel theming
+ */
+
+.slide, .carousel-item {
+  background-color: var(--bs-secondary-bg);
+}
+
+[data-bs-theme=dark] .slide, [data-bs-theme=dark] .carousel-item {
+  background-color: var(--bs-border-color) !important;
+  color: var(--bs-body-color);
+}
+
+.carousel .carousel-indicators .active {
+  transform: none;
+  box-shadow: none;
+  height: 7px;
+}
+
+.carousel .carousel-indicators [data-bs-target] {
+  margin: 5px;
+  background-color: var(--bs-body-color);
+}
+
+.carousel .carousel-indicator:hover {
+  height: 7px;
+}
+
+.carousel .carousel-control-prev-icon {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+  fill: var(--bs-body-color);
+}
+
+.carousel .carousel-control-next-icon {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+  fill: var(--bs-body-color);
+}
+
 /*!
  * ToC theming
  */