From 1e69863a1c8db3affa333a18cffce76ebbae700d Mon Sep 17 00:00:00 2001 From: Tommy Li Date: Fri, 20 Sep 2024 14:07:41 +0800 Subject: [PATCH 01/18] update the header & the format of css file is not same as your style & i use js for my own version plz convert it into ts & add the search funciton by your self thx --- assets/icons/header icon/Dry Lab.svg | 18 ++ assets/icons/header icon/Outreach.svg | 18 ++ assets/icons/header icon/Project.svg | 18 ++ assets/icons/header icon/Search.svg | 3 + assets/icons/header icon/Team.svg | 19 +++ assets/icons/header icon/Wet Lab.svg | 18 ++ .../logos/resisense/ResiSense Final Logo.svg | 33 ++++ scripts/header.ts | 9 + styles/header.css | 156 +++++++++++++++++- templates/hamburger-menu.html | 2 +- templates/header.html | 74 ++++++++- 11 files changed, 361 insertions(+), 7 deletions(-) create mode 100644 assets/icons/header icon/Dry Lab.svg create mode 100644 assets/icons/header icon/Outreach.svg create mode 100644 assets/icons/header icon/Project.svg create mode 100644 assets/icons/header icon/Search.svg create mode 100644 assets/icons/header icon/Team.svg create mode 100644 assets/icons/header icon/Wet Lab.svg create mode 100644 assets/logos/resisense/ResiSense Final Logo.svg create mode 100644 scripts/header.ts diff --git a/assets/icons/header icon/Dry Lab.svg b/assets/icons/header icon/Dry Lab.svg new file mode 100644 index 00000000..7ac9ca87 --- /dev/null +++ b/assets/icons/header icon/Dry Lab.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/icons/header icon/Outreach.svg b/assets/icons/header icon/Outreach.svg new file mode 100644 index 00000000..21014bb2 --- /dev/null +++ b/assets/icons/header icon/Outreach.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/icons/header icon/Project.svg b/assets/icons/header icon/Project.svg new file mode 100644 index 00000000..989d71cb --- /dev/null +++ b/assets/icons/header icon/Project.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/icons/header icon/Search.svg b/assets/icons/header icon/Search.svg new file mode 100644 index 00000000..88578980 --- /dev/null +++ b/assets/icons/header icon/Search.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/header icon/Team.svg b/assets/icons/header icon/Team.svg new file mode 100644 index 00000000..68914439 --- /dev/null +++ b/assets/icons/header icon/Team.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/assets/icons/header icon/Wet Lab.svg b/assets/icons/header icon/Wet Lab.svg new file mode 100644 index 00000000..67e855c9 --- /dev/null +++ b/assets/icons/header icon/Wet Lab.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/assets/logos/resisense/ResiSense Final Logo.svg b/assets/logos/resisense/ResiSense Final Logo.svg new file mode 100644 index 00000000..569ec86c --- /dev/null +++ b/assets/logos/resisense/ResiSense Final Logo.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/scripts/header.ts b/scripts/header.ts new file mode 100644 index 00000000..92979744 --- /dev/null +++ b/scripts/header.ts @@ -0,0 +1,9 @@ +{ + const hamburger = document.querySelector(".hamburger") as HTMLElement; + const categoryMenuListContainer = document.querySelector(".category-menu-list-container") as HTMLElement; + + hamburger.addEventListener("click", () => { + hamburger.classList.toggle("active"); + categoryMenuListContainer.classList.toggle("active"); + }); +} diff --git a/styles/header.css b/styles/header.css index 76b39911..b051b6e5 100644 --- a/styles/header.css +++ b/styles/header.css @@ -5,9 +5,155 @@ --header-height: 12rem; } } +a{ + font-family: inter; + font-size: 2rem; + font-weight: 600; + color: #404231; +} +/* url */ +header ul { + position: relative; + display:flex; + flex-direction: column; + align-items: center; +} + +header ul li { + position: relative; + list-style: none; + margin-bottom: 5px; +} + +header ul li a { + position: relative; + text-decoration: none; + font-size: 1rem; +} + +.category-menu { + text-align: left; + margin: 0; +} + +/*header*/ +header { + position: absolute; + background-color: #FCFCF7; + padding: 1.5rem 0; + width: 100%; + height: 5rem; + + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: 0 2rem 2rem rgb(0, 0, 0, 0.05); + +} + +.header-logo { + margin-left: 2rem; + +} + +.search-icon { + margin-right: 1rem; +} + +/* text css*/ +.category-title{ + font-family: inter ; + color: #768748; + font-weight: 600; + font-size: 1.5rem; +} + +/* serahc bar */ +.search-icon { + cursor: pointer; +} + +/*category list*/ +.header-rightside-container { + margin-right: 2rem; + display: flex; + justify-content: space-around; + align-items: center; +} -painted-header { - &>header { +.category-list-title-container { + display: flex; + + +} + +.category-list-subcontainer { + display: flex; + flex-direction: column; + align-items: center; + margin: 2rem 0; + +} + +.category-menu-list-container { + display: flex; + + position: fixed; + left: -100%; + top: 8rem; + gap: 0; + justify-content: space-evenly; + background-color: #FCFCF7; + width: 100%; + text-align: center; + transition: 0.3s; + +} + +.category-menu-list-container.active { + left: 0; +} + +/* hamburger menu */ +.bar { + display: block; + width: 1.5rem; + height: 0.2rem; + margin: 0.3rem auto; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background-color: #404231; + border-radius: 3rem; +} + +.hamburger { + display: block; +} + +.hamburger:hover { + cursor: pointer; +} + +.hamburger.active .bar:nth-child(2) { + opacity: 0; +} + +.hamburger.active .bar:nth-child(1) { + transform: translateY(8px) rotate(45deg); +} + +.hamburger.active .bar:nth-child(3) { + transform: translateY(-8px) rotate(-45deg); +} +.header-spacer { + top: 0; + left: 0; + width: 100vw; + height: calc(var(--header-height) * 0.8); + pointer-events: none; +} +/*painted-header { + /* &>header { position: fixed; width: 100vw; height: var(--header-height); @@ -75,7 +221,7 @@ painted-header { justify-content: center; flex-direction: column; /* gap: 0.4rem; */ - + /* &>.logo-name-text { height: 2rem; font-size: 2.2rem; @@ -185,7 +331,9 @@ painted-header { } } } +*/ +/* &>.header-spacer { top: 0; left: 0; @@ -193,4 +341,4 @@ painted-header { height: calc(var(--header-height) * 0.8); pointer-events: none; } -} \ No newline at end of file +}*/ \ No newline at end of file diff --git a/templates/hamburger-menu.html b/templates/hamburger-menu.html index d1d33e9a..e4b8c0ff 100644 --- a/templates/hamburger-menu.html +++ b/templates/hamburger-menu.html @@ -4,7 +4,7 @@ -
+