Adjust mobile width issues (#2051)

docs/assets/stylesheets/extra.css

@@ -319,8 +319,8 @@ details[class="downloads annotate"] > p .md-annotation span span::before {
     color: var(--pg-blue-gray);
 }
 
-/* Make light/dark mode icon smaller */
+/* Make header icons smaller */
-label[class="md-header__button md-icon"] svg {
+.md-header__button.md-icon svg {
     height: 1rem;
     width: 1rem;
 }

docs/assets/stylesheets/home.css

@@ -67,3 +67,36 @@
 nav[class="md-tabs"] {
     border-bottom: none;
 }
+
+/* Homepage Body */
+.md-typeset a.headerlink {
+    display: none;
+}
+article.md-content__inner {
+    max-width: 50rem;
+    margin: auto;
+    padding-bottom: 3rem;
+}
+article.md-content__inner > * {
+    max-width: 38rem;
+}
+article.md-content__inner > *:nth-child(n+7):nth-child(-n+11) {
+    margin-left: auto;
+    margin-right: 0;
+    text-align: right;
+}
+article.md-content__inner > hr {
+    margin: 3rem;
+}
+article.md-content__inner > *:nth-child(n+12) {
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+article.md-content__inner > *:nth-child(n+12) a:has(.twemoji) {
+    display: inline-block;
+}
+article.md-content__inner > *:nth-child(n+12) .twemoji {
+    --md-icon-size: 1.8em;
+    margin: 0.4rem;
+}

docs/index.en.md

@@ -6,8 +6,6 @@ hide:
   - feedback
 ---
 <!-- markdownlint-disable-next-line -->
-<div style="max-width:50rem;margin:auto;" markdown>
-<div style="max-width:38rem;" markdown>
 ## Why should I care?
 
 ##### “I have nothing to hide. Why should I care about my privacy?”
@@ -17,9 +15,7 @@ Much like the right to interracial marriage, woman's suffrage, freedom of speech
 You shouldn't confuse privacy with secrecy. We know what happens in the bathroom, but you still close the door. That's because you want privacy, not secrecy. **Everyone** has something to protect. Privacy is something that makes us human.
 
 [:material-target-account: Common Internet Threats](basics/common-threats.md){ .md-button .md-button--primary }
-</div>
 
-<div style="margin-left:auto;margin-right:0;text-align:right;max-width:38rem;" markdown>
 ## What should I do?
 
 ##### First, you need to make a plan
@@ -29,24 +25,19 @@ Trying to protect all your data from everyone all the time is impractical, expen
 ==This process of identifying threats and defining countermeasures is called **threat modeling**==, and it forms the basis of every good security and privacy plan.
 
 [:material-book-outline: Learn More About Threat Modeling](basics/threat-modeling.md){ .md-button .md-button--primary }
-</div>
-</div>
 
-<div style="padding:3em;max-width:960px;margin:auto;text-align:center;" markdown>
+---
+
 ## We need you! Here's how to get involved:
 
+[:simple-discourse:](https://discuss.privacyguides.net/){ title="Join our Forum" }
+[:simple-mastodon:](https://mastodon.neat.computer/@privacyguides){ rel=me title="Follow us on Mastodon" }
+[:material-book-edit:](https://github.com/privacyguides/privacyguides.org){ title="Contribute to this website" }
+[:material-translate:](https://matrix.to/#/#pg-i18n:aragon.sh){ title="Help translate this website" }
+[:simple-matrix:](https://matrix.to/#/#privacyguides:matrix.org){ title="Chat with us on Matrix" }
+[:material-information-outline:](about/index.md){ title="Learn more about us" }
+[:material-hand-coin-outline:](about/donate.md){ title="Support the project" }
+
 It's important for a website like Privacy Guides to always stay up-to-date. We need our audience to keep an eye on software updates for the applications listed on our site and follow recent news about providers that we recommend. It's hard to keep up with the fast pace of the internet, but we try our best. If you spot an error, think a provider should not be listed, notice a qualified provider is missing, believe a browser plugin is no longer the best choice, or uncover any other issue, please let us know.
 
-<div class="grid cards" style="margin:auto;max-width:800px;text-align:center;" markdown>
-
-- [:simple-discourse: Join our forum](https://discuss.privacyguides.net/)
-- [:simple-mastodon: Follow us on Mastodon](https://mastodon.neat.computer/@privacyguides){ rel=me }
-- [:material-book-edit: Contribute to this website](https://github.com/privacyguides/privacyguides.org)
-- [:simple-matrix: Chat with us on Matrix](https://matrix.to/#/#privacyguides:matrix.org)
-- [:material-information-outline: Learn more about us](about/index.md)
-- [:material-hand-coin-outline: Support the project](about/donate.md)
-
-</div>
-</div>
-
 --8<-- "includes/abbreviations.en.txt"

mkdocs.yml

@@ -53,6 +53,7 @@ watch:
 plugins:
   i18n:
     default_language: en
+    default_language_only: !ENV [FAST, false]
     material_alternate: true
     languages:
       en:

theme/overrides/home.en.html

@@ -1,6 +1,6 @@
 {% extends "main.html" %}
 {% block extrahead %}
-  <link rel="stylesheet" href="{{ 'assets/stylesheets/home.css?v=2.10.0' | url }}">
+  <link rel="stylesheet" href="{{ 'assets/stylesheets/home.css?v=3.3.0' | url }}">
   {{ super() }}
 {% endblock %}
 {% block tabs %}

theme/partials/header.html

@@ -39,20 +39,6 @@
         </label>
         {% include "partials/search.html" %}
         {% endif %}
-        {% if not config.theme.palette is mapping %}
-        <form class="md-header__option" data-md-component="palette">
-            {% for option in config.theme.palette %}
-            {% set primary = option.primary | replace(" ", "-") | lower %}
-            {% set accent  = option.accent  | replace(" ", "-") | lower %}
-            <input class="md-option" data-md-color-media="{{ option.media }}" data-md-color-scheme="{{ option.scheme }}" data-md-color-primary="{{ primary }}" data-md-color-accent="{{ accent }}" {% if option.toggle %} aria-label="{{ option.toggle.name }}" {% else %} aria-hidden="true" {% endif %} type="radio" name="__palette" id="__palette_{{ loop.index }}">
-            {% if option.toggle %}
-                <label class="md-header__button md-icon" title="{{ lang.t(option.toggle.name) }}" for="__palette_{{ loop.index0 or loop.length }}" hidden>
-                {% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
-                </label>
-            {% endif %}
-            {% endfor %}
-        </form>
-        {% endif %}
         {% if config.extra.alternate %}
         <div class="md-header__option">
             <div class="md-select">
@@ -74,6 +60,20 @@
             </div>
         </div>
         {% endif %}
+        {% if not config.theme.palette is mapping %}
+        <form class="md-header__option" data-md-component="palette">
+            {% for option in config.theme.palette %}
+            {% set primary = option.primary | replace(" ", "-") | lower %}
+            {% set accent  = option.accent  | replace(" ", "-") | lower %}
+            <input class="md-option" data-md-color-media="{{ option.media }}" data-md-color-scheme="{{ option.scheme }}" data-md-color-primary="{{ primary }}" data-md-color-accent="{{ accent }}" {% if option.toggle %} aria-label="{{ option.toggle.name }}" {% else %} aria-hidden="true" {% endif %} type="radio" name="__palette" id="__palette_{{ loop.index }}">
+            {% if option.toggle %}
+                <label class="md-header__button md-icon" title="{{ lang.t(option.toggle.name) }}" for="__palette_{{ loop.index0 or loop.length }}" hidden>
+                {% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
+                </label>
+            {% endif %}
+            {% endfor %}
+        </form>
+        {% endif %}
     </nav>
     {% if "navigation.tabs.sticky" in features %}
         {% if "navigation.tabs" in features %}