Improved CSS

Moderrek · Jun 3, 2024 · c795598 · c795598
1 parent 345ad8f
commit c795598
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -8,22 +8,25 @@
     <meta property=”og:title” content="Tic Tac Toe">
   </head>
   <body>
-    <section id="guziki">
-      <button type="button" id="guzik1" class="guziki">X</button>
-      <button type="button" id="guzik2" class="guziki">O</button>
-    </section>
-    <section id="wynik"></section>
-    <section id="plansza">
-      <button class="pole"></button>
-      <button class="pole"></button>
-      <button class="pole"></button>
-      <button class="pole"></button>
-      <button class="pole"></button>
-      <button class="pole"></button>
-      <button class="pole"></button>
-      <button class="pole"></button>
-      <button class="pole"></button>
-    </section>
+    <main>
+      <section id="wynik"></section>
+      <section id="plansza">
+        <button class="pole"></button>
+        <button class="pole"></button>
+        <button class="pole"></button>
+        <button class="pole"></button>
+        <button class="pole"></button>
+        <button class="pole"></button>
+        <button class="pole"></button>
+        <button class="pole"></button>
+        <button class="pole"></button>
+      </section>
+      <section id="guziki">
+        <button type="button" id="guzik1" class="guziki">X</button>
+        <button type="button" id="guzik2" class="guziki">O</button>
+      </section>
+    </main>
+
     <script type="text/javascript" src="controller.js"></script>
     <script type="text/javascript" src="view.js"></script>
     <script type="text/javascript" src="main.js"></script>

diff --git a/style.css b/style.css
@@ -6,11 +6,32 @@
 }
 
 @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:[email protected]&display=swap');
 
 body {
     background-color: var(--background);
     font-size: 5rem;
     color: #FEFEFE;
+    font-family: "Maven Pro", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 500;
+    font-style: normal;
+    display: flex;
+    justify-content: center;
+}
+
+main {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+}
+
+main > div {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .pole{
@@ -80,7 +101,6 @@ body {
     font-size: 5rem;
     color: #310202;
     top: 400px;
-    position: absolute;
     box-shadow: inset -10px -10px 0px 0px #af2a2a;
     font-weight: 900;
     opacity: 0.8;