sendevia/website
1
0
Fork 0
mirror of https://github.com/sendevia/website.git synced 2026-03-05 23:32:45 +08:00
Code Activity

feat(Header): refactor Header component to use semantic class names

Browse Source
This commit is contained in:
sendevia
2025-12-05 23:24:37 +08:00
parent 1e57cace89
commit 97027d9847
2 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
.vitepress/theme/components/Header.vue
View File

@@ -14,13 +14,13 @@ if (typeof window !== "undefined") {
</script>
<template>
<header>
<div id="header-hero-container">
<span id="header-hero-headline">{{ frontmatter.title ? frontmatter.title : page.title }}</span>
<span id="header-hero-subtitle">{{ frontmatter.description }}</span>
<div id="header-impression">
<header class="Header">
<div class="container">
<span class="headline">{{ frontmatter.title ? frontmatter.title : page.title }}</span>
<span class="subtitle">{{ frontmatter.description }}</span>
<div class="impression">
<svg width="0" height="0">
<filter id="noise-filter">
<filter class="noise-filter">
<feTurbulence type="fractalNoise" baseFrequency="1" numOctaves="5" :seed="seed" result="noise" />
<feColorMatrix type="saturate" values="0" result="desaturatedNoise" />
<feComponentTransfer>
@@ -31,9 +31,9 @@ if (typeof window !== "undefined") {
</feComponentTransfer>
</filter>
</svg>
<div id="header-impression-noise"></div>
<div class="noise"></div>
<div
id="header-impression-image"
class="image"
:style="{
backgroundImage: frontmatter.impression ? `url('${frontmatter.impression}')` : `url('${defaultImpression}')`,
}"

44
.vitepress/theme/styles/components/Header.scss
View File

@@ -1,6 +1,6 @@
@use "../mixin";
header {
.Header {
grid-column: span 12;
position: relative;
@@ -13,7 +13,7 @@ header {
display: none;
}
#header-hero-container {
.container {
display: flex;
align-items: flex-start;
flex-direction: column;
@@ -35,7 +35,7 @@ header {
transition: var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-standard);
z-index: 1;
#header-hero-headline {
.headline {
@include mixin.typescale-style(
"display-large",
$font-size: 90rem,
@@ -51,7 +51,7 @@ header {
transition: var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard);
}
#header-hero-subtitle {
.subtitle {
@include mixin.typescale-style("headline-large", $font-size: 22rem, $line-height: 22rem);
width: 100%;
@@ -62,7 +62,7 @@ header {
transition: var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard);
}
#header-impression {
.impression {
position: absolute;
left: 0px;
top: 0px;
@@ -75,7 +75,7 @@ header {
transition: background-color var(--md-sys-motion-duration-extra-long4) var(--md-sys-motion-easing-standard);
z-index: -1;
#header-impression-noise {
.noise {
position: relative;
height: 100%;
@@ -87,7 +87,7 @@ header {
z-index: 2;
}
#header-impression-image {
.image {
position: absolute;
left: 0px;
top: 0px;
@@ -104,11 +104,11 @@ header {
@media (prefers-color-scheme: dark) {
background-color: var(--md-ref-palette-secondary10);
#header-impression-noise {
.noise {
opacity: 0.1;
}
#header-impression-image {
.image {
opacity: 0.4;
}
}
@@ -117,22 +117,22 @@ header {
}
@media screen and (max-width: 1600px) {
header {
.Header {
grid-column: span 12;
}
}
@media screen and (max-width: 1200px) {
header {
.Header {
grid-column: span 8;
height: 45vh;
min-height: 360px;
#header-hero-container {
.container {
padding: 5vw;
#header-hero-headline {
.headline {
@include mixin.typescale-style(
"display-large",
$font-size: 7vw,
@@ -141,7 +141,7 @@ header {
);
}
#header-hero-subtitle {
.subtitle {
@include mixin.typescale-style(
"display-small",
$font-size: 18rem,
@@ -154,13 +154,13 @@ header {
}
@media screen and (max-width: 840px) {
header {
.Header {
grid-column: span 6;
#header-hero-container {
.container {
width: 100%;
#header-hero-headline {
.headline {
@include mixin.typescale-style(
"display-large",
$font-size: 8vw,
@@ -169,7 +169,7 @@ header {
);
}
#header-hero-subtitle {
.subtitle {
@include mixin.typescale-style("headline-large", $font-size: 23rem, $line-height: 23rem);
}
}
@@ -177,13 +177,13 @@ header {
}
@media screen and (max-width: 600px) {
header {
.Header {
grid-column: span 4;
#header-hero-container {
.container {
padding: 30px;
#header-hero-headline {
.headline {
@include mixin.typescale-style(
"display-large",
$font-size: 40rem,
@@ -194,7 +194,7 @@ header {
word-break: break-word;
}
#header-hero-subtitle {
.subtitle {
@include mixin.typescale-style(
"display-small",
$font-size: 15rem,