add github link

guyutongxue · Jan 30, 2024 · 541de73 · 541de73
1 parent 6459aa1
commit 541de73
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -51,10 +51,14 @@
           <button id="toggleTheme" data-tooltip="Toggle theme">
             <i class="icon icon-toggle-theme"></i>
           </button>
-          <span>
-            <a href="https://guyutongxue.site" target="_blank">Guyutongxue</a>
-            &copy; 2024</span
+          <span> Guyutongxue &copy; 2024 </span>
+          <button
+            onclick="window.open('https://github.com/Guyutongxue/clangd-in-browser')"
+            data-tooltip="Give me a star!"
+            data-tooltip-right
           >
+            <i class="icon icon-github"></i>
+          </button>
         </div>
       </div>
     </div>

diff --git a/src/style.css b/src/style.css
@@ -55,7 +55,7 @@ body {
 }
 
 #app {
-  width: 100vw;
+  width: calc(max(400px, 100vw));
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -89,7 +89,7 @@ body {
 
 #editor {
   width: 100%;
-  overflow: auto;
+  overflow: hidden;
   flex-grow: 1;
   flex-shrink: 1;
 
@@ -419,6 +419,17 @@ a {
   width: 1.2em;
   height: 1.2em;
 }
+.icon-github {
+  --un-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2'/%3E%3C/svg%3E");
+  -webkit-mask: var(--un-icon) no-repeat;
+  mask: var(--un-icon) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+  color: inherit;
+  width: 1.2em;
+  height: 1.2em;
+}
 
 .display-none {
   display: none !important;
@@ -457,3 +468,7 @@ a {
   left: 0%;
   transform: translate(0%, -100%);
 }
+[data-tooltip][data-tooltip-right]::after {
+  left: 100%;
+  transform: translate(-100%, -100%);
+}