isolate cv css and apply style with tailwind

4 files changed, 204 insertions, 176 deletions

diff --git a/assets/css/cv.css b/assets/css/cv.css
new file mode 100644
index 0000000..23cae95
--- /dev/null
+++ b/assets/css/cv.css
@@ -0,0 +1,60 @@
+.cv-entry,
+.cv-honor {
+  @apply ml-4 pl-8 pb-2 relative;
+  .cv-role {
+    @apply m-0;
+  }
+  .cv-host,
+  .cv-date,
+  .cv-location {
+    @apply font-light m-0 p-0;
+    i {
+      @apply mx-2 fas;
+    }
+  }
+  .cv-host i {
+    @apply fa-building;
+  }
+  .cv-location i {
+    @apply fa-location-pin;
+  }
+  p {
+    @apply text-base my-2;
+  }
+  ul {
+    all: revert;
+  }
+}
+.cv-entry {
+  @apply border-l border-gray-400;
+  .cv-role::before {
+    content: "";
+    position: absolute;
+    width: 2rem;
+    height: 2rem;
+    background-color: #79c753;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    left: 0;
+  }
+  .cv-date,
+  .cv-location {
+    @apply inline-block;
+  }
+  .cv-date i {
+    @apply fa-calendar;
+  }
+}
+
+.cv-honor {
+  .cv-role {
+    @apply ml-12 text-xl;
+  }
+  .cv-date {
+    top: 0.05rem;
+    @apply absolute left-0 text-xl;
+    i {
+      @apply text-amber-400 fas fa-award;
+    }
+  }
+}
diff --git a/assets/css/input.css b/assets/css/input.css
index a8da489..b9875df 100644
--- a/assets/css/input.css
+++ b/assets/css/input.css
@@ -1,5 +1,6 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
+@import "./cv.css" layer(components);
 @import "tailwindcss/utilities";
 @import "./academicons.css" layer(utilities);
 @import "./fontawesome.css" layer(utilities);
@@ -143,76 +144,6 @@
       }
     }
   }
-  .cv-entry,
-  .cv-honor {
-    @apply ml-4 pl-8 pb-2 relative;
-    .cv-role {
-      @apply m-0;
-    }
-    .cv-host,
-    .cv-date,
-    .cv-location {
-      @apply font-light m-0 p-0;
-    }
-    .cv-host::before {
-      font-family: "Font Awesome 6 Free";
-      content: "\f1ad";
-      font-weight: 900;
-      margin: 0 0.5rem;
-    }
-    .cv-location::before {
-      font-family: "Font Awesome 6 Free";
-      content: "\f041";
-      font-weight: 900;
-      margin: 0 0.5rem;
-    }
-    p {
-      @apply text-base my-2;
-    }
-    ul {
-      all: revert;
-    }
-  }
-  .cv-entry {
-    @apply border-l border-gray-400;
-    .cv-role::before {
-      content: "";
-      position: absolute;
-      width: 2rem;
-      height: 2rem;
-      background-color: #79c753;
-      border-radius: 50%;
-      transform: translateX(-50%);
-      left: 0;
-    }
-    .cv-date,
-    .cv-location {
-      @apply inline-block;
-    }
-    .cv-date::before {
-      font-family: "Font Awesome 6 Free";
-      content: "\f133";
-      font-weight: 900;
-      margin: 0 0.5rem;
-    }
-  }
-
-  .cv-honor {
-    .cv-role {
-      @apply ml-12 text-xl;
-    }
-    .cv-date {
-      top: 0.05rem;
-      @apply absolute left-0 text-xl;
-    }
-    .cv-date::before {
-      font-family: "Font Awesome 6 Free";
-      color: #ffb700;
-      content: "\f559";
-      font-weight: 900;
-      margin: 0 0.5rem;
-    }
-  }
   .comment {
     @apply my-2 pl-4 border-l border-lime-500 relative;
     h3,
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index bf0845a..e7822be 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -671,6 +671,148 @@ h6 {
   }
 }
 
