Redesign account page

1 files changed, 86 insertions, 0 deletions

diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
new file mode 100644
index 000000000..5e9607318
--- /dev/null
+++ b/client/src/sass/include/_actor.scss
@@ -0,0 +1,86 @@
+@import '_variables';
+
+@mixin section-label-responsive {
+  color: pvar(--mainColor);
+  font-size: 12px;
+  margin-bottom: 15px;
+  font-weight: $font-bold;
+  letter-spacing: 2.5px;
+
+  @media screen and (max-width: $mobile-view) {
+    font-size: 10px;
+    letter-spacing: 2.1px;
+    margin-bottom: 5px;
+  }
+}
+
+@mixin show-more-description {
+  color: pvar(--mainColor);
+  cursor: pointer;
+  margin: 10px auto 45px auto;
+}
+
+@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
+  display: flex;
+  grid-column: 1;
+  margin-bottom: 30px;
+
+  .channel-avatar {
+    @include channel-avatar(120px);
+  }
+
+  .account-avatar {
+    @include avatar(120px);
+  }
+
+  > div {
+    margin-left: $img-margin;
+  }
+
+  .actor-info {
+    display: flex;
+
+    > div:first-child {
+      flex-grow: 1;
+    }
+  }
+
+  .actor-display-name {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  h1 {
+    font-size: 28px;
+    font-weight: $font-bold;
+    margin: 0;
+  }
+
+  .actor-handle,
+  .actor-counters {
+    color: pvar(--greyForegroundColor);
+    font-size: $grey-font-size;
+  }
+
+  .actor-counters > *:not(:last-child)::after {
+    content: '•';
+    margin: 0 10px;
+    color: pvar(--mainColor);
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    margin-bottom: 15px;
+
+    h1 {
+      font-size: 22px;
+    }
+
+    .channel-avatar {
+      @include channel-avatar(80px);
+    }
+
+    .account-avatar {
+      @include avatar(120px);
+    }
+  }
+}