Layout setup (#338)

Create css strucure, clean up the index html and use proper tags.
Visualy minor changes, but this allow us maint better visuals and start
the css standards that will help us future

src/client/styles/components/button.css

@@ -0,0 +1,57 @@
+.c-button {
+  background: var(--primaryColor);
+  color: #fff;
+  cursor: pointer;
+  outline: none;
+  display: inline-block;
+  font-size: 16px;
+  border: 1px solid transparent;
+  text-align: center;
+  padding: 0.8rem 1rem;
+  border-radius: 8px;
+  transition: var(--transition);
+
+  @media (min-width: 1024px) {
+    font-size: 18px;
+  }
+}
+
+.c-button:hover,
+.c-button:active,
+.c-button:focus {
+  background: var(--primaryColorHover);
+  transition: var(--transition);
+}
+
+.c-button:disabled {
+  background: var(--primaryColorDisabled);
+  opacity: 0.7;
+  cursor: not-allowed;
+  transition: var(--transition);
+}
+
+.c-button--secondary {
+  background: var(--secondaryColor);
+  color: var(--fontColor);
+}
+
+.c-button--secondary:hover,
+.c-button--secondary:active,
+.c-button--secondary:focus {
+  background: var(--secondaryColorHover);
+}
+
+.c-button--block {
+  display: block;
+  width: 100%;
+}
+
+.c-button--blockDesktop {
+  display: block;
+  width: 100%;
+
+  @media (min-width: 1024px) {
+    width: auto;
+    margin: 0 auto;
+  }
+}

src/client/styles/components/modal.css

@@ -0,0 +1,57 @@
+.c-modal {
+  position: fixed;
+  padding: 1rem;
+  z-index: 1000;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow-y: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.c-modal__wrapper {
+  background: #23232382;
+  border-radius: 8px;
+  min-width: 340px;
+  max-width: 860px;
+}
+
+.c-modal__header {
+  position: relative;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  font-size: 18px;
+  background: #000000a1;
+  text-align: center;
+  color: #fff;
+  padding: 1rem 2.4rem 1rem 1.4rem;
+}
+
+.c-modal__close {
+  cursor: pointer;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+}
+
+.c-modal__content {
+  position: relative;
+  color: #fff;
+  padding: 1.4rem;
+  max-height: 60dvh;
+  overflow-y: scroll;
+  backdrop-filter: blur(8px);
+}
+
+/*This will be removed in future*/
+o-modal o-button {
+  @media (min-width: 1024px) {
+    margin: 0 auto;
+    display: block;
+    text-align: center;
+  }
+}

src/client/styles/core/typography.css

@@ -0,0 +1,13 @@
+.t-link {
+  color: #ffffffb3;
+  transition: var(--transition);
+
+  &:hover {
+    color: #fff;
+    transition: var(--transition);
+  }
+}
+
+.t-text-white {
+  color: #ffffffb3;
+}

src/client/styles/core/variables.css

@@ -0,0 +1,19 @@
+:root {
+  --theme: "light";
+  --breakPoint-tablet: 800px;
+  --breakPoint-Desktop: 1024px;
+  --blur-md: 4px;
+  --boxBackgroundColor: #111827cc;
+  --fontColor: #202020;
+  --fontColorLight: #fff;
+  --primaryColor: #2563eb;
+  --primaryColorHover: #1d4ed8;
+  --primaryColorDisabled: linear-gradient(
+    to right,
+    rgb(74, 74, 74),
+    rgb(61, 61, 61)
+  );
+  --secondaryColor: #dbeafe;
+  --secondaryColorHover: #bfdbfe;
+  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}

src/client/styles/layout/container.css

@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  padding: 1rem;
+  max-width: 540px !important;
+  flex-direction: column;
+  gap: 1rem;
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.container__row {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.container__row--equal > * {
+  flex: 1 1 100%;
+}

src/client/styles/layout/footer.css

@@ -0,0 +1,24 @@
+.l-footer {
+  background: var(--boxBackgroundColor);
+  backdrop-filter: blur(var(--blur-md));
+  display: flex;
+  justify-content: center;
+  padding: 12px;
+
+  @media (min-width: 800px) {
+    padding: 12px 24px;
+  }
+}
+
+.l-footer__content {
+  max-width: 860px;
+  flex-wrap: wrap;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+}
+
+.l-footer__col {
+  display: flex;
+  gap: 10px;
+}

src/client/styles/layout/header.css

@@ -0,0 +1,39 @@
+.l-header {
+  background: var(--boxBackgroundColor);
+  backdrop-filter: blur(var(--blur-md));
+  display: flex;
+  justify-content: center;
+  padding: 24px 24px 12px;
+
+  @media (min-width: 800px) {
+    padding: 24px 24px;
+  }
+}
+
+.l-header__content {
+  display: flex;
+  flex: 1;
+  max-width: 600px;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.l-header__logo {
+  max-width: 450px;
+  fill: url(#logo-gradient);
+  filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
+    drop-shadow(-1px -1px 0px rgb(255, 255, 255))
+    drop-shadow(1px -1px 0px rgb(255, 255, 255))
+    drop-shadow(-1px 1px 0px rgb(255, 255, 255))
+    drop-shadow(3px 3px 0px rgb(255, 255, 255));
+}
+
+.l-header__highlightText {
+  color: #2563eb;
+  font-weight: 700;
+  filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
+    drop-shadow(-1px -1px 0px rgb(255, 255, 255))
+    drop-shadow(1px -1px 0px rgb(255, 255, 255))
+    drop-shadow(-1px 1px 0px rgb(255, 255, 255));
+}