Revert slash, remove storybook-static

.gitignore

@@ -26,3 +26,4 @@ dist-ssr
 
 .yarn/*
 !.yarn/patches/
+storybook-static

.storybook/preview.tsx

@@ -1,11 +1,12 @@
-import { css, cx } from '@/lib/css';
-import { theme } from '@/theme';
 import { css as csl } from '@linaria/core';
 import type { Preview } from '@storybook/react';
 import 'ress';
 import 'unfonts.css';
 import { withRouter } from 'storybook-addon-remix-react-router';
 
+import { css, cx } from '@lib/css';
+import { theme } from '@theme';
+
 const preview: Preview = {
   parameters: {
     layout: 'fullscreen',

src/.stories/components/corner.stories.tsx

@@ -1,6 +1,7 @@
-import { GithubCorner } from '@/components/github';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { GithubCorner } from '@components/github';
+
 const meta: Meta<typeof GithubCorner> = {
   title: 'Components/Github/Corner',
   component: GithubCorner,

src/.stories/components/footer.stories.tsx

@@ -1,6 +1,7 @@
-import { Footer as Component } from '@/components/layout';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Footer as Component } from '@components/layout';
+
 const meta: Meta<typeof Component> = {
   title: 'Components/Layout/Footer',
   component: Component,

src/.stories/components/grid.stories.tsx

@@ -1,10 +1,11 @@
-import { Layout as Component } from '@/components/layout';
-import { css, cx } from '@/lib/css';
-import { useDimensions } from '@/lib/hooks';
-import { theme } from '@/theme';
 import type { Meta, StoryObj } from '@storybook/react';
 import type { ReactNode } from 'react';
 
+import { Layout as Component } from '@components/layout';
+import { css, cx } from '@lib/css';
+import { useDimensions } from '@lib/hooks';
+import { theme } from '@theme';
+
 const meta: Meta = {
   title: 'Components/Layout/Layout',
 };

src/.stories/components/loc._.tsx

@@ -1,6 +1,7 @@
-import { LOC } from '@/components/github';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { LOC } from '@components/github';
+
 const meta: Meta<typeof LOC> = {
   title: 'Components/Github/Lines of Code',
   component: LOC,

src/.stories/components/people_line.stories.tsx

@@ -1,6 +1,7 @@
-import { PeopleLine as Component, Person, type PersonProps } from '@/components/people_line';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { PeopleLine as Component, Person, type PersonProps } from '@components/people_line';
+
 const meta: Meta<typeof Component> = {
   title: 'Components/People Line',
   component: Component,

src/.stories/components/section.stories.tsx

@@ -1,8 +1,9 @@
-import { Section as Component, type SectionProps } from '@/components/layout';
-import type { SectionHeaderProps } from '@/components/layout/section/section_header';
-import { css } from '@/lib/css';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Section as Component, type SectionProps } from '@components/layout';
+import type { SectionHeaderProps } from '@components/layout/section/section_header';
+import { css } from '@lib/css';
+
 const meta: Meta<typeof Component> = {
   title: 'Components/Layout/Section',
   component: Component,
@@ -22,7 +23,12 @@ export const Section: StoryObj<Arguments> = {
   render: (args: Arguments) => {
     return (
       <Component id="storybook">
-        <Component.Header {...args} className={css`grid-area: auto/1/auto/span 12`} />
+        <Component.Header
+          {...args}
+          className={css`
+            grid-area: auto/1/auto/span 12;
+          `}
+        />
         <div style={{ textAlign: 'center' }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec dui nec ligula bibendum
           fringilla. Nulla facilisi. Donec ut nunc nec nunc facilisis fermentum. Nulla facilisi.

src/.stories/components/stats.stories.tsx

@@ -1,6 +1,7 @@
-import { GithubStats } from '@/components/github';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { GithubStats } from '@components/github';
+
 const meta: Meta<typeof GithubStats> = {
   title: 'Components/Github/Stats',
   component: GithubStats,

src/.stories/components/timeline.stories.tsx

@@ -1,7 +1,8 @@
-import type { TimelineItemProps } from '@/components/timeline';
-import { Timeline as Component, TimelineItem } from '@/components/timeline';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import type { TimelineItemProps } from '@components/timeline';
+import { Timeline as Component, TimelineItem } from '@components/timeline';
+
 const meta: Meta<typeof Component> = {
   title: 'Components/Timeline',
   component: Component,

src/.stories/home/about.stories.tsx

@@ -1,6 +1,7 @@
-import { Home } from '@/home';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Home } from '@home';
+
 const meta: Meta<typeof Home.About> = {
   title: 'Home/About',
   component: Home.About,

src/.stories/home/career.stories.tsx

@@ -1,6 +1,7 @@
-import { Home } from '@/home';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Home } from '@home';
+
 const meta: Meta<typeof Home.Career> = {
   title: 'Home/Career',
   component: Home.Career,

src/.stories/home/home.stories.tsx

@@ -1,6 +1,7 @@
-import { Home as Component } from '@/home';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Home as Component } from '@home';
+
 const meta: Meta<typeof Home> = {
   title: 'Pages/Home',
   component: Component,

src/.stories/home/medium.stories.tsx

@@ -1,6 +1,7 @@
-import { Home } from '@/home';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Home } from '@home';
+
 const meta: Meta<typeof Home.Medium> = {
   title: 'Home/Medium',
   component: Home.Medium,

src/.stories/home/portfolio.stories.tsx

@@ -1,6 +1,7 @@
-import { Home } from '@/home';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { Home } from '@home';
+
 const meta: Meta<typeof Home.Portfolio> = {
   title: 'Home/Portfolio',
   component: Home.Portfolio,

src/.stories/theme/font.stories.tsx

@@ -1,7 +1,8 @@
-import { css } from '@/lib/css';
-import { theme } from '@/theme';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { css } from '@lib/css';
+import { theme } from '@theme';
+
 const meta: Meta = {
   title: 'Theme/Font',
 };

src/.stories/theme/icons.stories.tsx

@@ -1,7 +1,8 @@
-import { toProps } from '@/lib/css';
-import { theme } from '@/theme';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { toProps } from '@lib/css';
+import { theme } from '@theme';
+
 const meta: Meta = {
   title: 'Theme/Icons',
 };

src/.stories/theme/spacing.stories.tsx

@@ -1,9 +1,10 @@
-import { css, cx } from '@/lib/css';
-import { useDimensions } from '@/lib/hooks';
-import { theme } from '@/theme';
-import { type UtopiaSize } from '@/theme/spacing';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { css, cx } from '@lib/css';
+import { useDimensions } from '@lib/hooks';
+import { theme } from '@theme';
+import { type UtopiaSize } from '@theme/spacing';
+
 const meta: Meta = {
   title: 'Theme/Spacing',
 };
@@ -13,21 +14,66 @@ export default meta;
 const { spacing } = theme.vars;
 
 const sizes: Record<UtopiaSize, string> = {
-  step0: css`height: var(${spacing.step0}); width: var(${spacing.step0});`,
-  step1: css`height: var(${spacing.step1}); width: var(${spacing.step1});`,
-  step2: css`height: var(${spacing.step2}); width: var(${spacing.step2});`,
-  step3: css`height: var(${spacing.step3}); width: var(${spacing.step3});`,
-  step4: css`height: var(${spacing.step4}); width: var(${spacing.step4});`,
-  step5: css`height: var(${spacing.step5}); width: var(${spacing.step5});`,
-  step6: css`height: var(${spacing.step6}); width: var(${spacing.step6});`,
-  step7: css`height: var(${spacing.step7}); width: var(${spacing.step7});`,
-  step8: css`height: var(${spacing.step8}); width: var(${spacing.step8});`,
-  step9: css`height: var(${spacing.step9}); width: var(${spacing.step9});`,
-  avatar: css`height: var(${spacing.avatar}); width: var(${spacing.avatar});`,
-  sectionBottom: css`height: var(${spacing.sectionBottom}); width: var(${spacing.sectionBottom});`,
-  sectionTop: css`height: var(${spacing.sectionTop}); width: var(${spacing.sectionTop});`,
-  portfolioItemHeight: css`height: var(${spacing.portfolioItemHeight}); width: var(${spacing.portfolioItemHeight});`,
-  portfolioItemWidth: css`height: var(${spacing.portfolioItemWidth}); width: var(${spacing.portfolioItemWidth});`,
+  step0: css`
+    height: var(${spacing.step0});
+    width: var(${spacing.step0});
+  `,
+  step1: css`
+    height: var(${spacing.step1});
+    width: var(${spacing.step1});
+  `,
+  step2: css`
+    height: var(${spacing.step2});
+    width: var(${spacing.step2});
+  `,
+  step3: css`
+    height: var(${spacing.step3});
+    width: var(${spacing.step3});
+  `,
+  step4: css`
+    height: var(${spacing.step4});
+    width: var(${spacing.step4});
+  `,
+  step5: css`
+    height: var(${spacing.step5});
+    width: var(${spacing.step5});
+  `,
+  step6: css`
+    height: var(${spacing.step6});
+    width: var(${spacing.step6});
+  `,
+  step7: css`
+    height: var(${spacing.step7});
+    width: var(${spacing.step7});
+  `,
+  step8: css`
+    height: var(${spacing.step8});
+    width: var(${spacing.step8});
+  `,
+  step9: css`
+    height: var(${spacing.step9});
+    width: var(${spacing.step9});
+  `,
+  avatar: css`
+    height: var(${spacing.avatar});
+    width: var(${spacing.avatar});
+  `,
+  sectionBottom: css`
+    height: var(${spacing.sectionBottom});
+    width: var(${spacing.sectionBottom});
+  `,
+  sectionTop: css`
+    height: var(${spacing.sectionTop});
+    width: var(${spacing.sectionTop});
+  `,
+  portfolioItemHeight: css`
+    height: var(${spacing.portfolioItemHeight});
+    width: var(${spacing.portfolioItemHeight});
+  `,
+  portfolioItemWidth: css`
+    height: var(${spacing.portfolioItemWidth});
+    width: var(${spacing.portfolioItemWidth});
+  `,
 };
 
 const Box = ({ size }: { size: UtopiaSize }) => {

src/App.tsx

@@ -1,4 +1,4 @@
-import { GithubCorner } from '@/components/github/corner';
+import { GithubCorner } from '@components/github/corner';
 
 function App() {
   return (

src/components/github/corner.styles.ts

@@ -1,4 +1,4 @@
-import { css, cx, toProps } from '@/lib/css';
+import { css, cx, toProps } from '@lib/css';
 
 const svgRoot = toProps(css`
   fill: #fff;

src/components/github/loc_language.styles.ts

@@ -1,5 +1,5 @@
-import { css, toProps } from '@/lib/css';
-import { theme } from '@/theme';
+import { css, toProps } from '@lib/css';
+import { theme } from '@theme';
 
 const { vars, decl } = theme;
 
@@ -12,7 +12,7 @@ const header = toProps(css`
   ${decl.font.sansSerif.extraBold}
   ${decl.font.size.stepN1}
   text-transform: uppercase;
-  letter-spacing: calc(var(${vars.font.size.stepN1}) * .14);
+  letter-spacing: calc(var(${vars.font.size.stepN1}) * 0.14);
   margin-top: var(${vars.spacing.step3});
 `);
 
@@ -78,7 +78,7 @@ const percent = (width: string, background: string) =>
       border-radius: 0 5px 5px 0;
       border-width: 1px;
       border-style: solid;
-  `,
+    `,
     {
       background,
       width,

src/components/github/loc_language.tsx

@@ -1,6 +1,7 @@
-import { languageColors } from '@/lib/github_language_colors';
 import numeral from 'numeral';
 
+import { languageColors } from '@lib/github_language_colors';
+
 import styles from './loc_language.styles';
 
 export const Language = ({ loc, overallTotal }: { loc: LinesOfCode; overallTotal: number }) => {

src/components/github/numbers.styles.ts

@@ -1,5 +1,5 @@
-import { css, toProps } from '@/lib/css';
-import { theme } from '@/theme';
+import { css, toProps } from '@lib/css';
+import { theme } from '@theme';
 
 const { vars, decl } = theme;
 

src/components/github/stats.tsx

@@ -1,4 +1,4 @@
-import { loc, user } from '@/content/github.json';
+import { loc, user } from '@content/github.json';
 
 import { LOC } from './loc';
 import { Numbers } from './numbers';

src/components/layout/footer/footer.styles.ts

@@ -1,13 +1,11 @@
-import { css, toProps } from '@/lib/css';
-import { theme } from '@/theme';
+import { css, toProps } from '@lib/css';
+import { theme } from '@theme';
 
 const { decl, vars } = theme;
 
-const root = toProps(
-  css`
-    ${decl.color.background.dark}
-    padding: var(${vars.spacing.step4}) 0;
-  `,
-);
+const root = toProps(css`
+  ${decl.color.background.dark}
+  padding: var(${vars.spacing.step4}) 0;
+`);
 
 export default { root };

src/components/layout/footer/footer.tsx

@@ -1,4 +1,4 @@
-import { useResume } from '@/lib/hooks';
+import { useResume } from '@lib/hooks';
 
 import { SiteCredits } from './site_credits';
 import { SiteLogo } from './site_logo';