Add doodle.css

c-shubh · Aug 15, 2022 · 471dee3 · 471dee3
1 parent 640a6bc
commit 471dee3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -7,13 +7,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Rock Paper Scissors</title>
   <link rel="stylesheet" href="src/style.css">
+  <link rel="stylesheet" href="src/include-doodlecss.css">
 </head>
 
-<body>
+<body class="doodle">
   <div class="game">
     <span class="game-title">Rock Paper Scissors</span>
-    <div class="round">
-      <span class="round-title">Round 1</span>
+    <div class="round doodle-border">
+      <span id="round-title">Round 1</span>
       <div class="move-buttons">
         <button type="button" id="rock-button">Rock</button>
         <button type="button" id="paper-button">Paper</button>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,11 +5,16 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev-host": "vite --host",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "devDependencies": {
     "typescript": "^4.6.4",
     "vite": "^3.0.0"
+  },
+  "dependencies": {
+    "doodle.css": "0.0.2",
+    "party-js": "^2.2.0"
   }
 }
diff --git a/src/include-doodlecss.css b/src/include-doodlecss.css
@@ -0,0 +1,5 @@
+@import url("doodle.css/doodle.css");
+@import url("https://fonts.googleapis.com/css2?family=Short+Stack&display=swap");
+body {
+  font-family: "Short Stack", cursive;
+}