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

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

@ -51,7 +51,7 @@
function setOpen() { function setOpen() {
menuOpen = !menuOpen; menuOpen = !menuOpen;
const animation = menuContainer.animate([{ height: '0px' }, { height: '360px' }], { const animation = menuContainer.animate([{ height: '0px' }, { height: '240px' }], {
duration: 100, duration: 100,
fill: 'both' fill: 'both'
}); });
@ -61,7 +61,7 @@
</script> </script>
<div class="menu-container"> <div class="menu-container">
<div class="header"> <div class="header {menuOpen ? 'borderclass' : ''}">
<button on:click={setOpen} tabindex="0" title={menuButton[Number(menuOpen)][currentLanguage]}> <button on:click={setOpen} tabindex="0" title={menuButton[Number(menuOpen)][currentLanguage]}>
{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} size="lg" /> {#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} size="lg" />
{:else} {:else}
@ -75,7 +75,7 @@
</div> </div>
<ul class="wrapper" bind:this={menuContainer}> <ul class="wrapper" bind:this={menuContainer}>
<li> <li>
<a class="menu-element" href="#top"> <a on:click={setOpen} class="menu-element" href="#top">
<i> <i>
<FontAwesomeIcon icon={homeIconDefinition} /> <FontAwesomeIcon icon={homeIconDefinition} />
</i> </i>
@ -83,28 +83,28 @@
> >
</li> </li>
<li> <li>
<a class="menu-element" href="#jobs" <a on:click={setOpen} class="menu-element" href="#jobs"
><i> ><i>
<FontAwesomeIcon icon={userTieDefinition} /> <FontAwesomeIcon icon={userTieDefinition} />
</i><span>{menu.job[currentLanguage]}</span></a </i><span>{menu.job[currentLanguage]}</span></a
> >
</li> </li>
<li> <li>
<a class="menu-element" href="#training" <a on:click={setOpen} class="menu-element" href="#training"
><i> ><i>
<FontAwesomeIcon icon={graduationDefinition} /> <FontAwesomeIcon icon={graduationDefinition} />
</i><span>{menu.school[currentLanguage]}</span></a </i><span>{menu.school[currentLanguage]}</span></a
> >
</li> </li>
<li> <li>
<a class="menu-element" href="#portfolio" <a on:click={setOpen} class="menu-element" href="#portfolio"
><i> ><i>
<FontAwesomeIcon icon={userClockDefinition} /> <FontAwesomeIcon icon={userClockDefinition} />
</i><span>{menu.portfolio[currentLanguage]}</span></a </i><span>{menu.portfolio[currentLanguage]}</span></a
> >
</li> </li>
<!-- <li> <!-- <li>
<a class="menu-element" href="/blog" <a on:click={setOpen} class="menu-element" href="/blog"
><i> ><i>
<FontAwesomeIcon icon={addressCardDefinition} /> <FontAwesomeIcon icon={addressCardDefinition} />
</i><span>{menu.blog[currentLanguage]}</span></a </i><span>{menu.blog[currentLanguage]}</span></a
@ -115,26 +115,33 @@
<style lang="scss"> <style lang="scss">
@import '../../app.scss'; @import '../../app.scss';
.borderclass {
border-bottom: solid $border-hover-color 2px;
border-radius: $default-border-radius;
}
.header { .header {
display: flex; display: flex;
width: 100%; justify-content: left;
padding-top: 10px;
height: 10%;
justify-content: space-between;
align-items: center; align-items: center;
button { button {
height: 80px; text-align: center;
width: 80px; height: 50px;
width: 50px;
border: none; border: none;
font-size: 40px; font-size: 30px;
background: none; background: none;
} }
.title {
justify-content: center;
text-align: right;
margin: auto;
}
} }
.menu-container { .menu-container {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 80%;
margin: auto; margin: auto;
} }
ul { ul {
@ -145,31 +152,27 @@
margin: auto; margin: auto;
} }
a { a {
padding-left: 10px;
display: flex; display: flex;
justify-content: start; justify-content: left;
align-items: center; align-items: center;
background-color: $basecolor2; background-color: $basecolor2;
font-size: larger; font-size: 18px;
height: 60px; height: 60px;
border-bottom: solid $border-hover-color 2px;
border-radius: 0px 0px $default-border-radius $default-border-radius;
i { 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 { a:hover {
background-color: $default-active-color; background-color: $default-active-color;
outline: solid 1px;
} }
.wrapper { .wrapper {
height: 0px; height: 0px;
border-radius: 0px 0px $default-border-radius $default-border-radius;
} }
</style> </style>