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
125
126
127

@import "./variables";
@import "./mixins";

main#main {
  padding-top: 0;
}

$profile-width: $content-width * 2;
$profile-pfp-width: $pfp-width * 5;

$profile-header-content-margin: $profile-pfp-width + $outer-gap * 5;

#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: $profile-width;
  flex-grow: 1;

  .banner {
    width: 100%;
    max-width: 100%;
    min-height: $profile-width * 3/8;
    aspect-ratio: 5;

    img {
      object-fit: cover;
    }
  }

  .info {
    position: relative;
    margin-bottom: $profile-pfp-width / 2;

    .pfp-wrapper {
      padding: $inner-gap / 2;
      background-color: $surface0;
      height: fit-content;
      border-radius: 100%;
      position: absolute;
      top: -$pfp-width;
      left: $inner-gap;

      .pfp {
        height: $profile-pfp-width;
      }
    }

    .content {
      margin-left: $profile-header-content-margin;
      margin-top: $outer-gap * 2;

      .name {
        font-size: $font-size * 2;
      }

      .follow {
        margin-left: auto;
        margin-right: $outer-gap * 2;

        a {
          width: 10em;
          padding: $inner-gap / 2;
        }
      }

    }
  }

  > hr {
    margin: 0;
    border-bottom: 1px solid $surface1;
  }

  .options {
    height: 3em;

    .btn {
      width: 10em;
    }
  }
}

@media(max-width: 800px) {
  #profile-header {
    .info {
      .pfp-wrapper {
        .pfp {
          height: $profile-pfp-width * 0.7;
        }
      }

      .content {
        margin-left: $profile-header-content-margin * 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: $inner-gap * 2;
  }
}