diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte index e368dd6..0d37e10 100644 --- a/src/components/Footer.svelte +++ b/src/components/Footer.svelte @@ -1,26 +1,90 @@ +
-

Website by Jonas_Jones 2021 - 2024

+
+ + + + +
+ +

Website by Jonas_Jones 2021 - {year}

+ +
+ + Homepage + + + + Blog + + + + Docs + + +
- - diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte index 6dce95b..f8484f0 100644 --- a/src/components/NavBar.svelte +++ b/src/components/NavBar.svelte @@ -117,6 +117,11 @@ +
@@ -310,16 +315,20 @@ align-items: right; float: right; display: flex; - position: relative; + position: absolute; + top: 0; + right: 0; right: 3px; top: 3.5px; border-radius: 5px; max-width: 300px; height: 43px; overflow: hidden; + transition: margin-right 0.3s ease-in-out; } .lastfm:hover { background-color: var(--header-background-color-hover); + margin-right: 15px; } .lastfm img { width: 30px; @@ -359,13 +368,16 @@ align-self: center; } .lastfm-text { - display: none; - transition: width 0.3s ease-out; - } + display: block; + max-width: 0; + transition: max-width 0.3s ease-in-out; + overflow: hidden; + white-space: nowrap; +} - .lastfm:hover .lastfm-text { - display:block - } +.lastfm:hover .lastfm-text { + max-width: 500px; +} .link { position: absolute; @@ -396,7 +408,7 @@ @media only screen and (max-width: 650px) and (min-width: 375px) { .lastfm-text { - display: block; + max-width: 500px; } .nav-links { display: none; @@ -416,6 +428,7 @@ @media only screen and (max-width: 375px) and (min-width: 300px) { .lastfm { width: 50px; + margin-right: 15px; } .nav-links { display: none; @@ -431,6 +444,7 @@ @media only screen and (max-width: 300px) and (min-width: 0px) { .lastfm { width: 50px; + margin-right: 15px; } .nav-links { display: none; diff --git a/src/components/ProjectComponent.svelte b/src/components/ProjectComponent.svelte index 1dea882..e6602c5 100644 --- a/src/components/ProjectComponent.svelte +++ b/src/components/ProjectComponent.svelte @@ -10,6 +10,9 @@
+ {#if project.kanban} + Kanban Icon + {/if}
@@ -30,7 +33,7 @@ > {project.status} - {project.version} + {project.version ? project.version : "-"}
@@ -67,10 +70,11 @@ margin-left: 10px; margin-right: 10px; margin-top: -4px; - padding: 2px; + padding: 2px 10px; border: 3px solid var(--project-version-color); border-radius: 100px; float: right; + min-width: 70px; } .project-description { @@ -129,6 +133,19 @@ align-items: center; } + .project-kanban { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; + } + + .project-kanban-image { + width: 40px; + height: 40px; + filter: invert(1); + } + @media only screen and (max-width: 620px) { .project-topline { flex-direction: column; diff --git a/src/components/ProjectsLinks.svelte b/src/components/ProjectsLinks.svelte index cb6c6a1..2ecd914 100644 --- a/src/components/ProjectsLinks.svelte +++ b/src/components/ProjectsLinks.svelte @@ -2,8 +2,9 @@ export let project; import "../routes/+page.css"; + import FontAwesome from "./FontAwesome.svelte"; - +
{#each Object.entries(project.links) as [platform, link]} {#if platform === "GH"} - + {:else if platform === "WB"} {:else if platform === "YT"} {:else if platform === "TW"} - {:else if platform === "DC"} + {:else if platform === "DS"} {:else if platform === "PT"} @@ -28,6 +29,22 @@ {:else if platform === "IG"} + {:else if platform === "MR"} + + + + {:else if platform === "CF"} + + + + {:else if platform === "FJ"} + + + + {:else if platform === "DC"} + + + {:else} {platform} {/if} @@ -36,6 +53,7 @@