First-pass implementation of new design for home page.

Uses a combination of CSS changes and Tachyons classes to implement the design. Adds the non-minified Tachyons CSS library itself and SVG icons from Font Awesome.
2021-10-13 21:40:46 +11:00 · 2021-10-13 21:40:46 +11:00 · 32dd831a50
commit 32dd831a50
parent 128529dc6a
6 changed files with 3528 additions and 120 deletions
--- a/www/conservancy/static/css/conservancy.css
+++ b/www/conservancy/static/css/conservancy.css
@ -5,23 +5,88 @@ body { margin: 0; padding: 0; }
 .hidden { display: none; }

 p, h1, h2, h3, h4, h5, h6, #mainContent ul, #mainContent ol {
-  margin-top: 1em;
+  /* margin-top: 1em; */
  margin-bottom: 1em;
 }

-body {
-/*  font-family: "Lucida Grande",Verdana,Lucida,Helvetica,Arial,sans-serif; */
-  font-family: "Lucida Sans Unicode", "Lucida Grande", "Verdana", "FreeSans", sans-serif;
-  font-size: large;
+p {
+  line-height: 1.6;
 }

-a { text-decoration: none; color: #557733; }
-a:hover { text-decoration: underline; color: #577632; }
+html {
+  /* Standard colorss. */
+  --khaki-green: #587733;
+  --light-green: #afe478;
+  --light-blue: #92d4d1;
+  --navy: #224c57;
+  --orange: #ec6343;
+  --orange-dim: #e05340;
+}
+
+/* Some Tachyons-like classes to apply those standard colors. */
+.bg-light-blue { background: var(--light-blue); }
+.bg-orange { background: var(--orange); }
+.orange { color: var(--orange); }
+.b--light-blue { border-color: var(--light-blue); }
+.navy { color: var(--navy); }
+
+body {
+  /* Native font stack as per Bootstrap 5.1. */
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue", Arial,
+    "Noto Sans",
+    "Liberation Sans",
+    sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: .875rem;
+  color: #333;
+}
+
+a {
+  text-decoration: none;
+  color: var(--navy);
+  transition: all .2s ease;
+  font-weight: bold;
+}
+a:hover { text-decoration: underline; }
+
 a.read-more {
    cursor: pointer;
    font-style: italic;
 }

+.btn-orange {
+  color: white;
+  background: var(--orange);
+  border: 1px solid var(--orange-dim);
+}
+.btn-orange:hover {
+  background: var(--orange-dim);
+  text-decoration: none;
+  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+}
+.btn-white {
+  color: var(--orange);
+  background: white;
+}
+.btn-white:hover {
+  background: #eee;
+  text-decoration: none;
+  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
+}
+
+
+a svg {
+  transition: all .2s ease;
+}
+a:hover svg {
+  transform: scale(1.1);
+}
+
 .toggle-control  {
 cursor: pointer;
 text-decoration: none; color: #557733;
@ -49,15 +114,11 @@ p.footnote {
 }

 h1 { margin-top: .75em; margin-bottom: .5em; }
-h2 { margin-top: .75em; margin-bottom: .5em; }
+/* h2 { margin-top: .75em; margin-bottom: .5em; } */
 h3 { margin-top: .6em; margin-bottom: .4em; }

-#mainContent h1 { border-bottom: 1px solid #00334b; }
-#mainContent h2 { border-bottom: 1px solid #aaa; }
-
 #mainContent ul, #mainContent ol { padding-left: 1.5em; }

-#mainContent img { margin: 3px; }

 .internalNavigate { width: 19%; float: right; }
 #mainContent .internalNavigate ul { list-style-type: none; padding-left: 0; }
@ -66,17 +127,15 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
 /* Header */

 #conservancyheader {
-  margin: 0;
-  /* Leave 0 padding on the right so the header image is clipped by the edge of
-   * the browser window. */
-  padding: 10px 0 10px 17px;
+  max-width: 1140px;
+  margin: 0 auto;
+  padding: 10px 0;
 /*  background-color: #d1ff96; */
 /*  background-color: #92CC58; */
 /*  background-color: #BDD8A2; */
 /*  background-color: #92cc58; */
 /*  background-color: #b5cd9d; */
  background-color: #ffffff;
-  border-bottom: 1px solid #808080;
  text-indent: -5000px; /* hide in favor of image */
 }
 #logobutton {
@ -84,51 +143,31 @@ h3 { margin-top: .6em; margin-bottom: .4em; }
  margin: 0;
  padding: 0;
  height: 120px;
-  width: 100%;
-  min-width: 350px;  /* So at least tree and text is visible */
  background: url(/img/conservancy-header.png) no-repeat;
+  background-size: contain;
 }

 /* Navigation bar */
-#navbar-outer { background: #577632; }
-#navbar { margin-left: 104px; margin-top: 3px; float: left; display: inline; }
+#navbar-outer { background: var(--navy); }
+#navbar { margin-top: 3px; max-width: 1140px; margin: 0 auto;}
 #navbar ul { list-style: none; }
-#navbar-clear { clear: both; border-bottom: 1px solid #808080; }
-#navbar li.supporter a {
-  display: block;
-  background: #fafafe;
-  padding: .2em .8em;
-  margin-right: 3px;
-  border: 1px solid #808080;
-  font-size: .8em;
-  background: #ffd843;
-  background: -moz-linear-gradient(top, #fff, #ffd533);
-  background: -webkit-linear-gradient(top, #fff, #ffd533);
-  background: linear-gradient(to bottom, #fff, #ffd533);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffd533', GradientType=0);
-  border-color: #ffffff;
-}
+#navbar-clear { clear: both; }
 #navbar li a {
  display: block;
-  background: #fafafe;
-  padding: .2em .8em;
-  margin-right: 3px;
-  border: 1px solid #808080;
-  font-size: .8em;
-  background: #eaf1f1;
-  background: -moz-linear-gradient(top, #fff, #eaf1f1);
-  background: -webkit-linear-gradient(top, #fff, #eaf1f1);
-  background: linear-gradient(to bottom, #fff, #eaf1f1);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eaf1f1', GradientType=0);
-  border-color: #ffffff;
+  color: white;
+  padding: .5em .8em .1em;
+  margin: 0 3px .1em 0;
+  text-decoration: none;
+  border-bottom: 4px solid transparent;
+}
+#navbar li:hover a {
+  border-bottom: 4px solid var(--light-green);
 }
-#navbar li:hover a { background: #577632; color: #fff; }
-#navbar li.supporter:hover a { background: #577632; color: #CE1F1F; }
 #navbar li { float: left; display: inline; margin-bottom: 3px; }

 #mainContent {
-    margin-left: 50px;
-    margin-right: 50px;
+  max-width: 1140px;
+  margin: 0 auto;
 }
 #sidebar + #mainContent {
    float: left;
@ -390,23 +429,7 @@ body.conservancy-donate #navbar ul li.donate a,
 body.conservancy-npoacct #navbar ul li.npoacct a,
 body.conservancy-sponsors #navbar ul li.sponsors a /* NO COMMA HERE! */
 {
-    color: #000033;
-    font-weight: bold;
-    background: #eaf1f1;
-    background: -moz-linear-gradient(bottom, #fff, #eaf1f1);
-    background: -webkit-linear-gradient(bottom, #fff, #eaf1f1);
-    background: linear-gradient(to top, #fff, #eaf1f1);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaf1f1', endColorstr='#ffffff', GradientType=0);
-}
-body.conservancy-supporter #navbar ul li.supporter a
-{
-    color: #000033;
-    font-weight: bold;
-    background: #ffd843;
-    background: -moz-linear-gradient(bottom, #fff, #ffd533);
-    background: -webkit-linear-gradient(bottom, #fff, #ffd533);
-    background: linear-gradient(to top, #fff, #ffd533);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd533', endColorstr='#ffffff', GradientType=0);
+    border-bottom: 4px solid var(--light-green);
 }

 #supporters ul {
--- a/www/conservancy/static/css/tachyons.css
+++ b/www/conservancy/static/css/tachyons.css
--- a/www/conservancy/static/img/font_awesome.svg
+++ b/www/conservancy/static/img/font_awesome.svg
@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="facebook" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path>
+  </symbol>
+  <symbol id="mastodon" viewBox="0 0 448 512">
+    <path fill="currentColor" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"></path>
+  </symbol>
+  <symbol id="twitter" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
+  </symbol>
+  <symbol id="youtube" viewBox="0 0 576 512">
+    <path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
+  </symbol>
+  <symbol id="rss-square" viewBox="0 0 448 512">
+    <path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432 167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432 11.787z"></path>
+  </symbol>
+  <symbol id="envelope" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path>
+  </symbol>
+</svg>
--- a/www/conservancy/templates/base_conservancy.html
+++ b/www/conservancy/templates/base_conservancy.html
@ -1,6 +1,7 @@
 {% load humanize %}
 {% load subtract %}
 {% load min %}
+{% load static %}

 <!DOCTYPE html>

@ -12,6 +13,7 @@
    <meta name="description" content="The Software Freedom Conservancy provides a non-profit home and services to Free, Libre and Open Source Software (FLOSS) projects." />
    <meta name="keywords" content="software, freedom, conservancy, open source, gnu, GNU, Open Source, Free and Open Source, Free and Open Source Software, FLOSS, FOSS, protect, protection, help, policy, linux, non-profit" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" type="text/css" href="{% static 'css/tachyons.css' %}"/>
    <link rel="stylesheet" type="text/css" media="screen" href="/css/conservancy.css" />
    <link rel="stylesheet" type="text/css" media="(min-width: 67em)" href="/css/conservancy-bigscreen.css" />
    <link rel="stylesheet" href="/css/jquery-ui-1.8.22.custom.css" />
@ -25,10 +27,21 @@
  </head>

  <body class="conservancy-{% block category %}other{% endblock %}">
-    <h1 id="conservancyheader"><a id="logobutton" href="/">Software Freedom Conservancy</a></h1>
+    <div class="flex-ns" style="max-width: 1140px; margin: 0 auto;">
+      <div class="w-70-ns">
+        <h1 id="conservancyheader">
+          <a id="logobutton" href="/">Software Freedom Conservancy</a>
+        </h1>
+      </div>
+      <div class="w-30-ns mb3 mt5-ns tc tl-ns">
+        <a href="#" class="f5 dib pa2 mb2-ns mr2 ttu b btn-white ba b--gray">Learn</a>
+        <a href="/donate/" class="f5 dib pa2 mb2-ns ttu b btn-orange">Donate</a>
+      </div>
+    </div>
+
    <div id="navbar-outer">
      <div id="navbar">
-	<ul>
+        <ul class="f5 b ttu">
      <li class="supporter"><a href="/supporter/">Become a Supporter!</a></li>
      <li class="donate"><a href="/donate/">Donate</a></li>
      <li class="news"><a href="/news/">News</a></li>
--- a/www/conservancy/templates/frontpage.html
+++ b/www/conservancy/templates/frontpage.html
@ -1,68 +1,95 @@
 {% extends "base_conservancy.html" %}
 {% load date_within %}
+{% load static %}

 {% block head %}
 <link rel="alternate" type="application/rss+xml" title="Software Freedom Conservancy Complete Feed" href="/feeds/omnibus/" />
 <link rel="alternate" type="application/rss+xml" title="Software Freedom Conservancy News" href="/feeds/news/" />
 <link rel="alternate" type="application/rss+xml" title="Software Freedom Conservancy Blogs" href="/feeds/blog/" />
+<style>
+ #mainContent hr {
+   /* Hide the <hr> elements in the list of news and blog items. */
+   display: none;
+ }
+</style>
 {% endblock %}

 {% block content %}

-<div class="singleColumn">
-
-<h1>Software Freedom Conservancy</h1>
-
+<div class="mt4 flex-ns">
+  <div class="w-70-ns mr3-ns mb3 mb0-ns pa2 ba bw1 b--light-blue">
+    <img src="{% static 'img/remote.jpg' %}" alt="" class="fl pr2" style="width: 175px;" />
    <p>Software Freedom Conservancy is a not-for-profit charity that
      helps promote, improve, develop, and defend Free, Libre, and Open Source
      Software (FLOSS) projects.  Conservancy provides a non-profit home and
      infrastructure for FLOSS projects.  This allows FLOSS developers to
      focus on what they do best &mdash; writing and improving FLOSS for the
      general public &mdash; while Conservancy takes care of the projects' needs that
-  do not relate directly to software development and documentation.</p>
+      do not relate directly to software development and documentation. <a href="#" class="orange">Learn more.</a></p>
+  </div>
+  <div class="w-30-ns pa3 bg-light-blue ba b--gray">
+    <h2 class="f4 ttu">Special message</h2>
+
+    <p>Special message here special message here special message here special message here special message here.</p>
+    <a href="#" class="f5 dib pa2 ttu b btn-orange">More information</a>
+  </div>
 </div>

-<div class="columns">
-
-<div class="column">
-<h2><a href="/feeds/news/" class="feedlink"><img src="/img/feed-icon-14x14.png" alt="[RSS]"/></a> <a href="/news/">Recent News</a></h2>
-{% for pressr in press_releases|slice:":2" %}
-  {% if forloop.first or pressr.pub_date|date_within_past_days:90 %}
+<div class="mt3 flex-ns">
+  <div class="w-70-ns mr3-ns pa2">
+    <section>
+<h2 class="f4 mt0 mb2 ttu"><a href="/feeds/news/" class="feedlink"><img src="/img/feed-icon-14x14.png" alt="[RSS]"/></a> <a href="/news/" class="dark-gray">News</a></h2>
+{% for pressr in press_releases|slice:":5" %}
+  {% if forloop.first or pressr.pub_date|date_within_past_days:365 %}
    {% if not forloop.first %}<hr class="clear">{% endif %}
-    {% include "news/pressrelease_partial.html" with pressr=pressr show="summary" only %}
+    {% include "news/pressrelease_partial.html" with pressr=pressr show="dateline" only %}
  {% endif %}
 {% endfor %}

-<p><span class="continued"><a href="/news/">Conservancy News Archive&hellip;</a></span></p>
-</div>
+<!-- <p><span class="continued"><a href="/news/">Conservancy News Archive&hellip;</a></span></p> -->
+</section>

-<div class="column">
-<h2><a href="/feeds/blog/" class="feedlink"><img src="/img/feed-icon-14x14.png" alt="[RSS]"/></a> <a href="/blog/">Conservancy Blog</a></h2>
+<section class="mt4 mb3">
+<h2 class="f4 mb2 ttu"><a href="/feeds/blog/" class="feedlink"><img src="/img/feed-icon-14x14.png" alt="[RSS]"/></a> <a href="/blog/" class="dark-gray">Articles</a></h2>
 {% for entry in blog|slice:":5" %}
-  {% if forloop.first or entry.pub_date|date_within_past_days:55 %}
+  {% if forloop.first or entry.pub_date|date_within_past_days:180 %}
    {% if not forloop.first %}<hr class="clear">{% endif %}
-    {% include "blog/entry_partial.html" with entry=entry show="summary" only %}
+    {% include "blog/entry_partial.html" with entry=entry show="dateline" only %}
  {% endif %}
 {% endfor %}

-<p><span class="continued"><a href="/blog/">Conservancy Blog Archive&hellip;</a></span></p>
+<!-- <p><span class="continued"><a href="/blog/">Conservancy Blog Archive&hellip;</a></span></p> -->
+</section>
 </div>

-<div class="column">
-<h2>Follow Conservancy</h2>
-
-<ul>
-  <li class="column"><a href="https://mastodon.technology/@conservancy">Mastodon</a></li>
-  <li class="column"><a href="https://twitter.com/conservancy">Twitter</a></li>
-  <li class="column"><a href="https://www.facebook.com/SoftwareFreedomConservancy/">Facebook</a></li>
-  <li class="column"><a href="https://www.youtube.com/channel/UCUEeuNvX2UyTTyTYXR9dm_A">YouTube</a></li>
-  <li class="column"><a href="/feeds/omnibus/">Full RSS feed</a></li>
-  <li class="column"><a href="https://lists.sfconservancy.org/pipermail/announce/">News mailing list</a></li>
-</ul>
+<div class="w-30-ns">
+  <div class="pa2 ba b--gray">
+    <h3 class="ttu">Term of the week</h3>
+    <h4 class="f5 i navy">auditability</h4>
+    <p>Ability to inspect the exact software running on a device. This includes version information, modifications and licensing information.</p>
+    <p><a href="#" class="orange ttu">Visit our glossary of terms</a></p>
  </div>

-<div class="column">
-<h2>Support Conservancy</h2>
+  <div class="pt3 pl2">
+    <h2 class="f6 ttu mb1">Subscribe to our email list</h2>
+    <form method="post" action="#" class="ml2 flex">
+      <input type="email" class="pa2 ba b--gray br0" style="border-right: none;">
+      <button type="submit" class="bg-orange bn white pa2 pointer btn-orange">
+        <svg style="color: white; width: 20px; height: 20px;"><use href="{% static 'img/font_awesome.svg' %}#envelope"></use></svg></a>
+        </button>
+    </form>
+
+    <h2 class="f6 ttu mt2 mb1">RSS feed</h2>
+    <div class="ml2">
+      <a href="/feeds/omnibus" class="mr2"><svg class="orange" style="width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg#rss-square' %}"></use></svg></a>
+    </div>
+
+    <h2 class="f6 ttu mt2 mb1">Follow us</h2>
+    <div class="ml2">
+      {% include 'socials_partial.html' %}
+</div>
+
+<!-- <h2>Support Conservancy</h2>
     <p>As a 501(c)(3) non-profit charity, Conservancy relies on
     charitable donations for its operations.
     Please join {{supporters_count|safe}} others and <a href="/supporter/"><strong>become a Conservancy Supporter
@ -76,7 +103,7 @@
     <span class="continued"><a href="/members/services/">Services Conservancy provides to its member projects&hellip;</a></span>
     <span class="continued"><a href="/copyleft-compliance/">Conservancy's unique work  defending and upholding  copyleft licenses (e.g., the GPL) &hellip;</a></span>
     <span class="continued"><a href="/npoacct/">Conservancy's Non-Profit Accounting Project &hellip;</a></span>
-</p>
+     </p> -->
 </div>

 </div>
--- a/www/conservancy/templates/socials_partial.html
+++ b/www/conservancy/templates/socials_partial.html
@ -0,0 +1,6 @@
+{% load static %}
+
+<a href="https://mastodon.technology/@conservancy" class="mr2"><svg style="color: #3088d4; width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#mastodon"></use></svg></a>
+<a href="https://twitter.com/conservancy" class="mr2"><svg style="color: #199bf0; width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#twitter"></use></svg></a>
+<a href="https://www.facebook.com/SoftwareFreedomConservancy/" class="mr2"><svg style="color: #0b86ee; width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#facebook"></use></svg></a>
+<a href="https://www.youtube.com/channel/UCUEeuNvX2UyTTyTYXR9dm_A" class="mr2"><svg style="color: #ff0000; width: 30px; height: 30px;"><use href="{% static 'img/font_awesome.svg' %}#youtube"></use></svg></a>