diff --git a/app/javascript/styles/bliss/about.scss b/app/javascript/styles/bliss/about.scss
index 61637ce96..16b665be9 100644
--- a/app/javascript/styles/bliss/about.scss
+++ b/app/javascript/styles/bliss/about.scss
@@ -1,7 +1,3 @@
-$maximum-width: 1235px;
-$fluid-breakpoint: $maximum-width + 20px;
-$column-breakpoint: 700px;
-$small-breakpoint: 960px;
 
 .container {
   box-sizing: border-box;
@@ -622,7 +618,7 @@ $small-breakpoint: 960px;
     }
   }
 
-  @media screen and (max-width: 675px) {
+  @media screen and (max-width: $xs-breakpoint) {
     .header-wrapper {
       padding-top: 0;
 
@@ -649,7 +645,7 @@ $small-breakpoint: 960px;
 .landing {
   margin-bottom: 100px;
 
-  @media screen and (max-width: 738px) {
+  @media screen and (max-width: $xs-top-breakpoint) {
     margin-bottom: 0;
   }
 
@@ -752,13 +748,13 @@ $small-breakpoint: 960px;
   }
 
   &__grid {
-    max-width: 960px;
+    max-width: $small-breakpoint;
     margin: 0 auto;
     display: grid;
     grid-template-columns: minmax(0, 50%) minmax(0, 50%);
     grid-gap: 30px;
 
-    @media screen and (max-width: 738px) {
+    @media screen and (max-width: $xs-top-breakpoint) {
       grid-template-columns: minmax(0, 100%);
       grid-gap: 10px;
 
diff --git a/app/javascript/styles/bliss/footer.scss b/app/javascript/styles/bliss/footer.scss
index 40fec741e..3c07eb043 100644
--- a/app/javascript/styles/bliss/footer.scss
+++ b/app/javascript/styles/bliss/footer.scss
@@ -141,7 +141,7 @@
   position: fixed;
   bottom: 0;
   left: 1em;
-  width: 32vw;
+  width: 300px;
   z-index: 10;
   text-align: right;
   color: $ui-primary-color;
@@ -170,5 +170,32 @@
   a {
     margin-left: 2ch;
     color: $ui-primary-color;
+    padding: 3px;
+    border-radius: 3px;
+
+    &:hover {
+      color: white;
+      background: $ui-highlight-color;
+    }
+  }
+
+  @media all and(min-width: $maximum-width) {
+    & {
+      width: 30vw;
+    }
+  }
+  @media all and(max-width: $maximum-width) {
+    & {
+      width: 27vw;
+      height: 50vh;
+      overflow-y: auto;
+      padding-right: 1em;
+    }
+  }
+  @media all and(max-width: $small-breakpoint) {
+    & {
+      display: none;
+    }
   }
 }
+
diff --git a/app/javascript/styles/bliss/variables.scss b/app/javascript/styles/bliss/variables.scss
index 7b84e6e7d..c72ab0964 100644
--- a/app/javascript/styles/bliss/variables.scss
+++ b/app/javascript/styles/bliss/variables.scss
@@ -48,6 +48,12 @@ $media-modal-media-max-width: 100%;
 $media-modal-media-max-height: 80%;
 
 $no-gap-breakpoint: 415px;
+$maximum-width: 1235px;
+$fluid-breakpoint: $maximum-width + 20px;
+$column-breakpoint: 700px;
+$small-breakpoint: 960px;
+$xs-top-breakpoint: 738px;
+$xs-breakpoint: 675px;
 
 $font-sans-serif: 'mastodon-font-sans-serif' !default;
 $font-display: 'mastodon-font-display' !default;