tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

🎨 style for footer links, responsive breakpoints

Browse Source 
Signed-off-by: Baptiste Lemoine <contact@cipherbliss.com>
This commit is contained in:
Baptiste Lemoine 2020-01-07 12:36:59 +01:00
parent fe7ce9f2e0
commit 9e79e11091
3 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/javascript/styles/bliss/about.scss
View File

@ -1,7 +1,3 @@
$maximum-width: 1235px;
$fluid-breakpoint: $maximum-width + 20px;
$column-breakpoint: 700px;
$small-breakpoint: 960px;
.container { .container {
box-sizing: border-box; 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 { .header-wrapper {
padding-top: 0; padding-top: 0;
@ -649,7 +645,7 @@ $small-breakpoint: 960px;
.landing { .landing {
margin-bottom: 100px; margin-bottom: 100px;
@media screen and (max-width: 738px) { @media screen and (max-width: $xs-top-breakpoint) {
margin-bottom: 0; margin-bottom: 0;
} }
@ -752,13 +748,13 @@ $small-breakpoint: 960px;
} }
&__grid { &__grid {
max-width: 960px; max-width: $small-breakpoint;
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
grid-template-columns: minmax(0, 50%) minmax(0, 50%); grid-template-columns: minmax(0, 50%) minmax(0, 50%);
grid-gap: 30px; grid-gap: 30px;
@media screen and (max-width: 738px) { @media screen and (max-width: $xs-top-breakpoint) {
grid-template-columns: minmax(0, 100%); grid-template-columns: minmax(0, 100%);
grid-gap: 10px; grid-gap: 10px;

29
app/javascript/styles/bliss/footer.scss
View File

@ -141,7 +141,7 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 1em; left: 1em;
width: 32vw; width: 300px;
z-index: 10; z-index: 10;
text-align: right; text-align: right;
color: $ui-primary-color; color: $ui-primary-color;
@ -170,5 +170,32 @@
a { a {
margin-left: 2ch; margin-left: 2ch;
color: $ui-primary-color; 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;
}
} }
} }

6
app/javascript/styles/bliss/variables.scss
View File

@ -48,6 +48,12 @@ $media-modal-media-max-width: 100%;
$media-modal-media-max-height: 80%; $media-modal-media-max-height: 80%;
$no-gap-breakpoint: 415px; $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-sans-serif: 'mastodon-font-sans-serif' !default;
$font-display: 'mastodon-font-display' !default; $font-display: 'mastodon-font-display' !default;