+.cv-entry,
+.cv-honor {
+  position: relative;
+  margin-left: 1rem;
+  padding-left: 2rem;
+  padding-bottom: 0.5rem;
+  .cv-role {
+    margin: 0px;
+  }
+  .cv-host,
+  .cv-date,
+  .cv-location {
+    margin: 0px;
+  }
+  .cv-host,
+  .cv-date,
+  .cv-location {
+    padding: 0px;
+  }
+  .cv-host,
+  .cv-date,
+  .cv-location {
+    font-weight: 300;
+  }
+  .cv-host,
+  .cv-date,
+  .cv-location {
+    i {
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+    }
+    i {
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased;
+      display: var(--fa-display, inline-block);
+      font-style: normal;
+      font-variant: normal;
+      line-height: 1;
+      text-rendering: auto;
+    }
+    i::before {
+      content: var(--fa);
+    }
+    i {
+      font-family: 'Font Awesome 6 Free';
+    }
+    i {
+      font-weight: 900;
+    }
+  }
+  .cv-host i {
+    --fa: "\f1ad";
+  }
+  .cv-location i {
+    --fa: "\f041";
+  }
+  p {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  p {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+  ul {
+    all: revert;
+  }
+}
+
+.cv-entry {
+  border-left-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
+  .cv-role::before {
+    content: "";
+    position: absolute;
+    width: 2rem;
+    height: 2rem;
+    background-color: #79c753;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    left: 0;
+  }
+  .cv-date,
+  .cv-location {
+    display: inline-block;
+  }
+  .cv-date i {
+    --fa: "\f133";
+  }
+}
+
+.cv-honor {
+  .cv-role {
+    margin-left: 3rem;
+  }
+  .cv-role {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+  .cv-date {
+    top: 0.05rem
+  }
+  .cv-date {
+    position: absolute;
+  }
+  .cv-date {
+    left: 0px;
+  }
+  .cv-date {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+  .cv-date {
+    i {
+      --tw-text-opacity: 1;
+      color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+    }
+    i {
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased;
+      display: var(--fa-display, inline-block);
+      font-style: normal;
+      font-variant: normal;
+      line-height: 1;
+      text-rendering: auto;
+    }
+    i::before {
+      content: var(--fa);
+    }
+    i {
+      font-family: 'Font Awesome 6 Free';
+    }
+    i {
+      --fa: "\f559";
+    }
+    i {
+      font-weight: 900;
+    }
+  }
+}
+
 .baskerville {
   font-family: baskerville, serif;
 }
@@ -790,111 +932,6 @@ h6 {
   }
 }
 
-.cv-entry,
-  .cv-honor {
-  position: relative;
-  margin-left: 1rem;
-  padding-left: 2rem;
-  padding-bottom: 0.5rem;
-  .cv-role {
-    margin: 0px;
-  }
-  .cv-host,
-    .cv-date,
-    .cv-location {
-    margin: 0px;
-  }
-  .cv-host,
-    .cv-date,
-    .cv-location {
-    padding: 0px;
-  }
-  .cv-host,
-    .cv-date,
-    .cv-location {
-    font-weight: 300;
-  }
-  .cv-host::before {
-    font-family: "Font Awesome 6 Free";
-    content: "\f1ad";
-    font-weight: 900;
-    margin: 0 0.5rem;
-  }
-  .cv-location::before {
-    font-family: "Font Awesome 6 Free";
-    content: "\f041";
-    font-weight: 900;
-    margin: 0 0.5rem;
-  }
-  p {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-  p {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-  ul {
-    all: revert;
-  }
-}
-
-.cv-entry {
-  border-left-width: 1px;
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
-  .cv-role::before {
-    content: "";
-    position: absolute;
-    width: 2rem;
-    height: 2rem;
-    background-color: #79c753;
-    border-radius: 50%;
-    transform: translateX(-50%);
-    left: 0;
-  }
-  .cv-date,
-    .cv-location {
-    display: inline-block;
-  }
-  .cv-date::before {
-    font-family: "Font Awesome 6 Free";
-    content: "\f133";
-    font-weight: 900;
-    margin: 0 0.5rem;
-  }
-}
-
-.cv-honor {
-  .cv-role {
-    margin-left: 3rem;
-  }
-  .cv-role {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-  .cv-date {
-    top: 0.05rem;
-  }
-  .cv-date {
-    position: absolute;
-  }
-  .cv-date {
-    left: 0px;
-  }
-  .cv-date {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-  .cv-date::before {
-    font-family: "Font Awesome 6 Free";
-    color: #ffb700;
-    content: "\f559";
-    font-weight: 900;
-    margin: 0 0.5rem;
-  }
-}
-
 .comment {
   position: relative;
   margin-top: 0.5rem;
diff --git a/makefile b/makefile
index 87b017a..a8d1eb4 100644
--- a/makefile
+++ b/makefile
@@ -12,7 +12,7 @@ SRC = $(addsuffix .css, $(addprefix $(scss), pretachyons tables))
 
 css: $(css)/tailwind.css
 
-$(css)/tailwind.css: $(css)/input.css $(css)/academicons.css $(css)/fontawesome.css
+$(css)/tailwind.css: $(css)/input.css $(css)/academicons.css $(css)/fontawesome.css $(css)/cv.css
 	npx tailwindcss -i $< -o $@
 
 deps: