Hide the links in the html topbar on small screens

customize.dist/about.html

@@ -31,16 +31,16 @@
     <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
-    <span class="right">
+    <span class="link right">
         <a href="/about.html" data-localization="about">About</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/privacy.html" data-localization="privacy">Privacy</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/terms.html" data-localization="terms">ToS</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/contact.html" data-localization="contact">Contact</a>
     </span>
 </div>

customize.dist/contact.html

@@ -31,16 +31,16 @@
     <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
-    <span class="right">
+    <span class="link right">
         <a href="/about.html" data-localization="about">About</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/privacy.html" data-localization="privacy">Privacy</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/terms.html" data-localization="terms">ToS</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/contact.html" data-localization="contact">Contact</a>
     </span>
 </div>

customize.dist/index.html

@@ -31,16 +31,16 @@
     <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
-    <span class="right">
+    <span class="link right">
         <a href="/about.html" data-localization="about">About</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/privacy.html" data-localization="privacy">Privacy</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/terms.html" data-localization="terms">ToS</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/contact.html" data-localization="contact">Contact</a>
     </span>
 </div>

customize.dist/main.css

@@ -460,6 +460,11 @@
 #cryptpadTopBar .right a:visited {
   color: #41b7d8;
 }
+@media screen and (max-width: 800px) {
+  #cryptpadTopBar .right.link {
+    display: none;
+  }
+}
 .cp footer {
   background: #f4f4f4;
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

customize.dist/privacy.html

@@ -31,16 +31,16 @@
     <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
-    <span class="right">
+    <span class="link right">
         <a href="/about.html" data-localization="about">About</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/privacy.html" data-localization="privacy">Privacy</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/terms.html" data-localization="terms">ToS</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/contact.html" data-localization="contact">Contact</a>
     </span>
 </div>

customize.dist/src/fragments/topbar.html

@@ -8,16 +8,16 @@
     <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
-    <span class="right">
+    <span class="link right">
         <a href="/about.html" data-localization="about">About</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/privacy.html" data-localization="privacy">Privacy</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/terms.html" data-localization="terms">ToS</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/contact.html" data-localization="contact">Contact</a>
     </span>
 </div>

customize.dist/src/less/topbar.less

@@ -60,5 +60,11 @@
                 color: @cp-link-visited;
             }
         }
+
+        &.link {
+            @media screen and (max-width: @media-not-big) {
+                display: none;
+            }
+        }
     }
 }

customize.dist/terms.html

@@ -31,16 +31,16 @@
     <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
-    <span class="right">
+    <span class="link right">
         <a href="/about.html" data-localization="about">About</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/privacy.html" data-localization="privacy">Privacy</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/terms.html" data-localization="terms">ToS</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/contact.html" data-localization="contact">Contact</a>
     </span>
 </div>

www/settings/index.html

@@ -32,16 +32,16 @@
     <!--<span class="slogan" data-localization="main_slogan"></span>-->
 
     <span id="language-selector" class="right dropdown-bar"></span>
-    <span class="right">
+    <span class="link right">
         <a href="/about.html" data-localization="about">About</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/privacy.html" data-localization="privacy">Privacy</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/terms.html" data-localization="terms">ToS</a>
     </span>
-    <span class="right">
+    <span class="link right">
         <a href="/contact.html" data-localization="contact">Contact</a>
     </span>
 </div>