⚒️ Restructured Sass organisation (#83)

*  🌈  Organise colors with vars only

*  ➕ New file structure

* File restructuring

*  ⚒️ Fix build issue

* Rearranged files

assets/css/components/_definitions.scss

@@ -0,0 +1,21 @@
+.word__type {
+    text-align: right;
+    padding-right: 1rem;
+    font-family: $con-sans;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+  }
+  
+.word__link {
+    text-decoration: none;
+    color: black;
+    border-bottom: darkgrey solid 0.1em;
+    font-family: $ext-sans;
+  }
+  
+.word__breakdown {
+    font-family: $sans-serif;
+    border-left: 0.1rem solid lightgrey;
+    padding-left: 1rem;
+}
+  

assets/css/components/_flag.scss

@@ -0,0 +1,14 @@
+.flag__red {
+  background-color: rgb(255, 192, 203);
+  font-size: 0.9rem;
+  font-weight: bold;
+  border-radius: 1rem;
+  padding: 0.45rem 0.65rem;
+  margin: 0.25rem 0.75rem;
+  text-transform: lowercase;
+
+  &:before {
+    @include icon__avoid();
+    @include icon__embed();
+  }
+}

assets/css/components/_lists.scss

@@ -0,0 +1,37 @@
+  ol {
+    padding: 0 0 0 1em;
+    margin: 0;
+  }
+
+  li {
+    list-style: none;
+    padding-bottom: 0.5em;
+
+    &.subterm {
+      padding-left: pxToRem(10);
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+    &.subterm:before {
+      content: '\21B3';
+      padding-right: pxToRem(5);
+    }
+  }
+  
+.list-semicolon {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  & > li {
+    display: inline;
+
+    &:not(:last-child)::after {
+      content: '; ';
+    }
+  }
+}
+

assets/css/components/_word.scss

@@ -0,0 +1,101 @@
+.word {
+  --word-signal-color: currentColor;
+
+  &__title {
+    font-family: $serif;
+    font-weight: 900;
+    font-size: 2.5rem;
+    line-height: 1.25;
+    margin-bottom: 1rem;
+    margin-top: 0;
+  }
+
+  &__content {
+    align-items: stretch;
+
+    @supports (display: grid) {
+      // align-items: flex-start;
+      display: grid;
+      grid-template-columns: 1fr 4fr;
+      grid-gap: 1rem;
+
+      & > * {
+        margin: 0;
+      }
+    }
+
+    & > p {
+      grid-column: 1 / -1;
+      font-family: $sans-serif;
+      font-size: 1.5rem;
+    }
+
+    & h4 {
+      grid-column: 1;
+      font-family: $con-sans;
+      font-size: 0.85rem;
+      font-weight: normal;
+      flex: 0 1 auto;
+      text-transform: uppercase;
+      transform: translateY(0.4em);
+
+      @supports (display: grid) {
+        text-align: right;
+      }
+    }
+
+    & h4,
+    & h4 + * {
+      margin-top: 1rem;
+    }
+
+    & h4 ~ p,
+    & h4 ~ ul {
+      // border-left: 0.1rem solid lightgrey;
+      // padding-left: 1rem;
+      grid-column: 2;
+      font-size: inherit;
+    }
+  }
+
+  &__speech {
+    font-size: 0.5em;
+    font-family: $sans-serif;
+  }
+
+  &__signal {
+    border-top: pxToRem(1) solid var(--word-signal-color);
+    color: var(--word-signal-color);
+    display: inline-block;
+    font-family: $ext-sans;
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 0.15rem;
+    padding: 0.5rem 0.75rem;
+
+    &--avoid {
+      --word-signal-color: #a40000;
+
+      &:before {
+        @include icon__avoid();
+        @include icon__hanging();
+      }
+    }
+
+    &--better {
+      --word-signal-color: green;
+
+      &:before {
+        @include icon__alt();
+        @include icon__hanging();
+      }
+    }
+
+    &--tool {
+      &:before {
+        @include icon__tool();
+        @include icon__hanging();
+      }
+    }
+  }
+}