Skip to content

Commit

Permalink
Merge pull request #10 from SOPT-all/init/#9/theme
Browse files Browse the repository at this point in the history 
[Init/#9] Theme 적용
  • Loading branch information
@bongtta
bongtta authored Nov 21, 2024
2 parents cca2723 + b144c95 commit 626d74e
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 84 deletions.
2 changes: 2 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/logo.png" />
<link rel="stylesheet" href="./src/styles/fonts/fonts.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>맥도날드</title>
</head>
Expand All @@ -11,3 +12,4 @@
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

80 changes: 30 additions & 50 deletions src/styles/fonts/fonts.css
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,59 @@
@font-face {
font-family: "Apple SD Gothic Neo";
font-family: 'Apple SD Gothic Neo';
font-weight: 900;
font-style: normal;
src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.woff2")
format("woff2"),
url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.ttf")
format("truetype");
src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.woff2')
format('woff2'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Black.ttf')
format('truetype');
}

@font-face {
font-family: "Apple SD Gothic Neo";
font-weight: 800;
font-style: normal;
src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraBold.woff2")
format("woff2"),
url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraBold.ttf")
format("truetype");
}

@font-face {
font-family: "Apple SD Gothic Neo";
font-weight: 700;
font-style: normal;
src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Bold.woff2")
format("woff2"),
url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Bold.ttf")
format("truetype");
}

@font-face {
font-family: "Apple SD Gothic Neo";
font-family: 'Apple SD Gothic Neo';
font-weight: 600;
font-style: normal;
src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.woff2")
format("woff2"),
url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.ttf")
format("truetype");
src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.woff2')
format('woff2'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.ttf')
format('truetype');
}

@font-face {
font-family: "Apple SD Gothic Neo";
font-family: 'Apple SD Gothic Neo';
font-weight: 500;
font-style: normal;
src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.woff2")
format("woff2"),
url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.ttf")
format("truetype");
src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.woff2')
format('woff2'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Medium.ttf')
format('truetype');
}

@font-face {
font-family: "Apple SD Gothic Neo";
font-family: 'Apple SD Gothic Neo';
font-weight: 400;
font-style: normal;
src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.woff2")
format("woff2"),
url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.ttf")
format("truetype");
src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.woff2')
format('woff2'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Regular.ttf')
format('truetype');
}

@font-face {
font-family: "Apple SD Gothic Neo";
font-family: 'Apple SD Gothic Neo';
font-weight: 300;
font-style: normal;
src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.woff2")
format("woff2"),
url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.ttf")
format("truetype");
src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.woff2')
format('woff2'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-Light.ttf')
format('truetype');
}

@font-face {
font-family: "Apple SD Gothic Neo";
font-family: 'Apple SD Gothic Neo';
font-weight: 200;
font-style: normal;
src: url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.woff2")
format("woff2"),
url("https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.ttf")
format("truetype");
src: url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.woff2')
format('woff2'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.ttf')
format('truetype');
}
5 changes: 2 additions & 3 deletions src/styles/global.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { css } from "@emotion/react";
import { css, Theme } from "@emotion/react";

import Reset from "./reset";
import theme from "./theme";

const GlobalStyle = css`
const GlobalStyle = (theme: Theme) => css`
${Reset}
* {
Expand Down
63 changes: 32 additions & 31 deletions src/styles/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,156 +32,157 @@ const theme = {
fontSize: '44px',
fontWeight: 900,
lineHeight: 'normal',
letterSpacing: 'normal',
letterSpacing: '0',
},
headline02: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '38px',
fontWeight: 900,
lineHeight: '1.4px',
letterSpacing: '-1%',
letterSpacing: '0',
},

title01: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '36px',
fontWeight: 800,
fontWeight: 400,
lineHeight: 'normal',
letterSpacing: '-4%',
letterSpacing: '-1.44px',
},
title02: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '30px',
fontWeight: 900,
lineHeight: 'normal',
letterSpacing: '0%',
letterSpacing: '0',
},
title03: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '26px',
fontWeight: 800,
fontWeight: 400,
lineHeight: 'normal',
letterSpacing: '-2%',
letterSpacing: '-0.52px',
},
title04: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '22px',
fontWeight: 700,
fontWeight: 400,
lineHeight: 'normal',
letterSpacing: '-2%',
letterSpacing: '-0.44px',
},
title05: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '22px',
fontWeight: 600,
lineHeight: 'normal',
letterSpacing: '-4%',
letterSpacing: '-0.88px',
},
title06: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '14px',
fontWeight: 800,
fontWeight: 400,
lineHeight: '160%',
letterSpacing: '1%',
letterSpacing: '0.14px',
},
title07: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '14px',
fontWeight: 700,
fontWeight: 400,
lineHeight: 'normal',
letterSpacing: '0%',
letterSpacing: '0',
},

body01: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '16px',
fontWeight: 900,
lineHeight: 'normal',
letterSpacing: '0%',
letterSpacing: '0',
},
body02: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '16px',
fontWeight: 700,
fontWeight: 400,
lineHeight: 'normal',
letterSpacing: '0%',
letterSpacing: '0',
},
body03: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '16px',
fontWeight: 600,
lineHeight: 'normal',
letterSpacing: '-6%',
letterSpacing: '-0.96px',
},
body04: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '16px',
fontWeight: 400,
lineHeight: 'normal',
letterSpacing: '-4%',
letterSpacing: '-0.64px',
},
body05: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '15px',
fontWeight: 700,
fontWeight: 400,
lineHeight: '170%',
letterSpacing: '0%',
letterSpacing: '0',
},
body06: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '15px',
fontWeight: 600,
lineHeight: '160%',
letterSpacing: '-2%',
lineHeight: 'normal',
letterSpacing: '-0.3px',
},
body07: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '15px',
fontSize: '14px',
fontWeight: 300,
lineHeight: 'normal',
letterSpacing: '-4%',
letterSpacing: '-0.56px',
},
body08: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '14px',
fontWeight: 200,
lineHeight: 'normal',
letterSpacing: '0%',
letterSpacing: '0',
},
body09: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '14px',
fontWeight: 500,
lineHeight: 'normal',
letterSpacing: '0%',
letterSpacing: '0',
},
body10: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '13px',
fontWeight: 600,
lineHeight: 'normal',
letterSpacing: '-4%',
letterSpacing: '-0.52px',
},
body11: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '11px',
fontWeight: 200,
lineHeight: 'normal',
letterSpacing: '0%',
letterSpacing: '0',
},

caption01: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '12px',
fontWeight: 600,
lineHeight: 'normal',
letterSpacing: '-4%',
letterSpacing: '-0.48px',
},
caption02: {
fontFamily: 'Apple SD Gothic Neo',
fontSize: '10px',
fontWeight: 600,
lineHeight: 'normal',
letterSpacing: '-4%',
letterSpacing: '-0.4px',
},
},
};
Expand Down

0 comments on commit 626d74e

Please sign in to comment.