From 216e1076b32cd5d7ca2628bd260588f08df5a5d0 Mon Sep 17 00:00:00 2001 From: eggmun98 Date: Fri, 16 Aug 2024 18:18:46 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20Header=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/buttons/dark.png | Bin 0 -> 1498 bytes public/images/logos/logo.png | Bin 0 -> 16837 bytes src/app/page.tsx | 11 +++++--- src/components/Layouts/Header/Header.tsx | 16 ++++++++++++ src/components/Layouts/Header/header.css.ts | 27 ++++++++++++++++++++ src/styles/globalStyles.css.ts | 10 +++++--- src/styles/rootStyles.css.ts | 7 +++++ 7 files changed, 64 insertions(+), 7 deletions(-) create mode 100644 public/images/buttons/dark.png create mode 100644 public/images/logos/logo.png mode change 100644 => 100755 src/app/page.tsx create mode 100755 src/components/Layouts/Header/Header.tsx create mode 100755 src/components/Layouts/Header/header.css.ts mode change 100644 => 100755 src/styles/globalStyles.css.ts create mode 100644 src/styles/rootStyles.css.ts diff --git a/public/images/buttons/dark.png b/public/images/buttons/dark.png new file mode 100644 index 0000000000000000000000000000000000000000..ac58019bb34b0aca0e955f27a723d1ca959d5689 GIT binary patch literal 1498 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 -

- +
+
+
); } diff --git a/src/components/Layouts/Header/Header.tsx b/src/components/Layouts/Header/Header.tsx new file mode 100755 index 0000000..b0302e6 --- /dev/null +++ b/src/components/Layouts/Header/Header.tsx @@ -0,0 +1,16 @@ +import Image from 'next/image'; +import * as styles from './header.css'; + +export default function Header() { + return ( +
+ + Logo +

TechBlogHub

+
+ +
+ ); +} diff --git a/src/components/Layouts/Header/header.css.ts b/src/components/Layouts/Header/header.css.ts new file mode 100755 index 0000000..3765dbd --- /dev/null +++ b/src/components/Layouts/Header/header.css.ts @@ -0,0 +1,27 @@ +import { style } from '@vanilla-extract/css'; + +export const wrapper = style({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + + width: '100dvw', + height: '80px', + maxWidth: '1200px', +}); + +export const title = style({ + fontSize: '35px', +}); + +export const left = style({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', +}); + +export const right = style({ + display: 'flex', + flexDirection: 'row', +}); diff --git a/src/styles/globalStyles.css.ts b/src/styles/globalStyles.css.ts old mode 100644 new mode 100755 index 0c8e87e..d25b92e --- a/src/styles/globalStyles.css.ts +++ b/src/styles/globalStyles.css.ts @@ -2,15 +2,14 @@ import { createGlobalTheme, globalStyle } from '@vanilla-extract/css'; export const vars = createGlobalTheme(':root', { color: { - primary: 'blue', - secondary: 'pink', + primary: '#ffff', }, }); globalStyle('html, body', { margin: 0, padding: 0, - backgroundColor: vars.color.secondary, + backgroundColor: '#000', color: 'white', height: '100%', }); @@ -18,3 +17,8 @@ globalStyle('html, body', { globalStyle('*', { boxSizing: 'border-box', }); + +globalStyle('a', { + textDecoration: 'none', + color: '#fff', +}); diff --git a/src/styles/rootStyles.css.ts b/src/styles/rootStyles.css.ts new file mode 100644 index 0000000..616bc3b --- /dev/null +++ b/src/styles/rootStyles.css.ts @@ -0,0 +1,7 @@ +import { style } from '@vanilla-extract/css'; + +export const wrapper = style({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', +});