Jatus/cv-site
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

fixing header

Browse Source
This commit is contained in:
Gianmarco Pettinato 2023-05-27 23:32:07 +02:00
parent eabc979c62
commit 51c2ccfbe4
1 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/lib/elements/MenuMobile.svelte
View File

@ -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>