Merge pull request #11 from twm/css-cleanup

CSS cleanup

.github/workflows/ci.yaml

@@ -11,7 +11,7 @@ permissions:
 
 jobs:
   Fast:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/checkout@v4
         with:
@@ -39,7 +39,7 @@ jobs:
           path: build
 
   Slow:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     needs: [Fast]
     steps:
       - uses: actions/checkout@v4
@@ -66,7 +66,7 @@ jobs:
           path: playwright-report
 
   Publish:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04
     needs: [Fast]
     if: ${{ !cancelled() && github.ref == 'refs/heads/trunk' }}
 

src/lib/Form.svelte

@@ -65,7 +65,9 @@
     .outputs {
         display: grid;
         grid-template-columns: 1fr 12rem;
+        grid-auto-rows: minmax(2rem, auto);
         gap: 0.5rem;
+        align-items: baseline;
     }
 
     select {
@@ -74,8 +76,8 @@
         background: inherit;
         color: inherit;
         border: none;
-        border-bottom: 1px solid currentColor;
-        padding: 1px 4px;
+        border-bottom: 2px solid var(--rule-color);
+        padding: 0 2px;
         line-height: 1;
     }
 </style>

src/lib/FracInput.svelte

@@ -75,11 +75,11 @@
         background: inherit;
         color: inherit;
         border: none;
-        border-bottom: 1px solid currentColor;
-        padding: 0;
+        border-bottom: 2px solid var(--rule-color);
+        padding: 0 2px;
         line-height: 1;
     }
-    :invalid {
-        border-bottom-color: red;
+    input:invalid {
+        border-bottom-color: var(--invalid-color);
     }
 </style>

src/lib/FracRange.svelte

@@ -20,6 +20,10 @@
         grid-template-columns: 3rem 1fr;
     }
 
+    output {
+        padding: 0 2px;
+    }
+
     input {
         width: 100%;
         box-sizing: border-box;

src/lib/PartList.svelte

@@ -64,12 +64,18 @@
         width: 100%;
         height: auto;
     }
-    th {
-        text-align: left;
-        border-bottom: 1px solid gray;
+    table {
+        border-spacing: 0;
     }
     th,
     td {
-        padding-right: 0.5em;
+        text-align: left;
+        vertical-align: baseline;
+        padding: 0.25rem 0.5em 0.25rem 0;
+    }
+    thead th {
+        font-weight: normal;
+        padding-right: 1rem;
+        border-bottom: 2px solid var(--rule-color);
     }
 </style>

src/lib/styles.css

@@ -0,0 +1,34 @@
+@font-face {
+    font-family: "Zilla Slab";
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    src: url("$lib/vendor/zilla-slab/ZillaSlab-Regular.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Zilla Slab";
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+    src: url("$lib/vendor/zilla-slab/ZillaSlab-Bold.woff2") format("woff2");
+}
+
+:root {
+    --focus-color: #06a8ea;
+    --invalid-color: red;
+    --rule-color: #bbb;
+
+    font:
+        400 1rem / 1.15 "Zilla Slab",
+        "URW Bookman",
+        serif;
+}
+
+:focus-visible {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}
+
+:is(h1, h2, h3, h4, h5, h6) {
+    font-weight: normal;
+}

src/routes/+layout.svelte

@@ -1,32 +1,11 @@
 <script>
     import normalizeCss from "$lib/vendor/normalize.css/normalize-8.0.1.css?url"
+    import stylesCss from "$lib/styles.css?url"
 </script>
 
 <svelte:head>
     <link rel="stylesheet" type="text/css" href={normalizeCss} />
+    <link rel="stylesheet" type="text/css" href={stylesCss} />
 </svelte:head>
 
 <slot></slot>
-
-<style>
-    @font-face {
-        font-family: "Zilla Slab";
-        font-weight: 400;
-        font-style: normal;
-        font-stretch: normal;
-        src: url("$lib/vendor/zilla-slab/ZillaSlab-Regular.woff2") format("woff2");
-    }
-    @font-face {
-        font-family: "Zilla Slab";
-        font-weight: 700;
-        font-style: normal;
-        font-stretch: normal;
-        src: url("$lib/vendor/zilla-slab/ZillaSlab-Bold.woff2") format("woff2");
-    }
-    :global(body) {
-        font:
-            400 1rem / 1.2 "Zilla Slab",
-            "URW Bookman",
-            serif;
-    }
-</style>