🌈 Design: 로고 추가 (#23)

prgrms-web-devcourse-final-project · Dec 4, 2024 · d83b68a · d83b68a
1 parent 45c67c6
commit d83b68a
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 182 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <html lang="ko">
     <head>
         <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <link rel="icon" type="image/svg+xml" href="/images/logo.png" />
         <!-- 나중에 로고 만들면 파비콘도 변경해야 함 -->
         <meta
             name="viewport"

diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
diff --git a/src/assets/stylesheets/layouts/_commons.scss b/src/assets/stylesheets/layouts/_commons.scss
@@ -29,10 +29,49 @@
     width: min(100% - 1.6rem, 36rem);
 }
 
-:where(#logoMain, #logoFooter) {
-    // 접근성을 위한 로고 내부의 숨김 alt 처리
-    position: relative;
-    overflow: hidden;
+a:has(#logo-primary) {
+    display: block;
+    height: 100%;
+}
+
+#logo-primary {
+    display: flex;
+    align-items: center;
+    padding-block: 0.4rem;
+    height: 100%;
+    user-select: none;
+
+    > img {
+        height: 100%;
+    }
+
+    > p {
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0.2rem;
+        font-family: var(--ff-dingbat);
+        mix-blend-mode: hard-light;
+
+        > span:first-child {
+            font-size: var(--fnt-sm);
+            opacity: 0.5;
+        }
+
+        > span:last-child {
+            font-size: var(--fnt-title-sm);
+            font-weight: 900;
+            opacity: 0.75;
+        }
+    }
+}
+
+#logo-secondary {
+    height: 2.4rem;
+
+    > img {
+        height: 100%;
+        filter: drop-shadow(0 0.4rem 0.8rem rgb(var(--clr-mid-tone)));
+    }
 }
 
 .hidden-alt {
@@ -333,6 +372,11 @@
 }
 
 @container main-container (max-width: 720px) {
+    #logo-primary {
+        > p {
+            display: none;
+        }
+    }
 }
 
 @container main-container (max-width: 640px) {

diff --git a/src/assets/stylesheets/layouts/_headers.scss b/src/assets/stylesheets/layouts/_headers.scss
@@ -9,7 +9,7 @@
     flex-flow: row nowrap;
     justify-content: flex-start;
     align-items: center;
-    gap: 1.8rem;
+    gap: 0.8rem;
     position: fixed;
     inset-block-start: 0;
     inset-inline: 0;

diff --git a/src/assets/stylesheets/style.css b/src/assets/stylesheets/style.css
@@ -584,9 +584,46 @@ a, a:visited {
   width: min(100% - 1.6rem, 36rem);
 }
 
-:where(#logoMain, #logoFooter) {
-  position: relative;
-  overflow: hidden;
+a:has(#logo-primary) {
+  display: block;
+  height: 100%;
+}
+
+#logo-primary {
+  display: flex;
+  align-items: center;
+  padding-block: 0.4rem;
+  height: 100%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+#logo-primary > img {
+  height: 100%;
+}
+#logo-primary > p {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.2rem;
+  font-family: var(--ff-dingbat);
+  mix-blend-mode: hard-light;
+}
+#logo-primary > p > span:first-child {
+  font-size: var(--fnt-sm);
+  opacity: 0.5;
+}
+#logo-primary > p > span:last-child {
+  font-size: var(--fnt-title-sm);
+  font-weight: 900;
+  opacity: 0.75;
+}
+
+#logo-secondary {
+  height: 2.4rem;
+}
+#logo-secondary > img {
+  height: 100%;
+  filter: drop-shadow(0 0.4rem 0.8rem rgb(var(--clr-mid-tone)));
 }
 
 .hidden-alt {
@@ -856,7 +893,11 @@ a, a:visited {
 
 /* 반응형 쿼리 */
 @container main-container (max-width: 960px) {}
-@container main-container (max-width: 720px) {}
+@container main-container (max-width: 720px) {
+  #logo-primary > p {
+    display: none;
+  }
+}
 @container main-container (max-width: 640px) {}
 /* _commons.scss */
 /* _headers.scss */
@@ -867,7 +908,7 @@ a, a:visited {
   flex-flow: row nowrap;
   justify-content: flex-start;
   align-items: center;
-  gap: 1.8rem;
+  gap: 0.8rem;
   position: fixed;
   inset-block-start: 0;
   inset-inline: 0;

diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx