新增「專案」與「加入我們」#5
Conversation
rileychh
left a comment
rileychh
left a comment
There was a problem hiding this comment.
謝謝幫忙加入這麼多內容！有幾個地方需要修改的，再麻煩你了~
|
|
||
| <style lang="postcss"> | ||
| body { | ||
| font-family: 'Cubic 11'; | ||
| } | ||
|
|
||
| #header, | ||
| #header-mobile-menu { | ||
| background-color: #333; | ||
| color: white; | ||
|
|
||
| ul, | ||
| & { | ||
| display: flex; | ||
| gap: 0.5rem; | ||
| padding: 0; | ||
| > li { | ||
| display: flex; | ||
| align-items: center; | ||
| list-style: none; | ||
|
|
||
| &:hover { | ||
| cursor: pointer; | ||
| background-color: #fff3; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| button, | ||
| a { | ||
| all: unset; | ||
| display: inline-block; | ||
| padding: 0.5rem; | ||
| } | ||
| } | ||
|
|
||
| #header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| height: 4rem; | ||
| padding: 0.5rem 2rem; | ||
|
|
||
| > * { | ||
| flex: 1; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| > .left img { | ||
| height: 2rem; | ||
| } | ||
|
|
||
| > .center { | ||
| justify-content: center; | ||
|
|
||
| .router-link-active { | ||
| text-decoration: underline; | ||
| text-underline-offset: 0.5rem; | ||
| } | ||
| } | ||
|
|
||
| > .right { | ||
| justify-content: flex-end; | ||
| } | ||
| } | ||
|
|
||
| .menu-enter-from, | ||
| .menu-leave-to { | ||
| opacity: 0; | ||
| transform: translateY(-1rem); | ||
| } | ||
|
|
||
| #header-mobile-menu { | ||
| position: absolute; | ||
| inset: 4rem 0 0 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 1.5rem; | ||
| gap: 1.5rem; | ||
| font-size: 2rem; | ||
| transition: all 0.4s ease; | ||
|
|
||
| li { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| > * { | ||
| all: unset; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.5rem; | ||
| padding: 0.25rem 0.5rem; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } | ||
|
|
||
| .mobile-menu-route { | ||
| &::before { | ||
| content: '◆'; | ||
| display: inline-block; | ||
| visibility: hidden; | ||
| } | ||
| &.router-link-active::before { | ||
| visibility: visible; | ||
| } | ||
| } | ||
|
|
||
| .separator { | ||
| border-top: calc(1em / 11) solid darkgray; | ||
| } | ||
| } | ||
| </style> |
There was a problem hiding this comment.
移回去了，不過 #header 當 id（跟 HTML tag 一樣）有點容易搞錯，要不要改成 #desktop-menu 之類的
There was a problem hiding this comment.
App.vue 的 <style> 是全域的，把所有全域的 style 都寫在一起比較好管理，不用再另開一個 assets/style.css。
至於 #header，手機版和電腦版是共用的，所以叫它 #desktop-menu 也不太對。
There was a problem hiding this comment.
不用再另開一個
assets/style.css
已移動
app/assets/style.css
Outdated
| @import url('cubic-11.css'); | ||
|
|
||
| body { | ||
| font-family: 'Cubic 11', 'Iansui', Arial, Helvetica, sans-serif !important; |
There was a problem hiding this comment.
內文變多後發現俐方體不易閱讀，我們要不要為內文另尋字體？
此外，芫荽的風格差太多了，不適合做為備用字體
There was a problem hiding this comment.
要不要 Noto, Arial, 微軟正黑體？
There was a problem hiding this comment.
要這樣就寫 sans-serif 就好。另外，這也應該不需要 !important 吧
這邊只是針對內文，標題還是可以保持俐方體，給網站保持一些風格
There was a problem hiding this comment.
我發現 style.css 裡面寫過 font-family，我把 font-family: 'Cubic 11'; 移動到 #header{ } 了
…e for merchandise
…tyles in join and projects pages
…styles in join page
… better organization
|
我先暫時移除切換 logo 和 QR Code 的部分，因為這個 PR 太大了，下一個 PR 再來試著處理這個問題。 |
There was a problem hiding this comment.
PR Overview
This PR adds new pages and updates the navigation to support "專案" and "加入我們" features while also introducing a new QR Code generator README and a contact page.
- Introduces a detailed QR Code generation README.
- Implements new pages for projects, join, contact, and an updated store and about page.
- Updates global navigation routes and styling in app/app.vue.
Reviewed Changes
| File | Description |
|---|---|
| app/assets/README.md | New README with QR Code generation instructions. |
| app/pages/store.vue | New store page with email ordering functionality. |
| app/pages/projects.vue | Adds projects page with interactive QR code toggling and styling. |
| app/pages/join.vue | Introduces join page with membership and community call-to-action. |
| app/pages/index.vue | Updates about page with club information and join button. |
| app/pages/contact.vue | Adds a contact page with address and social links. |
| app/app.vue | Updates navigation routes and global styling. |
Copilot reviewed 18 out of 18 changed files in this pull request and generated 2 comments.
Comments suppressed due to low confidence (3)
app/pages/projects.vue:59
- There is a trailing whitespace in the image src attribute, which should be removed to avoid potential issues.
src="assets/img/shorts_qr_code.svg "
app/pages/projects.vue:84
- Nested selector syntax (using '&:hover') is used in the style block without a declared preprocessor. Consider adding lang="scss" to the style tag if using SCSS.
&:hover {
app/app.vue:213
- The CSS variable '--shadow-color' is not defined; consider replacing it with '--box-shadow-color' or defining '--shadow-color' to ensure consistent styling.
box-shadow: 0 2px 5px var(--shadow-color);
No description provided.