Merge tag 'v1.0.5+3.2.0' into hometown-v1.0.5+3.3.0

This commit is contained in:
Darius Kazemi
2021-04-22 16:37:11 -07:00
126 changed files with 2708 additions and 366 deletions

View File

@ -0,0 +1,3 @@
@import 'fairy-floss/variables';
@import 'application';
@import 'fairy-floss/diff'

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,70 @@
// FAIRY FLOSS VARIABLES
// Purples
$purple1: #2e2b3b;
$purple2: #504b68;
$purple3: #5f5676;
$purple4: #c8c4d4;
$purple5: #474059;
$purpleicon: #ada6bf;
$purpleborder: #5f5676;
$purplescrollbar: #5a5475;
$mint: #c2ffdf;
$pink: #ffb8d1;
$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
// 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
// Variables for defaults in UI
$base-shadow-color: $black !default;
$base-overlay-background: $black !default;
$base-border-color: $white !default;
$simple-background-color: $white !default;
$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-highlight-color: $classic-highlight-color !default;
// Variables for texts
$primary-text-color: $white !default;
$darker-text-color: $ui-primary-color !default;
$dark-text-color: $purpleicon !default;
$secondary-text-color: $ui-secondary-color !default;
$highlight-text-color: $ui-highlight-color !default;
$action-button-color: $purpleicon !default;
// For texts on inverted backgrounds
$inverted-text-color: $ui-base-color !default;
$lighter-text-color: $ui-base-lighter-color !default;
$light-text-color: $ui-primary-color !default;
// Language codes that uses CJK fonts
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
// Variables for components
$media-modal-media-max-width: 100%;
// put margins on top and bottom of image to avoid the screen covered by image.
$media-modal-media-max-height: 80%;
$no-gap-breakpoint: 415px;
$font-sans-serif: 'mastodon-font-sans-serif' !default;
$font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default;

View File

@ -0,0 +1,3 @@
@import 'macaron/variables';
@import 'application';
@import 'macaron/diff';

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,48 @@
// Dependent colors
$black: #000000;
$white: #ffffff;
$purple: #c8c4dd;
$blue: #c8dbee;
$green: #dff6eb;
$pink: #ffcbcb;
$blueberry: #5971ad;
$cream: #fffdef;
$bilberry: #ad599c;
$classic-base-color: #282c37;
$classic-primary-color: #9baec8;
$classic-secondary-color: $green;
$classic-highlight-color: #2b90d9;
// Differences
$success-green: #3c754d;
$base-overlay-background: $white !default;
$valid-value-color: $success-green !default;
$ui-base-color: $classic-secondary-color !default;
$ui-base-lighter-color: $cream;
$ui-primary-color: #9bcbed;
$ui-secondary-color: $classic-base-color !default;
$ui-highlight-color: $blueberry;
$primary-text-color: $black !default;
$darker-text-color: $classic-base-color !default;
$dark-text-color: #444b5d;
$action-button-color: #606984;
$inverted-text-color: $black !default;
$lighter-text-color: $classic-base-color !default;
$light-text-color: #444b5d;
//Newly added colors
$account-background-color: $white !default;
//Invert darkened and lightened colors
@function darken($color, $amount) {
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
}
@function lighten($color, $amount) {
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
}

View File

@ -228,6 +228,11 @@ h1 {
line-height: 36px;
}
.column-cell a h1 {
margin: 0 8px 10px;
line-height: 26px;
}
h2 {
font-size: 23px;
line-height: 30px;

View File

@ -195,7 +195,7 @@ html {
}
.drawer__inner__mastodon {
background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
background: $white;
}
// Change the colors used in compose-form

View File

@ -579,7 +579,7 @@ $small-breakpoint: 960px;
bottom: 25px;
img {
height: 190px;
height: 155px;
width: auto;
}
}
@ -688,6 +688,8 @@ $small-breakpoint: 960px;
justify-content: center;
align-items: center;
padding: 50px;
font-family: $font-display, sans-serif;
font-weight: bold;
svg {
fill: $primary-text-color;
@ -864,6 +866,22 @@ $small-breakpoint: 960px;
.brand {
position: relative;
text-decoration: none;
color: $secondary-text-color;
}
a.brand {
color: $primary-text-color;
}
h1 a.brand {
color: $secondary-text-color;
font-size: 3.8em;
}
.originalmascotimg svg {
width: 200px;
fill: $secondary-text-color;
margin-top: -25px;
}
.brand__tagline {
@ -883,4 +901,3 @@ $small-breakpoint: 960px;
color: $dark-text-color;
}
}

View File

