From f4f174309066091ce8e75a55c2f7a5d1f588e355 Mon Sep 17 00:00:00 2001
From: Andrew Coleman <penguincoder@gmail.com>
Date: Mon, 16 Jan 2023 13:56:55 -0500
Subject: [PATCH] Update styles with different Base sets

---
 sass/_containers.scss | 40 ----------------------------------------
 sass/_mixins.scss     | 38 --------------------------------------
 sass/_tables.scss     | 18 ++++++++++++++++++
 sass/juice.scss       |  3 +--
 4 files changed, 19 insertions(+), 80 deletions(-)
 delete mode 100644 sass/_containers.scss
 delete mode 100644 sass/_mixins.scss
 create mode 100644 sass/_tables.scss

diff --git a/sass/_containers.scss b/sass/_containers.scss
deleted file mode 100644
index c7725f7..0000000
--- a/sass/_containers.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.container {
-  max-width: ($breakpoint-xl - $grid-gutter * 2);
-  padding-left: $grid-gutter;
-  padding-right: $grid-gutter;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@include breakpoint(m) {
-  .container-m {
-    width: ($breakpoint-m - $grid-gutter * 2);
-    max-width: auto;
-    padding-left: $grid-gutter;
-    padding-right: $grid-gutter;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-@include breakpoint(l) {
-  .container-l {
-    width: ($breakpoint-l - $grid-gutter * 2);
-    max-width: auto;
-    padding-left: $grid-gutter;
-    padding-right: $grid-gutter;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-@include breakpoint(xl) {
-  .container-xl {
-    width: ($breakpoint-xl - $grid-gutter * 2);
-    max-width: auto;
-    padding-left: $grid-gutter;
-    padding-right: $grid-gutter;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
\ No newline at end of file
diff --git a/sass/_mixins.scss b/sass/_mixins.scss
deleted file mode 100644
index 9548a78..0000000
--- a/sass/_mixins.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-$breakpoint-m:  768px !default;
-$breakpoint-l:  980px !default;
-$breakpoint-xl: 1200px !default;
-
-$grid-gutter: 16px !default;
-
-// Mixins
-
-// Breakpoints
-// Example: .component { @include breakpoint(m) { background: red; } };
-// Output: .component { @media only screen and (min-width: 720px) { background: red; } }
-@mixin breakpoint($bp) {
-  @if $bp == xl {
-    @media only screen and (min-width: $breakpoint-xl) { @content ; }
-  }
-  @else if $bp == l {
-    @media only screen and (min-width: $breakpoint-l) { @content ; }
-  }
-  @else if $bp == m {
-    @media only screen and (min-width: $breakpoint-m) { @content ; }
-  }
-}
-
-// Background Color with Opacity
-// Example: .element { @include background-rgba(#000000, .5); }}
-// Output: .element { background: rgba(0, 0, 0, .5); }
-@mixin background-rgba($color, $alpha) {
-  background-color: $color;
-  background-color: rgba($color, $alpha);
-}
-
-// Animations
-// Example: .fade { @mixin animate(1s); }
-// Output: .fade { animation-duration: 1s; animation-fill-mode: both; }
-@mixin animate($duration: 1s) {
-  animation-duration: $duration;
-  animation-fill-mode: both;
-}
\ No newline at end of file
diff --git a/sass/_tables.scss b/sass/_tables.scss
new file mode 100644
index 0000000..b36b1b5
--- /dev/null
+++ b/sass/_tables.scss
@@ -0,0 +1,18 @@
+table {
+    text-align: left;
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+    margin: 0;
+    border: 1px solid var(--primary-text-color);
+  }
+  table td,
+  table th {
+    padding: 1rem;
+    border-bottom: 1px solid var(--primary-text-color);
+    border-right: 1px solid var(--primary-text-color);
+  }
+  
+  table tr:nth-child(2n) { background-color: #f6f8fa; }
+
+.table-responsive { overflow-x: auto; }
\ No newline at end of file
diff --git a/sass/juice.scss b/sass/juice.scss
index 1686649..c544924 100644
--- a/sass/juice.scss
+++ b/sass/juice.scss
@@ -2,8 +2,7 @@
 @import "_text.scss";
 @import "_markdown.scss";
 @import "_penguincoder.scss";
-@import "_mixins.scss";
-@import "_containers.scss";
+@import "_tables.scss";
 
 body {
   padding: 0;