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

fixed minor navigation issues #3

Merged
Jatus merged 1 commits from develop into main 2023-05-28 12:23:35 +02:00
Conversation 0 Commits 1 Files Changed 4 +52 -16
4 changed files with 52 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app.html
View File

@ -1,12 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="it">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

19
src/lib/elements/LanguageSelector.svelte
View File

@ -32,10 +32,17 @@
const globeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'globe-europe' }; const globeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'globe-europe' };
const globeDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(globeLookup); const globeDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(globeLookup);
const buttonLabel: { [key: CurrentLanguage[number]]: string } = {
it: 'seleziona la lingua',
en: 'select language'
};
</script> </script>
<div class="language-selector"> <div class="language-selector">
<button on:click={setOpen}> <FontAwesomeIcon icon={globeDefinition} size="2x" /> </button> <button on:click={setOpen}>
<FontAwesomeIcon icon={globeDefinition} size="2x" /><span>{buttonLabel[currentLanguage]}</span
></button
>
<div class="button-container" bind:this={langSelect}> <div class="button-container" bind:this={langSelect}>
<button <button
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}" class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
@ -76,6 +83,16 @@
border: none; border: none;
width: 60px; width: 60px;
height: 50px; height: 50px;
span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
} }
.custom-button { .custom-button {
width: 100px; width: 100px;

22
src/routes/+page.svelte
View File

@ -52,18 +52,22 @@
<!-- svelte-ignore a11y-invalid-attribute --> <!-- svelte-ignore a11y-invalid-attribute -->
<LanguageSelector bind:currentLanguage /> <LanguageSelector bind:currentLanguage />
<Menu {currentLanguage} /> <Menu {currentLanguage} />
<div id="home" class="default"> <div class="default">
<span id="home" class="anchor" />
<AboutMe {currentLanguage} /> <AboutMe {currentLanguage} />
</div> </div>
<div id="jobs" class="default"> <div class="default">
<span id="jobs" class="anchor" />
<h2>{titles.job[currentLanguage]}</h2> <h2>{titles.job[currentLanguage]}</h2>
<Jobs {jobs} {currentLanguage} /> <Jobs {jobs} {currentLanguage} />
</div> </div>
<div id="training" class="default"> <div class="default">
<span id="training" class="anchor" />
<h2>{titles.school[currentLanguage]}</h2> <h2>{titles.school[currentLanguage]}</h2>
<Training {currentLanguage} /> <Training {currentLanguage} />
</div> </div>
<div id="portfolio" class="default"> <div class="default">
<span id="portfolio" class="anchor" />
<h2>{titles.portfolio[currentLanguage]}</h2> <h2>{titles.portfolio[currentLanguage]}</h2>
<Jobs jobs={portfolio} {currentLanguage} /> <Jobs jobs={portfolio} {currentLanguage} />
</div> </div>
@ -77,4 +81,14 @@
font-size: large; font-size: large;
} }
} }
.anchor {
position: absolute;
margin-top: -150px;
@media (min-width: 460px) {
margin-top: -100px;
}
@media (min-width: $min-tablet) {
margin-top: -60px;
}
}
</style> </style>

2
vite.config.ts
View File

@ -5,4 +5,6 @@ const config: UserConfig = {
plugins: [sveltekit()] plugins: [sveltekit()]
}; };
config.server = { port: 80, origin: 'pettinato.eu' };
export default config; export default config;