From e40a27d46f325310058723cb59bdb44def90220f Mon Sep 17 00:00:00 2001 From: EATSTEAK Date: Fri, 9 Aug 2024 16:51:20 +0900 Subject: [PATCH] fix(about): hidden texts in mobile --- src/components/GrillContainer.tsx | 17 +- src/components/animated_logo.css | 40 ++-- src/components/button.css | 8 +- src/components/category_label.css | 10 +- src/components/container.css | 10 +- src/components/footer.css | 10 +- src/components/grill_container.css | 22 +- src/components/header.css | 39 ++-- src/components/intro.css | 11 +- src/components/switch.css | 54 ++--- src/components/toc.css | 63 +++--- src/components/topics.css | 10 +- src/pages/about.astro | 26 ++- src/styles/global.css | 348 ++++++++++++++--------------- 14 files changed, 360 insertions(+), 308 deletions(-) diff --git a/src/components/GrillContainer.tsx b/src/components/GrillContainer.tsx index eced0d9..9fdf44c 100644 --- 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 ( -
-
+
+
{props.children}
-
- {props.absoluteBackground} -
+
{props.absoluteBackground}
diff --git a/src/components/animated_logo.css b/src/components/animated_logo.css index 5109370..75e19ce 100644 --- 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 index 40a4075..2f64e38 100644 --- 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; + } } \ No newline at end of file diff --git a/src/components/category_label.css b/src/components/category_label.css index 5280d7c..fd550e0 100644 --- 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; -} \ No newline at end of file +@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 index b1561f0..1baecfd 100644 --- 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; -} \ No newline at end of file +@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 index 9d73d3c..1384dc3 100644 --- a/src/components/footer.css +++ b/src/components/footer.css @@ -1,3 +1,7 @@ -footer { - @apply w-full flex justify-center py-12; -} \ No newline at end of file +@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 index f59f143..2d91e3c 100644 --- 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; -} \ No newline at end of file + .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 index 47c9231..6ae9537 100644 --- 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; } \ No newline at end of file diff --git a/src/components/intro.css b/src/components/intro.css index 0aacd83..49dc5ea 100644 --- 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; + } + } \ No newline at end of file diff --git a/src/components/switch.css b/src/components/switch.css index c48ca75..5245573 100644 --- 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); + } +} \ No newline at end of file diff --git a/src/components/toc.css b/src/components/toc.css index 86cd289..d98a9fd 100644 --- 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); + } } \ No newline at end of file diff --git a/src/components/topics.css b/src/components/topics.css index 09ca90b..f915d9b 100644 --- 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; -} \ No newline at end of file +@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; + } +} diff --git a/src/pages/about.astro b/src/pages/about.astro index 3bdfed6..8b61948 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -21,31 +21,37 @@ import "../styles/about_print.css";

- 구효민 / Hyomin Koo + 구효민 Hyomin Koo

개발을 합니다. 업으로, 그리고 취미로.