@ -46,6 +46,12 @@ $content-width: 840px;
position: relative;
bottom: -2px;
}
h2 {
height: 20px;
position: relative;
bottom: -2px;
}
}
&__icon {
@ -68,15 +74,32 @@ $content-width: 840px;
.logo {
display: block;
margin: 40px auto;
width: 100px;
margin: 60px 0 0 20px;
height: 100px;
h2 .brand {
color: $primary-text-color;
display: block;
font-size: 24px;
line-height: 28px;
font-weight: 400;
padding-bottom: 40px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
}
@media screen and (max-width: $no-columns-breakpoint) {
& > a:first-child {
display: none;
}
.logo,
.logo h2,
.logo h2 .brand {
display: none;
}
}
ul {

View File

@ -138,6 +138,12 @@ body {
height: auto;
margin-top: -120px;
}
h1 {
a.brand {
font-size: 36px;
}
}
}
h1 {

View File

@ -406,12 +406,6 @@
color: $lighter-text-color;
font-weight: 500;
text-decoration: underline;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
}
}
@ -821,10 +815,6 @@
&.status__content--with-spoiler {
white-space: normal;
.status__content__text {
white-space: pre-wrap;
}
}
.emojione {
@ -832,11 +822,82 @@
height: 20px;
margin: -3px 0 0;
}
.status__content__text {
p,
pre,
blockquote {
margin-bottom: 20px;
white-space: pre-wrap;
unicode-bidi: plaintext;
p {
margin-bottom: 20px;
white-space: pre-wrap;
unicode-bidi: plaintext;
&:last-child {
margin-bottom: 2px;
}
}
h1,
h2,
h3,
h4,
h5 {
margin-top: 20px;
margin-bottom: 20px;
}
h1 {
font-weight: 700;
font-size: 22px;
}
h2 {
font-weight: 700;
font-size: 20px;
}
h3,
h4,
h5 {
font-weight: 500;
}
blockquote {
padding-left: 10px;
border-left: 3px solid $darker-text-color;
color: $darker-text-color;
white-space: normal;
p:last-child {
margin-bottom: 0;
}
}
b,
strong {
font-weight: 700;
}
em,
i {
font-style: italic;
}
ul,
ol {
margin-left: 1em;
margin-bottom: 1em;
p {
margin: 0;
}
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
&:last-child {
margin-bottom: 0;
@ -845,7 +906,7 @@
a {
color: $secondary-text-color;
text-decoration: none;
text-decoration: underline;
unicode-bidi: isolate;
&:hover {
@ -857,13 +918,9 @@
}
&.mention {
&:hover {
text-decoration: none;
span {
text-decoration: underline;
}
}
}
.fa {
@ -901,6 +958,10 @@
display: block;
}
}
.article-type img {
max-width: 95%;
}
}
.announcements__item__content {
@ -1177,6 +1238,7 @@
.status__action-bar-dropdown {
height: 23.15px;
width: 23.15px;
margin-right: 18px;
}
.detailed-status__action-bar-dropdown {
@ -2027,6 +2089,13 @@ a.account__display-name {
width: 285px;
pointer-events: auto;
height: 100%;
@media screen and (max-width: 1550px) {
overflow-y: scroll;
overflow-x: hidden;
padding-right: 10px;
}
}
}
@ -2467,6 +2536,12 @@ a.account__display-name {
height: calc(100% - 10px);
overflow-y: hidden;
@media screen and (max-width: 1550px) {
height: auto;
min-height: calc(100% - 10px);
overflow-y: visible;
}
.navigation-bar {
padding-top: 20px;
padding-bottom: 20px;
@ -2493,6 +2568,11 @@ a.account__display-name {
background-color: $white;
border-radius: 4px 4px 0 0;
flex: 0 1 auto;
@media screen and (max-width: 1550px) {
overflow-y: visible;
}
}
.autosuggest-textarea__textarea {
@ -2558,12 +2638,12 @@ a.account__display-name {
}
.drawer__inner__mastodon {
background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
background: lighten($ui-base-color, 13%);
flex: 1;
min-height: 47px;
display: none;
> img {
> img, svg {
display: block;
object-fit: contain;
object-position: bottom left;
@ -2575,7 +2655,7 @@ a.account__display-name {
}
@media screen and (min-height: 640px) {
display: block;
display: flex;
}
}
@ -2801,6 +2881,15 @@ a.account__display-name {
border-color: $ui-highlight-color;
}
label[for="is-exclusive-checkbox"] {
margin-left: 20px;
}
.is-exclusive-checkbox {
transform: scale(0.7);
transform-origin: bottom;
}
.column-link {
background: lighten($ui-base-color, 8%);
color: $primary-text-color;
@ -3301,7 +3390,7 @@ a.status-card.compact:hover {
}
&__label {
margin-top: 30px;
margin-top: 0px;
strong {
display: block;
@ -7257,3 +7346,21 @@ noscript {
text-align: center;
}
}
.drawer__inner__mastodon svg#hometownlogo {
box-sizing: border-box;
fill: $secondary-text-color;
margin: 0 0 10px 10px;
align-self: flex-end;
}
div.status__content,
div.status__content--with-action,
div.status__content--with-spoiler {
p {
span.show_more_button {
display: block;
margin: 0.25rem 0 0 0;
}
}
}

View File

@ -257,6 +257,29 @@
}
}
.originalhero {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: space-between;
svg {
fill: $secondary-text-color;
height: 200px;
}
h1 {
flex-grow: 2;
text-align: center;
white-space: nowrap;
font-family: $font-display, sans-serif;
font-size: 0.6rem;
}
}
.public-layout {
@media screen and (max-width: $no-gap-breakpoint) {
padding-top: 48px;
@ -322,6 +345,7 @@
.brand {
display: block;
padding: 15px;
white-space: nowrap;
svg {
display: block;
@ -476,8 +500,42 @@
border-radius: 4px 4px 0 0;
}
.originalheader {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
align-content: space-between;
svg {
fill: $secondary-text-color;
height: 300px;
}
h1 {
flex-grow: 2;
text-align: center;
white-space: nowrap;
font-family: $font-display, sans-serif;
}
}
@media screen and (max-width: 600px) {
height: 200px;
.originalheader {
svg {
height: 200px;
}
h1 {
font-size: 0.5rem;
}
}
}
}

View File

@ -15,7 +15,6 @@
> * {
flex: 1;
max-height: 235px;
background: url('../images/elephant_ui_plane.svg') no-repeat left bottom / contain;
}
}