Reuse CSS

4yman-0 · Aug 15, 2024 · 1f1b9e6 · 1f1b9e6
1 parent d7aa28a
commit 1f1b9e6
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 86 deletions.
diff --git a/archive/webgames/css/main.css b/archive/webgames/css/main.css
diff --git a/archive/webgames/index.html b/archive/webgames/index.html
@@ -5,18 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Web Games</title>
 
-    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="../../css/fixes.css">
+    <link rel="stylesheet" href="../../css/main.css">
     <link rel="stylesheet" href="index.css">
 </head>
 <body>
     <main>
         <h1>Web Games</h1>
         <ul>
             <li>
-                <a href="tic-tac-toe/tic-tac-toe.html">Tic Tac Toe</a>
+                <a href="tic-tac-toe">Tic Tac Toe</a>
             </li>
             <li>
-                <a href="snake/snake.html">Snake</a>
+                <a href="snake">Snake</a>
             </li>
         </ul>
     </main>

diff --git a/archive/webgames/snake/snake.html → archive/webgames/snake/index.html b/archive/webgames/snake/snake.html → archive/webgames/snake/index.html
@@ -5,14 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Snake</title>
 
-    <link rel="stylesheet" href="../css/main.css">
+    <link rel="stylesheet" href="../../../css/fixes.css">
+    <link rel="stylesheet" href="../../../css/main.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <main>
         <div id="modal" class="modal hidden">
             <h2 id="game-over">Game Over!</h2>
-            <button id="restart">Restart</button>
+            <a class="button" id="restart">Restart</a>
         </div>
         <section id="game">
             <header>

diff --git a/archive/webgames/snake/style.css b/archive/webgames/snake/style.css
@@ -24,11 +24,6 @@ main, #game{
     margin-bottom: 2vh;
 }
 
-#restart {
-    padding: 2vh 4vw;
-    font-size: 1.5em;
-}
-
 #game {
     display: flex;
     flex-direction: column;
@@ -98,3 +93,9 @@ main, #game{
         display: none;
     }
 }
+
+.button {
+    padding: 2rem 4rem;
+    font-size: 1.5em;
+}
+
diff --git a/...ive/webgames/tic-tac-toe/tic-tac-toe.html → archive/webgames/tic-tac-toe/index.html b/...ive/webgames/tic-tac-toe/tic-tac-toe.html → archive/webgames/tic-tac-toe/index.html
@@ -5,20 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tic Tac Toe</title>
 
-    <link rel="stylesheet" href="../css/main.css">
+    <link rel="stylesheet" href="../../../css/fixes.css">
+    <link rel="stylesheet" href="../../../css/main.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <main>
         <div class="overlay">
             <div id="mode-modal" class="modal">
                 <h2>Tic Tac Toe</h2>
-                <button id="start-normal">Normal</button>
-                <button id="start-2player">2 Players</button>
+                <a class="button" id="start-normal">Normal</a>
+                <a class="button" id="start-2player">2 Players</a>
             </div>
             <div id="win-modal" class="modal hidden">
                 <h2 id="player-wins">Player Wins!</h2>
-                <button id="restart">Restart</button>
+                <a class="button" id="restart">Restart</a>
             </div>
         </div>
         <section id="game">

diff --git a/css/main.css b/css/main.css
@@ -57,6 +57,23 @@ a:active{
     text-decoration: underline;
 }
 
+.button {
+    display: block;
+    padding: 0.5rem 1rem;
+    text-align: center;
+    color: var(--fg);
+    background: var(--color-2);
+    border: 1px solid var(--color-1);
+    cursor: pointer;
+    transition: background 0.2s linear;
+}
+
+.button:hover {
+    text-decoration: none;
+    background: var(--bg-3);
+    outline: 1px solid var(--color-1);
+}
+
 ::-webkit-scrollbar {
     width: 12px;
     height: 12px;

diff --git a/css/page.css b/css/page.css
@@ -48,22 +48,6 @@ section, .footer {
     }
 }
 
-.button {
-    display: block;
-    padding: 0.5rem 1rem;
-    text-align: center;
-    color: var(--fg);
-    background: var(--color-2);
-    border: 1px solid var(--color-1);
-    transition: background 0.2s linear;
-}
-
-.button:hover {
-    text-decoration: none;
-    background: var(--bg-3);
-    outline: 1px solid var(--color-1);
-}
-
 .footer {
     padding: 1rem;
     background: var(--bg-2);