new theme

README.md

@@ -38,7 +38,7 @@ Distributed under the MIT License. See [LICENSE](LICENSE) for more information.
 
 <p align="right"><a href="#readme-top">Back to top :arrow_up: </a></p>
 
-[GIF_PATH]: assets/
+[GIF_PATH]: assets/github/gif.gif
 [GOOGLE_URL]: https://fonts.google.com/
 [JS_ICON_URL]: https://icons8.com/icon/108784/javascript
 [ICONS8_URL]: https://icons8.com

css/style.css

@@ -2,8 +2,10 @@
   --font-sans: "Inter", sans-serif;
   --font-mono: "Ubuntu Mono", monospace;
   --white-color: #fff;
-  --black-color: #000;
-  --dark-gray-color: #4d4e53;
+  --black-color: #141314;
+  --link-color: #004bee;
+  --darker-gray-color: #313235;
+  --dark-gray-color: #3c3d40;
   --light-gray-color: #f5f5f5;
   --js-yellow-color: #ffd600;
   --font-size: 1.2rem;
@@ -20,6 +22,21 @@
   code {
     color: var(--light-gray-color);
   }
+
+  pre {
+    color: var(--light-gray-color);
+    background-color: var(--dark-gray-color);
+  }
+
+  .clipboard-btn {
+    color: var(--white-color);
+    background-color: var(--darker-gray-color);
+  }
+
+  article a,
+  footer a {
+    color: var(--link-color);
+  }
 }
 
 body {
@@ -37,6 +54,11 @@ section {
   padding-bottom: 1rem;
 }
 
+pre,
+button {
+  border-radius: 5px;
+}
+
 nav {
   position: fixed;
   padding-left: 2rem;
@@ -183,7 +205,6 @@ strong {
   font-weight: bold;
 }
 
-/* code, */
 pre {
   font-size: 1.1rem;
   font-family: var(--font-mono);
@@ -213,6 +234,7 @@ pre {
   right: 0.5rem;
   bottom: 0.5rem;
   padding: 0.5rem;
+  background-color: #d4d4d4;
   font-family: var(--font-sans);
   font-size: 1rem;
   border: none;
@@ -229,11 +251,15 @@ pre {
 
 footer {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-evenly;
   font-size: 0.9rem;
   margin-left: 1rem;
   margin-right: 1rem;
 
+  span {
+    margin-right: 1rem;
+  }
+
   a {
     text-decoration: none;
   }
@@ -258,7 +284,6 @@ footer {
   }
 
   footer {
-    justify-content: space-around;
     text-align: center;
     line-height: 1.1;
 

script.js

@@ -26,7 +26,7 @@ function addClipboardBtns() {
 
 function addClipboardEvent(clipboardBtn, preTagContent) {
   clipboardBtn.onclick = () => {
-    navigator.clipboard.write(preTagContent);
+    navigator.clipboard.writeText(preTagContent);
     clipboardBtn.innerText = "Copied!";
     setTimeout(() => {
       clipboardBtn.innerText = "Copy";