diff --git a/v2/content/posts/2023/hide-sign-in-with-google/index.md b/v2/content/posts/2023/hide-sign-in-with-google/index.md new file mode 100644 index 0000000..54b0375 --- /dev/null +++ b/v2/content/posts/2023/hide-sign-in-with-google/index.md @@ -0,0 +1,45 @@ ++++ +title = "Hide Sign in With Google Pop Up" +date = 2023-01-20T20:48:02+10:00 + +#[extra] +#updated = 2023-01-11T21:11:28+10:00 ++++ + +Inspired by +[Rach Smith's post on using userstyles to hide YouTube shorts][rachsmith] +I came up with some CSS to hide those +annoying Sign in with Google pop-ups. + + + +I never want to sign in with Google and use [Firefox Multi-Account Containers][containers] +to ensure that the bulk of my browsing is done without ever being +signed in to a Google account. This means that I see a lot of these pop ups +encouraging me to sign in, so Google can track me more. + +{{ figure_no(image="posts/2023/hide-sign-in-with-google/sign-in-with-google.png", border=true, width=357, alt="Screenshot of the pop up", caption="Be gone evil pop up") }} + +I use [Stylus] to manage user styles. I created a new rule that applies to all +sites and put this CSS in there: + +```css +#credential_picker_container:has(iframe[src*="accounts.google.com"]) { + display: none; +} +``` + +Note that it uses the [`:has`][has] selector, which is not on by default in Firefox +at the time of writing. In Firefox 103 onwards you can enable it by toggling +`layout.css.has-selector.enabled` (the usual caveats about poking around in +[`about:config`][about-config] apply). + +If you do browse while signed in to a Google account, Aranjedeath on the Fediverse +pointed out that [you can turn them off in your account settings][Aranjedeath]. + +[containers]: https://support.mozilla.org/en-US/kb/containers +[Aranjedeath]: https://hachyderm.io/@Aranjedeath/109720032830494381 +[rachsmith]: https://rachsmith.com/remove-youtube-shorts/ +[Stylus]: https://github.com/openstyles/stylus +[about-config]: https://support.mozilla.org/en-US/kb/about-config-editor-firefox +[has]: https://developer.mozilla.org/en-US/docs/Web/CSS/:has \ No newline at end of file diff --git a/v2/content/posts/2023/hide-sign-in-with-google/sign-in-with-google.png b/v2/content/posts/2023/hide-sign-in-with-google/sign-in-with-google.png new file mode 100644 index 0000000..3739d97 Binary files /dev/null and b/v2/content/posts/2023/hide-sign-in-with-google/sign-in-with-google.png differ diff --git a/v2/sass/screen.scss b/v2/sass/screen.scss index 5fb14a3..13ba41a 100644 --- a/v2/sass/screen.scss +++ b/v2/sass/screen.scss @@ -360,6 +360,20 @@ ul.projects { margin-bottom: 3em; } +.no-overlay { + position: relative; +} +.no-overlay::after { + content: '🚫'; + position: absolute; + top: 30px; + left: 0; + right: 0; + bottom: 0; + font-size: 96pt; + z-index: 1; +} + .socials { margin-top: 2em; diff --git a/v2/templates/shortcodes/figure_no.html b/v2/templates/shortcodes/figure_no.html new file mode 100644 index 0000000..5e1289f --- /dev/null +++ b/v2/templates/shortcodes/figure_no.html @@ -0,0 +1,26 @@ +{% if border %} +
+{% else %} +
+{% endif %} + {% if resize_width %} + {% set image = resize_image(path=image, width=resize_width, op="fit_width", quality=quality | default(value=75)) %} + {% if width %} + {{ alt }} + {% else %} + {{ alt }} + {% endif %} + {% elif resize_height %} + {% set image = resize_image(path=image, height=resize_height, op="fit_height", quality=quality | default(value=75)) %} + {% if height %} + {{ alt }} + {% else %} + {{ alt }} + {% endif %} + {% elif width %} + {{ alt }} + {% else %} + {{ alt }} + {% endif %} +
{{ caption }}
+