rework styles with scss

1 files changed, 121 insertions, 0 deletions

diff --git a/src/scss/profile.scss b/src/scss/profile.scss
new file mode 100644
index 0000000..ec271e4
--- /dev/null
+++ b/src/scss/profile.scss
@@ -0,0 +1,121 @@
+@import "./variables";
+@import "./mixins";
+
+main#main {
+  padding-top: 0;
+}
+
+$pfp-size: 12.5em;
+
+#profile-header-container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background-color: $surface0;
+  border-bottom: 1px solid $surface1;
+}
+
+#profile-header {
+  min-width: 0;
+  max-width: 80rem;
+  flex-grow: 1;
+
+  .banner {
+    width: 100%;
+    max-width: 100%;
+    min-height: 30em;
+    aspect-ratio: 5;
+
+    img {
+      object-fit: cover;
+    }
+  }
+
+  .info {
+    position: relative;
+    margin-bottom: 6em;
+
+    .pfp-wrapper {
+      padding: $inner-gap / 2;
+      background-color: $surface0;
+      height: fit-content;
+      border-radius: 100%;
+      position: absolute;
+      top: -2.5rem;
+      left: $inner-gap;
+
+      .pfp {
+        height: $pfp-size;
+      }
+    }
+
+    .content {
+      margin-left: $pfp-size + 5em;
+      margin-top: 2em;
+
+      .name {
+        font-size: 2em;;
+      }
+
+      .follow {
+        margin-left: auto;
+        margin-right: 2rem;
+
+        a {
+          width: 10rem;
+          padding: $inner-gap / 2;
+        }
+      }
+
+    }
+  }
+
+  > hr {
+    margin: 0;
+    border-bottom: 1px solid $surface1;
+  }
+
+  .options {
+    height: 3rem;
+
+    .btn {
+      width: 10rem;
+    }
+  }
+}
+
+@media(max-width: 800px) {
+  #profile-header {
+    .info {
+      .pfp-wrapper {
+        .pfp {
+          height: $pfp-size * 0.7;
+        }
+      }
+
+      .content {
+        margin-left: ($pfp-size + 5em) * 0.7;
+      }
+    }
+  }
+}
+
+#tab-container {
+  width: 100%;
+  @include column;
+  align-items: center;
+}
+
+#tab-posts,
+#tab-about {
+  width: 100%;
+  max-width: $content-width;
+}
+
+#tab-about {
+  td:nth-child(1) {
+    padding-right: 2rem;
+  }
+}
+