From a619eca2acbff6b0b73f4cf59dec208bb73c5f0a Mon Sep 17 00:00:00 2001 From: Zenkie Bear Date: Mon, 19 Aug 2024 17:12:14 +0800 Subject: [PATCH] feat: Added welcome page --- src/index.html | 22 ++++++++++++ src/lib/menu.ts | 4 +++ src/style/global.scss | 5 ++- src/welcome.scss | 82 +++++++++++++++++++++++++++++++++++++++++++ src/welcome.ts | 3 ++ 5 files changed, 115 insertions(+), 1 deletion(-) create mode 100644 src/index.html create mode 100644 src/welcome.scss create mode 100644 src/welcome.ts diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..5ec227c --- /dev/null +++ b/src/index.html @@ -0,0 +1,22 @@ + + + + + + + + Document + + +
+

Zachary's Three.js Works

+ Browse from "Hello Three.js" +
+ + + + \ No newline at end of file diff --git a/src/lib/menu.ts b/src/lib/menu.ts index 0f8673d..9956e90 100644 --- a/src/lib/menu.ts +++ b/src/lib/menu.ts @@ -36,6 +36,10 @@ export const renderMenu = (menus: MenuNode[], container: HTMLUListElement) => { } const menus: MenuNode[] = [ + { + label: 'Home', + url: '/' + }, { label: 'Basic Skills', children: [ diff --git a/src/style/global.scss b/src/style/global.scss index 90281d3..d9ba2cc 100644 --- a/src/style/global.scss +++ b/src/style/global.scss @@ -6,7 +6,10 @@ $clr-bg-hover: lighten($accent, 20%); margin: 0; padding: 0; box-sizing: border-box; - transition: 0.3s ease; + + &, &::after, &::before { + transition: 0.3s ease; + } } ul, diff --git a/src/welcome.scss b/src/welcome.scss new file mode 100644 index 0000000..db8b36d --- /dev/null +++ b/src/welcome.scss @@ -0,0 +1,82 @@ +@import '@/style/global.scss'; + +main { + display: flex; + flex-direction: column; + gap: 1em; + margin: calc(3.4rem + 2rem) auto 0; + padding: 2em; + width: 90%; + background-color: adjust-color($accent, $lightness: 47%); + + h1 { + font-size: 8em; + line-height: 1.5; + } + + a { + position: relative; + display: block; + padding: 2rem; + width: fit-content; + color: white; + background-color: $accent; + + &::before { + content: '→'; + position: absolute; + left: 0; + display: block; + text-decoration: none; + opacity: 0; + } + + &:hover { + padding-left: 3rem; + + &::before { + left: 1em; + opacity: 1; + transition: all .4s ease-out; + } + } + + } + + @media screen and (max-width: 768px) { + a { + padding: 1rem; + } + h1 { + font-size: 5em; + } + } + + @media screen and (max-width: 425px) { + h1 { + font-size: 3em; + } + } +} + +footer { + display: flex; + flex-direction: column; + gap: .5rem; + margin-top: 2rem; + padding: 2.5% 5% 0; + min-height: 50vh; + background-color: rgba($accent, 20%); + color: $accent; + + a { + color: $accent; + } +} + +// Customized menu +.menu { + padding: 0 5%; + background-color: rgba($accent, 5%); + backdrop-filter: blur(1rem); +} \ No newline at end of file diff --git a/src/welcome.ts b/src/welcome.ts new file mode 100644 index 0000000..2b057c4 --- /dev/null +++ b/src/welcome.ts @@ -0,0 +1,3 @@ +import { useMenu } from '@/lib/menu' + +useMenu()