mirror of https://framagit.org/tykayn/mastodon.git
fix some columns show on smaller screens
This commit is contained in:
parent
248e22cf6c
commit
d7a17f9834
|
@ -103,7 +103,7 @@ class LinkFooter extends React.PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div className='getting-started__footer'>
|
<div className='getting-started__footer hide-on-smaller-screens'>
|
||||||
|
|
||||||
<div className='extras'>
|
<div className='extras'>
|
||||||
|
|
||||||
|
|
|
@ -13,6 +13,4 @@ $black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_sq
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fa {
|
|
||||||
margin-right: 1ch;
|
|
||||||
}
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -2265,6 +2265,9 @@ a.account__display-name {
|
||||||
.columns-area__panels__pane--compositional {
|
.columns-area__panels__pane--compositional {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.hide-on-smaller-screens{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
|
@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
|
||||||
|
|
|
@ -141,10 +141,14 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 1em;
|
left: 1em;
|
||||||
width: 32vw;
|
width: 268px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
margin-right: 1ch;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
// Commonly used web colors
|
// Commonly used web colors
|
||||||
$black: #000000; // Black
|
$black: #111; // Black
|
||||||
$white: #ffffff; // White
|
$white: #fff; // White
|
||||||
$success-green: #79bd9a !default; // Padua
|
$success-green: #6bbd77 !default; // Padua
|
||||||
$error-red: #df405a !default; // Cerise
|
$error-red: #d4839b !default; // Cerise
|
||||||
$warning-red: #ff5050 !default; // Sunset Orange
|
$warning-red: #528dc8 !default; // Sunset Orange
|
||||||
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
$gold-star: #98c6ff !default; // Dark Goldenrod
|
||||||
|
|
||||||
// Values from the classic Mastodon UI
|
// Values from the classic Mastodon UI
|
||||||
$classic-base-color: #282c37; // Midnight Express
|
$classic-base-color: #282c37; // Midnight Express
|
||||||
$classic-primary-color: #9baec8; // Echo Blue
|
$classic-primary-color: #9baec8; // Echo Blue
|
||||||
$classic-secondary-color: #d9e1e8; // Pattens Blue
|
$classic-secondary-color: #d9e1e8; // Pattens Blue
|
||||||
$classic-highlight-color: #2b90d9; // Summer Sky
|
$classic-highlight-color: #2b90d9; // Summer Sky
|
||||||
|
|
||||||
// Variables for defaults in UI
|
// Variables for defaults in UI
|
||||||
$base-shadow-color: $black !default;
|
$base-shadow-color: $black !default;
|
||||||
|
@ -21,10 +21,10 @@ $valid-value-color: $success-green !default;
|
||||||
$error-value-color: $error-red !default;
|
$error-value-color: $error-red !default;
|
||||||
|
|
||||||
// Tell UI to use selected colors
|
// 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-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
|
||||||
$ui-primary-color: $classic-primary-color !default; // Lighter
|
$ui-primary-color: $classic-primary-color !default; // Lighter
|
||||||
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||||||
$ui-highlight-color: $classic-highlight-color !default;
|
$ui-highlight-color: $classic-highlight-color !default;
|
||||||
|
|
||||||
// Variables for texts
|
// Variables for texts
|
||||||
|
|
|
@ -21,36 +21,6 @@ $media-modal-media-max-width: 100%;
|
||||||
$media-modal-media-max-height: 80%;
|
$media-modal-media-max-height: 80%;
|
||||||
// fix
|
// fix
|
||||||
|
|
||||||
.media-gallery {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// then we import the rest of the world
|
// then we import the rest of the world
|
||||||
@import 'application';
|
@import 'application';
|
||||||
@import 'bliss/messaging';
|
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
svg {
|
> svg {
|
||||||
fill: $primary-text-color;
|
fill: $primary-text-color;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|
Loading…
Reference in New Issue