From 9b962956918bdbf99880786469a58cebfb4fd9bf Mon Sep 17 00:00:00 2001
From: 3nprob <3nprob@3nprob>
Date: Thu, 7 Oct 2021 23:46:18 +0900
Subject: [PATCH] Update gallery styles

---
 static/css/styles.css | 159 +++++++++++++++++++++++++++++++++++++++---
 templates/gallery.pug |   2 +-
 2 files changed, 149 insertions(+), 12 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index c31c726..9c02d17 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,3 +1,9 @@
+body {
+  font-size: 100%;
+  font-family: Proxima Nova Regular,Helvetica Neue,Helvetica,Arial,sans-serif;
+  color: #fff;
+}
+
 .UserAvatar {
   display: block;
   height: 32px;
@@ -21,6 +27,19 @@
   text-transform: lowercase;
 }
 
+.GalleryComment {
+  margin-bottom: 16px;
+  cursor: pointer;
+  position: relative;
+}
+
+.GalleryComment-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+}
+
 .GalleryComment-avatar-bar .avatar span {
   display: block;
   background-color: grey;
@@ -45,6 +64,10 @@
   font-size: 12px;
   line-height: 12px;
   color: #b4b9c2;
+  justify-content: space-between;
+  align-items: center;
+  color: #b4b9c2;
+  margin-bottom: 4px;
 }
 
 .GalleryComment-avatar-bar {
@@ -85,6 +108,13 @@
   color: #eff1f4;
 }
 
+.GalleryComment-actions {
+  color: #b4b9c2;
+  font-family: Proxima Nova Bold,Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-size: 12px;
+  line-height: 12px;
+}
+
 .GalleryComment-actions .points {
   padding: 0 6px;
 }
@@ -139,18 +169,125 @@ svg:not(:root) {
 }
 
 .Gallery-ContentWrapper .Gallery-Content--media {
-    max-width: 100%;
-    margin-bottom: 24px;
-    background-color: rgba(0,0,0,.1);
-    min-height: 140px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
+  max-width: 100%;
+  margin-bottom: 24px;
+  background-color: rgba(0,0,0,.1);
+  min-height: 140px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
 }
 
 .Gallery-ContentWrapper .Gallery-Content--mediaContainer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
+
+a.author-link .UserAvatar {
+  display: block;
+}
+
+.Gallery-Byline .Avatar {
+  background-color: #43d0bd;
+  border-radius: 50%;
+  height: 32px;
+  width: 32px;
+  overflow: hidden;
+  transition: transform .2s ease-in-out;
+}
+
+.Gallery-Byline .Info-Wrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 0 32px 0 12px;
+  flex-grow: 1;
+  justify-content: space-between;
+  justify-content: space-around;
+  overflow: hidden;
+}
+
+.Gallery-Byline .Info-Wrapper .Meta {
+  font-family: Proxima Nova Regular,Helvetica Neue,Helvetica,Arial,sans-serif;
+  color: #b4b9c2;
+  font-size: 12px;
+  line-height: 12px;
+}
+
+.Gallery-Byline .Info .author-name {
+  min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: Proxima Nova Bold,Helvetica Neue,Helvetica,Arial,sans-serif;
+  color: #1bb76e;
+  cursor: pointer;
+}
+
+.Gallery-Byline .Info {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  font-size: 14px;
+  font-family: Proxima Nova Bold,Helvetica Neue,Helvetica,Arial,sans-serif;
+  align-items: center;
+}
+
+a {
+  color: #01b96b;
+  text-decoration: none;
+}
+
+.Gallery-Byline {
+  display: flex;
+  justify-content: flex-start;
+  height: 32px;
+  margin: 16px 0 24px;
+}
+
+.Gallery-Title {
+  font-family: Proxima Nova Bold,Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-size: 28px;
+  line-height: 130%;
+  color: #fff;
+  overflow-wrap: break-word;
+}
+
+.Gallery-Header {
+  position: relative;
+  z-index: 1;
+}
+
+.Gallery-Byline .Info-Wrapper .Meta .delimiter {
+  padding: 0 5px;
+}
+
+.GalleryComment-byLine .delimiter {
+  margin: 0 8px;
+}
+
+.Gallery-Content--tags .TagPill {
+  margin-top: 10px;
+  margin-right: 10px;
+}
+
+.CommentsList-headline {
+  background: repeat-x 0 100% url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Cpath fill='%23585D6A' d='M0 0h1v.5H0z'/%3E%3C/svg%3E");
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 14px;
+  margin-bottom: 16px;
+  margin-top: 46px;
+}
+
+.CommentsList-headline--counter {
+  font-family: Proxima Nova Bold,Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-size: 15px;
+  line-height: 15px;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  color: #dadce2;
+  flex-grow: 1;
+}
\ No newline at end of file
diff --git a/templates/gallery.pug b/templates/gallery.pug
index f877aca..3be02e8 100644
--- a/templates/gallery.pug
+++ b/templates/gallery.pug
@@ -51,7 +51,7 @@ html
         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', title=account.username, style='background-image: url("' + util.proxyURL(account.avatar_url) + '");')
+              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')