sync

2025-05-01 14:37:08 -06:00
parent b6008d462e
commit 5cd4571a92
91 changed files with 1009 additions and 36 deletions
@@ -0,0 +1,216 @@
+/********** GENERAL **********/
+* {
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 6vw;
+}
+
+h2 {
+  font-size: 4vw;
+}
+
+h3 {
+  font-size: 3vw;
+}
+
+h4 {
+  font-size: 2vw;
+}
+
+h5,
+h6,
+p,
+a,
+label {
+  font-size: 1vw;
+}
+
+/********** NAV BAR **********/
+nav {
+  margin-bottom: 25px;
+}
+
+nav ul {}
+
+nav ul li {
+  display: inline-block;
+  list-style: none;
+}
+
+nav ul li a {
+  display: block;
+  padding: 15px 15px 15px 15px;
+  text-decoration: none;
+}
+
+/********** LAYOUT CLASSES **********/
+.absolute_h_center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.center {
+  text-align: center;
+  margin: 0 auto;
+}
+
+.center_children {
+  align-items: center;
+  justify-content: center;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.space_between {
+  justify-content: space-between;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 20% 20% 20% 20%;
+  column-gap: 75px;
+  row-gap: 25px;
+}
+
+/********** CARDS **********/
+.card {
+  display: block;
+  width: 250px;
+  height: 250px;
+  border: 1px solid black;
+}
+
+.product_page_card {
+  display: block;
+  border: 1px solid black;
+}
+
+.card .img_container img {
+  min-width: 60%;
+  max-width: 60%;
+  height: auto;
+}
+
+.product_page_card .img_container img {
+  min-width: 30%;
+  max-width: 30%;
+  height: auto;
+  border: 1px solid red;
+}
+
+/********** MARGINS & PADDING **********/
+.padding {
+  padding: 25px;
+}
+
+.padding-top {
+  padding-top: 25px;
+}
+
+.padding-right {
+  padding-right: 25px;
+}
+
+.padding-bottom {
+  padding-bottom: 25px;
+}
+
+.padding-left {
+  padding-left: 25px;
+}
+
+.margin {
+  margin: 25px;
+}
+
+.margin-top {
+  margin-top: 25px;
+}
+
+.margin-right {
+  margin-right: 25px;
+}
+
+.margin-bottom {
+  margin-bottom: 25px;
+}
+
+.margin-left {
+  margin-left: 25px;
+}
+
+/********** SIZING **********/
+.std_width {
+  width: 70%;
+}
+
+.full_width {
+  width: 100%;
+}
+
+/********** MODALS **********/
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  backdrop-filter: blur(10px);
+}
+
+.modal.fade-in {
+  display: block;
+  animation: fade-in 0.7s ease-in forwards;
+}
+
+.modal.fade-out {
+  display: none;
+  animation: fade-out 0.7s ease-out forwards;
+}
+
+.modal_content {
+  display: fit-content;
+  margin: auto;
+  width: 40%;
+  height: max-content;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    display: none;
+  }
+
+  100% {
+    opacity: 1;
+    display: block;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+    display: block;
+  }
+
+  100% {
+    opacity: 0;
+    display: none;
+  }
+}