cv entries

3 files changed, 317 insertions, 167 deletions

diff --git a/assets/scss/input.css b/assets/scss/input.css
index 378b47c..c54148e 100644
--- a/assets/scss/input.css
+++ b/assets/scss/input.css
@@ -48,11 +48,13 @@ blockquote::before {
   #hero {
     text-shadow: 2px 2px 3px black;
   }
-  .main-content p {
-    @apply my-4 text-xl;
-  }
-  .main-content p code {
-    @apply text-blue-500 px-1;
+  .main-content {
+    p {
+      @apply my-4 text-xl;
+      code {
+        @apply text-blue-500 px-1;
+      }
+    }
   }
   .main-content a {
     @apply px-1 text-lime-500;
@@ -68,18 +70,91 @@ blockquote::before {
     background-size: contain;
     display: inline-block;
   }
-  .main-content dl {
-    @apply px-8 text-xl;
-  }
-  .main-content dt {
-    @apply font-bold;
+  .main-content {
+    dl {
+      @apply px-8 text-xl;
+    }
+    dt {
+      @apply font-bold;
+    }
+    dd {
+      @apply ml-8;
+    }
+    .highlight {
+      .chroma {
+        @apply p-1 overflow-x-scroll;
+      }
+    }
+  }
+  .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;
+    }
   }
-  .main-content dd {
-    @apply ml-8;
-  }
-  /* The following one are post render thus I need to build them */
-  .main-content .highlight .chroma {
-    @apply p-1 overflow-x-scroll;
+
+  .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;
+    }
   }
 }
 
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index b216baa..4c591e7 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -152,89 +152,6 @@ html {
   }
 }
 
