임시 메인 디자인 설정

Author: constmoon

frontend/components/service/Home/MainContact.tsx

@@ -17,7 +17,12 @@ const ContactListItem = styled.li`
 const ContactListLabel = styled.span`
     font-weight: bold;
     display: inline-block;
-    margin-right: 0.25rem;
+    margin-right: 0.5rem;
+    vertical-align: middle;
+`
+
+const MailLink = styled.a`
+    color: ${(props) => props.theme.colors.blue0};
 `
 
 const MainSlogan = () => {
@@ -33,17 +38,17 @@ const MainSlogan = () => {
                 <ContactList>
                     <ContactListItem>
                         <ContactListLabel>{t('label:email')}</ContactListLabel>
-                        <a href={`mailto:${t('label:contact.email')}`}>
+                        <MailLink href={`mailto:${t('label:contact.email')}`}>
                             {t('label:contact.email')}
-                        </a>
+                        </MailLink>
                     </ContactListItem>
                     <ContactListItem>
                         <ContactListLabel>
                             {t('label:sponsor')}
                         </ContactListLabel>
-                        <a href={`mailto:${t('label:contact.sponsor')}`}>
+                        <MailLink href={`mailto:${t('label:contact.sponsor')}`}>
                             {t('label:contact.sponsor')}
-                        </a>
+                        </MailLink>
                     </ContactListItem>
                 </ContactList>
             </Content>

frontend/components/service/Home/MainIdentity.tsx

@@ -10,15 +10,16 @@ const MainTheme = styled.div`
 
 const Window = styled.div`
     position: absolute;
-    left: 20%;
-    right: 20%;
+    left: 25%;
+    right: 25%;
     top: 50%;
     transform: translateY(-50%);
     border: 2px solid ${(props) => props.theme.colors.white};
     padding: 2rem 4rem;
     ${media.mobile(`
         left: 10%;
         right: 10%;
+        padding: 1rem 2rem;
     `)}
 
     &:after {
@@ -57,15 +58,6 @@ const WindowButton = styled.div`
     }
 `
 
-const typing = keyframes`
-    0% {
-        width: 0;
-    }
-    100% {
-        width: 100%;
-    }
-`
-
 const TitleContainer = styled.div`
     margin-top: 4rem;
     overflow: hidden;
@@ -77,25 +69,15 @@ const Title = styled.div`
     display: inline-block;
     color: ${(props) => props.color || props.theme.colors.white};
     white-space: nowrap;
-    animation: ${typing} 5s linear;
-    animation-fill-mode: both;
-    &:nth-child(2) {
-        animation-delay: 2s;
-    }
-    &:nth-child(3) {
-        animation-delay: 4s;
-    }
+    ${media.mobile(`
+        font-size: 3rem;
+    `)}
 `
 
 const MainText = styled.div`
     font-size: 1.7rem;
     font-weight: normal;
-    margin-top: 2rem;
-    margin-left: 12rem;
-    ${media.mobile(`
-        margin-top: 3rem;
-        margin-left: 6rem;
-    `)}
+    margin-top: 3rem;
 `
 
 const MainIdentity = () => {

frontend/components/service/Home/MainTalkList.tsx

@@ -14,7 +14,7 @@ const MainTalkList = () => {
     return (
         <div>
             <Heading2 useGradient={true}>{t('label:talk')}</Heading2>
-            <Content>발표목록</Content>
+            <Content></Content>
         </div>
     )
 }