diff options
Diffstat (limited to 'website.templ')
| -rw-r--r-- | website.templ | 35 |
1 files changed, 26 insertions, 9 deletions
diff --git a/website.templ b/website.templ index 53992f7..4a0471b 100644 --- a/website.templ +++ b/website.templ @@ -310,12 +310,12 @@ templ FlagshipProject(project Project, extra string) { <div class="flex flex-col gap-4 flex-1 min-w-0"> <div class="flex flex-wrap items-baseline gap-x-[1ch] gap-y-[0.4rem]"> @project.Icon - <a href={ templ.SafeURL("/projects/" + project.Slug) } class="text-[170%] font-bold text-(--accent) hover:underline">{ project.Title }</a> + <a href={ templ.SafeURL("/projects/" + project.Slug) } class="text-[170%] font-bold text-(--accent) hover:underline after:absolute after:inset-0 after:z-0">{ project.Title }</a> <span class="text-[85%] text-(--primary)">{ project.Category }</span> for _, tag := range project.Tags { <code class={ "text-[75%] px-[0.4rem] inline-block rounded-[0.3rem] border-[0.01rem] bg-(--alt)/25" + " " + tag.Color }>{ tag.Name }</code> } - <span class="ml-auto flex items-center self-center"> + <span class="ml-auto flex items-center self-center relative z-10"> for _, link := range project.Links { @IconLink(link.URL, link.Label, "") { @link.Icon @@ -325,7 +325,7 @@ templ FlagshipProject(project Project, extra string) { </div> <p class="leading-relaxed max-w-3xl">{ project.Desc }</p> if len(flagship.Downloads) > 0 || flagship.Version != "" { - <div class="flex flex-wrap items-center gap-x-4 gap-y-2"> + <div class="flex flex-wrap items-center gap-x-4 gap-y-2 relative z-10"> if versionBeforeDownloads { @VersionTag(project) } @@ -349,7 +349,7 @@ templ FlagshipProject(project Project, extra string) { } </div> if flagship.Snippet != "" { - <div class="shrink-0 self-start flex flex-col gap-[0.5rem] p-[1rem] rounded-[0.4rem] bg-black/30"> + <div class="shrink-0 self-start flex flex-col gap-[0.5rem] p-[1rem] rounded-[0.4rem] bg-black/30 relative z-10"> <span class="text-[75%] text-(--alt)">example</span> @CopyPre(flagship.Snippet, "text-[80%] leading-[normal]") { { flagship.Snippet } @@ -418,8 +418,13 @@ templ IconExternal(color string) { } templ IconKrypton() { - @Icon("text-[#00f1ff]") { - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot preview-icon"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="12" r="10"></circle></svg> + @Icon("text-[#00f1ff] scale-150") { + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="24" height="24" fill="none" stroke="currentColor"> + <!-- Outer Circle --> + <circle cx="50" cy="50" r="42" stroke-width="6"></circle> + <!-- Inner Dot --> + <circle cx="50" cy="50" r="16" fill="currentColor" stroke="none"></circle> + </svg> } // { "\uf192" } } @@ -430,15 +435,15 @@ templ ProjectItem(project Project, extra string) { <div class="flex flex-col gap-[0.0625rem] w-full"> <div class="flex flex-wrap items-baseline gap-x-[1ch] gap-y-[0.4rem]"> @project.Icon - <a href={ templ.SafeURL("/projects/" + project.Slug) } class="text-[130%] font-bold text-(--accent)">{ project.Title }</a> + <a href={ templ.SafeURL("/projects/" + project.Slug) } class="text-[130%] font-bold text-(--accent) after:absolute after:inset-0 after:z-0">{ project.Title }</a> <span class="text-[80%] text-(--primary)">{ project.Category }</span> for _, tag := range project.Tags { <code class={ "text-[75%] px-[0.4rem] inline-block rounded-[0.3rem] border-[0.01rem] bg-(--alt)/25" + " " + tag.Color }>{ tag.Name }</code> } // for _, tag := range project.Tags { - // <code class="text-[75%] px-[0.4rem] inline-block rounded-[0.3rem] bg-(--extra)/70 text-(--background)">{ tag }</code> + // <code class="text-[75%] px-[0.4rem] inline-block rounded-[0.3rem] bg-(--extra)/70 text-(--background)">{ tag }</code> // } - <span class="ml-auto flex items-center self-center"> + <span class="ml-auto flex items-center self-center relative z-10"> for _, link := range project.Links { @IconLink(link.URL, link.Label, "") { @link.Icon @@ -652,6 +657,18 @@ templ IconJetbrains(color string) { } } +templ IconDocs(color string) { + @Icon(color) { + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open preview-icon"><path d="M12 5v16"></path><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"></path></svg> + } +} + +templ IconReleases(color string) { + @Icon(color) { + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tags preview-icon"><path d="M13.172 2a2 2 0 0 1 1.414.586l6.71 6.71a2.4 2.4 0 0 1 0 3.408l-4.592 4.592a2.4 2.4 0 0 1-3.408 0l-6.71-6.71A2 2 0 0 1 6 9.172V3a1 1 0 0 1 1-1z"></path><path d="M2 7v6.172a2 2 0 0 0 .586 1.414l6.71 6.71a2.4 2.4 0 0 0 3.191.193"></path><circle cx="10.5" cy="6.5" r=".5" fill="currentColor"></circle></svg> + } +} + func row(icon func(color string) templ.Component, color, label, value string) FetchRow { return FetchRow{Icon: icon(color), Color: color, Label: label, Value: value} } |
