fix dev vs prod css import order, and lint

Author: vincerubinetti

site/.prettierrc.mjs

@@ -6,6 +6,7 @@ export default {
     "prettier-plugin-css-order",
   ],
   importOrder: [
+    "^@/layouts/Layout.astro",
     "^react",
     "^[a-zA-Z]",
     "^@[a-zA-Z]",

site/src/components/Heading.astro

@@ -33,11 +33,11 @@ const Component = `h${level}`;
   }
 
   .anchor {
+    width: 0;
     color: var(--primary);
     white-space: nowrap;
     opacity: 0;
     transition: opacity var(--fast);
-    width: 0;
   }
 
   .heading:hover .anchor,

site/src/layouts/Layout.astro

@@ -1,10 +1,10 @@
 ---
+import "./global.css";
 import { GoogleAnalytics } from "astro-google-analytics";
 import Footer from "@/components/Footer.astro";
 import Header from "@/components/Header.astro";
 import Tooltips from "@/components/Tooltips.astro";
 import ViewCorner from "@/components/ViewCorner";
-import "./global.css";
 
 const title = Astro.props.frontmatter?.title || Astro.props.title;
 

site/src/pages/about.astro

@@ -1,4 +1,5 @@
 ---
+import Layout from "@/layouts/Layout.astro";
 import { FaGithub } from "react-icons/fa6";
 import { LuBadgeInfo } from "react-icons/lu";
 import { kebabCase } from "lodash-es";
@@ -7,7 +8,6 @@ import Heading from "@/components/Heading.astro";
 import Link from "@/components/Link";
 import TableOfContents from "@/components/TableOfContents";
 import { team } from "@/data/team";
-import Layout from "@/layouts/Layout.astro";
 import { repo } from "@/layouts/meta";
 ---
 

site/src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
+import Layout from "@/layouts/Layout.astro";
 import { FaNewspaper } from "react-icons/fa6";
 import { LiaBarcodeSolid } from "react-icons/lia";
 import Logo from "@/assets/logo.svg?react";
 import Button from "@/components/Button";
-import Layout from "@/layouts/Layout.astro";
 ---
 
 <Layout title="Home">

site/src/pages/loci/[id].astro

@@ -1,6 +1,7 @@
 ---
 /** LOCUS PAGE */
 
+import Layout from "@/layouts/Layout.astro";
 import { FaCircleMinus, FaCirclePlus, FaRegCalendar } from "react-icons/fa6";
 import { LiaBarcodeSolid, LiaSlashSolid } from "react-icons/lia";
 import { TbDna2, TbVirus } from "react-icons/tb";
@@ -12,7 +13,6 @@ import TableOfContents from "@/components/TableOfContents";
 import { deriveLocus } from "@/data/derived";
 import { getIdentifiers } from "@/data/identifiers";
 import { getInheritance } from "@/data/inheritance";
-import Layout from "@/layouts/Layout.astro";
 import { repo } from "@/layouts/meta";
 import AdditionalLiterature from "@/locus/AdditionalLiterature";
 import Citation from "@/locus/Citation";
@@ -633,6 +633,7 @@ const blame = getJsonBlame(
     flex-wrap: wrap;
     /* justify-content: center; */
     gap: 40px;
+    text-align: left;
   }
 
   .identifiers > * {

site/src/pages/loci/index.astro

@@ -1,6 +1,7 @@
 ---
 /** LOCI PAGE */
 
+import Layout from "@/layouts/Layout.astro";
 import { FaArrowDown, FaChartLine, FaGithub, FaTable } from "react-icons/fa6";
 import { LiaBarcodeSolid } from "react-icons/lia";
 import { LuDownload } from "react-icons/lu";
@@ -9,7 +10,6 @@ import Heading from "@/components/Heading.astro";
 import Link from "@/components/Link";
 import PlotlyChart from "@/components/PlotlyChart";
 import TableOfContents from "@/components/TableOfContents";
-import Layout from "@/layouts/Layout.astro";
 import { repo, version } from "@/layouts/meta";
 import Table from "@/loci/Table";
 import ageOnset from "../../../../data/plots/age-onset.json";

site/src/pages/resources.mdx

@@ -12,7 +12,10 @@ import styles from "./_resources.module.css";
 
 <section>
 
-<Heading level={1}><PiBooksBold client:only="react" />Resources</Heading>
+<Heading level={1}>
+  <PiBooksBold client:only="react" />
+  Resources
+</Heading>
 
 </section>
 
@@ -89,7 +92,9 @@ import styles from "./_resources.module.css";
 
 <section>
 
-<Heading level={3}>Why do repeat locus definitions differ between resources?</Heading>
+<Heading level={3}>
+  Why do repeat locus definitions differ between resources?
+</Heading>
 
 There are often multiple ways to define a given repeat locus.
 For example, defining a locus as a stretch of perfectly repeating motifs tends to result in a narrower locus than strategies allowing for interruptions.