feat(feed-directory): present form for dynamic params [wip]

Signed-off-by: Gil Desmarais <git@desmarais.de>

Author: gildesmarais

_includes/head_custom.html

@@ -63,13 +63,46 @@
   async
   src="//gc.zgo.at/count.js"
 ></script>
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
-  <symbol id="copy-icon" viewBox="0 0 16 16">
+<div class="svg-defs-hidden">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="rss-icon">
+    <rect
+      width="512"
+      height="512"
+      x="-512"
+      y="-512"
+      rx="70"
+      ry="70"
+      style="fill: #ea7819; fill-opacity: 1; stroke: none"
+      transform="scale(-1)"
+    />
+    <path
+      d="M81.056 267.05c43.705 0 84.79 17.072 115.665 48.124 30.931 31.051 47.961 72.411 47.961 116.44h67.35c0-127.885-103.62-231.921-230.976-231.921zm.106-119.4c155.76 0 282.488 127.42 282.488 284.049H431C431 237.925 274.054 80.301 81.162 80.301zm93.135 236.998c0 25.757-20.892 46.649-46.649 46.649-25.756 0-46.648-20.885-46.648-46.649C81 358.878 101.885 338 127.641 338c25.757 0 46.656 20.878 46.656 20.878"
+      style="fill: #fff"
+    />
+  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="edit-icon">
+    <path
+      fill="currentColor"
+      d="M3 17.25V21h3.75L18.75 9.75l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+    />
+  </svg>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="800"
+    height="800"
+    viewBox="0 0 32 32"
+    id="settings-icon"
+  >
+    <path
+      d="M28 13V8a2 2 0 0 0-2-2h-3v2h3v5a3.98 3.98 0 0 0 1.382 3A3.98 3.98 0 0 0 26 19v5h-3v2h3a2 2 0 0 0 2-2v-5a2 2 0 0 1 2-2v-2a2 2 0 0 1-2-2"
+    />
     <path
-      d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"
+      d="m17 9-.857 3h2L19 9h2l-.857 3H22v2h-2.428l-1.143 4H21v2h-3.143L17 23h-2l.857-3h-2L13 23h-2l.857-3H10v-2h2.429l1.143-4H11v-2h3.143L15 9Zm.572 5h-2l-1.143 4h2Z"
+      style="fill-rule: evenodd"
     />
     <path
-      d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zM9 2H7v.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V2z"
+      d="M6 13V8h3V6H6a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2v2a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h3v-2H6v-5a3.98 3.98 0 0 0-1.382-3A3.98 3.98 0 0 0 6 13"
     />
-  </symbol>
-</svg>
+    <path d="M0 0h32v32H0z" style="fill: none" />
+  </svg>
+</div>

_sass/custom/_feed-directory.scss

@@ -8,6 +8,6 @@
 // @import files directly from the sass/ directory:;
 
 @import "base";
-
+@import "feed-directory";
 // Don't write any SCSS in this file as stylelint does not fix it,
 // just use the sass directory.

assets/css/main.scss

@@ -16,24 +16,22 @@
   --transition-shadow: box-shadow 0.2s ease-in-out;
 }
 
-#configs input[name="instance"],
-#configs input[name="search"] {
-  width: 100%;
+details {
+  transition: all 0.2s ease-in-out;
+}
+
+summary {
+  cursor: pointer;
+  outline: none;
 }
 
-.js__copy-element {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  user-select: text;
-  opacity: 0;
+summary:hover {
+  color: var(--link-color);
 }
 
-.js__copy-element::selection {
-  background-color: transparent;
+#configs input[name="instance"],
+#configs input[name="search"] {
+  inline-size: 100%;
 }
 
 .noscript {
@@ -44,95 +42,6 @@
   border: 1px solid var(--color-error);
 }
 
-button[data-bind-click="copy"] {
-  padding: var(--button-padding-y) var(--button-padding-x);
-  font: inherit;
-  line-height: 1.2;
-  color: var(--color-text);
-  cursor: pointer;
-  border: 2px solid transparent;
-  border-radius: var(--border-radius-sm);
-  transition: var(--transition-border), var(--transition-shadow);
-}
-
-button[data-bind-click="copy"]:focus-visible {
-  outline: 2px dashed var(--color-accent);
-  outline-offset: 2px;
-}
-
-button[data-bind-click="copy"].copied,
-button[data-bind-click="copy"].copied:hover,
-button[data-bind-click="copy"].copied:active {
-  border-color: var(--color-accent);
-  box-shadow: inset 0 2px 4px var(--color-accent-bg);
-}
-
-.card-deck {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.card {
-  width: 100%;
-}
-.card-header {
-  padding: 0.75rem 1.25rem;
-  margin-bottom: 0;
-  background-color: var(--table-background-color);
-  border-bottom: 1px solid var(--border-color);
-  position: relative;
-}
-
-.card-body {
-  padding: 1.25rem;
-}
-.badge {
-  position: absolute;
-  right: 0;
-  animation: 0;
-
-  display: inline-block;
-  padding: 0.2em 0.4em;
-  font-size: 75%;
-  border-radius: 0.25rem;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-.btn-icon {
-  padding: 0.1rem 0.2rem;
-  font-size: 0.8rem;
-  line-height: 1;
-  border-radius: var(--border-radius);
-  background-color: transparent;
-  border: 1px solid transparent;
-  color: var(--link-color);
-}
-
-.btn-icon svg {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.125em;
-  fill: currentColor;
-}
-
-.d-flex-justify-content-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-details {
-  transition: all 0.2s ease-in-out;
-}
-
-summary {
-  cursor: pointer;
-  outline: none;
-}
-
-summary:hover {
-  color: var(--link-color);
+.svg-defs-hidden {
+  display: none;
 }
-
-@import "custom/feed-directory";