protege 0.1.0.alpha.1

data/app/assets/javascripts/protege/attachment_picker.js

@@ -0,0 +1,163 @@
+// Attachment picker for the composer forms — a paperclip button opens the native file dialog, chosen
+// files render as removable badges below the composer, and removing one rebuilds the file input via a
+// DataTransfer. Self-contained and framework-agnostic (like copy.js / forms.js): no importmap, no
+// Stimulus, no build step.
+//
+// Markup (see threads/_composer_footer):
+//
+//   <div data-attachment-picker>
+//     <input type="file" multiple hidden data-attachment-picker-input>
+//     <button type="button" data-attachment-picker-trigger>…paperclip…</button>
+//     <ul data-attachment-picker-list></ul>
+//   </div>
+//
+// The <input> is the source of truth for what submits; the DataTransfer (kept on the element) lets us
+// accumulate across multiple picks and drop individual files, which a raw FileList cannot do.
+(function () {
+  "use strict";
+
+  /** The [data-attachment-picker] container enclosing an element. */
+  function rootOf(el) { return el.closest("[data-attachment-picker]"); }
+
+  /** The file input within a container. */
+  function inputOf(root) { return root.querySelector("[data-attachment-picker-input]"); }
+
+  /** The badge list within a container. */
+  function listOf(root) { return root.querySelector("[data-attachment-picker-list]"); }
+
+  /** The input's backing DataTransfer, created on first use. */
+  function transferOf(input) {
+    if (!input.pickerTransfer) input.pickerTransfer = new DataTransfer();
+    return input.pickerTransfer;
+  }
+
+  /** A stable identity for a File, to dedupe repeated picks of the same file. */
+  function fileKey(file) { return file.name + ":" + file.size + ":" + file.lastModified; }
+
+  /**
+   * Merge the input's freshly-picked files into its accumulated DataTransfer (deduped), then write the
+   * combined set back onto the input — so a second pick adds to, rather than replaces, the selection.
+   * @param {HTMLInputElement} input
+   * @returns {void}
+   */
+  function absorb(input) {
+    var transfer = transferOf(input);
+    var seen = {};
+    var i;
+
+    for (i = 0; i < transfer.files.length; i++) seen[fileKey(transfer.files[i])] = true;
+
+    for (i = 0; i < input.files.length; i++) {
+      var file = input.files[i];
+      if (!seen[fileKey(file)]) {
+        transfer.items.add(file);
+        seen[fileKey(file)] = true;
+      }
+    }
+
+    input.files = transfer.files;
+  }
+
+  /**
+   * Drop the file at index from the input's DataTransfer and write the remainder back.
+   * @param {HTMLInputElement} input
+   * @param {number} index
+   * @returns {void}
+   */
+  function removeAt(input, index) {
+    var next = new DataTransfer();
+    var files = transferOf(input).files;
+
+    for (var i = 0; i < files.length; i++) if (i !== index) next.items.add(files[i]);
+
+    input.pickerTransfer = next;
+    input.files = next.files;
+  }
+
+  /** Empty an input's selection (used when the form resets after submit). */
+  function clear(input) {
+    input.pickerTransfer = new DataTransfer();
+    input.value = "";
+  }
+
+  /**
+   * Rebuild the badge list to mirror the input's current files, hiding it when empty.
+   * @param {HTMLElement} root
+   * @returns {void}
+   */
+  function render(root) {
+    var input = inputOf(root);
+    var list = listOf(root);
+    if (!input || !list) return;
+
+    list.innerHTML = "";
+    list.hidden = input.files.length === 0;
+
+    for (var i = 0; i < input.files.length; i++) list.appendChild(badge(input.files[i].name, i));
+  }
+
+  /**
+   * Build one removable filename badge.
+   * @param {string} name
+   * @param {number} index
+   * @returns {HTMLLIElement}
+   */
+  function badge(name, index) {
+    var li = document.createElement("li");
+    li.className = "inline-flex items-center gap-1.5 rounded px-1.5 py-0.5 text-xs";
+    li.setAttribute("style", "background: var(--surface-subtle); border: 1px solid var(--border)");
+
+    var label = document.createElement("span");
+    label.textContent = name;
+
+    var remove = document.createElement("button");
+    remove.type = "button";
+    remove.textContent = "×";
+    remove.className = "leading-none opacity-60 hover:opacity-100";
+    remove.setAttribute("data-attachment-picker-remove", index);
+    remove.setAttribute("aria-label", "Remove " + name);
+
+    li.appendChild(label);
+    li.appendChild(remove);
+    return li;
+  }
+
+  // Delegated so it survives Turbo swaps without re-binding.
+  document.addEventListener("click", function (event) {
+    var trigger = event.target.closest("[data-attachment-picker-trigger]");
+    if (trigger) {
+      var triggerRoot = rootOf(trigger);
+      if (triggerRoot) inputOf(triggerRoot).click();
+      return;
+    }
+
+    var remove = event.target.closest("[data-attachment-picker-remove]");
+    if (remove) {
+      var removeRoot = rootOf(remove);
+      if (removeRoot) {
+        removeAt(inputOf(removeRoot), parseInt(remove.getAttribute("data-attachment-picker-remove"), 10));
+        render(removeRoot);
+      }
+    }
+  });
+
+  document.addEventListener("change", function (event) {
+    var input = event.target.closest("[data-attachment-picker-input]");
+    if (!input) return;
+
+    absorb(input);
+    render(rootOf(input));
+  });
+
+  // The reply composer resets itself after a successful Turbo submit (forms.js). form.reset() clears the
+  // native input but not our accumulated DataTransfer or badges, so clear those too.
+  document.addEventListener("reset", function (event) {
+    if (!(event.target instanceof HTMLFormElement)) return;
+
+    event.target.querySelectorAll("[data-attachment-picker-input]").forEach(function (input) {
+      clear(input);
+      var root = rootOf(input);
+      if (root) render(root);
+    });
+  });
+})();

