composable css

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
   strictEvents>
 
   // import "../app.css";
-  import "./styles.css";
+  import "./site.css";
   import Header from "./Header.svelte";
   import Footer from "./Footer.svelte";
 

src/routes/Footer.css

@@ -0,0 +1,18 @@
+footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  padding: 12px 12px 85px 12px;
+}
+
+footer p {
+  font-size: 0.8rem;
+}
+
+@media (min-width: 480px) {
+  footer {
+    padding: 12px 0 85px 0;
+  }
+}

src/routes/Footer.svelte

@@ -1,3 +1,8 @@
+<script
+  lang="ts"
+  strictEvents>
+</script>
+
 <footer>
   <span
     class="copyright">
@@ -13,32 +18,11 @@
   </span>
 </footer>
 
-<script
-  lang="ts"
-  strictEvents></script>
-
 <style
   lang="css">
-  footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-    padding: 12px 12px 85px 12px;
-  }
-
-  footer p {
-    font-size: 0.8rem;
-  }
+  @import "Footer.css";
 
-  footer .copyright p {
+  .copyright p {
     font-weight: 600;
   }
-
-  @media (min-width: 480px) {
-    footer {
-      padding: 12px 0 85px 0;
-    }
-  }
 </style>

src/routes/Header.css

@@ -0,0 +1,68 @@
+header {
+  display: flex;
+  justify-content: space-between;
+}
+
+nav {
+  display: flex;
+  justify-content: center;
+  --background: rgba(255, 255, 255, 0.7);
+}
+
+svg {
+  display: block;
+  width: 2em;
+  height: 3em;
+}
+
+path {
+  fill: var(--background);
+}
+
+ul {
+  list-style: none;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  height: 3em;
+  background-size: contain;
+  background: var(--background);
+}
+
+li {
+  position: relative;
+  height: 100%;
+}
+
+li[aria-current="page"]::before {
+  position: absolute;
+  top: 0;
+  left: calc(50% - var(--size));
+  --size: 6px;
+  width: 0;
+  height: 0;
+  border: var(--size) solid transparent;
+  border-top: var(--size) solid var(--color-theme-1);
+  content: "";
+}
+
+nav a {
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  height: 100%;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: var(--color-text);
+  transition: color 0.2s linear;
+}
+
+a:hover {
+  color: var(--color-theme-1);
+}

src/routes/Header.svelte

@@ -44,77 +44,10 @@
 
 <style
   lang="css">
-  header {
-    display: flex;
-    justify-content: space-between;
-  }
+  @import "Header.css";
 
   .corner {
     width: 6em;
     height: 6em;
   }
-
-  nav {
-    display: flex;
-    justify-content: center;
-    --background: rgba(255, 255, 255, 0.7);
-  }
-
-  svg {
-    display: block;
-    width: 2em;
-    height: 3em;
-  }
-
-  path {
-    fill: var(--background);
-  }
-
-  ul {
-    list-style: none;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    height: 3em;
-    background-size: contain;
-    background: var(--background);
-  }
-
-  li {
-    position: relative;
-    height: 100%;
-  }
-
-  li[aria-current="page"]::before {
-    position: absolute;
-    top: 0;
-    left: calc(50% - var(--size));
-    --size: 6px;
-    width: 0;
-    height: 0;
-    border: var(--size) solid transparent;
-    border-top: var(--size) solid var(--color-theme-1);
-    content: "";
-  }
-
-  nav a {
-    display: flex;
-    align-items: center;
-    padding: 0 0.5rem;
-    height: 100%;
-    font-size: 0.8rem;
-    font-weight: 700;
-    letter-spacing: 0.1em;
-    text-decoration: none;
-    text-transform: uppercase;
-    color: var(--color-text);
-    transition: color 0.2s linear;
-  }
-
-  a:hover {
-    color: var(--color-theme-1);
-  }
 </style>

src/routes/Socials.css

@@ -0,0 +1,24 @@
+menu {
+  list-style: none;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 2.4rem;
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  flex: 0 0 auto;
+  width: 2.4rem;
+  height: 2.4rem;
+}
+
+menu img {
+  height: 100%;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+}

src/routes/Socials.svelte

@@ -92,33 +92,11 @@
 
 <style
   lang="css">
-  div.socials {
-    display: flex;
-    justify-content: space-between;
-  }
+  @import "Socials.css";
 
-  menu {
-    list-style: none;
-    position: relative;
+  .socials {
     display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 2.4rem;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    flex: 0 0 auto;
-    width: 2.4rem;
-    height: 2.4rem;
+    justify-content: space-between;
   }
 
-  menu img {
-    height: 100%;
-    aspect-ratio: 1/1;
-    object-fit: cover;
-  }
 </style>