diff --git a/README.md b/README.md
index 40e8d26d8..483d62ad4 100644
--- a/README.md
+++ b/README.md
@@ -4,9 +4,9 @@
Photo by [Joana Mujollari](https://www.flickr.com/photos/141654969@N04/26777339042/), CC0 / Public Domain.
-Mastodon is a **free, open-source social network server** based on ActivityPub. This is *not* the official version of Mastodon; this is a separate version (i.e. a fork) maintained by [Darius Kazemi](https://friend.camp/@darius). For more information on Mastodon, you can see the [official website](https://joinmastodon.org) and the [upstream repo](https://github.com/tootsuite/mastodon).
+Mastodon is a **free, open-source social network server** based on ActivityPub. This is _not_ the official version of Mastodon; this is a separate version (i.e. a fork) maintained by [Darius Kazemi](https://friend.camp/@darius). For more information on Mastodon, you can see the [official website](https://joinmastodon.org) and the [upstream repo](https://github.com/tootsuite/mastodon).
-__Hometown__ is a light weight fork of Mastodon. By "light weight" I don't mean more efficient; I mean this fork is 99.999% identical to Mastodon with a few key tweaks. This project is based on the principle of: minimum code change for maximum user experience change. This makes it easy for the basically-one-person who runs the project to keep it up to date. By our best understanding, our major changes are not wanted by the Mastodon project, hence maintaining this fork instead of trying to commit the changes to Mastodon.
+**Hometown** is a light weight fork of Mastodon. By "light weight" I don't mean more efficient; I mean this fork is 99.999% identical to Mastodon with a few key tweaks. This project is based on the principle of: minimum code change for maximum user experience change. This makes it easy for the basically-one-person who runs the project to keep it up to date. By our best understanding, our major changes are not wanted by the Mastodon project, hence maintaining this fork instead of trying to commit the changes to Mastodon.
Please [check out our wiki](https://github.com/hometown-fork/hometown/wiki) for a list of Hometown-exclusive features. Some but not all of these are covered in this document.
diff --git a/app/javascript/styles/fairy-floss.scss b/app/javascript/styles/fairy-floss.scss
index 6b26aeed5..083c50994 100644
--- a/app/javascript/styles/fairy-floss.scss
+++ b/app/javascript/styles/fairy-floss.scss
@@ -1,3 +1,3 @@
@import 'fairy-floss/variables';
@import 'application';
-@import 'fairy-floss/diff'
+@import 'fairy-floss/diff';
diff --git a/app/javascript/styles/fairy-floss/diff.scss b/app/javascript/styles/fairy-floss/diff.scss
index 97313b9c8..6501c075f 100644
--- a/app/javascript/styles/fairy-floss/diff.scss
+++ b/app/javascript/styles/fairy-floss/diff.scss
@@ -471,14 +471,14 @@ a.mention,
color: $purple4;
}
-.simple_form input[type="text"]:active,
-.simple_form input[type="text"]:focus,
-.simple_form input[type="number"]:active,
-.simple_form input[type="number"]:focus,
-.simple_form input[type="email"]:active,
-.simple_form input[type="email"]:focus,
-.simple_form input[type="password"]:active,
-.simple_form input[type="password"]:focus,
+.simple_form input[type='text']:active,
+.simple_form input[type='text']:focus,
+.simple_form input[type='number']:active,
+.simple_form input[type='number']:focus,
+.simple_form input[type='email']:active,
+.simple_form input[type='email']:focus,
+.simple_form input[type='password']:active,
+.simple_form input[type='password']:focus,
.simple_form textarea:active,
.simple_form textarea:focus {
border-color: $mint;
@@ -520,16 +520,18 @@ a.mention,
background: $purplescrollbar;
}
-.simple_form input[type="text"],
-.simple_form input[type="number"],
-.simple_form input[type="email"],
-.simple_form input[type="password"],
+.simple_form input[type='text'],
+.simple_form input[type='number'],
+.simple_form input[type='email'],
+.simple_form input[type='password'],
.simple_form textarea {
background: darken($purple1, 6%);
}
.simple_form select {
- background: darken($purple1, 6%) url("data:image/svg+xml;utf8,") no-repeat right 8px center/auto 16px;
+ background: darken($purple1, 6%)
+ url("data:image/svg+xml;utf8,")
+ no-repeat right 8px center/auto 16px;
}
.table th,
diff --git a/app/javascript/styles/fairy-floss/variables.scss b/app/javascript/styles/fairy-floss/variables.scss
index a7726eef8..b6f9fd78a 100644
--- a/app/javascript/styles/fairy-floss/variables.scss
+++ b/app/javascript/styles/fairy-floss/variables.scss
@@ -15,18 +15,18 @@ $lemon: #fff683;
$coral: #ff857f;
// 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: #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
// Values from the classic Mastodon UI
-$classic-base-color: $purple1; // Midnight Express
-$classic-primary-color: $purple4; // Echo Blue
-$classic-secondary-color: #d9e1e8; // Pattens Blue
-$classic-highlight-color: #ff857f; // Summer Sky
+$classic-base-color: $purple1; // Midnight Express
+$classic-primary-color: $purple4; // Echo Blue
+$classic-secondary-color: #d9e1e8; // Pattens Blue
+$classic-highlight-color: #ff857f; // Summer Sky
// Variables for defaults in UI
$base-shadow-color: $black !default;
@@ -37,10 +37,13 @@ $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-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-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-highlight-color: $classic-highlight-color !default;
// Variables for texts
diff --git a/app/javascript/styles/macaron/diff.scss b/app/javascript/styles/macaron/diff.scss
index 47853a21e..5a67f1bf0 100644
--- a/app/javascript/styles/macaron/diff.scss
+++ b/app/javascript/styles/macaron/diff.scss
@@ -133,14 +133,14 @@ html {
}
.compose-form__autosuggest-wrapper,
-.poll__text input[type="text"],
+.poll__text input[type='text'],
.compose-form .spoiler-input__input,
.compose-form__poll-wrapper select,
.search__input,
.setting-text,
-.box-widget input[type="text"],
-.box-widget input[type="email"],
-.box-widget input[type="password"],
+.box-widget input[type='text'],
+.box-widget input[type='email'],
+.box-widget input[type='password'],
.box-widget textarea,
.statuses-grid .detailed-status .audio-player {
border: 1px solid lighten(#eeeeee, 4%);
@@ -194,7 +194,9 @@ html {
}
.compose-form__poll-wrapper select {
- background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px;
+ background: $simple-background-color
+ url("data:image/svg+xml;utf8,")
+ no-repeat right 8px center / auto 16px;
}
.compose-form__poll-wrapper,
@@ -590,7 +592,8 @@ body.admin {
background: darken($ui-secondary-color, 10%);
}
-.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
+ .react-toggle-track {
background: lighten($ui-highlight-color, 10%);
}
@@ -697,10 +700,10 @@ body.admin {
}
.simple_form {
- input[type="text"],
- input[type="number"],
- input[type="email"],
- input[type="password"],
+ input[type='text'],
+ input[type='number'],
+ input[type='email'],
+ input[type='password'],
select,
textarea {
border-color: $blueberry;
@@ -1096,12 +1099,15 @@ a.status-card.compact:hover {
border-bottom: 1px solid lighten($purple, 8%);
}
-@media screen and (max-width: 600px) {
+@media screen and (width <= 600px) {
.public-layout .public-account-header__bar {
background: $blue;
}
- .public-layout .public-account-header__extra .public-account-bio .account__header__fields {
+ .public-layout
+ .public-account-header__extra
+ .public-account-bio
+ .account__header__fields {
border-color: lighten($purple, 8%);
background: $purple;
}
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 6626b83fa..63d38f58d 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -197,7 +197,7 @@
margin-bottom: 10px;
}
- @media screen and (max-width: 738px) {
+ @media screen and (width <= 738px) {
grid-template-columns: minmax(0, 50%) minmax(0, 50%);
.landing-page__call-to-action {
@@ -378,7 +378,7 @@
color: $primary-text-color;
}
- @media screen and (max-width: 550px) {
+ @media screen and (width <= 550px) {
&.optional {
display: none;
}
@@ -492,7 +492,7 @@
justify-content: flex-start;
&::before {
- content: "";
+ content: '';
display: block;
background: lighten($ui-base-color, 4%);
position: absolute;
@@ -522,7 +522,7 @@
}
}
- @media screen and (max-width: 600px) {
+ @media screen and (width <= 600px) {
margin-top: 0;
background: lighten($ui-base-color, 4%);
border-radius: 0 0 4px 4px;
@@ -543,7 +543,7 @@
border-radius: 4px;
}
- @media screen and (max-width: 360px) {
+ @media screen and (width <= 360px) {
display: none;
}
}
@@ -587,7 +587,7 @@
}
}
- @media screen and (max-width: 600px) {
+ @media screen and (width <= 600px) {
margin-left: 15px;
display: flex;
justify-content: space-between;
@@ -648,7 +648,7 @@
&::after {
display: block;
- content: "";
+ content: '';
position: absolute;
bottom: 0;
left: 0;
@@ -845,11 +845,11 @@
margin-bottom: 10px;
max-width: 33.333%;
- @media screen and (max-width: 900px) {
+ @media screen and (width <= 900px) {
max-width: 50%;
}
- @media screen and (max-width: 600px) {
+ @media screen and (width <= 600px) {
max-width: 100%;
}
}
diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss
index 270b8b322..344938134 100644
--- a/app/javascript/styles/mastodon/footer.scss
+++ b/app/javascript/styles/mastodon/footer.scss
@@ -51,7 +51,7 @@
min-width: 0;
}
- @media screen and (max-width: 690px) {
+ @media screen and (width <= 690px) {
grid-template-columns: 1fr 2fr 1fr;
.column-0,
@@ -77,7 +77,7 @@
}
}
- @media screen and (max-width: 600px) {
+ @media screen and (width <= 600px) {
.column-1 {
display: block;
}
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 1b7e1d194..ff6a02f3a 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -520,7 +520,7 @@ $fluid-breakpoint: $maximum-width + 20px;
.statuses-grid {
min-height: 600px;
- @media screen and (max-width: 640px) {
+ @media screen and (width <= 640px) {
width: 100% !important; // Masonry layout is unnecessary at this width
}
@@ -531,7 +531,7 @@ $fluid-breakpoint: $maximum-width + 20px;
width: math.div(940px - 20px, 3);
}
- @media screen and (max-width: 640px) {
+ @media screen and (width <= 640px) {
width: 100%;
}