Add sign in with google post

This commit is contained in:
Wesley Moore 2023-01-20 20:48:37 +10:00
parent 0a4f1d2a45
commit e0209f1456
No known key found for this signature in database
4 changed files with 85 additions and 0 deletions

View file

@ -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.
<!-- more -->
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

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

View file

@ -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;

View file

@ -0,0 +1,26 @@
{% if border %}
<figure class="text-center figure-border no-overlay">
{% else %}
<figure class="text-center no-overlay">
{% endif %}
{% if resize_width %}
{% set image = resize_image(path=image, width=resize_width, op="fit_width", quality=quality | default(value=75)) %}
{% if width %}
<img src="{{ image.url }}" width="{{ width }}" alt="{{ alt }}" />
{% else %}
<img src="{{ image.url }}" alt="{{ alt }}" />
{% endif %}
{% elif resize_height %}
{% set image = resize_image(path=image, height=resize_height, op="fit_height", quality=quality | default(value=75)) %}
{% if height %}
<img src="{{ image.url }}" style="max-height: {{ height }}px" alt="{{ alt }}" />
{% else %}
<img src="{{ image.url }}" alt="{{ alt }}" />
{% endif %}
{% elif width %}
<img src="{{ config.base_url }}/{{ image }}" width="{{ width }}" alt="{{ alt }}" />
{% else %}
<img src="{{ config.base_url }}/{{ image }}" alt="{{ alt }}" />
{% endif %}
<figcaption>{{ caption }}</figcaption>
</figure>