fix(about): hidden texts in mobile

EATSTEAK · Aug 9, 2024 · e40a27d · e40a27d
1 parent 878c856
commit e40a27d
Show file tree

Hide file tree

Showing 14 changed files with 360 additions and 308 deletions.
diff --git a/src/components/GrillContainer.tsx b/src/components/GrillContainer.tsx
@@ -1,4 +1,4 @@
-import { type JSX, type Component, Show } from "solid-js";
+import { type Component, type JSX, Show } from "solid-js";
 import "./grill_container.css";
 
 export const GrillContainer: Component<{
@@ -9,22 +9,19 @@ export const GrillContainer: Component<{
   containerClassOverride?: string;
 }> = (props) => {
   return (
-    <section class={props.parentClassOverride ?? "relative h-72"}>
-      <div class={`grill-background size-full ${props.grillClassOverride ?? "before:bg-slate-700 dark:before:bg-slate-400 before:bg-opacity-30 before:rotate-3"}`}>
+    <section class={props.parentClassOverride ?? "relative min-h-72"}>
+      <div
+        class={`grill-background size-full ${props.grillClassOverride ?? "before:bg-slate-700 dark:before:bg-slate-400 before:bg-opacity-30 before:rotate-3"}`}
+      >
         <div
-          class={
-            props.containerClassOverride ??
-            "slide-to-top grill-content"
-          }
+          class={props.containerClassOverride ?? "slide-to-top grill-content"}
         >
           {props.children}
         </div>
       </div>
       <Show when={props.absoluteBackground}>
         <div class="background-container">
-          <div class="background-element">
-            {props.absoluteBackground}
-          </div>
+          <div class="background-element">{props.absoluteBackground}</div>
         </div>
       </Show>
     </section>

diff --git a/src/components/animated_logo.css b/src/components/animated_logo.css
@@ -1,23 +1,29 @@
 @keyframes burning {
-  0% {
-    background-position: 0% 0%;
-  }
+    0% {
+        background-position: 0% 0%;
+    }
 
-  50% {
-    background-position: 170% 70%;
-  }
+    50% {
+        background-position: 170% 70%;
+    }
 
-  100% {
-    background-position: 0% 0%;
-  }
+    100% {
+        background-position: 0% 0%;
+    }
 }
 
-.animated-logo {
-  background: linear-gradient(270deg, #ca5010, #d13438, #ff8c00, #ca5010);
-  background-size: 200% 200%;
-  background-repeat: repeat;
-  mask-image: url("/images/profile.svg");
-  mask-repeat: no-repeat;
-  mask-size: cover;
-  animation: burning 5s ease infinite;
+@tailwind components;
+
+@layer components {
+    .animated-logo {
+        background: linear-gradient(270deg, #ca5010, #d13438, #ff8c00, #ca5010);
+        background-size: 200% 200%;
+        background-repeat: repeat;
+        mask-image: url("/images/profile.svg");
+        mask-repeat: no-repeat;
+        mask-size: cover;
+        animation: burning 5s ease infinite;
+    }
 }
+
+
diff --git a/src/components/button.css b/src/components/button.css
@@ -1,3 +1,7 @@
-.button {
-    @apply font-mono py-2 px-4 transition-colors border-2 before:bg-white bg-gradient-to-r from-gray-800 to-gray-800 text-gray-800 hover:text-white border-gray-800 dark:before:bg-gray-800 dark:from-white dark:to-white dark:text-white dark:hover:text-gray-800 dark:border-white;
+@tailwind components;
+
+@layer components {
+    .button {
+        @apply font-mono py-2 px-4 transition-colors border-2 before:bg-white bg-gradient-to-r from-gray-800 to-gray-800 text-gray-800 hover:text-white border-gray-800 dark:before:bg-gray-800 dark:from-white dark:to-white dark:text-white dark:hover:text-gray-800 dark:border-white;
+    }
 }
diff --git a/src/components/category_label.css b/src/components/category_label.css
@@ -1,3 +1,7 @@
-.category-label {
-    @apply uppercase font-bold tracking-widest mb-2 transition-all hover:brightness-125 focus:brightness-125 px-1;
-}
+@tailwind components;
+
+@layer components {
+    .category-label {
+        @apply uppercase font-bold tracking-widest mb-2 transition-all hover:brightness-125 focus:brightness-125 px-1;
+    }
+}
diff --git a/src/components/container.css b/src/components/container.css
@@ -1,3 +1,7 @@
-.container {
-    @apply px-6 my-8 flex flex-col gap-4 lg:mx-auto w-full;
-}
+@tailwind components;
+
+@layer components {
+    .container {
+        @apply px-6 my-8 flex flex-col gap-4 lg:mx-auto w-full;
+    }
+}
diff --git a/src/components/footer.css b/src/components/footer.css
@@ -1,3 +1,7 @@
-footer {
-    @apply w-full flex justify-center py-12;
-}
+@tailwind components;
+
+@layer components {
+    footer {
+        @apply w-full flex justify-center py-12;
+    }
+}
diff --git a/src/components/grill_container.css b/src/components/grill_container.css
@@ -1,11 +1,15 @@
-.background-container {
-    @apply absolute top-0 right-0 w-full h-full -z-10;
-}
+@tailwind components;
 
-.background-element {
-    @apply mx-auto max-w-screen-xl w-full h-full flex justify-end overflow-hidden;
-}
+@layer components {
+    .background-container {
+        @apply absolute top-0 right-0 w-full h-full -z-20;
+    }
 
-.grill-content {
-    @apply py-8 px-6 lg:mx-auto h-full w-full max-w-screen-xl flex flex-col items-start justify-end gap-2;
-}
+    .background-element {
+        @apply mx-auto max-w-screen-xl w-full h-full flex justify-end overflow-hidden;
+    }
+
+    .grill-content {
+        @apply py-8 px-6 lg:mx-auto h-full w-full max-w-screen-xl flex flex-col items-start justify-end gap-2;
+    }
+}
diff --git a/src/components/header.css b/src/components/header.css
@@ -1,23 +1,28 @@
-header {
-    @apply flex justify-center content-center px-6 py-6;
-}
+@tailwind components;
 
-.navbar-container {
-    @apply grow max-w-screen-xl flex flex-wrap gap-4 lg:gap-16 justify-between lg:justify-start content-center;
-}
+@layer components {
+    header {
+        @apply flex justify-center content-center px-6 py-6;
+    }
 
-.logo-container {
-    @apply shrink-0 min-w-fit order-1;
-}
+    .navbar-container {
+        @apply grow max-w-screen-xl flex flex-wrap gap-4 lg:gap-16 justify-between lg:justify-start content-center;
+    }
 
-.logo-image {
-    @apply w-[120px] h-[45px] md:w-[160px] md:h-[60px] dark:invert transition-[filter];
-}
+    .logo-container {
+        @apply shrink-0 min-w-fit order-1;
+    }
 
-.navbar {
-    @apply grow flex justify-center lg:justify-start items-center gap-8 order-3 lg:order-2 basis-full lg:basis-1;
-}
+    .logo-image {
+        @apply w-[120px] h-[45px] md:w-[160px] md:h-[60px] dark:invert transition-[filter];
+    }
+
+    .navbar {
+        @apply grow flex justify-center lg:justify-start items-center gap-8 order-3 lg:order-2 basis-full lg:basis-1;
+    }
+
+    .switch-container {
+        @apply shrink-0 flex justify-end items-center gap-2 order-2 lg:order-3;
+    }
 
-.switch-container {
-    @apply shrink-0 flex justify-end items-center gap-2 order-2 lg:order-3;
 }
diff --git a/src/components/intro.css b/src/components/intro.css
@@ -1,4 +1,9 @@
-.box-text {
-    @apply py-2 px-2 m-0 font-head font-bold text-5xl bg-gray-800 text-white
-    dark:bg-white dark:text-gray-800;
+@tailwind components;
+
+@layer components {
+    .box-text {
+        @apply py-2 px-2 m-0 font-head font-bold text-5xl bg-gray-800 text-white
+        dark:bg-white dark:text-gray-800;
+    }
+
 }
diff --git a/src/components/switch.css b/src/components/switch.css
@@ -1,28 +1,32 @@
-.switch-background {
-  margin: 0 1.5rem;
-  width: 2.5rem;
-  height: 1rem;
-  border-style: solid;
-  border-width: 2px;
-  cursor: pointer;
-}
+@tailwind components;
 
-.switch-display {
-  font-size: 1.25rem;
-  text-align: center;
-  line-height: 2rem;
-  display: block;
-  width: 2rem;
-  height: 2rem;
-  border-style: solid;
-  border-width: 2px;
-  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
-}
+@layer components {
+    .switch-background {
+        margin: 0 1.5rem;
+        width: 2.5rem;
+        height: 1rem;
+        border-style: solid;
+        border-width: 2px;
+        cursor: pointer;
+    }
 
-.switch-display:not(.enabled) {
-  transform: translate(-1rem, -0.65rem) rotate(-135deg);
-}
+    .switch-display {
+        font-size: 1.25rem;
+        text-align: center;
+        line-height: 2rem;
+        display: block;
+        width: 2rem;
+        height: 2rem;
+        border-style: solid;
+        border-width: 2px;
+        transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
+    }
 
-.switch-display.enabled {
-  transform: translate(1.25rem, -0.65rem) rotate(0deg);
-}
+    .switch-display:not(.enabled) {
+        transform: translate(-1rem, -0.65rem) rotate(-135deg);
+    }
+
+    .switch-display.enabled {
+        transform: translate(1.25rem, -0.65rem) rotate(0deg);
+    }
+}
diff --git a/src/components/toc.css b/src/components/toc.css
@@ -1,30 +1,35 @@
-.contents-btn {
-    @apply flex justify-between w-full font-semibold font-head py-1 px-2 uppercase border-2 text-gray-800 hover:text-white border-gray-800 dark:text-white dark:hover:text-gray-800 dark:border-white dark:before:bg-gray-800 dark:from-white dark:to-white before:bg-white bg-gradient-to-r from-gray-800 to-gray-800;
-}
-
-li.toc {
-    line-height: 1.7rem;
-    margin: 0.5rem 0.25rem;
-}
-
-li.toc>ul {
-    padding-left: 1.5rem;
-}
-
-.slide-fade-enter-active {
-    transition: all 0.3s ease;
-}
-
-.slide-fade-exit-active {
-    transition: all 0.3s ease;
-}
-
-.slide-fade-enter,
-.slide-fade-exit-to {
-    transform: translateY(10px);
-    opacity: 0;
-}
-
-svg.toc-active {
-    transform: rotate(180deg);
+@tailwind components;
+
+
+@layer components {
+    .contents-btn {
+        @apply flex justify-between w-full font-semibold font-head py-1 px-2 uppercase border-2 text-gray-800 hover:text-white border-gray-800 dark:text-white dark:hover:text-gray-800 dark:border-white dark:before:bg-gray-800 dark:from-white dark:to-white before:bg-white bg-gradient-to-r from-gray-800 to-gray-800;
+    }
+
+    li.toc {
+        line-height: 1.7rem;
+        margin: 0.5rem 0.25rem;
+    }
+
+    li.toc > ul {
+        padding-left: 1.5rem;
+    }
+
+    .slide-fade-enter-active {
+        transition: all 0.3s ease;
+    }
+
+    .slide-fade-exit-active {
+        transition: all 0.3s ease;
+    }
+
+    .slide-fade-enter,
+    .slide-fade-exit-to {
+        transform: translateY(10px);
+        opacity: 0;
+    }
+
+    svg.toc-active {
+        transform: rotate(180deg);
+    }
 }
diff --git a/src/components/topics.css b/src/components/topics.css
@@ -1,3 +1,7 @@
-.topic-btn {
-    @apply px-1 font-mono uppercase border-2 text-gray-800 hover:text-white border-gray-800 dark:text-white dark:hover:text-gray-800 dark:border-white dark:before:bg-gray-800 dark:from-white dark:to-white before:bg-white bg-gradient-to-r from-gray-800 to-gray-800;
-}
+@tailwind components;
+
+@layer components {
+    .topic-btn {
+        @apply px-1 font-mono uppercase border-2 text-gray-800 hover:text-white border-gray-800 dark:text-white dark:hover:text-gray-800 dark:border-white dark:before:bg-gray-800 dark:from-white dark:to-white before:bg-white bg-gradient-to-r from-gray-800 to-gray-800;
+    }
+}