data/app/assets/javascripts/protege/copy.js

@@ -0,0 +1,80 @@
+// Click-to-copy for any element — self-contained and framework-agnostic (like resize.js / theme.js),
+// so it works regardless of the host app's JavaScript setup: no importmap, no Stimulus, no build step.
+//
+// Markup: mark an element with `data-copy`. Clicking it (or its contents) copies text to the
+// clipboard — the `data-copy` value when set to a real string, otherwise the element's own text.
+//
+//   <code data-copy>npm install protege</code>
+//   <button data-copy="secret-token">Copy token</button>
+//
+// Pair with the `[data-copy]` cursor rule in application.css for the copy affordance on hover.
+(function () {
+  "use strict";
+
+  /**
+   * Copy text to the clipboard, preferring the async Clipboard API and falling back to a hidden
+   * textarea + execCommand for the non-secure contexts that lack it.
+   * @param {string} text - the text to copy
+   * @returns {void}
+   */
+  function writeClipboard(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(text).catch(function () { fallbackCopy(text); });
+      return;
+    }
+
+    fallbackCopy(text);
+  }
+
+  /**
+   * Legacy clipboard copy via a hidden, selected textarea — for browsers/contexts without the
+   * async Clipboard API.
+   * @param {string} text - the text to copy
+   * @returns {void}
+   */
+  function fallbackCopy(text) {
+    var area = document.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "absolute";
+    area.style.left = "-9999px";
+    document.body.appendChild(area);
+    area.select();
+
+    try {
+      document.execCommand("copy");
+    } catch (e) {
+      /* copy unavailable */
+    }
+
+    document.body.removeChild(area);
+  }
+
+  /**
+   * The text a copy target should place on the clipboard: its `data-copy` value when set to a real
+   * string, otherwise its trimmed text content.
+   * @param {HTMLElement} target - the `[data-copy]` element
+   * @returns {string}
+   */
+  function copyText(target) {
+    var explicit = target.getAttribute("data-copy");
+    if (explicit && explicit !== "true") return explicit;
+
+    return (target.textContent || "").trim();
+  }
+
+  /**
+   * Handle a delegated click: copy the nearest copy target's text, if the click landed on one.
+   * @param {MouseEvent} event - the delegated click event
+   * @returns {void}
+   */
+  function onClick(event) {
+    var target = event.target.closest("[data-copy]");
+    if (!target) return;
+
+    writeClipboard(copyText(target));
+  }
+
+  // Delegated so it works for any current or future element without re-binding across Turbo swaps.
+  document.addEventListener("click", onClick);
+})();