-
+
diff --git a/src/styles/global.css b/src/styles/global.css index 01183cc..c6c0102 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -3,186 +3,186 @@ @tailwind utilities; @layer base { + @media screen and (prefers-reduced-motion: no-preference) { + html { + scroll-behavior: smooth; + } + } - @media screen and (prefers-reduced-motion: no-preference) { html { - scroll-behavior: smooth; - } - } - - html { - @apply font-sans; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - body { - margin: 0; - padding: 0; - text-align: left; - word-wrap: break-word; - overflow-wrap: break-word; - line-height: 1.7; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - @apply font-head; - - font-weight: 600; - margin: 0 0 0.25rem; - line-height: 1.3; - } - - h1 { - font-size: 3.052em; - } - - h2 { - font-size: 2.441em; - } - - h3 { - font-size: 1.953em; - } - - h4 { - font-size: 1.563em; - } - - h5 { - font-size: 1.25em; - } - - strong, - b { - font-weight: 700; - } - - p { - margin-bottom: 2rem; - } - - hr { - margin: 1rem 0; - border: none; - border-top: 1px solid #6b7280; - } + @apply font-sans; + + text-rendering: optimizelegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + body { + margin: 0; + padding: 0; + text-align: left; + word-wrap: break-word; + overflow-wrap: break-word; + line-height: 1.7; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + @apply font-head; + + font-weight: 600; + margin: 0 0 0.25rem; + line-height: 1.3; + } + + h1 { + font-size: 3.052em; + } + + h2 { + font-size: 2.441em; + } + + h3 { + font-size: 1.953em; + } + + h4 { + font-size: 1.563em; + } + + h5 { + font-size: 1.25em; + } + + strong, + b { + font-weight: 700; + } + + p { + margin-bottom: 2rem; + } + + hr { + margin: 1rem 0; + border: none; + border-top: 1px solid #6b7280; + } } @layer components { - .grill-background { - position: relative; - overflow: hidden; - } - - .grill-background::before { - content: ""; - position: absolute; - width: 200%; - height: 200%; - top: -50%; - left: -50%; - z-index: -10; - mask-size: 2rem; - mask-image: url("/images/grill.png"); - mask-repeat: repeat; - } - - .nav-link { - @apply font-head; - - box-sizing: border-box; - text-transform: uppercase; - letter-spacing: 0.1rem; - padding-left: 0.1rem; - background-size: 0% 2px; - background-repeat: no-repeat; - background-position-y: 100%; - transition: background-size 0.25s ease-out; - } - - :not(.dark) .nav-link { - background-image: radial-gradient(black, black); - } - - .dark .nav-link { - background-image: radial-gradient(white, white); - } - - .nav-link:hover { - background-size: 100% 2px; - } - - .link-selected { - font-weight: 500; - background-size: 100% 100%; - } - - :not(.dark) .link-selected { - color: white; - } - - .dark .link-selected { - color: black; - } - - :not(.dark) .link-selected:hover { - color: black; - } - - .dark .link-selected:hover { - color: white; - } + .grill-background { + position: relative; + overflow: hidden; + } + + .grill-background::before { + content: ""; + position: absolute; + width: 200%; + height: 200%; + top: -50%; + left: -50%; + z-index: -20; + mask-size: 2rem; + mask-image: url("/images/grill.png"); + mask-repeat: repeat; + } + + .nav-link { + @apply font-head; + + box-sizing: border-box; + text-transform: uppercase; + letter-spacing: 0.1rem; + padding-left: 0.1rem; + background-size: 0% 2px; + background-repeat: no-repeat; + background-position-y: 100%; + transition: background-size 0.25s ease-out; + } + + :not(.dark) .nav-link { + background-image: radial-gradient(black, black); + } + + .dark .nav-link { + background-image: radial-gradient(white, white); + } + + .nav-link:hover { + background-size: 100% 2px; + } + + .link-selected { + font-weight: 500; + background-size: 100% 100%; + } + + :not(.dark) .link-selected { + color: white; + } + + .dark .link-selected { + color: black; + } + + :not(.dark) .link-selected:hover { + color: black; + } + + .dark .link-selected:hover { + color: white; + } } @layer utilities { - .line-between-flex-items>*:not(:last-child)::after { - content: "|"; - margin: 0 0.25rem; - line-height: 0; - } - - .hover-fill-to-right::before { - position: absolute; - content: ""; - top: 0; - left: 0; - z-index: -10; - width: 100%; - height: 100%; - } - - .hover-fill-to-right { - position: relative; - background-size: 0% 100%; - background-repeat: no-repeat; - background-position-y: 100%; - transition: background-size 0.25s ease-out; - } - - .hover-fill-to-right:hover { - background-size: 100% 100%; - } - - .slide-to-top { - animation: slide-to-top 300ms ease-out; - } - - @keyframes slide-to-top { - 0% { - transform: translate(0, 10%); - opacity: 0; - } - - 100% { - transform: translate(0, 0); - opacity: 1; - } - } + .line-between-flex-items > *:not(:last-child)::after { + content: "|"; + margin: 0 0.25rem; + line-height: 0; + } + + .hover-fill-to-right::before { + position: absolute; + content: ""; + top: 0; + left: 0; + z-index: -10; + width: 100%; + height: 100%; + } + + .hover-fill-to-right { + position: relative; + background-size: 0% 100%; + background-repeat: no-repeat; + background-position-y: 100%; + transition: background-size 0.25s ease-out; + } + + .hover-fill-to-right:hover { + background-size: 100% 100%; + } + + .slide-to-top { + animation: slide-to-top 300ms ease-out; + } + + @keyframes slide-to-top { + 0% { + transform: translate(0, 10%); + opacity: 0; + } + + 100% { + transform: translate(0, 0); + opacity: 1; + } + } } \ No newline at end of file