link to Writing-UserCSS in editor

openstyles · Jul 29, 2024 · ba6e588 · ba6e588
1 parent 6e18fbe
commit ba6e588
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/edit.html b/edit.html
@@ -357,7 +357,7 @@
     <div id="header">
       <h1 id="heading" i18n="data-edit:editStyleHeading, data-add:addStyleTitle">
         <a class="usercss-only icon"
-           href="https://github.com/openstyles/stylus/wiki/Usercss"
+           href="https://github.com/openstyles/stylus/wiki/Writing-UserCSS"
            i18n="title:externalUsercssDocument" target="_blank">
           <i class=i-info></i>
         </a>

diff --git a/edit/edit.css b/edit/edit.css
@@ -79,6 +79,12 @@ html:not(.is-new-style) #heading::before {
   flex-direction: column;
   & h1 {
     margin-top: 0;
+    .usercss & {
+      margin-bottom: 0;
+      + a {
+        margin-bottom: 1em;
+      }
+    }
   }
 }
 .sectioned {
@@ -125,7 +131,7 @@ html:not(.is-new-style) #heading::before {
 #basic-info-enabled {
   margin-top: .25rem;
   > :nth-last-child(n + 2) {
-    margin-right: 1em;
+    margin-right: var(--pad05);
   }
 }
 #livePreview-settings {
@@ -966,7 +972,7 @@ i,
       font-size: 14px;
     }
     .settings h2 {
-      max-width: 7vw;
+      max-width: 10vw;
     }
   }
   #header.sticky .hide-if-sticky,
@@ -992,7 +998,11 @@ i,
       flex-grow: 1;
     }
     > *:not(:last-child) {
-      margin-right: 0.8rem;
+      margin-right: var(--pad05);
+    }
+    > a {
+      order: 1;
+      align-self: center;
     }
   }
   #actions {

diff --git a/edit/edit.js b/edit/edit.js
@@ -72,6 +72,7 @@ editor.styleReady.then(async () => {
   const scroller = isUsercss ? $('.CodeMirror-scroll') : document.body;
   const xoRoot = isUsercss ? scroller : undefined;
   const xo = new IntersectionObserver(onScrolled, {root: xoRoot});
+  const elInfo = $('h1 a');
   scroller.appendChild(el);
   onCompactToggled(editor.mqCompact);
   editor.mqCompact.on('change', onCompactToggled);
@@ -85,8 +86,10 @@ editor.styleReady.then(async () => {
     }
     if (mq.matches) {
       xo.observe(el);
+      $('#basic-info-name').after(elInfo);
     } else {
       xo.disconnect();
+      $('h1').append(elInfo);
     }
   }
   /** @param {IntersectionObserverEntry[]} entries */