-// POSTS
-.main-content {
-  div.highlight pre.chroma {
-    @extend .br2, .overflow-x-scroll, .pa1, .f5;
-  }
-}
-// CV ENTRY
-.cv-entry,
-.cv-honor {
-  @extend .ml3, .pl4, .pb2, .relative;
-  .cv-host,
-  .cv-date,
-  .cv-location {
-    @extend .fw3, .mid-gray, .ma0, .pa0;
-  }
-  .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,
-  ul {
-    @extend .mv1, .pv1, .f5;
-  }
-}
-.cv-entry {
-  @extend .bl, .b--moon-gray;
-  .cv-role {
-    @extend .ma0, .f3;
-    // @extend .ma0, .text-2xl;
-  }
-  .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 {
-    @extend .dib;
-  }
-  .cv-date::before {
-    font-family: "Font Awesome 6 Free";
-    content: "\f133";
-    font-weight: 900;
-    margin: 0 0.5rem;
-  }
-}
-.cv-honor {
-  .cv-role {
-    @extend .ma0, .f4;
-    margin-left: 3.25rem;
-  }
-  .cv-date {
-    position: absolute;
-    left: 0;
-    top: 0.05rem;
-    font-size: 1.25rem;
-  }
-  .cv-host,
-  .cv-location {
-    @extend .dib;
-  }
-  .cv-date::before {
-    font-family: "Font Awesome 6 Free";
-    color: #ffb700;
-    content: "\f559";
-    font-weight: 900;
-    margin: 0 0.5rem;
-  }
-}
-
 // TABLES
 table:not(.u-legend) {
   @extend .w-100, .mw8, .center, .pv2;
diff --git a/assets/scss/tailwind.css b/assets/scss/tailwind.css
index 8477419..aadfd30 100644
--- a/assets/scss/tailwind.css
+++ b/assets/scss/tailwind.css
@@ -641,22 +641,63 @@ h6 {
   font-weight: 700;
 }
 
-#hero {
-  text-shadow: 2px 2px 3px black;
+.container {
+  width: 100%;
 }
 
-.main-content p {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
 }
 
-.main-content p code {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
+#hero {
+  text-shadow: 2px 2px 3px black;
+}
+
+.main-content {
+  p {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  p {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+  p {
+    code {
+      padding-left: 0.25rem;
+      padding-right: 0.25rem;
+    }
+    code {
+      --tw-text-opacity: 1;
+      color: rgb(59 130 246 / var(--tw-text-opacity, 1));
+    }
+  }
 }
 
 .main-content a {
@@ -678,26 +719,143 @@ h6 {
   display: inline-block;
 }
 
-.main-content dl {
+.main-content {
+  dl {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+  dl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+  dt {
+    font-weight: 700;
+  }
+  dd {
+    margin-left: 2rem;
+  }
+  .highlight {
+    .chroma {
+      overflow-x: scroll;
+    }
+    .chroma {
+      padding: 0.25rem;
+    }
+  }
+}
+
+.cv-entry,
+  .cv-honor {
+  position: relative;
+  margin-left: 1rem;
   padding-left: 2rem;
-  padding-right: 2rem;
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+  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;
+  }
 }
 
-.main-content dt {
-  font-weight: 700;
+.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%;
+    -webkit-transform: translateX(-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;
+  }
 }
 
-.main-content dd {
-  margin-left: 2rem;
+.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;
+  }
 }
 
-/* The following one are post render thus I need to build them */
+.collapse {
+  visibility: collapse;
+}
 
-.main-content .highlight .chroma {
-  overflow-x: scroll;
-  padding: 0.25rem;
+.static {
+  position: static;
 }
 
 .fixed {
@@ -748,10 +906,6 @@ h6 {
   margin: 0.5rem;
 }
 
-.m-4 {
-  margin: 1rem;
-}
-
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -814,26 +968,22 @@ h6 {
   display: flex;
 }
 
-.hidden {
-  display: none;
-}
-
-.h-4 {
-  height: 1rem;
-}
-
-.h-8 {
-  height: 2rem;
+.contents {
+  display: contents;
 }
 
-.h-28 {
-  height: 7rem;
+.hidden {
+  display: none;
 }
 
 .min-h-screen {
   min-height: 100vh;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .w-64 {
   width: 16rem;
 }
@@ -842,8 +992,8 @@ h6 {
   width: 100%;
 }
 
-.w-16 {
-  width: 4rem;
+.max-w-64 {
+  max-width: 16rem;
 }
 
 .max-w-lg {
@@ -854,12 +1004,17 @@ h6 {
   max-width: 768px;
 }
 
-.cursor-pointer {
-  cursor: pointer;
+.grow {
+  flex-grow: 1;
 }
 
-.flex-col {
-  flex-direction: column;
+.transform {
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cursor-pointer {
+  cursor: pointer;
 }
 
 .items-start {
@@ -882,12 +1037,6 @@ h6 {
   overflow: hidden;
 }
 
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
@@ -952,13 +1101,17 @@ h6 {
   background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
-.bg-opacity-30 {
-  --tw-bg-opacity: 0.3;
+.bg-opacity-40 {
+  --tw-bg-opacity: 0.4;
 }
 
 .p-0 {
@@ -1079,6 +1232,10 @@ h6 {
   font-weight: 700;
 }
 
+.font-light {
+  font-weight: 300;
+}
+
 .font-normal {
   font-weight: 400;
 }
@@ -1087,10 +1244,6 @@ h6 {
   font-weight: 600;
 }
 
-.font-light {
-  font-weight: 300;
-}
-
 .uppercase {
   text-transform: uppercase;
 }
@@ -1143,8 +1296,17 @@ h6 {
           text-decoration-line: underline;
 }
 
-.opacity-30 {
-  opacity: 0.3;
+.outline-2 {
+  outline-width: 2px;
+}
+
+.outline-4 {
+  outline-width: 4px;
+}
+
+.filter {
+  -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .transition {
@@ -1214,14 +1376,14 @@ blockquote::before {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-lime-500:hover {
+.hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(132 204 22 / var(--tw-bg-opacity, 1));
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-gray-200:hover {
+.hover\:bg-lime-500:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+  background-color: rgb(132 204 22 / var(--tw-bg-opacity, 1));
 }
 
 .hover\:opacity-50:hover {
@@ -1252,8 +1414,4 @@ blockquote::before {
   .md\:flex-row {
     flex-direction: row;
   }
-
-  .md\:p-4 {
-    padding: 1rem;
-  }
 }