data/app/assets/javascripts/protege/forms.js

@@ -0,0 +1,28 @@
+// Reset opted-in forms after a successful Turbo submission.
+//
+// Turbo does not clear a form's fields after submit, and a no-navigation response (e.g. the reply
+// composer's 201 Created, whose new message arrives over a Turbo broadcast) leaves the typed text in
+// place. Add data-reset-on-submit to such a form to clear it once the submission succeeds. Self-contained
+// and framework-agnostic (like theme.js / resize.js), so it works regardless of the host app's JS setup.
+(function () {
+  "use strict";
+
+  /**
+   * Reset the submitting form when a Turbo submission succeeds and the form opted in with
+   * data-reset-on-submit. Only form controls are reset — inline styles (e.g. a resized height) are left
+   * untouched.
+   * @param {CustomEvent} event - the turbo:submit-end event (detail.success; target is the form)
+   * @returns {void}
+   */
+  function resetFormOnSubmitEnd(event) {
+    var form = event.target;
+    var isInstanceOfHTMLFormElement = form instanceof HTMLFormElement;
+    var hasDataResetOnSubmit = form.hasAttribute("data-reset-on-submit");
+
+    if (event.detail && event.detail.success && isInstanceOfHTMLFormElement && hasDataResetOnSubmit) {
+      form.reset();
+    }
+  }
+
+  document.addEventListener("turbo:submit-end", resetFormOnSubmitEnd);
+})();

data/app/assets/javascripts/protege/keys.js

