src/scss/profile.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

@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 {
    width: 100%;
  }
}

#tab-posts,
#tab-about {
  max-width: $content-width;
}

#tab-about {
  td:nth-child(1) {
    padding-right: 2rem;
  }
}