Add a (half-assed) GH-Issues link

ja-he · Jan 30, 2024 · c594d54 · c594d54
1 parent 44f1bcb
commit c594d54
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -49,6 +49,41 @@
     grid-template-areas: "left center right";
   }
 
+  #main-file-issue-hint {
+    grid-area: left;
+    width: 100%;
+    height: 100%;
+  }
+  #main-file-issue-hint .github-hint-icon {
+    opacity: 0.25;
+    font-size: 4em;
+    position: absolute;
+    transition: opacity 0.2s ease-in-out;
+    transform: translate(-0.3em, -0.5em) rotate(135deg);
+    color: black;
+  }
+  #main-file-issue-hint:hover .github-hint-icon {
+    animation: animated-octocat 1s ease-in-out;
+    opacity: 1.0;
+  }
+  .github-hint-text-box {
+    position: absolute;
+    width: 15em;
+    background-color: black;
+    transform: translate(-4.2em, 1.1em) rotate(-45deg);
+    display: flex;
+  }
+  .github-hint-text {
+    color: white;
+    margin: auto;
+  }
+  @keyframes animated-octocat {
+    0%   { transform:  translate(-0.3em, -0.5em) rotate(135deg); }
+    25%  { transform:  translate(-0.3em, -0.5em) rotate(140deg); }
+    75%  { transform:  translate(-0.3em, -0.5em) rotate(130deg); }
+    100% { transform:  translate(-0.3em, -0.5em) rotate(135deg); }
+  }
+
   #main-title {
     grid-area: center;
     font-size: 2em;

diff --git a/src/main.rs b/src/main.rs
@@ -38,6 +38,17 @@ fn App() -> impl IntoView {
         <leptos_meta::Title text="purl Builder"></leptos_meta::Title>
         <div id="full-page">
             <div id="header">
+                <div id="main-file-issue-hint">
+                    <a href="https://github.com/ja-he/purl.tools/issues">
+                        <phosphor_leptos::GithubLogo
+                            class="github-hint-icon"
+                            weight=phosphor_leptos::IconWeight::Fill
+                        ></phosphor_leptos::GithubLogo>
+                        <div class="github-hint-text-box">
+                            <span class="github-hint-text">"Got an issue?"</span>
+                        </div>
+                    </a>
+                </div>
                 <div id="main-title">
                     <span id="title-text">"purl Builder"</span>
                     <span id="wip-disclaimer">"under construction"</span>