fixing header
This commit is contained in:
Gianmarco Pettinato
parent
eabc979c62
commit
8b000c1ecf
@ -4,6 +4,7 @@
|
||||
"scripts": {
|
||||
"update-model": "json2ts ./src/lib/model/schemas/job.json ./src/lib/model/job.ts && json2ts ./src/lib/model/schemas/logo.json ./src/lib/model/logo.ts",
|
||||
"dev": "vite dev",
|
||||
"dev-exposed": "vite dev --host",
|
||||
"build": "vite build",
|
||||
"postbuild": "npx svelte-sitemap --domain https://pettinato.eu",
|
||||
"preview": "vite preview",
|
||||
@ -50,4 +51,4 @@
|
||||
"svelte-sitemap": "^2.6.0",
|
||||
"typesafe-i18n": "^5.20.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -51,7 +51,7 @@
|
||||
|
||||
function setOpen() {
|
||||
menuOpen = !menuOpen;
|
||||
const animation = menuContainer.animate([{ height: '0px' }, { height: '360px' }], {
|
||||
const animation = menuContainer.animate([{ height: '0px' }, { height: '240px' }], {
|
||||
duration: 100,
|
||||
fill: 'both'
|
||||
});
|
||||
@ -61,7 +61,7 @@
|
||||
</script>
|
||||
|
||||
<div class="menu-container">
|
||||
<div class="header">
|
||||
<div class="header {menuOpen ? 'borderclass' : ''}">
|
||||
<button on:click={setOpen} tabindex="0" title={menuButton[Number(menuOpen)][currentLanguage]}>
|
||||
{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} size="lg" />
|
||||
{:else}
|
||||
@ -75,7 +75,7 @@
|
||||
</div>
|
||||
<ul class="wrapper" bind:this={menuContainer}>
|
||||
<li>
|
||||
<a class="menu-element" href="#top">
|
||||
<a on:click={setOpen} class="menu-element" href="#top">
|
||||
<i>
|
||||
<FontAwesomeIcon icon={homeIconDefinition} />
|
||||
</i>
|
||||
@ -83,28 +83,28 @@
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="menu-element" href="#jobs"
|
||||
<a on:click={setOpen} class="menu-element" href="#jobs"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={userTieDefinition} />
|
||||
</i><span>{menu.job[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="menu-element" href="#training"
|
||||
<a on:click={setOpen} class="menu-element" href="#training"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={graduationDefinition} />
|
||||
</i><span>{menu.school[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a class="menu-element" href="#portfolio"
|
||||
<a on:click={setOpen} class="menu-element" href="#portfolio"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={userClockDefinition} />
|
||||
</i><span>{menu.portfolio[currentLanguage]}</span></a
|
||||
>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<a class="menu-element" href="/blog"
|
||||
<a on:click={setOpen} class="menu-element" href="/blog"
|
||||
><i>
|
||||
<FontAwesomeIcon icon={addressCardDefinition} />
|
||||
</i><span>{menu.blog[currentLanguage]}</span></a
|
||||
@ -115,26 +115,33 @@
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../app.scss';
|
||||
.borderclass {
|
||||
border-bottom: solid $border-hover-color 2px;
|
||||
border-radius: $default-border-radius;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
height: 10%;
|
||||
justify-content: space-between;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
button {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: none;
|
||||
font-size: 40px;
|
||||
font-size: 30px;
|
||||
background: none;
|
||||
}
|
||||
.title {
|
||||
justify-content: center;
|
||||
text-align: right;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
ul {
|
||||
@ -145,31 +152,27 @@
|
||||
margin: auto;
|
||||
}
|
||||
a {
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
background-color: $basecolor2;
|
||||
font-size: larger;
|
||||
font-size: 18px;
|
||||
height: 60px;
|
||||
border-bottom: solid $border-hover-color 2px;
|
||||
border-radius: 0px 0px $default-border-radius $default-border-radius;
|
||||
i {
|
||||
margin-right: 10%;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
span {
|
||||
}
|
||||
}
|
||||
li {
|
||||
border-left: 1px solid;
|
||||
border-right: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
li:first-of-type {
|
||||
border-top: 1px solid;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background-color: $default-active-color;
|
||||
outline: solid 1px;
|
||||
}
|
||||
.wrapper {
|
||||
height: 0px;
|
||||
border-radius: 0px 0px $default-border-radius $default-border-radius;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
[ZoneTransfer]
|
||||
ZoneId=3
|
||||
ReferrerUrl=https://cloudconvert.com/
|
||||
HostUrl=https://storage.cloudconvert.com/tasks/d2e68ca0-c4ea-4d5c-a821-99cb9bc0e2a1/photo_2023-05-27_14-07-56.webp?AWSAccessKeyId=cloudconvert-production&Expires=1685275786&Signature=e0WAf7JckXFaWlpmjR2VoxHuGsQ%3D&response-content-disposition=attachment%3B%20filename%3D%22photo_2023-05-27_14-07-56.webp%22&response-content-type=image%2Fwebp
|
||||
@ -1,5 +1,5 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import type { UserConfig } from 'vite';
|
||||
import type { UserConfig, defineConfig } from 'vite';
|
||||
|
||||
const config: UserConfig = {
|
||||
plugins: [sveltekit()]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user