separate editor.css

src/static/editor.css

···
+link-editor-item {
+    display: block;
+    margin-top: 1em;
+    margin-left: -0.25em;
+    margin-right: -0.25em;
+    padding: 0.25em;
+    border: 1px solid var(--color-border-secondary);
+    border-radius: 2px;
+}
+
+link-editor-header {
+    display: flex;
+    flex-direction: row;
+    gap: 0.25em;
+}
+
+link-editor-drag-handle {
+    background: var(--color-background-secondary);
+    display: flex;
+    flex-grow: 0;
+    padding: 2px;
+    line-height: 100%;
+    font-size: 1.5em;
+    align-items: center;
+}
+
+link-editor-buttons {
+    display: flex;
+    flex-direction: row;
+    gap: 0.25em;
+    margin-top: 0.25em;
+}

src/static/style.css

···
     padding: 0;
 }
 
-link-item {
+.link-item {
     background: currentColor;
     display: block;
     flex-grow: 1;
-    transition: transform 0.1s;
+    padding: 0.5em;
     text-align: center;
-    padding: 0.5em;
+    transition: transform 0.1s;
 }
 
-link-item:not(.static) {
+.link-item:not(.static) {
     box-shadow: -3px 3px 0 rgba(from currentColor r g b / 0.6);
 }
 
-link-item-title {
+.link-item-title {
     color: white;
 }
 
-link-item link-item-detail {
+.link-item .link-item-detail {
     color: white;
     display: block;
     font-size: 0.75em;
···
     transition: opacity 0.3s;
 }
 
-link-item:not(.static):hover {
+.link-item:not(.static):hover {
     transform: scale(1.05);
 
-    & link-item-detail {
+    & .link-item-detail {
         opacity: 1;
     }
 }
 
-li:has(link-item) + li:has(link-item) {
+li:has(.link-item) + li:has(.link-item) {
     margin-top: 1rem;
 }
 
···
     margin-top: 5em;
     text-align: center;
 }
-
-link-editor-item {
-    display: block;
-    margin-top: 1em;
-    margin-left: -0.25em;
-    margin-right: -0.25em;
-    padding: 0.25em;
-    border: 1px solid var(--color-border-secondary);
-    border-radius: 2px;
-}
-
-link-editor-header {
-    display: flex;
-    flex-direction: row;
-    gap: 0.25em;
-}
-
-link-editor-drag-handle {
-    background: var(--color-background-secondary);
-    display: flex;
-    flex-grow: 0;
-    padding: 2px;
-    line-height: 100%;
-    font-size: 1.5em;
-    align-items: center;
-}
-
-link-editor-buttons {
-    display: flex;
-    flex-direction: row;
-    gap: 0.25em;
-    margin-top: 0.25em;
-}

src/templates/editor.html

···
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
     <link rel="stylesheet" href="{{ url_for('static', filename='inter.css') }}" />
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
+    <link rel="stylesheet" href="{{ url_for('static', filename='editor.css') }}" />
     <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon-16.png') }}" />
     <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32.png') }}" />
     <link rel="icon" type="image/png" sizes="48x48" href="{{ url_for('static', filename='favicon-48.png') }}" />
···
           <template x-for="(link, index) in links">
             <link-editor-item x-data="{ editing: !link.url }" x-sort:item="link.url">
               <link-editor-header>
-                <link-item class="static" :style="'color: ' + link.background">
-                  <link-item-title x-text="link.title"></link-item-title>
-                  <link-item-detail x-show="link.detail" x-text="link.detail"></link-item-detail>
-                </link-item>
+                <div class="static link-item" :style="'color: ' + link.background">
+                  <span class="link-item-title" x-text="link.title"></span>
+                  <span class="link-item-detail" x-show="link.detail" x-text="link.detail"></span>
+                </div>
                 <link-editor-drag-handle x-sort:handle>⠿</link-editor-drag-handle>
               </link-editor-header>
               <div x-show="!editing">

src/templates/profile.html

···
         {% for link in links %}
         <li style="color: {{ link.background }}">
           <a href="{{ link.url }}">
-            <link-item>
-              <link-item-title>{{ link.title }}</link-item-title>
+            <div class="link-item">
+              <span class="link-item-title">{{ link.title }}</span>
               {% if link.detail %}
-              <link-item-detail>{{ link.detail }}</link-item-detail>
+              <span class="link-item-detail">{{ link.detail }}</span>
               {% endif %}
-            </link-item>
+            </div><!-- .link-item -->
           </a>
         </li>
         {% endfor %}