Move CSS to separate file

diff --git a/index.html b/index.html
index 4d8dac32b7c308fbc1e0af8b621565cb2e0bfb9f..eece6cc31d8c9b30cae769e18dd4e3c1cb4c8032 100644 (file)
--- a/index.html
+++ b/index.html
@@ -9,99 +9,9 @@
   <link rel="icon" href="data:,">
   <title>Block Hash Calculator</title>
   <style>
-    body {
-      font-family: sans-serif;
-      margin-block: 0;
-      max-inline-size: min(100dvi, 1080px);
-      margin-inline: auto;
-      background-color: hsl(216deg 50% 93%);
-      color: hsl(216deg 50% 10%);
-    }
+    @layer base;
 
-    main {
-      margin-block: 16px;
-      margin-inline: 8px;
-    }
-
-    h1 {
-      font-size: 2rem;
-      font-weight: 300;
-      margin: 0;
-    }
-
-    p,
-    a {
-      display: inline-block;
-      margin-block-start: 8px;
-    }
-
-    a {
-      font-weight: 700;
-      text-decoration: none;
-      color: hsl(216deg 50% 40%);
-
-      &:hover,
-      &:focus-within {
-        text-decoration: underline;
-        text-decoration-thickness: 2px;
-      }
-    }
-
-    form {
-      display: flex;
-      flex-direction: column;
-
-      & * {
-        font-size: 1rem;
-      }
-    }
-
-    label {
-      font-weight: 700;
-      margin-block-end: 4px;
-    }
-
-    input,
-    button {
-      padding: 8px;
-      border-radius: 4px;
-      border: 1px solid hsl(216deg 50% 85%);
-      outline: 2px solid transparent;
-      outline-offset: 1px;
-      margin-block-end: 8px;
-      transition: filter 300ms, border-color 300ms, outline-color 300ms;
-
-      &:hover {
-        transition: filter 150ms;
-        filter: brightness(102%);
-      }
-
-      &:focus-within {
-        transition: border-color 150ms, outline-color 150ms;
-        border-color: transparent;
-        outline-color: hsl(216deg 50% 40%);
-      }
-    }
-
-    button {
-      inline-size: fit-content;
-      cursor: pointer;
-    }
-
-    output {
-      display: none;
-      font-family: monospace;
-      transition: opacity 300ms;
-
-      @starting-style {
-        opacity: 0;
-      }
-    }
-
-    code {
-      white-space: pre-wrap;
-      word-break: break-all;
-    }
+    @import "./style.css" layer(base);
   </style>
 </head>
 

diff --git a/style.css b/style.css
new file mode 100644 (file)
index 0000000..5925878
--- /dev/null
+++ b/style.css
@@ -0,0 +1,93 @@
+body {
+  font-family: sans-serif;
+  margin-block: 0;
+  max-inline-size: min(100dvi, 1080px);
+  margin-inline: auto;
+  background-color: hsl(216deg 50% 93%);
+  color: hsl(216deg 50% 10%);
+}
+
+main {
+  margin-block: 16px;
+  margin-inline: 8px;
+}
+
+h1 {
+  font-size: 2rem;
+  font-weight: 300;
+  margin: 0;
+}
+
+p,
+a {
+  display: inline-block;
+  margin-block-start: 8px;
+}
+
+a {
+  font-weight: 700;
+  text-decoration: none;
+  color: hsl(216deg 50% 40%);
+
+  &:hover,
+  &:focus-within {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+
+  & * {
+    font-size: 1rem;
+  }
+}
+
+label {
+  font-weight: 700;
+  margin-block-end: 4px;
+}
+
+input,
+button {
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid hsl(216deg 50% 85%);
+  outline: 2px solid transparent;
+  outline-offset: 1px;
+  margin-block-end: 8px;
+  transition: filter 300ms, border-color 300ms, outline-color 300ms;
+
+  &:hover {
+    transition: filter 150ms;
+    filter: brightness(102%);
+  }
+
+  &:focus-within {
+    transition: border-color 150ms, outline-color 150ms;
+    border-color: transparent;
+    outline-color: hsl(216deg 50% 40%);
+  }
+}
+
+button {
+  inline-size: fit-content;
+  cursor: pointer;
+}
+
+output {
+  display: none;
+  font-family: monospace;
+  transition: opacity 300ms;
+
+  @starting-style {
+    opacity: 0;
+  }
+}
+
+code {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
\ No newline at end of file