Update python.org socialize menu to include a link to the PSF Mastodon account

[mlcohen]

Updated socialize menu to include a link to the official PSF Mastodon account.

Details:

• Added a Mastodon icon to the Pythonicon font family. Used IcoMoon to generate fonts
• Updated all related CSS and Sass files
• Updated the socialize menu in the base.html template

To see all rendered Pythonicon fonts, open static/fonts/demo.html

Related Github issue: #2322

Before Update

After Update

(Screenshot was taken from localhost)

[hugovk]

Thanks!

• Added a Mastodon icon to the Pythonicon font family. Used IcoMoon to generate fonts

For future reference, please could you give a brief overview of how to do this?

[mlcohen]

could you give a brief overview of how to do this?

Sure thing!

Here's what I did to get the Mastodon icon added to the collection of Pythonicon fonts...

First, I started by opening the IcoMoon web app (it's free to use). In the app, I created a new empty set.

Next, I imported the Pythonicon.json file in the static/fonts folder.

Once imported, I selected the Twitter icon and downloaded the individual SVG file to use as a template to create the Mastodon icon. To create the icon, I used Inkscape.

Using the Twitter SVG icon, I deleted the bird and kept the background. I then downloaded the official Mastodon icon (SVG file). I copied the Mastodon SVG path, scaled it up, and centered it within the background box. Finally, I used the path exclusion command to subtract the Mastodon path from the background path. Once done, I saved it as a new SVG file (mastodon.svg).

Back in the IcoMoon app, I imported the mastodon SVG using the 'Import to Set' command. This will place the Mastodon SVG icon to the start on the icon set. Check that the Mastodon icon's tag and name are both set to "mastodon".

To keep the icon order the same, I moved the Mastodon icon to the end of the set. I also moved the last pythonicons set containing the bullhorn icon to the top.

Last step is to generate the fonts. I selected all the icons and then clicked the 'Generate Font' command at the bottom of the app. This will open the generate font workspace. In the workspace, you should see all the icons you want to be part of your font file collection.

You shouldn't have to make any modifications. Do verify that the help icon is assigned unicode character 3f (?) and the close icon is assigned unicode character 58 (X).

The final step I took before creating the fonts was to open the font setting and changing the font name to "Pythonicon". I also kept the support IE8 option on.

With that, click the 'Download' button. You'll get a zip file with font files .eot, .ttf, .woff and .svg.

The zip also includes a style.css file that you'll use to copy over some of the CSS directives into the repo's static/sass folder. The style.css file does not inline the TTF and WOFF fonts as base64 encoded. You'll have to do that which is simple to do. Just run base64

$ cat Pythonicon.ttf | base64 > Pythonicon.ttf.base64

You can then copy the file content and update the style.css file, like so:

@font-face {
  font-family: 'Pythonicon';
  src:url('Pythonicon.eot');
}
@font-face {
  font-family: 'Pythonicon';
  src: 
     url(data:application/x-font-woff;charset=utf-8;base64,<YOUR BASE64 WOFF CONTENT HERE>) format('woff'),
     url(data:application/x-font-ttf;charset=utf-8;base64,<YOUR BASE64 TTF CONTENT HERE>) format('truetype');
  font-weight: normal;
  font-style: normal;
}

Something else to note: When updating the CSS and Sass, be sure to reassign the content value for the search icons. For .icon-search:before should have content value "\e613" and .icon-search-alt:before should have content value "\e612". This will assure that the right search icon is being used. Admittedly I could have changed this when generating the fonts but it wasn't apparent until I ran the python app on my local machine. Updating the CSS was simple to do.

[hugovk]

Thank you for the work and for the instructions!

It almost seems worth replacing it with an icon library, but that's another discussion.

[ewdurbin]

Excellent work thank you @mlcohen.