Replace StumbleUpon with Mix (#1312)

Co-authored-by: Dawid Potocki <dpot@disroot.org>

_includes/footer.html

@@ -31,8 +31,8 @@
         <i class="fab fa-linkedin-in pl-3"></i>
       </a>
 
-      <a href="http://www.stumbleupon.com/submit?url=https://www.privacytools.io&title=privacytools.io%20-%20encryption%20against%20global%20mass%20surveillance" class="share-btn stumbleupon" title="StumbleUpon">
-        <i class="fab fa-stumbleupon pl-3"></i>
+      <a href="https://mix.com/mixit?su=submit&url=https://www.privacytools.io&title=privacytools.io%20-%20encryption%20against%20global%20mass%20surveillance" class="share-btn mix" title="Mix">
+        <i class="ptio-mix pl-3"></i>
       </a>
 
       <a href="https://sharetodiaspora.github.io/?title=privacytools.io%20-%20encryption%20against%20global%20mass%20surveillance&url=https://www.privacytools.io" class="share-btn diaspora" title="Diaspora*">

_includes/head.html

@@ -43,6 +43,6 @@
   <link rel="shortcut icon" href="/assets/img/favicons/favicon.ico">
 
   <!-- CSS stylesheets -->
-  <link href="/assets/css/style.css?v=6" rel="stylesheet">
-  <link id="dark-css" href="/assets/css/dark.css?v=3" rel="stylesheet" media="(prefers-color-scheme: dark)">
+  <link href="/assets/css/style.css?v=7" rel="stylesheet">
+  <link id="dark-css" href="/assets/css/dark.css?v=4" rel="stylesheet" media="(prefers-color-scheme: dark)">
 </head>

_sass/_vars.scss

@@ -19,7 +19,7 @@ $share-btn-active:    #e2e2e2;
 $twitter:             #55acee;
 $mastodon:            #3088d4;
 $facebook:            #3b5998;
-$stumbleupon:         #eb4823;
+$mix:                 #ff8126;
 $reddit:              #ff5700;
 $linkedin:            #4875b4;
 $email:               #444;

_sass/ptio-font.scss

@@ -28,6 +28,7 @@
 .ptio-ios:before,
 .ptio-linux:before,
 .ptio-macos:before,
+.ptio-mix:before,
 .ptio-netbsd:before,
 .ptio-openbsd:before,
 .ptio-sailfish-os:before {
@@ -47,8 +48,9 @@
 
 .ptio-f-droid:before { content: "\f100"; }
 .ptio-ios:before { content: "\f101"; }
-.ptio-linux:before { content: "\f107"; }
-.ptio-macos:before { content: "\f102"; }
-.ptio-netbsd:before { content: "\f103"; }
-.ptio-openbsd:before { content: "\f104"; }
+.ptio-linux:before { content: "\f102"; }
+.ptio-macos:before { content: "\f103"; }
+.ptio-mix:before { content: "\f107"; }
+.ptio-netbsd:before { content: "\f104"; }
+.ptio-openbsd:before { content: "\f105"; }
 .ptio-sailfish-os:before { content: "\f106"; }

assets/css/dark.scss

@@ -186,7 +186,7 @@ table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted
 .twitter { background: desaturate($twitter, 25%); }
 .mastodon { background: desaturate($mastodon, 25%); }
 .facebook { background: desaturate($facebook, 25%); }
-.stumbleupon { background: desaturate($stumbleupon, 25%); }
+.mix { background: desaturate($mix, 25%); }
 .reddit { background: desaturate($reddit, 25%); }
 .linkedin { background: desaturate($linkedin, 25%); }
 .email { background: desaturate($email, 25%); }

assets/css/style.scss

@@ -158,7 +158,7 @@ h2, h3:not(.h5), h4, h5 {
 .twitter { background: $twitter; }
 .mastodon { background: $mastodon; }
 .facebook { background: $facebook; }
-.stumbleupon { background: $stumbleupon; }
+.mix { background: $mix; }
 .reddit { background: $reddit; }
 .linkedin    { background: $linkedin; }
 .email { background: $email; }

assets/webfonts/ptio-font-preview.html

@@ -165,6 +165,7 @@
 .ptio-ios:before,
 .ptio-linux:before,
 .ptio-macos:before,
+.ptio-mix:before,
 .ptio-netbsd:before,
 .ptio-openbsd:before,
 .ptio-sailfish-os:before {
@@ -184,10 +185,11 @@
 
       .ptio-f-droid:before { content: "\f100"; }
 .ptio-ios:before { content: "\f101"; }
-.ptio-linux:before { content: "\f107"; }
-.ptio-macos:before { content: "\f102"; }
-.ptio-netbsd:before { content: "\f103"; }
-.ptio-openbsd:before { content: "\f104"; }
+.ptio-linux:before { content: "\f102"; }
+.ptio-macos:before { content: "\f103"; }
+.ptio-mix:before { content: "\f107"; }
+.ptio-netbsd:before { content: "\f104"; }
+.ptio-openbsd:before { content: "\f105"; }
 .ptio-sailfish-os:before { content: "\f106"; }
     </style>
 
@@ -204,7 +206,7 @@
   <body class="characters-off">
     <div id="page" class="container">
       <header>
-        <h1>ptio-font contains 7 glyphs:</h1>
+        <h1>ptio-font contains 8 glyphs:</h1>
         <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
       </header>
 
@@ -244,7 +246,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".ptio-linux" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
         </div>
       </div>
       
@@ -257,7 +259,20 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".ptio-macos" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
+        </div>
+      </div>
+      
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="ptio-mix" class="ptio-mix"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="ptio-mix" class="ptio-mix"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="ptio-mix" class="ptio-mix"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="ptio-mix" class="ptio-mix"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="ptio-mix" class="ptio-mix"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="ptio-mix" class="ptio-mix"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="ptio-mix" class="ptio-mix"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="ptio-mix" class="ptio-mix"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="ptio-mix" class="ptio-mix"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="ptio-mix" class="ptio-mix"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".ptio-mix" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
         </div>
       </div>
       
@@ -270,7 +285,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".ptio-netbsd" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
         </div>
       </div>
       
@@ -283,7 +298,7 @@
         </div>
         <div class="usage">
           <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".ptio-openbsd" />
-          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
         </div>
       </div>
       

assets/webfonts/ptio-font.svg

@@ -1,11 +1,11 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <!--
-2019-9-10: Created with FontForge (http://fontforge.org)
+2019-9-22: Created with FontForge (http://fontforge.org)
 -->
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <metadata>
-Created by FontForge 20190801 at Tue Sep 10 20:23:41 2019
+Created by FontForge 20190801 at Sun Sep 22 19:49:38 2019
  By Dawid Potocki
 
 </metadata>
@@ -19,7 +19,7 @@ Created by FontForge 20190801 at Tue Sep 10 20:23:41 2019
     panose-1="2 0 5 3 0 0 0 0 0 0"
     ascent="448"
     descent="-64"
-    bbox="0 -64.0039 512.014 448"
+    bbox="-0.00195312 -64.0039 512.014 448"
     underline-thickness="25.6"
     underline-position="-51.2"
     unicode-range="U+0020-F107"
@@ -46,7 +46,7 @@ c0 -42.3398 -21.6309 -69.249 -55.5283 -69.249c-34.0312 0 -55.5283 26.9062 -55.52
 c0 28.3584 -16.3564 44.3203 -55.0029 53.1543l-21.8955 5.0127c-23.3467 5.54004 -32.9775 12.9268 -32.9775 25.5898c0 15.8281 14.5098 26.3789 36.0088 26.3789c21.7637 0 36.6689 -10.6846 38.251 -28.4893h32.4492
 c-0.791992 33.5029 -28.4883 56.1914 -70.4346 56.1914c-41.4199 0 -70.834 -22.8184 -70.834 -56.585c0 -27.1699 16.6191 -44.0576 51.7051 -52.1006l24.666 -5.80371c24.0049 -5.67188 33.7686 -13.5859 33.7686 -27.3027c0 -15.8281 -15.96 -27.1699 -38.9092 -27.1699
 c-23.2129 0 -40.7568 11.4756 -42.8652 29.0205h-32.9775z" />
-    <glyph glyph-name="linux" unicode="&#xf107;" 
+    <glyph glyph-name="linux" unicode="&#xf102;" 
 d="M451.886 44.2285l-0.000976562 0.00292969c11.0996 -12.3984 15.8984 -21.4971 15.499 -29.6963c-0.5 -8.2002 -6.49902 -13.7998 -13.8994 -18.2988c-14.8994 -8.99902 -37.2979 -15.7988 -50.8965 -32.1973c-14.2002 -16.8984 -31.6992 -26.5977 -48.2969 -27.8975
 c-16.5 -1.30078 -31.998 6.29883 -40.2979 22.998v0.0996094c-1.09961 2.09961 -1.89941 4.39941 -2.49902 6.69922c-21.498 -1.19922 -40.1963 5.2998 -55.0947 4.09961c-21.999 -1.19922 -35.7979 -6.49902 -48.2969 -6.59863
 c-4.7998 -10.5996 -14.2988 -17.5986 -25.8984 -20.1992c-15.9971 -3.69922 -36.0957 0 -55.8936 10.3994c-18.4971 9.79883 -41.9961 8.89941 -59.2949 12.499c-8.69922 1.7998 -16.2979 4.99902 -20.0977 12.2988c-3.7002 7.29883 -3 17.2979 2.19922 31.6973
@@ -69,7 +69,7 @@ c7.39941 -9.99902 9.69922 -18.6982 7.39941 -24.8975c-2.5 -6.7002 -9.59961 -8.899
 c-10 11.3008 -7.10352 30.2266 -16.9805 38.752c-6.92188 5.97363 -6.30957 8.30957 -14.5107 8.71191c-7.7002 -8.79883 -25.7988 -19.5977 -38.3975 -16.2988c-11.499 2.90039 -17.998 10.293 -18.7979 23.4912c-0.299805 -0.199219 -0.700195 -0.299805 -1 -0.5
 c-7.09961 -3.89941 -4.96777 -4.79199 -7.56738 -15.0918c-2.5 -10.1992 -3.40039 -23.498 -4.2002 -38.6973c-0.700195 -11.7998 -6.19922 -26.3984 -9.89941 -40.5967c-3.49902 -13.1992 -6.50391 -17.6836 -1.80371 -28.7832
 c7.19922 -14.498 13.8164 -20.3359 28.0146 -19.2363c14.1982 1.10059 28.6523 10.9092 41.8516 26.6074c21.9971 26.5977 54.4004 20.4707 55.2998 37.2686z" />
-    <glyph glyph-name="macos" unicode="&#xf102;" 
+    <glyph glyph-name="macos" unicode="&#xf103;" 
 d="M22.3262 393.681h467.347c12.3691 0 22.3262 -9.95703 22.3262 -22.3262v-358.71c0 -12.3691 -9.95703 -22.3262 -22.3262 -22.3262h-467.347c-12.3691 0 -22.3262 9.95703 -22.3262 22.3262v358.71c0 12.3691 9.95801 22.3262 22.3262 22.3262zM300.661 369.122
 l-0.000976562 -0.0146484c-36.5176 -22.0273 -54 -80.3857 -76.6523 -205.402h76.6523v-38.3877h0.015625v-40.0879c22.4736 5.59863 49.1221 16.54 74.249 37.6279c1.98633 1.61719 4.37598 2.4043 6.74707 2.4082c3.04688 0.00488281 6.06152 -1.28711 8.13965 -3.78125
 c3.80176 -4.43457 3.16797 -11.0869 -1.2666 -14.8877c-29.9707 -25.0566 -61.8877 -37.2373 -87.8691 -43.0752v-39.0908c0.287109 -5.34766 4.68652 -9.56738 10.1084 -9.56738h170.269c5.60938 0 10.125 4.51562 10.125 10.125v334.01
@@ -77,7 +77,11 @@ c0 5.6084 -4.51562 10.124 -10.125 10.124h-180.392zM126.22 311.817c-6.59766 0 -11
 M130.371 125.282h0.000976562c-3.04004 0.00488281 -6.08008 -1.28613 -8.21875 -3.78125c-3.69531 -4.43457 -3.16699 -11.0859 1.37305 -14.8877c17.3174 -14.4668 64.8281 -48.1475 132.511 -48.1475c3.70117 0 8.45508 0.0996094 13.9736 0.558594v21.123
 c-0.618164 -0.0507812 -1.23438 -0.100586 -1.83203 -0.142578c-4.75098 -0.316406 -8.86914 -0.422852 -12.1416 -0.422852c-60.8193 0 -103.477 30.1992 -118.997 43.292c-1.94043 1.61621 -4.30469 2.4043 -6.66895 2.4082zM385.811 311.818
 c6.59668 0 11.9082 -5.31055 11.9082 -11.9072v-47.6279c0 -6.59668 -5.31152 -11.9072 -11.9082 -11.9072c-6.5957 0 -11.9072 5.31055 -11.9072 11.9072v47.6279c0 6.59668 5.31152 11.9072 11.9072 11.9072z" />
-    <glyph glyph-name="netbsd" unicode="&#xf103;" 
+    <glyph glyph-name="mix" unicode="&#xf107;" 
+d="M-0.00195312 443.982l512.007 -0.0517578v-284.611c0 -27.709 -23.001 -50.166 -51.3604 -50.166c-28.3701 0 -51.3721 22.4561 -51.3721 50.1543v25.5312c0 27.709 -23.001 50.165 -51.3604 50.165c-26.0381 0 -47.5518 -18.918 -50.9121 -43.4502v-77.7139
+c-0.0107422 -27.7305 -22.916 -50.208 -51.1689 -50.208c-28.2637 0 -51.168 22.4775 -51.168 50.2188v196.529c0 27.7402 -22.9062 50.2295 -51.1689 50.2295c-26.9404 0 -49.002 -20.4502 -50.998 -46.3867l-0.0322266 -324.046
+c0 -27.709 -22.9375 -50.166 -51.2324 -50.166c-28.2959 0 -51.2334 22.457 -51.2334 50.166v453.806z" />
+    <glyph glyph-name="netbsd" unicode="&#xf104;" 
 d="M98.8613 362.14c0 0 -1.45508 3.38184 -5.55566 1.11816c-3.40918 -1.89062 -1.63574 -5.38379 -1.63574 -5.38379l64.0791 -135.497h15.5439l-72.4336 139.764zM280.757 11.126l-48.4775 93.5566h-20.876l48.6963 -102.967s4.90723 -9.69141 15.4375 -4.33398
 c10.5264 5.35742 5.22168 13.7441 5.22168 13.7441zM459.44 371.419c-60.7549 29.1592 -115.723 15.2344 -177.202 -3.16406c-61.8916 -18.5117 -116.944 -28.5312 -178.791 -3.29785c6.7373 -12.0391 10.1104 -18.0576 16.8516 -30.0869
 c6.18848 -11.0654 12.3857 -22.1299 18.5771 -33.1904c6.74023 -12.0361 10.1094 -18.0498 16.8506 -30.084c49.2402 -13.917 90.0186 4.13184 133.778 26.0068c52.5449 26.2529 100.007 49.8721 160.042 36.1875c-50.7344 25.4053 -96.7275 19.1094 -149.778 4.7168
@@ -113,7 +117,7 @@ c0 3.2373 -1.14062 5.99902 -3.42578 8.28516c-2.28418 2.28418 -5.04395 3.42773 -8
 c2.29004 -2.28809 5.05664 -3.43555 8.29395 -3.43555c3.24023 0 6 1.14746 8.28418 3.43555c2.28516 2.29199 3.42578 5.05664 3.42578 8.2959zM502.343 211.687l-4.39551 7.43066h-2.49609v-7.43066h-2.45117v17.2354h4.42285
 c4.15039 0 6.22461 -1.59082 6.22461 -4.76953c0 -2.21191 -1.11621 -3.77637 -3.34863 -4.6875l4.72559 -7.77832h-2.68164zM495.451 226.835v-5.76172c0.206055 -0.0283203 0.744141 -0.0390625 1.61133 -0.0390625c1.60059 0 2.67773 0.204102 3.22852 0.613281
 c0.552734 0.412109 0.829102 1.19434 0.829102 2.35059c0 1.90527 -1.24219 2.8584 -3.72461 2.8584h-0.97168l-0.972656 -0.0214844z" />
-    <glyph glyph-name="openbsd" unicode="&#xf104;" 
+    <glyph glyph-name="openbsd" unicode="&#xf105;" 
 d="M236.825 430.384l-0.00390625 -0.000976562c6.49023 0 15.1904 -30.6533 18.166 -41.9072c11.9443 -1.06055 23.7666 -3.20703 35.3203 -6.41113c6.5127 11.2148 21.3896 35.4941 27.3115 33.9072c6.64844 -1.7832 6.77246 -37.4941 6.6875 -47.041
 c8.88672 -4.53125 16.7617 -9.33594 25.5195 -15.2646c9.5791 9.46777 29.1562 27.7998 34.2979 24.8311c6.54102 -3.77344 -4.96484 -44.5771 -6.1377 -48.6709c6.08301 -6.29785 11.4844 -12.7168 17.2871 -20.3496c12.0723 6.8125 34.1689 18.4023 38.2178 14.3535
 c5.62012 -5.62012 -18.1172 -46.1211 -18.1172 -46.1211c7.46484 -14.1406 14.3145 -36.8926 17.1396 -61.5322h11.04c4.85938 23.1143 5.38184 63.6875 36.2412 63.8926c20.2002 -0.160156 35.7412 -40.6865 31.4912 -66.792

font/svg/mix.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="112pc" height="112pc" version="1.1" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(30.912 0 0 30.912 200.14 234.56)" fill-rule="evenodd"><path d="m-6.4747-7.1331v51.382c0 3.1373 2.5971 5.68 5.8008 5.68 3.2037 0 5.8008-2.5427 5.8008-5.68l0.00366-36.69c0.22599-2.9367 2.7239-5.2521 5.7742-5.2521 3.2001 0 5.7936 2.5463 5.7936 5.6872v22.252c0 3.1409 2.5934 5.686 5.7935 5.686 3.1989 0 5.7924-2.5451 5.7936-5.6848v-8.7991c0.38048-2.7777 2.8163-4.9197 5.7645-4.9197 3.211 0 5.8153 2.5426 5.8153 5.6799v2.8908c0 3.1361 2.6043 5.6787 5.8165 5.6787 3.211 0 5.8153-2.5427 5.8153-5.68v-32.225z" stroke-width="1.2085"/></g></svg>