add tailwind and do some replacements

1 files changed, 34 insertions, 55 deletions

diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 157768f..9176d26 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -20,50 +20,44 @@ html {
 }
 
 /* menu icon */
-
 .header .menu-icon .navicon {
   display: block;
   height: 2px;
   position: relative;
   transition: background 0.2s ease-out;
   width: 18px;
-}
-
-.header .menu-icon .navicon:before,
-.header .menu-icon .navicon:after {
-  background: #ebdbb2;
-  content: "";
-  display: block;
-  height: 100%;
-  position: absolute;
-  transition: all 0.2s ease-out;
-  width: 100%;
-}
-
-.header .menu-icon .navicon:before {
-  top: 6px;
-}
-
-.header .menu-icon .navicon:after {
-  top: -6px;
+  &::before,
+  &::after {
+    background: #ebdbb2;
+    content: "";
+    display: block;
+    height: 100%;
+    position: absolute;
+    transition: all 0.2s ease-out;
+    width: 100%;
+  }
+  &:before {
+    top: 6px;
+  }
+  &:after {
+    top: -6px;
+  }
 }
 
 /* menu btn */
-.header .menu-btn:checked ~ .menu-icon {
-  .navicon {
-    background: transparent;
-  }
-  .navicon:before {
+.header .menu-btn:checked ~ .menu-icon .navicon {
+  background: transparent;
+  &:before {
     transform: rotate(-45deg);
   }
-  .navicon:after {
+  &:after {
     transform: rotate(45deg);
   }
 }
 
-.header .menu-btn:checked ~ .menu-icon:not(.steps) {
-  .navicon:before,
-  .navicon:after {
+.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon {
+  &:before,
+  &:after {
     top: 0;
   }
 }
@@ -157,26 +151,7 @@ html {
     max-width: 20rem;
   }
 }
-// HERO
-#hero {
-  text-shadow: 2px 2px 3px black;
-}
-blockquote {
-  @extend .bl, .bw2, .w3-theme-border, .pv1, .pl3, .relative, .baskerville;
-  &::before {
-    font-family: "Font Awesome 6 Free";
-    color: #79c753;
-    content: "\f10d";
-    font-weight: 900;
-    font-size: 2rem;
-    position: absolute;
-    left: 10px;
-    top: -15px;
-  }
-  p:last-of-type {
-    @extend .tc, .ttu, .tracked, .fs-normal, .ma0, .pa0;
-  }
-}
+
 .heading-anchor {
   color: #ddd !important;
 }
@@ -219,7 +194,8 @@ footer {
   }
 }
 // CV ENTRY
-.cv-entry, .cv-honor {
+.cv-entry,
+.cv-honor {
   @extend .ml3, .pl4, .pb2, .relative;
   .cv-host,
   .cv-date,
@@ -296,6 +272,7 @@ footer {
 // 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")
@@ -325,11 +302,6 @@ table:not(.u-legend) {
     @extend .ph3, .pv2;
   }
 }
-// gallery
-// https://lubna.dev/articles/create-css-only-image-gallery/
-* {
-  box-sizing: border-box;
-}
 
 .comment {
   @extend .mv2, .pl3, .bl, .bw1, .w3-theme-border, .relative;
@@ -352,6 +324,13 @@ table:not(.u-legend) {
   }
 }
 
+/* gallery
+// https://lubna.dev/articles/create-css-only-image-gallery/
+// box-sizing setup is part of tachyons
+// * {
+//   box-sizing: border-box;
+// } */
+
 $max-img-width: 72rem;
 $max-img-height: 48rem;