Reintroduce glitch-soc avatar styling in public pages

3 files changed, 11 insertions, 0 deletions

diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
index 42344d29a..74807bb65 100644
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ b/app/javascript/flavours/glitch/styles/about.scss
@@ -574,6 +574,7 @@ $small-breakpoint: 960px;
       .avatar {
         width: 80px;
         height: 80px;
+        @include avatar-size(80px);
         margin: 0 auto;
         margin-bottom: 15px;
 
@@ -582,6 +583,7 @@ $small-breakpoint: 960px;
           width: 80px;
           height: 80px;
           border-radius: 48px;
+          @include avatar-radius();
         }
       }
 
@@ -716,6 +718,7 @@ $small-breakpoint: 960px;
       &__avatar {
         width: 44px;
         height: 44px;
+        @include avatar-size(48px);
         background-size: 44px 44px;
       }
 
diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss
index c27bc0df3..ac1989832 100644
--- a/app/javascript/flavours/glitch/styles/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/accounts.scss
@@ -59,6 +59,7 @@
       flex: 0 0 auto;
       width: 48px;
       height: 48px;
+      @include avatar-size(48px);
       padding-top: 2px;
 
       img {
@@ -67,6 +68,7 @@
         display: block;
         margin: 0;
         border-radius: 4px;
+        @include avatar-radius();
         background: darken($ui-base-color, 8%);
       }
     }
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index 7b339277f..01c8ebbaf 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -83,6 +83,7 @@
   .avatar {
     width: 40px;
     height: 40px;
+    @include avatar-size(40px);
     margin-right: 8px;
 
     img {
@@ -91,6 +92,7 @@
       display: block;
       margin: 0;
       border-radius: 4px;
+      @include avatar-radius();
     }
   }
 
@@ -337,6 +339,7 @@
         display: block;
         width: 120px;
         height: 120px;
+        @include avatar-size(120px);
         padding-left: 20px - 4px;
         flex: 0 0 auto;
 
@@ -348,6 +351,7 @@
           border-radius: 50%;
           border: 4px solid lighten($ui-base-color, 4%);
           background: darken($ui-base-color, 8%);
+          @include avatar-radius();
         }
       }
 
@@ -364,12 +368,14 @@
         .avatar {
           width: 48px;
           height: 48px;
+          @include avatar-size(48px);
           padding: 7px 0;
           padding-left: 10px;
 
           img {
             border: 0;
             border-radius: 4px;
+            @include avatar-radius();
           }
 
           @media screen and (max-width: 360px) {