Add page header
This commit is contained in:
		
							parent
							
								
									903eb2b9ba
								
							
						
					
					
						commit
						d0fa07957f
					
				| 
						 | 
				
			
			@ -11,3 +11,53 @@ img.album-img {
 | 
			
		|||
.ProfilePosts-posts {
 | 
			
		||||
  margin-top: 311px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
body {
 | 
			
		||||
  margin: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.App {
 | 
			
		||||
  padding: 16px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.Navbar {
 | 
			
		||||
  padding: 16px;
 | 
			
		||||
  background: #222;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.NavbarContainer-left {
 | 
			
		||||
  font-size: 2em;
 | 
			
		||||
  font-weight: bold;
 | 
			
		||||
  float: left;
 | 
			
		||||
  padding: 8px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.NavbarContainer-right {
 | 
			
		||||
  /* margin: 0 0 0 auto; */
 | 
			
		||||
  align-items: end;
 | 
			
		||||
  /* flex: 1; */
 | 
			
		||||
  justify-content: space-around;
 | 
			
		||||
  text-align: right;
 | 
			
		||||
  float: right;
 | 
			
		||||
  padding: 8px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.NavbarContainer-left, .NavbarContainer-right {
 | 
			
		||||
  display: block;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.HomeNavbar {
 | 
			
		||||
  position: sticky;
 | 
			
		||||
  position: -webkit-sticky;
 | 
			
		||||
  padding: 0;
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  top: 0;
 | 
			
		||||
}
 | 
			
		||||
.Navbar {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  z-index: 1000;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  margin: 0 auto;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,7 +1,10 @@
 | 
			
		|||
body {
 | 
			
		||||
  font-size: 100%;
 | 
			
		||||
  font-family: Proxima Nova Regular,Helvetica Neue,Helvetica,Arial,sans-serif;
 | 
			
		||||
  background-color: #2e3035;
 | 
			
		||||
  color: #fff;
 | 
			
		||||
  overflow-y: scroll;
 | 
			
		||||
  overflow-x: hidden;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.UserAvatar {
 | 
			
		||||
| 
						 | 
				
			
			@ -393,125 +396,125 @@ Post-item-title {
 | 
			
		|||
/* USER HEADER */
 | 
			
		||||
 | 
			
		||||
.ProfileMeta-stats {
 | 
			
		||||
    font-size: 14px;
 | 
			
		||||
    font-weight: 600;
 | 
			
		||||
    text-transform: uppercase;
 | 
			
		||||
    margin-top: 8px;
 | 
			
		||||
    cursor: default;
 | 
			
		||||
  font-size: 14px;
 | 
			
		||||
  font-weight: 600;
 | 
			
		||||
  text-transform: uppercase;
 | 
			
		||||
  margin-top: 8px;
 | 
			
		||||
  cursor: default;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ProfileCover-header {
 | 
			
		||||
    height: 258px;
 | 
			
		||||
    /* padding: 52px 0 0; */
 | 
			
		||||
    padding: 52px 16px 0;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    margin: 0 auto;
 | 
			
		||||
    min-width: 450px;
 | 
			
		||||
    z-index: 1;
 | 
			
		||||
  height: 258px;
 | 
			
		||||
  /* padding: 52px 0 0; */
 | 
			
		||||
  padding: 52px 16px 0;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  margin: 0 auto;
 | 
			
		||||
  min-width: 450px;
 | 
			
		||||
  z-index: 1;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ProfileMeta {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    justify-content: flex-start;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  justify-content: flex-start;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ProfileMeta .UserAvatar {
 | 
			
		||||
    position: relative;
 | 
			
		||||
    height: 128px;
 | 
			
		||||
    width: 128px;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
    flex-grow: 0;
 | 
			
		||||
    flex-shrink: 0;
 | 
			
		||||
  position: relative;
 | 
			
		||||
  height: 128px;
 | 
			
		||||
  width: 128px;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  flex-grow: 0;
 | 
			
		||||
  flex-shrink: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.UserAvatar {
 | 
			
		||||
    border-radius: 50%;
 | 
			
		||||
    background: grey;
 | 
			
		||||
    background-image: none;
 | 
			
		||||
    background-size: cover;
 | 
			
		||||
  border-radius: 50%;
 | 
			
		||||
  background: grey;
 | 
			
		||||
  background-image: none;
 | 
			
		||||
  background-size: cover;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ProfileMeta-data {
 | 
			
		||||
    margin: auto 24px;
 | 
			
		||||
    color: #f2f2f2;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
  margin: auto 24px;
 | 
			
		||||
  color: #f2f2f2;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ProfileMeta-user {
 | 
			
		||||
    font-size: 44px;
 | 
			
		||||
    font-family: Proxima Nova ExtraBold,Helvetica Neue,Helvetica,Arial,sans-serif;
 | 
			
		||||
    text-overflow: ellipsis;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
  font-size: 44px;
 | 
			
		||||
  font-family: Proxima Nova ExtraBold,Helvetica Neue,Helvetica,Arial,sans-serif;
 | 
			
		||||
  text-overflow: ellipsis;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ProfileMeta-divider {
 | 
			
		||||
    margin: auto 15px;
 | 
			
		||||
  margin: auto 15px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
/* TAG HEADER */
 | 
			
		||||
 | 
			
		||||
.Cover-item-count {
 | 
			
		||||
    text-transform: uppercase;
 | 
			
		||||
  text-transform: uppercase;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Cover-stats {
 | 
			
		||||
    font-size: 16px;
 | 
			
		||||
    margin: 13px 0 20px;
 | 
			
		||||
  font-size: 16px;
 | 
			
		||||
  margin: 13px 0 20px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Cover-description {
 | 
			
		||||
    margin: 0 0 10px;
 | 
			
		||||
    font-size: 22px;
 | 
			
		||||
    max-width: 390px;
 | 
			
		||||
  margin: 0 0 10px;
 | 
			
		||||
  font-size: 22px;
 | 
			
		||||
  max-width: 390px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
Cover-description, .Cover-name, .Cover-stats {
 | 
			
		||||
    text-align: center;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Cover-name {
 | 
			
		||||
    font-size: 52px;
 | 
			
		||||
    color: #fff;
 | 
			
		||||
    margin: 0;
 | 
			
		||||
    font-family: Proxima Nova ExtraBold,Helvetica Neue,Helvetica,Arial,sans-serif;
 | 
			
		||||
  font-size: 52px;
 | 
			
		||||
  color: #fff;
 | 
			
		||||
  margin: 0;
 | 
			
		||||
  font-family: Proxima Nova ExtraBold,Helvetica Neue,Helvetica,Arial,sans-serif;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.Cover-metadata {
 | 
			
		||||
    position: relative;
 | 
			
		||||
    margin: 0 auto;
 | 
			
		||||
    text-align: center;
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: column;
 | 
			
		||||
    flex-wrap: nowrap;
 | 
			
		||||
    justify-content: center;
 | 
			
		||||
    align-content: stretch;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    z-index: 0;
 | 
			
		||||
  position: relative;
 | 
			
		||||
  margin: 0 auto;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  flex-direction: column;
 | 
			
		||||
  flex-wrap: nowrap;
 | 
			
		||||
  justify-content: center;
 | 
			
		||||
  align-content: stretch;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  z-index: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.NewCover-change-sort-wrapper .Dropdown, .NewCover .Cover-metadata {
 | 
			
		||||
    margin: auto;
 | 
			
		||||
  margin: auto;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.NewCover {
 | 
			
		||||
    display: flex;
 | 
			
		||||
    flex-direction: column;
 | 
			
		||||
    align-items: center;
 | 
			
		||||
    justify-content: space-between;
 | 
			
		||||
    background-size: cover;
 | 
			
		||||
    background-position: 50%;
 | 
			
		||||
    background-color: #474a51;
 | 
			
		||||
    padding-bottom: 76px;
 | 
			
		||||
    opacity: 1;
 | 
			
		||||
    transition: opacity .5s,box-shadow .4s;
 | 
			
		||||
  display: flex;
 | 
			
		||||
  flex-direction: column;
 | 
			
		||||
  align-items: center;
 | 
			
		||||
  justify-content: space-between;
 | 
			
		||||
  background-size: cover;
 | 
			
		||||
  background-position: 50%;
 | 
			
		||||
  background-color: #474a51;
 | 
			
		||||
  padding-bottom: 76px;
 | 
			
		||||
  opacity: 1;
 | 
			
		||||
  transition: opacity .5s,box-shadow .4s;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.App-cover {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    position: absolute;
 | 
			
		||||
    top: 0;
 | 
			
		||||
    left: 0;
 | 
			
		||||
    right: 0;
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  position: absolute;
 | 
			
		||||
  top: 0;
 | 
			
		||||
  left: 0;
 | 
			
		||||
  right: 0;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -2,4 +2,6 @@ html
 | 
			
		|||
  head
 | 
			
		||||
    include includes/head.pug
 | 
			
		||||
  body
 | 
			
		||||
    img(src=util.proxyURL(url), alt='' class='album-img')
 | 
			
		||||
    include includes/header.pug
 | 
			
		||||
    .App
 | 
			
		||||
      img(src=util.proxyURL(url), alt='' class='album-img')
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -52,38 +52,42 @@ html
 | 
			
		|||
  head
 | 
			
		||||
    include includes/head.pug
 | 
			
		||||
  body
 | 
			
		||||
    div(class='Gallery-Content')
 | 
			
		||||
      div(class='Gallery-Header')
 | 
			
		||||
        div(class='Gallery-Title')
 | 
			
		||||
          span #{title}
 | 
			
		||||
        div(class='Gallery-Byline')
 | 
			
		||||
          if account_id > 0
 | 
			
		||||
            a(class='author-link' title='View profile of '+account.username, href='/user/'+account.username)
 | 
			
		||||
              span(class='UserAvatar Avatar', title=account.username, style='background-image: url("' + util.proxyURL(account.avatar_url) + '");')
 | 
			
		||||
          div(class='Info-Wrapper')
 | 
			
		||||
            if account_id > 0
 | 
			
		||||
              div(class='Info')
 | 
			
		||||
                a(class='author-name' title='View profile of '+account.username, href='/user/'+account.username) #{account.username}
 | 
			
		||||
            div(class='Meta')
 | 
			
		||||
              span #{view_count} Views
 | 
			
		||||
              span(class='delimiter') •
 | 
			
		||||
              span(title=created_at) #{created_at}
 | 
			
		||||
      div(class='Gallery-ContentWrapper')
 | 
			
		||||
        each m in media
 | 
			
		||||
          +media(m)
 | 
			
		||||
      if tags
 | 
			
		||||
        div(class='Gallery-Content--tags')
 | 
			
		||||
          each tag in tags
 | 
			
		||||
            a(class='TagPill'
 | 
			
		||||
              style='background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) repeat scroll 0% 0%, rgba(0, 0, 0, 0) url("/' + tag.background_id + '_d.jpg?maxwidth=200&fidelity=grand") repeat scroll 0% 0%;'
 | 
			
		||||
              href='/t/'+tag.tag) #{tag.tag}
 | 
			
		||||
    if comments != null
 | 
			
		||||
      div(class='CommentsList')
 | 
			
		||||
        div(class='CommentsList-headline')
 | 
			
		||||
          div(class='CommentsList-headline--counter')
 | 
			
		||||
            span #{comments.length} Comments
 | 
			
		||||
        div
 | 
			
		||||
          div(class='CommentsList-comments')
 | 
			
		||||
            div(class='CommentsList-comments--container')
 | 
			
		||||
              each comment in comments
 | 
			
		||||
                +commentbox(comment)
 | 
			
		||||
    include includes/header.pug
 | 
			
		||||
    .App
 | 
			
		||||
      .Gallery-MainContainer
 | 
			
		||||
        .Gallery-contentWrapper
 | 
			
		||||
          div(class='Gallery-Content')
 | 
			
		||||
            div(class='Gallery-Header')
 | 
			
		||||
              div(class='Gallery-Title')
 | 
			
		||||
                span #{title}
 | 
			
		||||
              div(class='Gallery-Byline')
 | 
			
		||||
                if account_id > 0
 | 
			
		||||
                  a(class='author-link' title='View profile of '+account.username, href='/user/'+account.username)
 | 
			
		||||
                    span(class='UserAvatar Avatar', title=account.username, style='background-image: url("' + util.proxyURL(account.avatar_url) + '");')
 | 
			
		||||
                div(class='Info-Wrapper')
 | 
			
		||||
                  if account_id > 0
 | 
			
		||||
                    div(class='Info')
 | 
			
		||||
                      a(class='author-name' title='View profile of '+account.username, href='/user/'+account.username) #{account.username}
 | 
			
		||||
                  div(class='Meta')
 | 
			
		||||
                    span #{view_count} Views
 | 
			
		||||
                    span(class='delimiter') •
 | 
			
		||||
                    span(title=created_at) #{created_at}
 | 
			
		||||
            div(class='Gallery-ContentWrapper')
 | 
			
		||||
              each m in media
 | 
			
		||||
                +media(m)
 | 
			
		||||
            if tags
 | 
			
		||||
              div(class='Gallery-Content--tags')
 | 
			
		||||
                each tag in tags
 | 
			
		||||
                  a(class='TagPill'
 | 
			
		||||
                    style='background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) repeat scroll 0% 0%, rgba(0, 0, 0, 0) url("/' + tag.background_id + '_d.jpg?maxwidth=200&fidelity=grand") repeat scroll 0% 0%;'
 | 
			
		||||
                    href='/t/'+tag.tag) #{tag.tag}
 | 
			
		||||
          if comments != null
 | 
			
		||||
            div(class='CommentsList')
 | 
			
		||||
              div(class='CommentsList-headline')
 | 
			
		||||
                div(class='CommentsList-headline--counter')
 | 
			
		||||
                  span #{comments.length} Comments
 | 
			
		||||
              div
 | 
			
		||||
                div(class='CommentsList-comments')
 | 
			
		||||
                  div(class='CommentsList-comments--container')
 | 
			
		||||
                    each comment in comments
 | 
			
		||||
                      +commentbox(comment)
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -0,0 +1,4 @@
 | 
			
		|||
.MoveContainer.Navbar.HomeNavbar
 | 
			
		||||
  .NavbarContainer-left rimgu
 | 
			
		||||
  .NavbarContainer-right
 | 
			
		||||
    a(href='https://codeberg.org/3np/rimgu' target='blank') [src]
 | 
			
		||||
| 
						 | 
				
			
			@ -2,64 +2,66 @@ html
 | 
			
		|||
  head
 | 
			
		||||
    include includes/head.pug
 | 
			
		||||
  body
 | 
			
		||||
    .Profile
 | 
			
		||||
      if tag
 | 
			
		||||
        .App-cover.NewCover.TagsCover(style='background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 20%), url("/' + tag.background_hash + '.jpg");')
 | 
			
		||||
          .Cover-metadata
 | 
			
		||||
            h1.Cover-name= tag.display_name
 | 
			
		||||
            p.description= tag.description
 | 
			
		||||
            .Cover-stats
 | 
			
		||||
              .Cover-item-count #{tag.total_items} posts
 | 
			
		||||
      else if user
 | 
			
		||||
        .App-cover.NewCover.ProfilesCover(style='background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("' + util.proxyURL(user.cover_url) + '");')
 | 
			
		||||
          .ProfileCover-header
 | 
			
		||||
            .ProfileMeta
 | 
			
		||||
              span.UserAvatar.ProfileMeta-avatar(style='background-image: url("' + util.proxyURL(user.avatar_url) + '");' title=user.username)
 | 
			
		||||
              .ProfileMeta-data
 | 
			
		||||
                .ProfileMeta-user= user.username
 | 
			
		||||
                .ProfileMeta-stats
 | 
			
		||||
                  | #{user.reputation_count} pts
 | 
			
		||||
                  span.ProfileMeta-divider •
 | 
			
		||||
                  | #{user.reputation_name}
 | 
			
		||||
      .ProfilePosts-posts
 | 
			
		||||
        .ProfilePosts-top
 | 
			
		||||
          each post in posts
 | 
			
		||||
            div.ProfilePost
 | 
			
		||||
              a.Post-item.novote(href="/gallery/"+post.id)
 | 
			
		||||
                .Post-item-container
 | 
			
		||||
                  .Post-item-media
 | 
			
		||||
                      if post.images && post.images[0].animated
 | 
			
		||||
                        .PostVideo
 | 
			
		||||
                          .PostVideo-video-wrapper
 | 
			
		||||
                            video(playsinline autoplay loop mute)
 | 
			
		||||
                              source(type="video/mp4" src=util.proxyURL(post.images[0].mp4))
 | 
			
		||||
                      else
 | 
			
		||||
                        .imageContainer
 | 
			
		||||
                          img(src=util.proxyURL(post.images ? post.images[0].link : post.link) loading="lazy")
 | 
			
		||||
                  .Post-item-meta
 | 
			
		||||
                  .Post-item-title-wrap
 | 
			
		||||
                    .Post-item-title
 | 
			
		||||
                      span= post.title
 | 
			
		||||
                    .Post-item-info
 | 
			
		||||
                      .Media
 | 
			
		||||
                        div(class='Post-item-stat Post-item-vote' title='Upvotes')
 | 
			
		||||
                          div(class='Vote Vote-up')
 | 
			
		||||
                            svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg')
 | 
			
		||||
                              title Upvotes
 | 
			
		||||
                              | <path fill="none" stroke="#B4B9C2" stroke-width="2" fill-rule="evenodd" clip-rule="evenodd" d="M7.197 2.524a1.2 1.2 0 011.606 0c.521.46 1.302 1.182 2.363 2.243a29.617 29.617 0 012.423 2.722c.339.435.025 1.028-.526 1.028h-2.397v4.147c0 .524-.306.982-.823 1.064-.417.066-1.014.122-1.843.122s-1.427-.056-1.843-.122c-.517-.082-.824-.54-.824-1.064V8.517H2.937c-.552 0-.865-.593-.527-1.028.52-.669 1.32-1.62 2.423-2.722a52.996 52.996 0 012.364-2.243z"></path>
 | 
			
		||||
                        .points= post.points
 | 
			
		||||
                        div(class='Post-item-stat Post-item-vote' title='Downvotes')
 | 
			
		||||
                          div(class='Vote Vote-down')
 | 
			
		||||
                            svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg')
 | 
			
		||||
                              title Downvotes
 | 
			
		||||
                              | <path fill="none" stroke="#B4B9C2" stroke-width="2" fill-rule="evenodd" clip-rule="evenodd" d="M8.803 13.476a1.2 1.2 0 01-1.606 0 53.03 53.03 0 01-2.364-2.243 29.613 29.613 0 01-2.422-2.722c-.339-.435-.025-1.028.526-1.028h2.397V3.336c0-.524.306-.982.823-1.064A11.874 11.874 0 018 2.15c.829 0 1.427.056 1.843.122.517.082.824.54.824 1.064v4.147h2.396c.552 0 .865.593.527 1.028-.52.669-1.32 1.62-2.423 2.722a53.038 53.038 0 01-2.364 2.243z"></path>
 | 
			
		||||
                      .Media.Post-item-stat
 | 
			
		||||
                        svg(width="16" height="16" viewBox="0 0 16 16" class="PostCommentsIcon" fill="none" xmlns="http://www.w3.org/2000/svg")
 | 
			
		||||
                          title Comments
 | 
			
		||||
                          | <path fill="currentColor" stroke="#ffffff" stroke-width="0" d="M4.455 12.195l.367 1.105 1.037-.53c.266-.135.637-.412 1.039-.74.39-.319.872-.737 1.422-1.245h2.291a3.306 3.306 0 003.306-3.306V5.306A3.306 3.306 0 0010.611 2H5.306A3.306 3.306 0 002 5.306v2.656c0 1.34.933 2.461 2.185 2.75.008.172.025.335.046.479a6.622 6.622 0 00.168.803c.016.07.035.137.056.2z"></path>
 | 
			
		||||
                        .MediaBody= post.comment_count
 | 
			
		||||
                      .Media.Post-item-stat
 | 
			
		||||
                        svg(width="16" height="16" viewBox="0 0 16 16" class="PostViewsIcon" fill="none" xmlns="http://www.w3.org/2000/svg")
 | 
			
		||||
                          title Post views
 | 
			
		||||
                          | <path d="M8 2.5C4.74998 2.5 2.30142 5.50267 1.27514 6.77517C0.925337 7.20917 0.908553 7.76483 1.2278 8.16583C2.22527 9.41833 4.6991 12.5 8 12.5C11.3686 12.5 13.8396 9.31133 14.796 8.0905C15.0769 7.732 15.0674 7.2535 14.7692 6.8755C13.7938 5.6395 11.3376 2.5 8 2.5ZM7.98224 9.33333C6.90897 9.33333 6.03887 8.51233 6.03887 7.5C6.03887 6.4875 6.90897 5.66667 7.98224 5.66667C9.05551 5.66667 9.92561 6.4875 9.92561 7.5C9.92561 8.51233 9.05551 9.33333 7.98224 9.33333Z" fill="currentColor"></path>
 | 
			
		||||
                        .MediaBody= post.views
 | 
			
		||||
    include includes/header.pug
 | 
			
		||||
    .App
 | 
			
		||||
      .Profile
 | 
			
		||||
        if tag
 | 
			
		||||
          .App-cover.NewCover.TagsCover(style='background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 20%), url("/' + tag.background_hash + '.jpg");')
 | 
			
		||||
            .Cover-metadata
 | 
			
		||||
              h1.Cover-name= tag.display_name
 | 
			
		||||
              p.description= tag.description
 | 
			
		||||
              .Cover-stats
 | 
			
		||||
                .Cover-item-count #{tag.total_items} posts
 | 
			
		||||
        else if user
 | 
			
		||||
          .App-cover.NewCover.ProfilesCover(style='background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("' + util.proxyURL(user.cover_url) + '");')
 | 
			
		||||
            .ProfileCover-header
 | 
			
		||||
              .ProfileMeta
 | 
			
		||||
                span.UserAvatar.ProfileMeta-avatar(style='background-image: url("' + util.proxyURL(user.avatar_url) + '");' title=user.username)
 | 
			
		||||
                .ProfileMeta-data
 | 
			
		||||
                  .ProfileMeta-user= user.username
 | 
			
		||||
                  .ProfileMeta-stats
 | 
			
		||||
                    | #{user.reputation_count} pts
 | 
			
		||||
                    span.ProfileMeta-divider •
 | 
			
		||||
                    | #{user.reputation_name}
 | 
			
		||||
        .ProfilePosts-posts
 | 
			
		||||
          .ProfilePosts-top
 | 
			
		||||
            each post in posts
 | 
			
		||||
              div.ProfilePost
 | 
			
		||||
                a.Post-item.novote(href="/gallery/"+post.id)
 | 
			
		||||
                  .Post-item-container
 | 
			
		||||
                    .Post-item-media
 | 
			
		||||
                        if post.images && post.images[0].animated
 | 
			
		||||
                          .PostVideo
 | 
			
		||||
                            .PostVideo-video-wrapper
 | 
			
		||||
                              video(playsinline autoplay loop mute)
 | 
			
		||||
                                source(type="video/mp4" src=util.proxyURL(post.images[0].mp4))
 | 
			
		||||
                        else
 | 
			
		||||
                          .imageContainer
 | 
			
		||||
                            img(src=util.proxyURL(post.images ? post.images[0].link : post.link) loading="lazy")
 | 
			
		||||
                    .Post-item-meta
 | 
			
		||||
                    .Post-item-title-wrap
 | 
			
		||||
                      .Post-item-title
 | 
			
		||||
                        span= post.title
 | 
			
		||||
                      .Post-item-info
 | 
			
		||||
                        .Media
 | 
			
		||||
                          div(class='Post-item-stat Post-item-vote' title='Upvotes')
 | 
			
		||||
                            div(class='Vote Vote-up')
 | 
			
		||||
                              svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg')
 | 
			
		||||
                                title Upvotes
 | 
			
		||||
                                | <path fill="none" stroke="#B4B9C2" stroke-width="2" fill-rule="evenodd" clip-rule="evenodd" d="M7.197 2.524a1.2 1.2 0 011.606 0c.521.46 1.302 1.182 2.363 2.243a29.617 29.617 0 012.423 2.722c.339.435.025 1.028-.526 1.028h-2.397v4.147c0 .524-.306.982-.823 1.064-.417.066-1.014.122-1.843.122s-1.427-.056-1.843-.122c-.517-.082-.824-.54-.824-1.064V8.517H2.937c-.552 0-.865-.593-.527-1.028.52-.669 1.32-1.62 2.423-2.722a52.996 52.996 0 012.364-2.243z"></path>
 | 
			
		||||
                          .points= post.points
 | 
			
		||||
                          div(class='Post-item-stat Post-item-vote' title='Downvotes')
 | 
			
		||||
                            div(class='Vote Vote-down')
 | 
			
		||||
                              svg(width='16', height='16', viewBox='0 0 16 16', fill='none', xmlns='http://www.w3.org/2000/svg')
 | 
			
		||||
                                title Downvotes
 | 
			
		||||
                                | <path fill="none" stroke="#B4B9C2" stroke-width="2" fill-rule="evenodd" clip-rule="evenodd" d="M8.803 13.476a1.2 1.2 0 01-1.606 0 53.03 53.03 0 01-2.364-2.243 29.613 29.613 0 01-2.422-2.722c-.339-.435-.025-1.028.526-1.028h2.397V3.336c0-.524.306-.982.823-1.064A11.874 11.874 0 018 2.15c.829 0 1.427.056 1.843.122.517.082.824.54.824 1.064v4.147h2.396c.552 0 .865.593.527 1.028-.52.669-1.32 1.62-2.423 2.722a53.038 53.038 0 01-2.364 2.243z"></path>
 | 
			
		||||
                        .Media.Post-item-stat
 | 
			
		||||
                          svg(width="16" height="16" viewBox="0 0 16 16" class="PostCommentsIcon" fill="none" xmlns="http://www.w3.org/2000/svg")
 | 
			
		||||
                            title Comments
 | 
			
		||||
                            | <path fill="currentColor" stroke="#ffffff" stroke-width="0" d="M4.455 12.195l.367 1.105 1.037-.53c.266-.135.637-.412 1.039-.74.39-.319.872-.737 1.422-1.245h2.291a3.306 3.306 0 003.306-3.306V5.306A3.306 3.306 0 0010.611 2H5.306A3.306 3.306 0 002 5.306v2.656c0 1.34.933 2.461 2.185 2.75.008.172.025.335.046.479a6.622 6.622 0 00.168.803c.016.07.035.137.056.2z"></path>
 | 
			
		||||
                          .MediaBody= post.comment_count
 | 
			
		||||
                        .Media.Post-item-stat
 | 
			
		||||
                          svg(width="16" height="16" viewBox="0 0 16 16" class="PostViewsIcon" fill="none" xmlns="http://www.w3.org/2000/svg")
 | 
			
		||||
                            title Post views
 | 
			
		||||
                            | <path d="M8 2.5C4.74998 2.5 2.30142 5.50267 1.27514 6.77517C0.925337 7.20917 0.908553 7.76483 1.2278 8.16583C2.22527 9.41833 4.6991 12.5 8 12.5C11.3686 12.5 13.8396 9.31133 14.796 8.0905C15.0769 7.732 15.0674 7.2535 14.7692 6.8755C13.7938 5.6395 11.3376 2.5 8 2.5ZM7.98224 9.33333C6.90897 9.33333 6.03887 8.51233 6.03887 7.5C6.03887 6.4875 6.90897 5.66667 7.98224 5.66667C9.05551 5.66667 9.92561 6.4875 9.92561 7.5C9.92561 8.51233 9.05551 9.33333 7.98224 9.33333Z" fill="currentColor"></path>
 | 
			
		||||
                          .MediaBody= post.views
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue