more translations

3 files changed, 317 insertions, 57 deletions

diff --git a/assets/scss/input.css b/assets/scss/input.css
index 198badf..378b47c 100644
--- a/assets/scss/input.css
+++ b/assets/scss/input.css
@@ -19,7 +19,7 @@ blockquote::before {
 
 @layer base {
   blockquote {
-    @apply border-l-4 p-6 pb-1 mx-8 relative border-lime-500 baskerville;
+    @apply border-l-4 p-6 py-1 m-8 relative border-lime-500 baskerville;
   }
   blockquote p:last-of-type {
     @apply text-center uppercase mt-4 tracking-wide;
@@ -36,6 +36,12 @@ blockquote::before {
   h4 {
     @apply text-2xl font-bold my-4;
   }
+  h5 {
+    @apply text-xl font-bold my-4;
+  }
+  h6 {
+    @apply text-lg font-bold my-4;
+  }
 }
 
 @layer components {
@@ -45,4 +51,54 @@ blockquote::before {
   .main-content p {
     @apply my-4 text-xl;
   }
+  .main-content p code {
+    @apply text-blue-500 px-1;
+  }
+  .main-content a {
+    @apply px-1 text-lime-500;
+  }
+  .main-content a[href^="http"]::after {
+    content: "";
+    width: 11px;
+    height: 11px;
+    margin-left: 4px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: inline-block;
+  }
+  .main-content dl {
+    @apply px-8 text-xl;
+  }
+  .main-content dt {
+    @apply font-bold;
+  }
+  .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;
+  }
+}
+
+@layer utilities {
+  @font-face {
+    font-family: "BerkshireSwash-Regular";
+    font-display: optional;
+    src:
+      url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular")
+        format("svg"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.eot"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.eot?#iefix")
+        format("embedded-opentype");
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  .berkshire-swash {
+    font-family: "BerkshireSwash-Regular";
+  }
 }
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 4f9547b..b216baa 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -152,41 +152,11 @@ html {
   }
 }
 
-.heading-anchor {
-  color: #ddd !important;
-}
 // POSTS
 .main-content {
-  a {
-    @extend .link, .ph1, .w3-text-theme;
-  }
-
-  a[href^="http"]::after {
-    content: "";
-    width: 11px;
-    height: 11px;
-    margin-left: 4px;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    display: inline-block;
-  }
-
-  p code {
-    @extend .ph1, .blue, .fw5;
-  }
-
   div.highlight pre.chroma {
     @extend .br2, .overflow-x-scroll, .pa1, .f5;
   }
-
-  dl {
-    @extend .ph4, .mh5-ns, .mh3, .pb2;
-  }
-  dt {
-    @extend .b;
-  }
 }
 // CV ENTRY
 .cv-entry,
@@ -218,6 +188,7 @@ html {
   @extend .bl, .b--moon-gray;
   .cv-role {
     @extend .ma0, .f3;
+    // @extend .ma0, .text-2xl;
   }
   .cv-role::before {
     content: "";
@@ -264,25 +235,6 @@ html {
   }
 }
 
-// Title font
-@font-face {
-  font-family: "BerkshireSwash-Regular";
-  font-display: optional;
-  src:
-    url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"),
-    url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular")
-      format("svg"),
-    url("/css/fonts/BerkshireSwash-Regular.ttf.eot"),
-    url("/css/fonts/BerkshireSwash-Regular.ttf.eot?#iefix")
-      format("embedded-opentype");
-  font-weight: normal;
-  font-style: normal;
-}
-
-.berkshire-swash {
-  font-family: "BerkshireSwash-Regular";
-}
-
 // TABLES
 table:not(.u-legend) {
   @extend .w-100, .mw8, .center, .pv2;
diff --git a/assets/scss/tailwind.css b/assets/scss/tailwind.css
index 6b37b3f..8477419 100644
--- a/assets/scss/tailwind.css
+++ b/assets/scss/tailwind.css
@@ -576,12 +576,12 @@ video {
 
 blockquote {
   position: relative;
-  margin-left: 2rem;
-  margin-right: 2rem;
+  margin: 2rem;
   border-left-width: 4px;
   --tw-border-opacity: 1;
   border-color: rgb(132 204 22 / var(--tw-border-opacity, 1));
   padding: 1.5rem;
+  padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   font-family: baskerville, serif;
 }
@@ -625,6 +625,22 @@ h4 {
   font-weight: 700;
 }
 
+h5 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+
+h6 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+
 #hero {
   text-shadow: 2px 2px 3px black;
 }
@@ -636,6 +652,58 @@ h4 {
   line-height: 1.75rem;
 }
 
+.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));
+}
+
+.main-content a {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(132 204 22 / var(--tw-text-opacity, 1));
+}
+
+.main-content a[href^="http"]::after {
+  content: "";
+  width: 11px;
+  height: 11px;
+  margin-left: 4px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  display: inline-block;
+}
+
+.main-content dl {
+  padding-left: 2rem;
+  padding-right: 2rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.main-content dt {
+  font-weight: 700;
+}
+
+.main-content dd {
+  margin-left: 2rem;
+}
+
+/* The following one are post render thus I need to build them */
+
+.main-content .highlight .chroma {
+  overflow-x: scroll;
+  padding: 0.25rem;
+}
+
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -648,14 +716,26 @@ h4 {
   bottom: 0px;
 }
 
+.left-0 {
+  left: 0px;
+}
+
 .right-0 {
   right: 0px;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .float-right {
   float: right;
 }
 
+.float-left {
+  float: left;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -668,6 +748,15 @@ h4 {
   margin: 0.5rem;
 }
 
+.m-4 {
+  margin: 1rem;
+}
+
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -697,6 +786,14 @@ h4 {
   margin-left: 0.5rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -705,6 +802,10 @@ h4 {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .inline {
   display: inline;
 }
@@ -713,6 +814,22 @@ h4 {
   display: flex;
 }
 
+.hidden {
+  display: none;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-28 {
+  height: 7rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -725,10 +842,30 @@ h4 {
   width: 100%;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
 .max-w-screen-md {
   max-width: 768px;
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -737,10 +874,20 @@ h4 {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -749,6 +896,10 @@ h4 {
   border-radius: 9999px;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -781,11 +932,21 @@ h4 {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
+}
+
 .bg-lime-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(132 204 22 / var(--tw-bg-opacity, 1));
 }
 
+.bg-lime-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(77 124 15 / var(--tw-bg-opacity, 1));
+}
+
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
@@ -796,6 +957,10 @@ h4 {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
+.bg-opacity-30 {
+  --tw-bg-opacity: 0.3;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -812,6 +977,10 @@ h4 {
   padding: 1rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -864,6 +1033,10 @@ h4 {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .font-sans {
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -882,11 +1055,6 @@ h4 {
   line-height: 2.5rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -911,10 +1079,18 @@ h4 {
   font-weight: 700;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
 
+.font-light {
+  font-weight: 300;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -927,6 +1103,21 @@ h4 {
   line-height: 1.5;
 }
 
+.text-amber-400 {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
+}
+
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
+}
+
 .text-lime-500 {
   --tw-text-opacity: 1;
   color: rgb(132 204 22 / var(--tw-text-opacity, 1));
@@ -952,6 +1143,10 @@ h4 {
           text-decoration-line: underline;
 }
 
+.opacity-30 {
+  opacity: 0.3;
+}
+
 .transition {
   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -960,6 +1155,28 @@ h4 {
   transition-duration: 150ms;
 }
 
+@font-face {
+  font-family: "BerkshireSwash-Regular";
+
+  font-display: optional;
+
+  src:
+      url("/css/fonts/BerkshireSwash-Regular.ttf.woff") format("woff"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.svg#BerkshireSwash-Regular")
+        format("svg"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.eot"),
+      url("/css/fonts/BerkshireSwash-Regular.ttf.eot?#iefix")
+        format("embedded-opentype");
+
+  font-weight: normal;
+
+  font-style: normal;
+}
+
+.berkshire-swash {
+  font-family: "BerkshireSwash-Regular";
+}
+
 .baskerville {
   font-family: baskerville, serif;
 }
@@ -992,16 +1209,51 @@ blockquote::before {
           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));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-lime-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(132 204 22 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:opacity-50:hover {
   opacity: 0.5;
 }
 
 @media (min-width: 768px) {
+  .md\:float-left {
+    float: left;
+  }
+
+  .md\:m-4 {
+    margin: 1rem;
+  }
+
   .md\:flex {
     display: flex;
   }
 
+  .md\:hidden {
+    display: none;
+  }
+
   .md\:shrink-0 {
     flex-shrink: 0;
   }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:p-4 {
+    padding: 1rem;
+  }
 }