Merge branch 'develop' into audio-player

app/styles/accounts.scss

@@ -24,7 +24,7 @@
     background: var(--background-color);
     border-radius: 4px 4px 0 0;
 
-    img {
+    .still-image {
       display: block;
       width: 100%;
       height: 100%;
@@ -61,7 +61,7 @@
       height: 48px;
       padding-top: 2px;
 
-      img {
+      .still-image {
         width: 100%;
         height: 100%;
         display: block;

app/styles/application.scss

@@ -58,6 +58,7 @@
 @import 'components/navigation-bar';
 @import 'components/promo-panel';
 @import 'components/drawer';
+@import 'components/still-image';
 @import 'components/timeline-queue-header';
 @import 'components/badge';
 @import 'components/trends';

app/styles/components/account-header.scss

@@ -21,7 +21,6 @@
     background: var(--accent-color--med);
     @media screen and (max-width: 895px) {height: 225px;}
     &--none {height: 125px;}
-
     img {
       object-fit: cover;
       display: block;
@@ -29,6 +28,23 @@
       height: 100%;
       margin: 0;
     }
+
+    .still-image--play-on-hover::before {
+      content: 'GIF';
+      position: absolute;
+      color: var(--primary-text-color);
+      background: var(--foreground-color);
+      top: 6px;
+      left: 6px;
+      padding: 2px 6px;
+      border-radius: 2px;
+      font-size: 11px;
+      font-weight: 600;
+      pointer-events: none;
+      opacity: 0.9;
+      transition: opacity 0.1s ease;
+      line-height: 18px;
+    }
   }
 
   &__bar {
@@ -58,6 +74,23 @@
       background-size: 200px 200px;
     }
 
+    .still-image--play-on-hover::before {
+      content: 'GIF';
+      position: absolute;
+      color: var(--primary-text-color);
+      background: var(--foreground-color);
+      bottom: 15%;
+      left: 15%;
+      padding: 1px 4px;
+      border-radius: 2px;
+      font-size: 8px;
+      font-weight: 600;
+      pointer-events: none;
+      opacity: 0.9;
+      transition: opacity 0.1s ease;
+      line-height: 13px;
+    }
+
     @media screen and (max-width: 895px) {
       top: -45px;
       left: 10px;

app/styles/components/compose-form.scss

@@ -284,7 +284,7 @@
     .compose-form__upload-thumbnail {
       border-radius: 4px;
       background-position: center;
-      background-size: cover;
+      background-size: contain;
       background-repeat: no-repeat;
       height: 140px;
       width: 100%;

app/styles/components/media-gallery.scss

@@ -36,47 +36,30 @@
   z-index: 1;
 
   &,
-  img,
-  canvas {
+  .still-image {
     height: 100%;
     width: 100%;
-  }
-
-  img,
-  canvas {
-    object-fit: cover;
-  }
-
-  &--play-on-hover {
-    &::before {
-      content: 'GIF';
-      position: absolute;
-      color: var(--primary-text-color);
-      background: var(--foreground-color);
-      bottom: 6px;
-      left: 6px;
-      padding: 2px 6px;
-      border-radius: 2px;
-      font-size: 11px;
-      font-weight: 600;
-      pointer-events: none;
-      opacity: 0.9;
-      transition: opacity 0.1s ease;
-      line-height: 18px;
-    }
 
     img {
-      position: absolute;
+      object-fit: contain;
     }
+  }
 
-    img,
-    &:hover::before {
-      visibility: hidden;
-    }
-
-    &:hover img {
-      visibility: visible;
-    }
+  .still-image--play-on-hover::before {
+    content: 'GIF';
+    position: absolute;
+    color: var(--primary-text-color);
+    background: var(--foreground-color);
+    bottom: 6px;
+    left: 6px;
+    padding: 2px 6px;
+    border-radius: 2px;
+    font-size: 11px;
+    font-weight: 600;
+    pointer-events: none;
+    opacity: 0.9;
+    transition: opacity 0.1s ease;
+    line-height: 18px;
   }
 }
 
@@ -90,6 +73,23 @@
   z-index: 0;
   background: var(--background-color);
 
+  .still-image--play-on-hover::before {
+    content: 'GIF';
+    position: absolute;
+    color: var(--primary-text-color);
+    background: var(--foreground-color);
+    bottom: 6px;
+    left: 6px;
+    padding: 2px 6px;
+    border-radius: 2px;
+    font-size: 11px;
+    font-weight: 600;
+    pointer-events: none;
+    opacity: 0.9;
+    transition: opacity 0.1s ease;
+    line-height: 18px;
+  }
+
   &--hidden {
     display: none;
   }

app/styles/components/still-image.scss

@@ -0,0 +1,28 @@
+.still-image {
+  position: relative;
+  overflow: hidden;
+
+  img,
+  canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+    font-family: inherit;
+  }
+
+  &--play-on-hover {
+    img {
+      position: absolute;
+      visibility: hidden;
+    }
+
+    &:hover img {
+      visibility: visible;
+    }
+
+    &:hover canvas {
+      visibility: hidden;
+    }
+  }
+}

app/styles/components/user-panel.scss

@@ -11,6 +11,10 @@
     width: 100%;
     background: var(--brand-color--faint);
 
+    .still-image {
+      height: 100%;
+    }
+
     img {
       display: block;
       height: 100%;

app/styles/fonts.scss

@@ -159,8 +159,8 @@
   font-style: normal;
 }
 
-.fa-site-icon::before {
-  font-family: 'FontAwesome';
+.fa-users::before {
+  font-family: 'ForkAwesome';
   content: '\f0c0';
 }
 

app/styles/ui.scss

@@ -739,7 +739,7 @@
     display: block;
     position: absolute;
     content: '\f00c';
-    font: normal normal normal 14px/1 FontAwesome;
+    font: normal normal normal 14px/1 ForkAwesome;
     font-size: inherit;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;