@@ -0,0 +1,212 @@
+// Declarative keyboard shortcuts for any element — self-contained and framework-agnostic (like
+// resize.js / copy.js), so it works regardless of the host app's JavaScript setup: no importmap, no
+// Stimulus, no build step.
+//
+// Markup: put `data-hotkey="<combo>"` on the element a shortcut should activate (a button, link, or
+// form). Two kinds of combo, `+`/space separated, case-insensitive:
+//
+//   Modifier combo — fires immediately, even while typing (scoped to the element's form):
+//     <button data-hotkey="mod+enter">Send</button>          ⌘/Ctrl+Enter submits the form
+//   Leader sequence — two bare keys pressed in turn, e.g. "g" then "i" (GitHub/Linear style):
+//     <a data-hotkey="g i" href="/inbox">Inbox</a>           ignored while typing; conflict-free
+//
+// `mod` is the portable primary modifier — ⌘ on macOS, Ctrl elsewhere. `ctrl`/`meta`/`shift`/`alt`
+// are also accepted; the key is anything `event.key` reports (`enter`, `k`, `/`, …).
+//
+// Scope: a modifier combo inside a <form> fires only while focus is within that same form (so ⌘+Enter
+// in a compose textarea sends *that* form). Leader sequences fire only when NOT typing in a field, so
+// bare letters never clash with the browser. On a match the element is activated: a <form> is
+// submitted, anything else clicked.
+(function () {
+  "use strict";
+
+  var IS_MAC = navigator.platform.indexOf("Mac") === 0 || navigator.platform === "iPhone";
+  var LEADER_TIMEOUT = 1000; // ms to press the second key of a sequence
+  var leader = null;         // the pending leader key of a sequence in progress
+  var leaderAt = 0;          // when it was pressed
+
+  /**
+   * Parse a modifier combo ("mod+enter") into a spec of required modifiers and key.
+   * @param {string} combo
+   * @returns {{mod: boolean, ctrl: boolean, meta: boolean, shift: boolean, alt: boolean, key: string}}
+   */
+  function parseCombo(combo) {
+    var spec = { mod: false, ctrl: false, meta: false, shift: false, alt: false, key: "" };
+
+    combo.toLowerCase().split("+").forEach(function (part) {
+      part = part.trim();
+      if (part === "mod" || part === "ctrl" || part === "meta" || part === "shift" || part === "alt") {
+        spec[part] = true;
+      } else if (part) {
+        spec.key = part;
+      }
+    });
+
+    return spec;
+  }
+
+  /**
+   * Whether a keydown satisfies a modifier combo. `mod` maps to ⌘ on macOS, Ctrl elsewhere.
+   * @param {KeyboardEvent} event
+   * @param {object} spec - a parsed combo
+   * @returns {boolean}
+   */
+  function matches(event, spec) {
+    var wantCtrl = spec.ctrl || (spec.mod && !IS_MAC);
+    var wantMeta = spec.meta || (spec.mod && IS_MAC);
+
+    return event.key.toLowerCase() === spec.key &&
+      event.ctrlKey === wantCtrl &&
+      event.metaKey === wantMeta &&
+      event.shiftKey === spec.shift &&
+      event.altKey === spec.alt;
+  }
+
+  /**
+   * Whether an element is a text-entry target (so bare-key sequences must be ignored while it's focused).
+   * @param {Element} el
+   * @returns {boolean}
+   */
+  function isEditable(el) {
+    return !!el && (el.isContentEditable || /^(input|textarea|select)$/i.test(el.tagName));
+  }
+
+  /**
+   * Whether a modifier-combo element is in scope for the current focus: within its own <form>, or global
+   * when it has no enclosing form.
+   * @param {HTMLElement} element
+   * @returns {boolean}
+   */
+  function inScope(element) {
+    var form = element.closest("form");
+    return !form || form.contains(document.activeElement);
+  }
+
+  /**
+   * Activate a matched element: submit a form, click anything else.
+   * @param {HTMLElement} element
+   * @returns {void}
+   */
+  function activate(element) {
+    if (element.tagName === "FORM") {
+      element.requestSubmit();
+    } else {
+      element.click();
+    }
+  }
+
+  /** Normalize a hotkey string for comparison (lowercase, single-spaced). */
+  function normalize(combo) {
+    return combo.toLowerCase().replace(/\s+/g, " ").trim();
+  }
+
+  /**
+   * Toggle the keyboard-shortcuts overlay open/closed. Purely functional: the overlay's content is a
+   * static, hand-authored template (see shared/_hotkeys) — there is nothing to populate. No-op when the
+   * page has no overlay.
+   * @returns {void}
+   */
+  function toggleHelp() {
+    var help = document.querySelector("[data-hotkey-help]");
+    if (!help) return;
+
+    if (help.open) {
+      help.close();
+    } else {
+      help.showModal();
+    }
+  }
+
+  /**
+   * Fire the first in-scope modifier combo the event matches. Returns true when one handled the event.
+   * @param {KeyboardEvent} event
+   * @param {NodeList} elements
+   * @returns {boolean}
+   */
+  function handleCombo(event, elements) {
+    for (var i = 0; i < elements.length; i++) {
+      var combo = elements[i].getAttribute("data-hotkey");
+      if (combo.indexOf("+") !== -1 && matches(event, parseCombo(combo)) && inScope(elements[i])) {
+        event.preventDefault();
+        activate(elements[i]);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Advance the leader-sequence state machine for a bare keypress. Completes a "leader key" sequence
+   * (e.g. "g i") when the second key arrives in time, otherwise arms/clears the pending leader.
+   * @param {string} key - the lowercased event key
+   * @param {KeyboardEvent} event
+   * @param {NodeList} elements
+   * @returns {void}
+   */
+  function handleSequence(key, event, elements) {
+    var armed = leader && (Date.now() - leaderAt) < LEADER_TIMEOUT;
+    var target = armed && findSequence(elements, leader + " " + key);
+    leader = null;
+
+    if (target) {
+      event.preventDefault();
+      activate(target);
+      return;
+    }
+
+    if (isLeader(elements, key)) {
+      leader = key;
+      leaderAt = Date.now();
+    }
+  }
+
+  /** The element whose hotkey is exactly this sequence, or null. */
+  function findSequence(elements, sequence) {
+    for (var i = 0; i < elements.length; i++) {
+      if (normalize(elements[i].getAttribute("data-hotkey")) === sequence) return elements[i];
+    }
+    return null;
+  }
+
+  /** Whether any hotkey sequence begins with this key (i.e. it's a valid leader). */
+  function isLeader(elements, key) {
+    for (var i = 0; i < elements.length; i++) {
+      if (normalize(elements[i].getAttribute("data-hotkey")).indexOf(key + " ") === 0) return true;
+    }
+    return false;
+  }
+
+  /**
+   * Handle a delegated keydown: modifier combos first, then (when not typing) bare-key leader sequences.
+   * @param {KeyboardEvent} event
+   * @returns {void}
+   */
+  function onKeydown(event) {
+    var elements = document.querySelectorAll("[data-hotkey]");
+
+    if (handleCombo(event, elements)) return;
+
+    // Leader sequences and "?" are bare-key and never fire while typing, so they can't clash with the browser.
+    if (event.ctrlKey || event.metaKey || event.altKey || isEditable(document.activeElement)) {
+      leader = null;
+      return;
+    }
+
+    if (event.key === "?") {
+      event.preventDefault();
+      toggleHelp();
+      return;
+    }
+
+    handleSequence(event.key.toLowerCase(), event, elements);
+  }
+
+  // Delegated so it works for any current or future element without re-binding across Turbo swaps.
+  document.addEventListener("keydown", onKeydown);
+
+  // Expose the help toggle so a visible control (the header's "?" key button) can open the overlay via
+  // the same populate-and-open path the "?" keypress uses. Mirrors theme.js's global toggleTheme().
+  window.toggleHotkeyHelp = function () {
+    toggleHelp();
+  };
+})();

data/app/assets/javascripts/protege/resize.js

@@ -0,0 +1,149 @@
+// Generic drag-to-resize for any container — self-contained and framework-agnostic.
+//
+// The engine ships and includes this directly (like theme.js), so it works regardless of the host
+// app's JavaScript setup: no importmap, no Stimulus, no build step. It only needs the asset pipeline
+// that already serves the engine's CSS/JS.
+//
+// Markup: mark a container with `data-resize` and give it a handle child with `data-resize-handle`.
+//
+//   <aside data-resize data-resize-edge="left"
+//          data-resize-min="240" data-resize-max="720" data-resize-key="protege:panel-width">
+//     <div data-resize-handle></div>
+//     … content …
+//   </aside>
+//
+// edge: "left"|"right" resize width, "top"|"bottom" resize height (default "left").
+// key:  optional localStorage key — when set, the size is remembered across page loads.
+(function () {
+  "use strict";
+
+  /**
+   * Whether an edge resizes along the horizontal axis (width) vs the vertical axis (height).
+   * @param {string} edge - "left" | "right" | "top" | "bottom"
+   * @returns {boolean} true for horizontal (left/right)
+   */
+  function isHorizontal(edge) {
+    return edge === "left" || edge === "right";
+  }
+
+  /**
+   * The drag direction (toward the element's interior) that grows the element.
+   * @param {string} edge - "left" | "right" | "top" | "bottom"
+   * @returns {number} -1 when dragging up/left grows it, otherwise +1
+   */
+  function growSign(edge) {
+    return edge === "left" || edge === "top" ? -1 : 1;
+  }
+
+  /**
+   * Constrain a size to the container's configured min/max.
+   * @param {number} value - the desired size in px
+   * @param {object} cfg - the resolved container config
+   * @returns {number} the clamped size
+   */
+  function clampSize(value, cfg) {
+    return Math.max(cfg.min, Math.min(cfg.max, value));
+  }
+
+  /**
+   * Read the resize configuration from a container's data attributes.
+   * @param {HTMLElement} panel - the `[data-resize]` container
+   * @returns {{edge: string, horizontal: boolean, sign: number, min: number, max: number, key: string}}
+   */
+  function readConfig(panel) {
+    var edge = panel.getAttribute("data-resize-edge") || "left";
+    return {
+      edge: edge,
+      horizontal: isHorizontal(edge),
+      sign: growSign(edge),
+      min: parseFloat(panel.getAttribute("data-resize-min")) || 0,
+      max: parseFloat(panel.getAttribute("data-resize-max")) || Infinity,
+      key: panel.getAttribute("data-resize-key") || ""
+    };
+  }
+
+  /**
+   * Apply a (clamped) size to the container along its resize axis.
+   * @param {HTMLElement} panel - the container
+   * @param {object} cfg - the resolved config
+   * @param {number} size - the desired size in px
+   * @returns {void}
+   */
+  function applySize(panel, cfg, size) {
+    panel.style[cfg.horizontal ? "width" : "height"] = clampSize(size, cfg) + "px";
+  }
+
+  /**
+   * Persist a container's current size to localStorage, if a key is configured.
+   * @param {HTMLElement} panel - the container
+   * @param {object} cfg - the resolved config
+   * @returns {void}
+   */
+  function persist(panel, cfg) {
+    if (!cfg.key) return;
+
+    var size = cfg.horizontal ? panel.offsetWidth : panel.offsetHeight;
+    
+    try { 
+      window.localStorage.setItem(cfg.key, size); 
+    } catch (e) { 
+      /* storage unavailable */ 
+    }
+  }
+
+  /**
+   * Begin a drag from a handle's pointerdown: track the pointer and resize its container until release.
+   * @param {PointerEvent} event - the delegated pointerdown event
+   * @returns {void}
+   */
+  function beginDrag(event) {
+    var handle = event.target.closest("[data-resize-handle]");
+    if (!handle) return;
+
+    var panel = handle.closest("[data-resize]");
+    if (!panel) return;
+
+    event.preventDefault();
+    var cfg = readConfig(panel);
+    var rect = panel.getBoundingClientRect();
+    var startPos = cfg.horizontal ? event.clientX : event.clientY;
+    var startSize = cfg.horizontal ? rect.width : rect.height;
+
+    function onMove(e) {
+      var pos = cfg.horizontal ? e.clientX : e.clientY;
+      applySize(panel, cfg, startSize + cfg.sign * (pos - startPos));
+    }
+
+    function onUp() {
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onUp);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+      persist(panel, cfg);
+    }
+
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = cfg.horizontal ? "col-resize" : "row-resize";
+  }
+
+  /**
+   * Restore every resizable container's persisted size. Runs on load and after Turbo navigations.
+   * @returns {void}
+   */
+  function restoreAll() {
+    var panels = document.querySelectorAll("[data-resize][data-resize-key]");
+
+    Array.prototype.forEach.call(panels, function (panel) {
+      var cfg = readConfig(panel);
+      var saved = parseFloat(window.localStorage.getItem(cfg.key));
+      if (saved) applySize(panel, cfg, saved);
+    });
+  }
+
+  // Delegated so it works for any current or future container without re-binding across Turbo swaps.
+  document.addEventListener("pointerdown", beginDrag);
+  document.addEventListener("DOMContentLoaded", restoreAll);
+  document.addEventListener("turbo:load", restoreAll);
+})();

data/app/assets/javascripts/protege/theme.js

@@ -0,0 +1,25 @@
+// Apply saved theme immediately (before DOMContentLoaded to avoid flash)
+if (localStorage.getItem("protege-theme") === "dark") {
+  document.documentElement.classList.add("dark");
+}
+
+// Called by the toggle button onclick
+window.toggleTheme = function () {
+  var isDark = document.documentElement.classList.toggle("dark");
+  localStorage.setItem("protege-theme", isDark ? "dark" : "light");
+
+  var dot = document.querySelector(".toggle-dot");
+  if (dot) {
+    dot.classList.toggle("translate-x-4", isDark);
+    dot.classList.toggle("translate-x-1", !isDark);
+  }
+};
+
+// Sync toggle dot position on page load
+document.addEventListener("DOMContentLoaded", function () {
+  var dot = document.querySelector(".toggle-dot");
+  if (dot && document.documentElement.classList.contains("dark")) {
+    dot.classList.add("translate-x-4");
+    dot.classList.remove("translate-x-1");
+  }
+});

data/app/assets/stylesheets/protege/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */