better dev env; increase social icons; scrollbar mod

src/style.css

@@ -17,6 +17,22 @@ body {
   background: linear-gradient(180deg, rgba(169,199,206,1) 0%, rgba(165,211,197,1) 100%);
 }
 
+*::-webkit-scrollbar {
+  width: 4px;
+}
+
+*::-webkit-scrollbar-track {
+  background-color: #91949b;
+  border-radius: 1rem;
+  margin-top: 1px;
+  margin-bottom: 15px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #7f808b;
+  border-radius: 1rem;
+}
+
 img {
   filter: brightness(0.9) contrast(1.4);
 }

src/windows/social_media.ts

@@ -1,39 +1,40 @@
 import { baseWindow } from "../shared/base-window";
 
 export const openSocialMedia = () => {
-  if (<HTMLSpanElement>document.getElementById("info")) return;
+  if (<HTMLSpanElement>document.getElementById("social_media")) return;
   const content = document.createElement("div");
   content.id = "social_media";
   content.className = "p-4";
   content.innerHTML = `
     <h2 class="font-semibold text-xl">Technology</h2>
     <div class="flex items-end">
-      <img src="./assets/icons/github.svg" class="w-6 h-6 mt-4">
+      <img src="./assets/icons/github.svg" class="w-8 h-8 mt-4">
       <a href="https://github.com/d-roak" target="_blank" class="ml-2 text-sm md:text-base text-pastel-blue underline">@d-roak</a>
     </div>
     <div class="flex items-end">
-      <img src="./assets/icons/twitter.gif" class="w-6 h-6 mt-4">
+      <img src="./assets/icons/twitter.gif" class="w-8 h-8 mt-4">
       <a href="https://twitter.com/droak_" target="_blank" class="ml-2 text-sm md:text-base text-pastel-blue underline">@droak_</a>
     </div>
     <div class="flex items-end">
-      <img src="./assets/icons/youtube.svg" class="w-6 h-6 mt-4">
+      <img src="./assets/icons/youtube.svg" class="w-8 h-8 mt-4">
       <a href="https://www.youtube.com/@droak_" target="_blank" class="ml-2 text-sm md:text-base text-pastel-blue underline">@droak_</a>
     </div>
 
     <h1 class="mt-6 font-semibold text-xl">Personal</h1>
     <div class="flex items-end">
-      <img src="./assets/icons/instagram.png" class="w-6 h-6 mt-4">
+      <img src="./assets/icons/instagram.png" class="w-8 h-8 mt-4">
       <a href="https://www.instagram.com/thisisoak___" target="_blank" class="ml-2 text-sm md:text-base text-pastel-blue underline">@thisisoak___</a>
     </div>
     <div class="flex items-end">
-      <img src="./assets/icons/youtube.svg" class="w-6 h-6 mt-4">
+      <img src="./assets/icons/youtube.svg" class="w-8 h-8 mt-4">
       <a href="https://www.youtube.com/@thisisoak_" target="_blank" class="ml-2 text-sm md:text-base text-pastel-blue underline">@thisisoak_</a>
     </div>
     <div class="flex items-end">
-      <img src="./assets/icons/tiktok.png" class="w-6 h-6 mt-4">
+      <img src="./assets/icons/tiktok.png" class="w-8 h-8 mt-4">
       <a href="https://www.tiktok.com/@thisisoak__" target="_blank" class="ml-2 text-sm md:text-base text-pastel-blue underline">@thisisoak__</a>
     </div>
+
   `;
 
-  baseWindow("w-72 h-96 md:w-[30rem] md:h-96", content);
+  baseWindow("w-72 h-96 md:w-[30rem]", content);
 };

webpack.config.js

@@ -24,5 +24,6 @@ module.exports = {
   output: {
     filename: "script.js",
     path: path.resolve(__dirname, "public", "static", "bundle"),
+    publicPath: "/static/bundle/"
   },
 };

yarn.lock

@@ -531,7 +531,9 @@ camelcase-css@^2.0.1:
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 caniuse-lite@^1.0.30001541:
-  version "1.0.30001549"
+  version "1.0.30001597"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001597.tgz"
+  integrity sha512-7LjJvmQU6Sj7bL0j5b5WY/3n7utXUJvAe1lxhsHDbLmwX9mdL86Yjtr+5SRCyf8qME4M7pU2hswj0FpyBVCv9w==
 
 chalk@^4.1.0:
   version "4.1.2"
@@ -1539,11 +1541,6 @@ path-parse@^1.0.7:
 [email protected]:
   version "0.1.7"
 
-perf_hooks@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.npmjs.org/perf_hooks/-/perf_hooks-0.0.1.tgz"
-  integrity sha512-qG/D9iA4KDme+KF4vCObJy6Bouu3BlQnmJ8jPydVPm32NJBD9ZK1ZNgXSYaZKHkVC1sKSqUiLgFvAZPUiIEnBw==
-
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"