feat: finish my pages overview page according to wireframe

2024-04-02 10:26:12 +02:00
parent d902a5a704
commit 8c8fa2d02c
48 changed files with 1161 additions and 91 deletions
--- a/components/MyPages/Blocks/Challenges/challenges.module.css
+++ b/components/MyPages/Blocks/Challenges/challenges.module.css
@@ -0,0 +1,157 @@
+.challenges {
+  --card-height: 23.6rem;
+  --gap: 0.4rem;
+  --radius: 0.4rem;
+
+  display: grid;
+  gap: 1.6rem;
+  grid-template-areas:
+    "header"
+    "section"
+    "aside";
+  max-width: var(--max-width);
+}
+
+.header {
+  grid-area: header;
+}
+
+.subtitle {
+  color: var(--some-black-color, #000);
+  /* font-family: var(--ff-biro-script-plus); */
+  font-size: 1.6rem;
+  font-weight: 400;
+  line-height: 1.8rem;
+  margin: 0;
+}
+
+.title {
+  color: var(--some-black-color, #000);
+  /* font-family: var(--ff-brandon-text); */
+  font-size: 1.6rem;
+  font-weight: 900;
+  inline-size: 18rem;
+  line-height: 1.8rem;
+  margin: 0;
+  overflow-wrap: break-word;
+  padding: 0;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.section {
+  display: grid;
+  gap: 0.8rem;
+  grid-area: section;
+}
+
+.journeys {
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: 1fr 1fr;
+}
+
+.journey {
+  align-content: center;
+  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.2));
+  border-radius: var(--radius);
+  display: grid;
+  gap: 1.2rem;
+  height: var(--card-height);
+  justify-items: center;
+}
+
+.journey:first-of-type {
+  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.1));
+}
+
+.aside {
+  display: grid;
+  gap: 0.8rem;
+  grid-area: aside;
+  grid-template-rows: auto 1fr;
+}
+
+.victories {
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: repeat(2, minmax(11.6rem, 1fr));
+}
+
+.victory {
+  align-content: center;
+  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.1));
+  border-radius: var(--radius);
+  display: grid;
+  gap: 0.6rem;
+  height: 100%;
+  justify-items: center;
+}
+
+.victory:first-of-type {
+  background-color: var(--some-grey-color, rgba(3, 3, 3, 0.3));
+}
+
+.victory:last-of-type {
+  background-color: var(--some-grey-color, rgba(0, 0, 0, 0.2));
+}
+
+.circle {
+  display: none;
+}
+
+@media screen and (max-width: 950px) {
+  .victory:first-of-type {
+    grid-row: 1 / -1;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .challenges {
+    gap: 2.6rem 1.5rem;
+    grid-template-areas:
+      "header  header"
+      "section aside";
+    grid-template-columns: 1fr 16.6rem;
+  }
+
+  .journeys {
+    grid-template-columns: 1fr;
+  }
+
+  .journey .subtitle {
+    font-size: 2.6rem;
+    line-height: 3.2rem;
+  }
+
+  .journey .title {
+    font-size: 2.6rem;
+    inline-size: 25rem;
+    line-height: 3.2rem;
+  }
+
+  .victories {
+    grid-template-columns: 1fr;
+    grid-template-rows: var(--card-height) 1fr 1fr;
+  }
+
+  .circle {
+    align-items: center;
+    background-color: var(--some-white-color, #fff);
+    border-radius: 50%;
+    display: flex;
+    height: 2rem;
+    justify-content: center;
+    width: 2rem;
+  }
+
+  .victory .subtitle {
+    font-size: 1.3rem;
+    line-height: 1.6rem;
+  }
+
+  .victory .title {
+    inline-size: 13rem;
+  }
+}