initial commit

src/App.scss

@@ -0,0 +1,99 @@
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@200..700&display=swap');
+@import "../node_modules/bootstrap/scss/bootstrap";
+
+body {
+  background-color: #FAF9F6;
+}
+
+.App {
+  --dartball-blue: #20438cff;
+  --dartball-green: #118b48ff;
+  --dartball-black: #343a39ff;
+  --dartball-white: #f6fafdff;
+  --dartball-red: #c63d4eff;
+  --dartball-gray: #b2aba8ff;
+  --dartball-orange: #ed5a2eff;
+
+  font-family: 'Oswald';
+  font-size: 18px;
+  text-align: center;
+  section, div.gameState {
+    /* padding: 0.5rem; */
+    margin: 0.5rem;
+    border: black solid;
+    border-radius: 10px;
+    background-color: white;
+    overflow: hidden;
+    header {
+      font-size: 1.8rem;
+      font-weight: bolder;
+      text-transform: uppercase;
+      border-bottom: black solid;
+      background-color: lightblue;
+      min-height: 1rem;
+    }
+  }
+
+  .gameLog {
+    font-family: monospace;
+    font-size: .8rem;
+    line-height: 1rem;
+    @extend .bg-light; 
+  }
+
+  table {
+    @extend .table;
+    background-color: auto;
+    .at-bat {
+      @extend .table-active;
+    }
+  }
+
+  section.play {
+    background-color: var(--dartball-green);
+  }
+
+  .base {
+    @extend .m-1;
+    border: black solid;
+    padding: 0.2rem;
+    width: 1rem;
+    height: 1rem;
+    &.occupied {
+      color: white;
+      background-color: red;
+  }}
+
+  button.play, div.dropdown {
+    @extend .btn;
+    @extend .btn-lg;
+    @extend .btn-light;
+    @extend .m-2;
+    text-transform: uppercase;
+    font-weight: 800;
+    color: var(--dartball-black);
+    &.strike{
+      background-color: var(--dartball-gray);
+      border: solid var(--dartball-gray);
+    }
+    &.out{
+      background-color: var(--dartball-orange);
+      border: solid var(--dartball-orange);
+    }
+    &.foul{
+      background-color: var(--dartball-green);
+      border: solid var(--dartball-black);
+    }
+    &.ball{
+      background-color: var(--dartball-blue);
+      border: solid var(--dartball-blue);
+      color: white
+    }
+    &.hit{
+      @extend .btn-light;
+      background-color: var(--dartball-white);
+      border: solid var(--dartball-white);
+    }
+    border: none;
+  }
+}