fix some columns show on smaller screens

app/javascript/mastodon/features/ui/components/link_footer.js

@@ -103,7 +103,7 @@ class LinkFooter extends React.PureComponent {
 
     return (
 
-      <div className='getting-started__footer'>
+      <div className='getting-started__footer hide-on-smaller-screens'>
 
         <div className='extras'>
 

app/javascript/styles/bliss/accessibility.scss

@@ -13,6 +13,4 @@ $black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_sq
   }
 }
 
-.fa {
-  margin-right: 1ch;
-}
+

app/javascript/styles/bliss/basics.scss

@@ -162,3 +162,33 @@ button {
 }
 
 
+.media-gallery {
+  margin-left: 0;
+}
+
+.debug, .well {
+  padding: 0.5rem;
+  border: solid 1px greenyellow;
+  background: yellow;
+  color: #222;
+
+}
+
+.spacer {
+  display: block;
+  padding: 1em;
+}
+
+.small-texts {
+  .timelines {
+    .column-link {
+
+
+    }
+
+    span {
+      display: none;
+    }
+  }
+}
+

app/javascript/styles/bliss/components.scss

@@ -2265,6 +2265,9 @@ a.account__display-name {
   .columns-area__panels__pane--compositional {
     display: none;
   }
+  .hide-on-smaller-screens{
+    display: none;
+  }
 }
 
 @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {

app/javascript/styles/bliss/footer.scss

@@ -141,10 +141,14 @@
   position: fixed;
   bottom: 0;
   left: 1em;
-  width: 32vw;
+  width: 268px;
   z-index: 10;
   text-align: right;
 
+  .fa {
+    margin-right: 1ch;
+  }
+
   ul {
     list-style-type: none;
   }

app/javascript/styles/bliss/variables.scss

@@ -1,16 +1,16 @@
 // Commonly used web colors
-$black: #000000;            // Black
-$white: #ffffff;            // White
-$success-green: #79bd9a !default;    // Padua
-$error-red: #df405a !default;        // Cerise
-$warning-red: #ff5050 !default;      // Sunset Orange
-$gold-star: #ca8f04 !default;        // Dark Goldenrod
+$black: #111; // Black
+$white: #fff; // White
+$success-green: #6bbd77 !default; // Padua
+$error-red: #d4839b !default; // Cerise
+$warning-red: #528dc8 !default; // Sunset Orange
+$gold-star: #98c6ff !default; // Dark Goldenrod
 
 // Values from the classic Mastodon UI
-$classic-base-color: #282c37;         // Midnight Express
-$classic-primary-color: #9baec8;      // Echo Blue
-$classic-secondary-color: #d9e1e8;    // Pattens Blue
-$classic-highlight-color: #2b90d9;    // Summer Sky
+$classic-base-color: #282c37; // Midnight Express
+$classic-primary-color: #9baec8; // Echo Blue
+$classic-secondary-color: #d9e1e8; // Pattens Blue
+$classic-highlight-color: #2b90d9; // Summer Sky
 
 // Variables for defaults in UI
 $base-shadow-color: $black !default;
@@ -21,10 +21,10 @@ $valid-value-color: $success-green !default;
 $error-value-color: $error-red !default;
 
 // Tell UI to use selected colors
-$ui-base-color: $classic-base-color !default;                  // Darkest
+$ui-base-color: $classic-base-color !default; // Darkest
 $ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
-$ui-primary-color: $classic-primary-color !default;            // Lighter
-$ui-secondary-color: $classic-secondary-color !default;        // Lightest
+$ui-primary-color: $classic-primary-color !default; // Lighter
+$ui-secondary-color: $classic-secondary-color !default; // Lightest
 $ui-highlight-color: $classic-highlight-color !default;
 
 // Variables for texts

app/javascript/styles/custom.scss

@@ -21,36 +21,6 @@ $media-modal-media-max-width: 100%;
 $media-modal-media-max-height: 80%;
 // fix
 
-.media-gallery {
-  margin-left: 0;
-}
-
 // then we import the rest of the world
 @import 'application';
 @import 'bliss/messaging';
-
-.debug, .well {
-  padding: 0.5rem;
-  border: solid 1px greenyellow;
-  background: yellow;
-  color: #222;
-
-}
-
-.spacer {
-  display: block;
-  padding: 1em;
-}
-
-.small-texts {
-  .timelines {
-    .column-link {
-
-
-    }
-
-    span {
-      display: none;
-    }
-  }
-}

app/javascript/styles/mastodon/containers.scss

@@ -21,7 +21,7 @@
     justify-content: center;
     align-items: center;
 
-    svg {
+    > svg {
       fill: $primary-text-color;
       height: 42px;
       margin-right: 10px;