SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: migrate Header component

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-20 00:48:34 +01:00
parent 6e2a633b45
commit c1b7bdbbb4
2 changed files with 32 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/components/Header.vue
View file

@ -1,65 +0,0 @@
<template>
<header class="header">
<slot></slot>
</header>
</template>
<script></script>
<style lang="scss">
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
.header {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
position: sticky;
top: max(1em, env(safe-area-inset-top));
right: max(1em, env(safe-area-inset-right));
left: max(1em, env(safe-area-inset-left));
z-index: 2;
max-width: 70em;
margin: 1em max(1em, env(safe-area-inset-right)) 1em
max(1em, env(safe-area-inset-left));
padding: 0.5em;
border-radius: 0.5em;
box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
background: radial-gradient(
circle at bottom right,
darken($bg-color-lighter, 30%) 20%,
transparent 80%
),
radial-gradient(
circle at top left,
darken($sebin-secondary, 20%) 5%,
darken($sebin-primary, 20%) 100%
);
@include theme(dark) {
background: radial-gradient(
circle at bottom right,
darken($bg-color-lighter, 35%) 20%,
transparent 80%
),
radial-gradient(
circle at top left,
darken($sebin-secondary, 35%) 5%,
darken($sebin-primary, 35%) 100%
);
}
@include theme(dark) {
background-color: $bg-color-dark;
}
@media (min-width: 90em) {
margin: 0 auto;
}
}
</style>

32
src/components/SiteHeader.vue Normal file
View file

@ -0,0 +1,32 @@
<script setup lang="ts"></script>
<template>
<header class="header">
<slot></slot>
</header>
</template>
<style lang="scss">
.header {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
position: sticky;
top: var(--container-spacing-top-safe);
right: var(--container-spacing-right-safe);
left: var(--container-spacing-left-safe);
background: var(--header-background);
max-width: 70rem;
margin: var(--header-margin);
border-radius: 0.5rem;
padding: 0.5rem;
box-shadow: var(--container-box-shadow);
z-index: 1;
}
</style>