Shopping cart (#19)

* feat: navbar and main components added

* feat: add shopping cart

* added cart and store components

* basic functionality complete

* fix: effect

* adding more logic and components

* basic features

* reorg tree and add summary

* feat: new stuff

* styling: more stuff

* changes

* as good as itll get

* added public

---------

Co-authored-by: mike <mike@windows>

shopping-cart/src/css/App.css

@@ -0,0 +1,5 @@
+#root {
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+}

shopping-cart/src/css/cart.module.css

@@ -0,0 +1,97 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.empty-cart {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  margin-top: 0.5rem;
+}
+
+.summary {
+  margin-right: 3rem;
+  padding: 1rem;
+  display: inline-block;
+  min-width: 250px;
+}
+
+.fullwidth {
+  width: 100%;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  margin: 0 2rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.cartItems {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  align-items: space-between;
+  justify-content: space-between;
+  align-content: flex-start;
+}
+
+.cartItem {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  justify-items: center;
+  padding: 2rem 0;
+  position: relative;
+}
+
+.cartItem::after {
+  content: "";
+  position: absolute;
+  border-bottom: solid black;
+  margin: auto;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  width: 50%;
+  border-bottom: 1px solid black;
+}
+
+.price-qty {
+  display: flex;
+  gap: 30px;
+  justify-content: center;
+}
+
+.price-qty p {
+  margin: 0;
+}
+
+.qtybtn {
+  display: flex;
+}
+
+.qtyp {
+  font-size: 1.3rem;
+  padding: 0.5rem;
+  margin: 0.5rem;
+}
+
+#img {
+  max-width: 100%;
+  max-height: 300px;
+  object-fit: contain;
+  border-radius: 2rem;
+  align-self: center;
+}
+
+.header {
+  margin: 1rem;
+}
+
+.input {
+  max-width: 30px;
+}

shopping-cart/src/css/index.css

@@ -0,0 +1,76 @@
+:root {
+  font-family: Inter, system-ui, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  font-size: 18px;
+
+  /*color-scheme: light dark;*/
+  /*color: rgba(255, 255, 255, 0.87);*/
+  /*background-color: #242424;*/
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.roboto-condensed-fnt {
+  font-family: "Roboto Condensed", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+
+/*h1 {*/
+/*  font-size: 3.2em;*/
+/*  line-height: 1.1;*/
+/*}*/
+/**/
+/*button {*/
+/*  border-radius: 8px;*/
+/*  border: 1px solid transparent;*/
+/*  padding: 0.6em 1.2em;*/
+/*  font-size: 1em;*/
+/*  font-weight: 500;*/
+/*  font-family: inherit;*/
+/*  background-color: #1a1a1a;*/
+/*  cursor: pointer;*/
+/*  transition: border-color 0.25s;*/
+/*}*/
+/*button:hover {*/
+/*  border-color: #646cff;*/
+/*}*/
+/*button:focus,*/
+/*button:focus-visible {*/
+/*  outline: 4px auto -webkit-focus-ring-color;*/
+/*}*/
+/**/
+/*@media (prefers-color-scheme: light) {*/
+/*  :root {*/
+/*    color: #213547;*/
+/*    background-color: #ffffff;*/
+/*  }*/
+/*  a:hover {*/
+/*    color: #747bff;*/
+/*  }*/
+/*  button {*/
+/*    background-color: #f9f9f9;*/
+/*  }*/
+/*}*/