From 3ce86078e1b6cf1f3bf8ef2fe9af5a0aeba6fc06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Tue, 9 Feb 2021 18:19:17 +0100 Subject: [PATCH 1/5] Remove unused styles for button-telegram We only use the button-* classes in the sign in form, and there's no "Sign in through Telegram" feature. --- app/assets/stylesheets/layout.scss | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 64ff558d6..b253cfcc0 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1538,8 +1538,7 @@ table { .button.button-twitter, .button.button-facebook, .button.button-google, -.button.button-wordpress, -.button.button-telegram { +.button.button-wordpress { background: #fff; color: $text; font-weight: bold; @@ -1648,16 +1647,6 @@ table { } } -.button.button-telegram { - background: #ecf7fc; - border-left: 3px solid #08c; - - &::before { - color: #08c; - content: "1"; - } -} - .ssb-telegram { background: #08c; @@ -1686,7 +1675,6 @@ table { @include breakpoint(medium) { - .button.button-telegram, .ssb-telegram, .ssb-whatsapp_app { display: none !important; From b867243e83a2244fc6245ae0ca60d32f171bd242 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Tue, 9 Feb 2021 18:56:41 +0100 Subject: [PATCH 2/5] Remove redundant background property The property is overwritten for each icon. --- app/assets/stylesheets/layout.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index b253cfcc0..c9f898506 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1539,7 +1539,6 @@ table { .button.button-facebook, .button.button-google, .button.button-wordpress { - background: #fff; color: $text; font-weight: bold; height: $line-height * 2; From 60c3fd2fff280b9fe7829fa2c98c4e92f7c2d209 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Tue, 9 Feb 2021 19:00:11 +0100 Subject: [PATCH 3/5] Use google icon in sign in page We were using the icon for google plus, which was confusing since google plus no longer exists. Note this change requires changing the font for these icons, since the google icon is not present in the "icons" font. On the plus side, using the font awesome icons we can simplify the code a little bit. --- app/assets/stylesheets/layout.scss | 18 ++++-------------- app/assets/stylesheets/mixins.scss | 10 +++++++--- 2 files changed, 11 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index c9f898506..a84677d07 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1541,29 +1541,19 @@ table { .button.button-wordpress { color: $text; font-weight: bold; - height: $line-height * 2; - line-height: $line-height * 2; - padding: 0; - position: relative; &::before { - font-family: "icons" !important; font-size: rem-calc(24); - left: 0; - line-height: $line-height * 2; - padding: 0 rem-calc(20); - position: absolute; - top: 0; } } .button.button-twitter { + @include has-fa-icon(twitter, brands); background: #ecf7fc; border-left: 3px solid #45b0e3; &::before { color: #45b0e3; - content: "f"; } } @@ -1604,12 +1594,12 @@ table { } .button.button-facebook { + @include has-fa-icon(facebook-f, brands); background: #ebeef4; border-left: 3px solid #3b5998; &::before { color: #3b5998; - content: "A"; } } @@ -1627,22 +1617,22 @@ table { } .button.button-google { + @include has-fa-icon(google, brands); background: #fcedea; border-left: 3px solid #de4c34; &::before { color: #de4c34; - content: "B"; } } .button.button-wordpress { + @include has-fa-icon(wordpress, brands); background: #dcdde3; border-left: 3px solid #2f2f33; &::before { color: #2f2f33; - content: "J"; } } diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index 0974541c1..534d0b6c9 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -169,10 +169,14 @@ &::before { @extend %font-icon; - @if $style == "regular" { - font-weight: normal; - } @else { + @if $style == "solid" { font-weight: bold; + } @else { + font-weight: normal; + } + + @if $style == "brands" { + font-family: "Font Awesome 5 Brands"; } } From 741f2fc1410766da5b43317f0b1e6d339880da96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 14 Feb 2021 14:42:40 +0100 Subject: [PATCH 4/5] Use icon width variable in SSB icons The font size and the line-height were chosen according to the width of the icon; we're now making it clear. --- app/assets/stylesheets/layout.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index a84677d07..45631681d 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1566,9 +1566,9 @@ table { &::before { font-family: "icons"; - font-size: rem-calc(24); + font-size: $icon-width / 2; left: 50%; - line-height: $line-height * 2; + line-height: $icon-width; margin-left: rem-calc(-11); position: absolute; top: 0; From 7ce61ced85f471b969aca5f76dbedaad0c50263f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 14 Feb 2021 14:46:27 +0100 Subject: [PATCH 5/5] Use font awesome in social share icons Since we've changed the facebook and twitter login icons, it makes sense to use the same icons in social share links. Besides, using font-awesome simplifies the code and prevents problems with screen readers announcing the value of the `content:` CSS property. --- app/assets/stylesheets/layout.scss | 30 +++++++----------------------- 1 file changed, 7 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 45631681d..d993372ab 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1561,17 +1561,13 @@ table { background-image: none; color: #fff; height: $icon-width; - position: relative; + line-height: $icon-width; + text-align: center; width: $icon-width; &::before { - font-family: "icons"; font-size: $icon-width / 2; - left: 50%; - line-height: $icon-width; - margin-left: rem-calc(-11); - position: absolute; - top: 0; + margin-right: 0; } &:hover, @@ -1581,12 +1577,9 @@ table { } .ssb-twitter { + @include has-fa-icon(twitter, brands); background: #45b0e3; - &::before { - content: "f"; - } - &:hover, &:focus { color: #40a2d1; @@ -1604,12 +1597,9 @@ table { } .ssb-facebook { + @include has-fa-icon(facebook-f, brands); background: #3b5998; - &::before { - content: "A"; - } - &:hover, &:focus { color: #354f88; @@ -1637,12 +1627,9 @@ table { } .ssb-telegram { + @include has-fa-icon(telegram-plane, brands); background: #08c; - &::before { - content: "1"; - } - &:hover, &:focus { color: #40a2d1; @@ -1650,12 +1637,9 @@ table { } .ssb-whatsapp_app { + @include has-fa-icon(whatsapp, brands); background: #43d854; - &::before { - content: "P"; - } - &:hover, &:focus { color: #43d854;