♻️ (step) extract css styles to appropriate component

feature-flow.css

@@ -1,72 +1,4 @@
-main {
-  height: calc(100vh - 2 * 1rem);
-}
-
 ul {
   list-style: none;
   padding: 0;
 }
-
-main > ul {
-  display: flex;
-  flex: 1;
-  gap: 1rem;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  margin: 0 1rem;
-  border: 3px solid var(--background-color);
-}
-
-li {
-  flex: 1;
-  height: 100%;
-  margin: 0;
-  color: var(--background-color);
-  display: flex;
-  flex-direction: column;
-}
-
-main > ul > li:first-child {
-  margin-left: 1rem;
-}
-
-main > ul > li:last-child {
-  margin-right: 1rem;
-}
-
-main > ul > li:not(:last-child) {
-  padding-right: 1rem;
-  border-right: 3px solid var(--background-color);
-  border-radius: 0;
-}
-
-header {
-  padding: 0.5rem;
-  border: solid 2px var(--background-color);
-  margin-top: 1rem;
-}
-
-section {
-  margin: 1rem 0;
-  flex: 1;
-}
-
-section ul {
-  padding: 1rem;
-}
-
-h5 {
-  margin-bottom: 0;
-  background-color: var(--background-color);
-  padding: 0.35rem;
-  text-align: center;
-}
-
-.blue-bin {
-  margin-top: 1rem;
-  border: 3px solid var(--background-color);
-  height: 60px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}

src/App.vue

@@ -8,7 +8,8 @@ import FeatureSteps from '@/FeatureSteps.vue'
   </main>
 </template>
 
-<!-- <style scoped lang="scss">
-#main-app {
+<style scoped lang="scss">
+main {
+  height: calc(100vh - 2 * 1rem);
 }
-</style> -->
+</style>

src/FeatureStep.vue

@@ -41,5 +41,35 @@ const remainingBlueBuckets = computed(() =>
 
 <style scoped lang="scss">
 .feature-step {
+  header {
+    padding: 0.5rem;
+    border: solid 2px var(--background-color);
+    margin-top: 1rem;
+  }
+
+  section {
+    margin: 1rem 0;
+    flex: 1;
+  }
+
+  section ul {
+    padding: 1rem;
+  }
+
+  h5 {
+    margin-bottom: 0;
+    background-color: var(--background-color);
+    padding: 0.35rem;
+    text-align: center;
+  }
+
+  .blue-bin {
+    margin-top: 1rem;
+    border: 3px solid var(--background-color);
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>

src/FeatureSteps.vue

@@ -11,5 +11,35 @@ import { featureSteps } from '@/feature-steps'
 
 <style scoped lang="scss">
 .features-steps {
+  display: flex;
+  flex: 1;
+  gap: 1rem;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  margin: 0 1rem;
+  border: 3px solid var(--background-color);
+
+  li:first-child {
+    margin-left: 1rem;
+  }
+
+  li:last-child {
+    margin-right: 1rem;
+  }
+
+  li:not(:last-child) {
+    padding-right: 1rem;
+    border-right: 3px solid var(--background-color);
+    border-radius: 0;
+  }
+
+  li {
+    flex: 1;
+    height: 100%;
+    margin: 0;
+    color: var(--background-color);
+    display: flex;
+    flex-direction: column;
+  }
 }
 </style>