Improvements to theme:
authorRuben Rodriguez <ruben@gnu.org>
Wed, 21 Dec 2022 20:33:00 +0000 (21:33 +0100)
committerRuben Rodriguez <ruben@gnu.org>
Wed, 21 Dec 2022 20:33:00 +0000 (21:33 +0100)
 * Added test content from fy17
 * Load fonts locally
 * Improved custom liquid tags
 * Multi-column layout

33 files changed:
content/2018.md
content/images/licensing-gingerich_crop.jpg [new file with mode: 0644]
content/images/toc-libreplanet_grad.jpg [new file with mode: 0644]
output/author/free-software-foundation.html
output/fy2018.html
output/images/derivatives/article-image/test.jpg [deleted file]
output/images/fa2018.png
output/images/licensing-gingerich_crop.jpg [new file with mode: 0644]
output/images/toc-libreplanet_grad.jpg [new file with mode: 0644]
output/index.html
output/theme/css/b-side-base.css
output/theme/css/b-side-post.css
output/theme/fonts/HankenGrotesk-Bold.ttf [new file with mode: 0644]
output/theme/fonts/Karla-Bold.ttf [new file with mode: 0644]
output/theme/fonts/Karla-BoldItalic.ttf [new file with mode: 0644]
output/theme/fonts/Karla-Italic.ttf [new file with mode: 0644]
output/theme/fonts/Karla-Regular.ttf [new file with mode: 0644]
pelicanconf.py
plugins/comment.py
plugins/matplotlib.py
theme/static/css/b-side-base.css
theme/static/css/b-side-post.css
theme/static/fonts/HankenGrotesk-Bold.ttf [new file with mode: 0644]
theme/static/fonts/Karla-Bold.ttf [new file with mode: 0644]
theme/static/fonts/Karla-BoldItalic.ttf [new file with mode: 0644]
theme/static/fonts/Karla-Italic.ttf [new file with mode: 0644]
theme/static/fonts/Karla-Regular.ttf [new file with mode: 0644]
theme/templates/article.html
theme/templates/partials/body-header.html
theme/templates/partials/head-meta.html
theme/templates/partials/head-style-base.html
theme/templates/partials/head-style-post.html
theme/templates/partials/head-style-wide.html

index 6d6ce8db6f44ec6a4c90e1062cbf0495a18d6079..05771c2313c9fbd826c48e5494153d0ca112158b 100644 (file)
@@ -1,8 +1,8 @@
-Title: Highlighting activities and detailed financials for Fiscal Year 2018
+Title: FY2018 Annual Report
 Summary: Highlighting activities and detailed financials for Fiscal Year 2018
 Date: 2018-12-05 10:20
 Slug: fy2018
-
+Dates: (October 1, 2016 - September 30, 2017)
 {% comment {
 
   Copyright (c) 2022 Free Software Foundation, Inc.
@@ -13,96 +13,175 @@ Slug: fy2018
 }%}
 
 
+> The Free Software Foundation is a leader in the international movement for computer user freedom. We defend the rights of all software users and encourage the development and use of free ["as in freedom"]() software.
+
+> This annual report highlights the Foundation's activities and achievements in fiscal year 2017 (October 1, 2016 — September 30, 2017) and includes a detailed financial statement.
 
-<div class="grid">
- <div class="column">
-  <h4><a href="#licensing">Licensing</a></h4>
-  <p>Educating you about free software licenses, advocating for copyleft and enforcing the GNU General Public License</p>
- </div>
- <div class="column">
-  <h4><a href="#campaigns">Campaigns</a></h4>
-  <p>Empowering you to understand, adopt, develop, and defend free software</p>
- </div>
- <div class="column">
-  <h4><a href="#tech">Tech</a></h4>
-  <p>Providing infrastructure to accelerate development and distribution of the free software you need</p>
- </div>
- <div class="column">
-   <h4><a href="#financials">Operations</a></h4>
-   <p>Running an efficient, effective nonprofit, using free software, supported by you</p>
- </div>
+<div id="toc" markdown="1" style="background:url(./images/toc-libreplanet_grad.jpg)" >
+  <div id="tocimage" markdown="1">
+  [TOC]
+  <div class="caption" markdown="1">Free software community members at [LibrePlanet 2017](https://lp).</div>
+  <div class="credit">Credit: Kori Feener, CC BY 4.0</div>
+  </div>
 </div>
 
-<div style="clear:both"></div>
+## Licensing and Compliance
 
-> The Free Software Foundation is a leader in the international movement for computer user freedom. We defend the rights of all software users and encourage the development and use of free "as in freedom" software.
+<div class="column2" markdown="1">
 
-> This annual report highlights the Foundation's activities and achievements in fiscal year 2017 (October 1, 2016 — September 30, 2017) and includes a detailed financial statement.
+The FSF's Licensing and Compliance Lab defends free software through license enforcement and enforcement support, a rigorous product certification, and educational resources.
 
+In FY17, we celebrated the tenth anniversary of the GNU General Public License version 3 (GPL). This is the free software copyleft license that ensures the user's right to run, study, share, and modify software. In addition to being the steward of the GPL, the FSF holds copyright on much of the GNU operating system. The licensing team spent the year accepting copyright assignments from software developers and corporations, investigating GPL violations, and answering licensing questions from the community.
 
-<div id="toc"></div>
+We championed copylefted projects, publishing another seven installments in an ongoing series of conversations with free software developers who choose GNU licenses for their work. We also certified a record number of devices under our Respects Your Freedom certification program, which identifies devices that do as much as possible to respect user freedom.
 
-[TOC]
+Along with answering hundreds of licensing questions from the public, dedicated volunteers continued to expand and improve the Free Software Directory for nearly two million annual visitors, and we made inroads with government, helping the US Department of Defense to distribute free software. We also organized volunteers to create a workaround for Web site maintainers who want to register as an agent under the US Digital Millennium Copyright Act (DMCA) while avoiding the nonfree JavaScript the process currently requires.
 
-# Licensing and Compliance
+</div>
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.
+{%
+  image {
+  "url": "./images/licensing-gingerich_crop.jpg",
+  "caption": "Denver Gingerich, a developer of packages under the AGPLv3 and other GNU licenses, speaking at LibrePlanet 2017 about free software for mobile phones.",
+  "alt": "Photo of a man with light brown hair, glasses, and a brown, white, and red sweater, holding two small mobile phones in his hands.",
+  "credit": "Kori Feener, CC-BY 4.0"
+}%}
 
-Liabilities ||
------------|--------
-Accounts Payable |             $16,335
-Accrued Expenses |             $106,435
-**Current Liabilities** |      **$122,770**
+<div class="column2" markdown="1">
+### FY2017 at a glance
+
+<div class="compact" markdown="1">
+#### 331
+copyright assignments and disclaimers accepted
+#### 670
+licensing questions fielded from the public
+#### 54
+reports of GNU license violations investigated
+#### 18
+devices certified to Respect Your Freedom
+#### 1.8 million
+visitors to the Free Software Directory
+</div>
 
-Liabilities ||
------------|--------
-Accrued Expenses |             $106,435
-_Total Current Liabilities_ |  _$122,770_
+### Respects Your Freedom certification
 
-<div style="clear:both"></div>
+RYF logo
 
-# Campaigns
+The FSF's Respects Your Freedom product certification program encourages the creation and sale of hardware that will do as much as possible to respect your freedom and privacy.
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.
+In FY17, fifteen devices from Technoethical became RYF certified: six laptops, two docking stations, a mainboard, three WiFi USB adapters, two internal WiFI devices, and a Bluetooth USB adapter. RYF certification was also awarded to three devices from Vikings: a USB stereo sound adapter, a mainboard, and a laptop, bringing the total number of RYF certified devices to twenty-seven (at the time).
+
+</div>
+
+{% separator {
+  "title": "Why I joined the FSF",
+  "quote": "To fight the dystopia of a DRM-overgrown world."
+}%}
 
-# Tech
-## Infrastructure for free software development and activism
+## Campaigns
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.
 
-# Financials
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.
+
+## Tech
+### Infrastructure for free software development and activism
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.
 
+## Financial Statement
+
 {%
     matplotlib {
         "filename": "fa2018",
-        "title": "Financial Statement ",
         "data" : [
          {"title": "Program\nServices",
-         "values": 1076394},
+         "values": 1076394,
+         "colors": "chocolate"},
          {"title": "Management\nand General",
-         "values": 95105},
+         "values": 95105,
+         "colors": "sienna"},
          {"title": "Fundraising",
-         "values": 65639}
+         "values": 65639,
+         "colors": "brown"}
         ]
     }
 %}
 
 
+The following is a visualization of the Free Software Foundation's FY 2017 financial statement. The original documents can be found [here]().
 
-# Donors
+<div style="clear:both" markdown=1>
+<div class="column3" markdown=1>
+### Statement of Financial Position
+
+Assets         ||
+----|--
+Cash and Cash Equivalents                      | $1,191,910
+Accounts Receivable and Inventory              | $28,425
+Prepaid Expenses and Other Current Assets      | $4,038
+Investments                                    | $239,645
+Property, Equipment                            | $19,169
+Non-Current Assets                             | $13,228
+*Total Assets*                                 | *$1,496,415*
+</div>
+
+<div class="column3" markdown=1>
+### Liabilities and Net Assets
+
+Liabilities ||
+----|--
+Accounts Payable                               | $16,335
+Accrued Expenses                               | $106,435
+**Total Current Liabilities**                  | **$122,770**
+
+Net Assets ||
+----|--
+Unrestricted                                   | $1,186,690
+Temporarily Restricted                         | $186,955
+**Total Net Assets**                           | **$1,373,645**
+*Total Liabilities and Net Assets*             | *$1,496,415*
+</div>
+
+<div class="column3" markdown=1>
+### Statement of Activities
+
+Support and Revenue ||
+----|--
+Contributions                                  | $1,294,697
+In-Kind Contributions                          | $3,600
+Earned Revenue                                 | $70,406
+Interest and Other Income                      | $8,471
+Gain/(Loss) on Investments                     | ($14,899)
+**Total Support and Revenue**                  | **$1,362,275**
+
+Functional Expenses ||
+----|--
+Program Services                               | $1,076,394
+Management and General                         | $95,105
+Fundraising                                    | $65,639
+**Total Functional Expenses**                  | **$1,236,994**
+*Change in Net Assets*                         | *$125,281*
+</div>
+</div>
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.
 
-![asdf](./images/test.jpg){: .image-process-article-image}
 
-# Associate Membership
+## Donors
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.
 
-# Leadership and Staff
+## Associate Membership
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.
 
+{% image {
+  "url": "./images/test.jpg",
+  "caption": "Vivamus suscipit in quam sed maximus",
+  "credit": "dui ac consectetur"
+}%}
+
+## Leadership and Staff
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.
 
diff --git a/content/images/licensing-gingerich_crop.jpg b/content/images/licensing-gingerich_crop.jpg
new file mode 100644 (file)
index 0000000..4273c44
Binary files /dev/null and b/content/images/licensing-gingerich_crop.jpg differ
diff --git a/content/images/toc-libreplanet_grad.jpg b/content/images/toc-libreplanet_grad.jpg
new file mode 100644 (file)
index 0000000..3d7e95d
Binary files /dev/null and b/content/images/toc-libreplanet_grad.jpg differ
index 16219ea54a606fd07df189a4ac509bee0ee3eec6..493d1f08559e2182af233770c8b8528e6e6cd38b 100644 (file)
@@ -4,9 +4,8 @@
 <head>
 <title>Free Software Foundation - FSF FY2018 Annual Report</title>
 <link href="" rel="canonical"/>
-<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700|Roboto+Condensed:300i,400,400i,700,700i|Roboto+Mono:400,400i" rel="stylesheet"/>
-<link href="/theme/css/b-side-base.css" rel="stylesheet"/><meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1" name="viewport"/><link href="/theme/css/b-side-wide.css" rel="stylesheet"/> </head>
+<link href="./theme/css/b-side-base.css" rel="stylesheet"/><meta charset="utf-8"/>
+<meta content="width=600, initial-scale=1" name="viewport"/><link href="./theme/css/b-side-wide.css" rel="stylesheet"/> </head>
 <body>
 <header class="top-menu">
 <nav class="top-menu">
 <li><a href="">FSF FY2018 Annual Report</a></li>
 <li><a class="active" href="#toc">Table of Contents</a></li>
 <li><a class="active" href="https://my.fsf.org">Join the fsf</a></li>
+<li><a class="active" href="https://my.fsf.org">PDF</a></li>
 </ul>
 </nav>
 </header>
-<img class="fsflogo" src="theme/fsf-logo.svg"/>
 <section>
 <div>
 <h1>Free Software Foundation</h1>
 <div class="bside-summary">
 <hr class="docutils"/>
-<h2><a href="/fy2018.html" rel="bookmark">Highlighting activities and detailed financials for Fiscal Year 2018</a></h2>
+<h2><a href="/fy2018.html" rel="bookmark">FY2018 Annual Report</a></h2>
 <ul class="bulletless">
 <li>Highlighting activities and detailed financials for Fiscal Year 2018</li> <li class="smaller dim"><em><time datetime="2018-12-05T10:20:00-05:00">Wed 05 December 2018</time> by Free Software Foundation, in <a href="/category/misc" rel="category tag">misc</a> </em></li>
 <li> </li>
index 5f9e17866951bb84560288ae77ed9a7cc3ca67fd..bae243a95b99186f42f061f1fc8c9551d8b2dcc6 100644 (file)
@@ -2,11 +2,10 @@
 
 <html lang="en">
 <head>
-<title>Highlighting activities and detailed financials for Fiscal Year 2018 - FSF FY2018 Annual Report</title>
+<title>FY2018 Annual Report - FSF FY2018 Annual Report</title>
 <link href="" rel="canonical"/>
-<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700|Roboto+Condensed:300i,400,400i,700,700i|Roboto+Mono:400,400i" rel="stylesheet"/>
-<link href="/theme/css/b-side-base.css" rel="stylesheet"/><meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1" name="viewport"/><link href="/theme/css/b-side-post.css" rel="stylesheet"/> </head>
+<link href="./theme/css/b-side-base.css" rel="stylesheet"/><meta charset="utf-8"/>
+<meta content="width=600, initial-scale=1" name="viewport"/><link href="./theme/css/b-side-post.css" rel="stylesheet"/> </head>
 <body>
 <header class="top-menu">
 <nav class="top-menu">
 <li><a href="">FSF FY2018 Annual Report</a></li>
 <li><a class="active" href="#toc">Table of Contents</a></li>
 <li><a class="active" href="https://my.fsf.org">Join the fsf</a></li>
+<li><a class="active" href="https://my.fsf.org">PDF</a></li>
 </ul>
 </nav>
 </header>
-<img class="fsflogo" src="theme/fsf-logo.svg"/>
 <article>
 <section>
 <div class="document">
-<h1 class="title">Highlighting activities and detailed financials for Fiscal Year 2018</h1>
+<div id="head">
+<img class="fsflogo" src="./theme/fsf-logo.svg"/>
+<h1 class="title">FY2018 Annual Report</h1>
+<div class="subtitle"><p>Highlighting activities and detailed financials for Fiscal Year 2018</p></div>
+<div class="dates"><p>(October 1, 2016 - September 30, 2017)</p></div>
 <div class="grid">
 <div class="column">
 <h4><a href="#licensing">Licensing</a></h4>
 </div>
 </div>
 <div style="clear:both"></div>
+</div>
 <blockquote>
-<p>The Free Software Foundation is a leader in the international movement for computer user freedom. We defend the rights of all software users and encourage the development and use of free "as in freedom" software.</p>
+<p>The Free Software Foundation is a leader in the international movement for computer user freedom. We defend the rights of all software users and encourage the development and use of free <a href="">"as in freedom"</a> software.</p>
 <p>This annual report highlights the Foundation's activities and achievements in fiscal year 2017 (October 1, 2016 — September 30, 2017) and includes a detailed financial statement.</p>
 </blockquote>
-<div id="toc"></div>
+<div id="toc" style="background:url(./images/toc-libreplanet_grad.jpg)">
+<div id="tocimage">
 <div class="toc"><span class="toctitle">Table of Contents</span><ul>
 <li><a href="#licensing-and-compliance">Licensing and Compliance</a></li>
 <li><a href="#campaigns">Campaigns</a></li>
 <li><a href="#tech">Tech</a></li>
-<li><a href="#financials">Financials</a></li>
+<li><a href="#financial-statement">Financial Statement</a></li>
 <li><a href="#donors">Donors</a></li>
 <li><a href="#associate-membership">Associate Membership</a></li>
 <li><a href="#leadership-and-staff">Leadership and Staff</a></li>
 </ul>
 </div>
-<h1 id="licensing-and-compliance">Licensing and Compliance</h1>
+<div class="caption">
+<p>Free software community members at <a href="https://lp">LibrePlanet 2017</a>.</p>
+</div>
+<div class="credit">Credit: Kori Feener, CC BY 4.0</div>
+</div>
+</div>
+<h2 id="licensing-and-compliance">Licensing and Compliance</h2>
+<div class="column2">
+<p>The FSF's Licensing and Compliance Lab defends free software through license enforcement and enforcement support, a rigorous product certification, and educational resources.</p>
+<p>In FY17, we celebrated the tenth anniversary of the GNU General Public License version 3 (GPL). This is the free software copyleft license that ensures the user's right to run, study, share, and modify software. In addition to being the steward of the GPL, the FSF holds copyright on much of the GNU operating system. The licensing team spent the year accepting copyright assignments from software developers and corporations, investigating GPL violations, and answering licensing questions from the community.</p>
+<p>We championed copylefted projects, publishing another seven installments in an ongoing series of conversations with free software developers who choose GNU licenses for their work. We also certified a record number of devices under our Respects Your Freedom certification program, which identifies devices that do as much as possible to respect user freedom.</p>
+<p>Along with answering hundreds of licensing questions from the public, dedicated volunteers continued to expand and improve the Free Software Directory for nearly two million annual visitors, and we made inroads with government, helping the US Department of Defense to distribute free software. We also organized volunteers to create a workaround for Web site maintainers who want to register as an agent under the US Digital Millennium Copyright Act (DMCA) while avoiding the nonfree JavaScript the process currently requires.</p>
+</div>
+<p><div class="imageblock"><img alt="Photo of a man with light brown hair, glasses, and a brown, white, and red sweater, holding two small mobile phones in his hands." src="./images/licensing-gingerich_crop.jpg"> <div class="caption">Denver Gingerich, a developer of packages under the AGPLv3 and other GNU licenses, speaking at LibrePlanet 2017 about free software for mobile phones.</div> <div class="credit">Credit: Kori Feener, CC-BY 4.0</div> </img></div></p>
+<div class="column2">
+<h3 id="fy2017-at-a-glance">FY2017 at a glance</h3>
+<div class="compact">
+<h4 id="331">331</h4>
+<p>copyright assignments and disclaimers accepted</p>
+<h4 id="670">670</h4>
+<p>licensing questions fielded from the public</p>
+<h4 id="54">54</h4>
+<p>reports of GNU license violations investigated</p>
+<h4 id="18">18</h4>
+<p>devices certified to Respect Your Freedom</p>
+<h4 id="18-million">1.8 million</h4>
+<p>visitors to the Free Software Directory</p>
+</div>
+<h3 id="respects-your-freedom-certification">Respects Your Freedom certification</h3>
+<p>RYF logo</p>
+<p>The FSF's Respects Your Freedom product certification program encourages the creation and sale of hardware that will do as much as possible to respect your freedom and privacy.</p>
+<p>In FY17, fifteen devices from Technoethical became RYF certified: six laptops, two docking stations, a mainboard, three WiFi USB adapters, two internal WiFI devices, and a Bluetooth USB adapter. RYF certification was also awarded to three devices from Vikings: a USB stereo sound adapter, a mainboard, and a laptop, bringing the total number of RYF certified devices to twenty-seven (at the time).</p>
+</div>
+<p><div class="quote-box"> <h4>Why I joined the FSF</h4> <blockquote><p>"To fight the dystopia of a DRM-overgrown world."</p></blockquote></div></p>
+<h2 id="campaigns">Campaigns</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.</p>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.</p>
+<h2 id="tech">Tech</h2>
+<h3 id="infrastructure-for-free-software-development-and-activism">Infrastructure for free software development and activism</h3>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.</p>
+<h2 id="financial-statement">Financial Statement</h2>
+<p><img "="" class="matplotlib" src="images/fa2018.png" type="image/png"/></p>
+<p>The following is a visualization of the Free Software Foundation's FY 2017 financial statement. The original documents can be found <a href="">here</a>.</p>
+<div style="clear:both">
+<div class="column3">
+<h3 id="statement-of-financial-position">Statement of Financial Position</h3>
+<table>
+<thead>
+<tr>
+<th>Assets</th>
+<th></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Cash and Cash Equivalents</td>
+<td>$1,191,910</td>
+</tr>
+<tr>
+<td>Accounts Receivable and Inventory</td>
+<td>$28,425</td>
+</tr>
+<tr>
+<td>Prepaid Expenses and Other Current Assets</td>
+<td>$4,038</td>
+</tr>
+<tr>
+<td>Investments</td>
+<td>$239,645</td>
+</tr>
+<tr>
+<td>Property, Equipment</td>
+<td>$19,169</td>
+</tr>
+<tr>
+<td>Non-Current Assets</td>
+<td>$13,228</td>
+</tr>
+<tr>
+<td><em>Total Assets</em></td>
+<td><em>$1,496,415</em></td>
+</tr>
+</tbody>
+</table>
+</div>
+<div class="column3">
+<h3 id="liabilities-and-net-assets">Liabilities and Net Assets</h3>
 <table>
 <thead>
 <tr>
 <td>$106,435</td>
 </tr>
 <tr>
-<td><strong>Current Liabilities</strong></td>
+<td><strong>Total Current Liabilities</strong></td>
 <td><strong>$122,770</strong></td>
 </tr>
 </tbody>
 <table>
 <thead>
 <tr>
-<th>Liabilities</th>
+<th>Net Assets</th>
 <th></th>
 </tr>
 </thead>
 <tbody>
 <tr>
-<td>Accrued Expenses</td>
-<td>$106,435</td>
+<td>Unrestricted</td>
+<td>$1,186,690</td>
 </tr>
 <tr>
-<td><em>Total Current Liabilities</em></td>
-<td><em>$122,770</em></td>
+<td>Temporarily Restricted</td>
+<td>$186,955</td>
+</tr>
+<tr>
+<td><strong>Total Net Assets</strong></td>
+<td><strong>$1,373,645</strong></td>
+</tr>
+<tr>
+<td><em>Total Liabilities and Net Assets</em></td>
+<td><em>$1,496,415</em></td>
 </tr>
 </tbody>
 </table>
-<div style="clear:both"></div>
-<h1 id="campaigns">Campaigns</h1>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.</p>
-<h1 id="tech">Tech</h1>
-<h2 id="infrastructure-for-free-software-development-and-activism">Infrastructure for free software development and activism</h2>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.</p>
-<h1 id="financials">Financials</h1>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.</p>
-<p><div class="matplotlib" style="text-align: center;"><img "="" src="images/fa2018.png" type="image/png"/></div></p>
-<h1 id="donors">Donors</h1>
+</div>
+<div class="column3">
+<h3 id="statement-of-activities">Statement of Activities</h3>
+<table>
+<thead>
+<tr>
+<th>Support and Revenue</th>
+<th></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Contributions</td>
+<td>$1,294,697</td>
+</tr>
+<tr>
+<td>In-Kind Contributions</td>
+<td>$3,600</td>
+</tr>
+<tr>
+<td>Earned Revenue</td>
+<td>$70,406</td>
+</tr>
+<tr>
+<td>Interest and Other Income</td>
+<td>$8,471</td>
+</tr>
+<tr>
+<td>Gain/(Loss) on Investments</td>
+<td>($14,899)</td>
+</tr>
+<tr>
+<td><strong>Total Support and Revenue</strong></td>
+<td><strong>$1,362,275</strong></td>
+</tr>
+</tbody>
+</table>
+<table>
+<thead>
+<tr>
+<th>Functional Expenses</th>
+<th></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Program Services</td>
+<td>$1,076,394</td>
+</tr>
+<tr>
+<td>Management and General</td>
+<td>$95,105</td>
+</tr>
+<tr>
+<td>Fundraising</td>
+<td>$65,639</td>
+</tr>
+<tr>
+<td><strong>Total Functional Expenses</strong></td>
+<td><strong>$1,236,994</strong></td>
+</tr>
+<tr>
+<td><em>Change in Net Assets</em></td>
+<td><em>$125,281</em></td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+<h2 id="donors">Donors</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.</p>
-<p><img alt="asdf" class="image-process-article-image" src="./images/derivatives/article-image/test.jpg"/></p>
-<h1 id="associate-membership">Associate Membership</h1>
+<h2 id="associate-membership">Associate Membership</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.</p>
-<h1 id="leadership-and-staff">Leadership and Staff</h1>
+<p><div class="imageblock"><img alt="Picture" src="./images/test.jpg"/> <div class="caption">Vivamus suscipit in quam sed maximus</div> <div class="credit">Credit: dui ac consectetur</div> </div></p>
+<h2 id="leadership-and-staff">Leadership and Staff</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec scelerisque urna, non placerat justo. Etiam consequat tincidunt ullamcorper. Vivamus suscipit in quam sed maximus. Aliquam convallis enim vel sapien aliquam dictum. Sed ac tincidunt enim. Sed elementum est quis metus accumsan cursus. Nullam tempus finibus dui ac consectetur.</p>
 </div>
 </section>
diff --git a/output/images/derivatives/article-image/test.jpg b/output/images/derivatives/article-image/test.jpg
deleted file mode 100644 (file)
index aceebc3..0000000
Binary files a/output/images/derivatives/article-image/test.jpg and /dev/null differ
index 1cfc923f87fe0cbba7accce26601d6c856ca788f..f38c38fd4e11d44d9ebf4794754c68581767354b 100644 (file)
Binary files a/output/images/fa2018.png and b/output/images/fa2018.png differ
diff --git a/output/images/licensing-gingerich_crop.jpg b/output/images/licensing-gingerich_crop.jpg
new file mode 100644 (file)
index 0000000..4273c44
Binary files /dev/null and b/output/images/licensing-gingerich_crop.jpg differ
diff --git a/output/images/toc-libreplanet_grad.jpg b/output/images/toc-libreplanet_grad.jpg
new file mode 100644 (file)
index 0000000..3d7e95d
Binary files /dev/null and b/output/images/toc-libreplanet_grad.jpg differ
index f04b7cd33a8b8e673f59e87de342f280b375b82d..3ac04b8cecc8553b674a0e6e63a0cc55450ac28f 100644 (file)
@@ -4,9 +4,8 @@
 <head>
 <title>FSF FY2018 Annual Report</title>
 <link href="" rel="canonical"/>
-<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700|Roboto+Condensed:300i,400,400i,700,700i|Roboto+Mono:400,400i" rel="stylesheet"/>
-<link href="/theme/css/b-side-base.css" rel="stylesheet"/><meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1" name="viewport"/><link href="/theme/css/b-side-wide.css" rel="stylesheet"/> </head>
+<link href="./theme/css/b-side-base.css" rel="stylesheet"/><meta charset="utf-8"/>
+<meta content="width=600, initial-scale=1" name="viewport"/><link href="./theme/css/b-side-wide.css" rel="stylesheet"/> </head>
 <body>
 <header class="top-menu">
 <nav class="top-menu">
 <li><a class="active" href="">FSF FY2018 Annual Report</a></li>
 <li><a class="active" href="#toc">Table of Contents</a></li>
 <li><a class="active" href="https://my.fsf.org">Join the fsf</a></li>
+<li><a class="active" href="https://my.fsf.org">PDF</a></li>
 </ul>
 </nav>
 </header>
-<img class="fsflogo" src="theme/fsf-logo.svg"/>
 <section>
 <div>
 <h1>Recent posts</h1>
 <div class="bside-summary">
 <hr class="docutils"/>
-<h2><a href="/fy2018.html" rel="bookmark">Highlighting activities and detailed financials for Fiscal Year 2018</a></h2>
+<h2><a href="/fy2018.html" rel="bookmark">FY2018 Annual Report</a></h2>
 <ul class="bulletless">
 <li>Highlighting activities and detailed financials for Fiscal Year 2018</li> <li class="smaller dim"><em><time datetime="2018-12-05T10:20:00-05:00">Wed 05 December 2018</time> by Free Software Foundation, in <a href="/category/misc" rel="category tag">misc</a> </em></li>
 <li> </li>
index 1a75f8e038956ece8a5f1060a48745de89cb4a48..90e2dfb24952c0d6ed8e0aa78bbc0c3ebd936351 100644 (file)
  * Yellow highlight: #fbe54e hsl(yellow/52, 96%, 65%)
  * Yellow for Error: #f2f2a6 (yellow, 75% saturation, 80% lightness)
  * Citation table and left-edge of admonitons: #808080
- * Rubric and headers: #a00000
+ * Rubric and headers: var(--darkaccent)
  * "dim" sets foreground to: #444444
  */
 
 
+:root {
+    --background: #fffff6;
+    --brightaccent: #ece1bd;
+    --darkaccent: #ac4f30;
+    --lightaccent: #d1b661;
+    --colortone: -40deg;
+}
+
+
+
 
 /*****************************************************************************/
 /* Some basic settings                                                       */
 
+@font-face {
+  font-family: "HankenGrotesk";
+  font-weight: 700;
+  font-style: normal;
+  src: local("HankenGrotesk Bold"), url("/theme/fonts/HankenGrotesk-Bold.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Karla";
+  font-weight: 400;
+  font-style: normal;
+  src: local("Karla"), url("/theme/fonts/Karla-Regular.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Karla";
+  font-weight: 700;
+  font-style: normal;
+  src: local("Karla Bold"), url("/theme/fonts/Karla-Bold.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Karla";
+  font-weight: 400;
+  font-style: italic;
+  src: local("Karla Italic"), url("/font/fonts/Karla-Italic.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Karla";
+  font-weight: 700;
+  font-style: italic;
+  src: local("Karla BoldItalic"), url("/font/fonts/Karla-BoldItalic.ttf") format("truetype");
+}
+body {
+  font-family: "Karla", Roboto, DejaVu Sans, sans-serif;
+}
+
+
+h1, h2, h3, h4, h5 h6 {
+  clear:both;
+  color: var(--darkaccent);
+  font-family: "HankenGrotesk", Roboto, DejaVu Sans, sans-serif;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
 @charset "UTF-8";
 
 body {
-       font-family: "Roboto", Ariel, Helvetica, sans-serif;
-       background-color: #fffff6;
+       background-color: var(--background);
        color: #111111;
 }
 
@@ -173,16 +225,16 @@ p.admonition-title {
        font-weight: bold;
 }
 div.attention p.admonition-title {
-       color: #a00000;
+       color: var(--darkaccent);
 }
 div.caution p.admonition-title {
-       color: #a00000;
+       color: var(--darkaccent);
 }
 div.danger p.admonition-title {
-       color: #a00000;
+       color: var(--darkaccent);
 }
 div.error p.admonition-title {
-       color: #a00000;
+       color: var(--darkaccent);
 }
 
 div.body p.centered {
@@ -212,7 +264,7 @@ div.body p.centered {
 }
 
 blockquote {
-       font-family: "Roboto Condensed", Ariel, Helvetica, sans-serif;
+       font-family: "HankenGrotesk", Ariel, Helvetica, sans-serif;
        margin-left: 2em;
        margin-right: 2em;
        border-left: solid 1px #808080;
@@ -240,7 +292,7 @@ blockquote.pull-quote {
         font-weight: bold;
         font-style: oblique;
         font-size: 1.5rem;
-        color: #a00000;
+        color: var(--darkaccent);
         position: relative;
 }
 blockquote.pull-quote p.attribution {
@@ -255,11 +307,11 @@ blockquote.pull-quote p {
         font-weight: bold;
         font-style: oblique;
         font-size: 2rem;
-        color: #a00000;
+        color: var(--darkaccent);
 }
 
 p.rubric {
-       color: #a00000;
+       color: var(--darkaccent);
        margin-top: 2em;
        font-weight: bold;
 }
@@ -275,10 +327,10 @@ pre {
        padding-bottom: 0.5em;
        overflow: auto;
        overflow-y: hidden;  /* fixes display issues on Chrome browsers */
-       font-family: "Roboto Mono", monospace;
+       font-family: "HankenGrotesk", monospace;
 }
 tt {
-       font-family: "Roboto Mono", monospace;
+       font-family: "HankenGrotesk", monospace;
 }
 
 pre.address {
@@ -320,7 +372,6 @@ table.docutils {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        border: 0;
-       border-collapse: collapse;
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
 }
@@ -374,10 +425,13 @@ h6 {
        margin-top: 0;
        padding-top: 1em;
        font-weight: bold;
-       color: #a00000;
+       color: var(--darkaccent);
 }
 h1 {
-       font-size: 1.5rem;
+       font-size: 5rem;
+       line-height:4rem;
+       margin:0;
+       padding:1rem 0 2rem 0
 }
 h2 {
        font-size: 1.25rem;
@@ -521,11 +575,12 @@ ul.bulletless {
 
 header,
 footer {
-       font-family: "Roboto Condensed", Ariel, Helvetica, sans-serif;
+       font-family: "HankenGrotesk", Ariel, Helvetica, sans-serif;
 }
 header {
        padding-left: 5%;
        padding-right: 5%;
+       font-size: 1rem;
 }
 
 footer {
@@ -567,7 +622,7 @@ footer a.link-transition {
 }
 header > nav a:link,
 header > nav a:visited {
-       color: #a00000;
+       color: var(--darkaccent);
 }
 header > nav a {
        display: block;
@@ -828,7 +883,7 @@ html {
 
 @media (min-width: 800px) {
        html {
-               font-size: 24px;
+               font-size: 20px;
        }
 }
 
@@ -850,40 +905,44 @@ border-top:3px solid black;
 }
 
 table{
-border-collapse:collapse;
+width:100%;
 border-spacing:0;
-width: 30% !important;
-float: left;
+max-width: 30vw !important;
 }
 
 h1{
-clear:both
+clear:both;
+color:white
 }
 
 th{
-color:#a00000;
+color:var(--darkaccent);
 font-size:1rem
 }
 
 table em{
-color:#e09000!important;
+color:var(--lightaccent)!important;
 font-weight:bold;
 font-style:normal
 }
 
 .matplotlib{
-max-width:50vw}
+width:50%!important;
+float:right;
+}
 
 header{
 
   display: block;
   position:fixed;
+  z-index:3;
   top:0;
-  background: white;
+  background-color:rgba(255, 255, 255, 0.95);;
   margin:0;
-  padding:0;
+  padding:0.7rem;
   width:100%;
-  box-shadow: 0 0 2px black
+  box-shadow: 0 0 2px black;
+  font-size:0.75rem;
 }
 
 body, html{
@@ -891,41 +950,214 @@ body, html{
   padding:0;
 }
 
-article{
-}
+
 
 .grid{
 display:block;
+margin-top:1rem;
+}
+
+.grid h4{
+line-height: 1.2;
+padding: 0.5rem;
+background-color: var(--darkaccent);
+letter-spacing: 1px;
+font-size:1.1rem;
+width:80%
+}
+
+.grid a{
+ background:transparent!important;
+ color:white;
+ text-decoration:none
 }
+
 .column{
 float:left;
-width: 20%;
-margin:10px
+width: 25%;
 }
-.column p {width:100%}
+.column p {width:80%}
 
-.toc{
-display:block;
-background:#eee;
-width:100%;
-padding:2rem
-}
 
-section{
-padding-left:0!important
+.column3{
+padding:0 1rem 0 1rem;
+float:left;
+width: calc(33% - 2rem);
 }
 
-h1, h2, h3, h4, h5, h6, article p, table{
-margin:20px !important;
+.column2{
+padding-right:1rem!important;
+float:left;
+width: calc(50% - 2rem) !important;
+}
 
+section{
+  padding-left:0!important
 }
 
+
 footer{
-margin: 1rem;
-padding-bottom:3rem
+  padding:3rem;
+  background-color: var(--lightaccent)
 }
 
 .fsflogo{
-width:40%;
-margin-top:3rem
+  margin-top:5rem;
+  display: inline-block;
+  width: 60%!important;
+  max-width: 500px;
+  height: auto;
+}
+
+#toc{
+  display:block;
+  width:100%;
+  background-repeat:no-repeat !important;
+  background-position: center top !important;
+  -webkit-background-size: cover !important;
+  -moz-background-size: cover !important;
+  -o-background-size: cover !important;
+  background-size: cover!important;
+  border-bottom: 1rem solid var(--lightaccent);
+}
+
+#tocimage{
+  padding-top:12rem;
+  padding-left: 10%;
+  /*backdrop-filter: brightness(50%) sepia(100%) saturate(150%) hue-rotate(var(--colortone));
+  z-index:1 */
+}
+
+.toctitle{
+  color: #fff;
+  padding: 1rem 0 0;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-top: auto;
+  font-weight:bold;
+  font-size:1.5rem;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+#toc ul {
+  padding: 1rem 0;
+  line-height: 1.5;
+  margin-bottom: auto;
+  list-style:none;
+  color:white;
+  font-weight:bold;
+  margin-bottom: 10rem;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+#toc ul a {
+  text-decoration:none;
+}
+
+#toc ul li:not(:last-child) {
+}
+
+.caption{
+  color: var(--brightaccent);
+  font-size:80%;
+}
+
+.caption a{
+  text-decoration:none;
+  color:white;
+  font-weight:bold
+}
+
+.credit {
+    font-size: 70%;
+    opacity: 0.7;
+    padding-bottom: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+.quote-box {
+  clear:both;
+  margin: 0 auto;
+  padding: 2rem;
+  color: #fff;
+  background: var(--darkaccent);
+  text-align: center;
+}
+
+.quote-box h4 {
+  font-size: 120%;
+  color: var(--lightaccent);
+}
+.quote-box blockquote {
+  font-size: 180%;
+  line-height: 1.3;
+  font-weight: 700;
+  padding-top: 1rem;
+  text-align: center;
+  border:none;
+}
+
+.subtitle p{
+font-weight:bold;
+}
+
+.dates p, .subtitle p{
+padding-top:0!important;
+margin-top:0!important;
+padding-bottom:0!important;
+margin-bottom:0!important;
+}
+
+#head{
+background-color: var(--lightaccent);
+padding-bottom:2rem;
+}
+
+.document > blockquote{
+border-left:none;
+max-width:50%;
+margin:0 auto;
+margin-top:2rem;
+margin-bottom:2rem;
+padding:0!important;
+border-top: 0.3rem solid var(--lightaccent);
+border-bottom: 0.3rem solid var(--lightaccent);
+color: var(--darkaccent);
+font-size:1rem;
+line-height:1.5rem
+}
+
+.document > blockquote a{
+text-decoration:none;
+color:black;
+}
+
+.document > blockquote > p{
+margin:1rem;
+padding:0;
+
+}
+
+.imageblock{
+width:50%!important;
+padding:0!important;
+float:left!important;
+}
+
+.imageblock .caption{
+color:black!important
+}
+
+.compact *{
+margin:0!important;
+padding:0!important;
+}
+
+.compact h4{
+line-height:1.5rem;
+font-size:1.5rem
+}
+
+.compact p{
+font-size:0.8rem
 }
index 95c7d090d1e53f8c294c8992b2106b7018bdc096..fbcc2a2b300294f2b5773ec49a6870d053bd817c 100644 (file)
@@ -61,6 +61,24 @@ img {
        max-width: 100%;
 }
 
+        /*.document > h2, .document > h3, .document > h4, .document > h5, .document > h6, .document > p, .document > table, .document > .imageblock, .document > img, .document blockquote, .title, .fsflogo, .grid, #head p, .document > div{
+                padding-left:5%;
+                padding-right:5%;
+        }*/
+
+.document, #head p, h1, .fsflogo, .grid{
+margin-left:5%;
+width:90%
+}
+
+
+#head, .quote-box, #toc{
+width:100vw!important;
+padding:0!important;
+position:relative;
+right:5vw;
+}
+
 
 /*
  * if width wide enough, then put asides in wide right-hand margin
@@ -80,19 +98,22 @@ img {
        }
 
 
-       /*
-        * most basic elements goes into left-most 2/3rds of display
-        * -- note: pre is left unconstrained
-        */
-       div > p,
-       div > dl,
-       div > ol,
-       div > ul,
-       div > table,
-       div > blockquote {
-               /* Constrain width for direct descendants of a div */
-               width: 55%;
-       }
+       /*.document > h2, .document > h3, .document > h4, .document > h5, .document > h6, .document > p, .document > table, .document > .imageblock, .document > img, .document blockquote, .title, .fsflogo, .grid, #head p, .document > div{
+               padding-left:10%;
+               width: 80%
+       }*/
+.document, #head p, h1, .fsflogo, .grid{
+margin-left:10%;
+width: 80%
+}
+
+#head, .quote-box, #toc{
+width:100vw!important;
+padding:0!important;
+position:relative;
+right:10vw;
+}
+
 
 
        /*
diff --git a/output/theme/fonts/HankenGrotesk-Bold.ttf b/output/theme/fonts/HankenGrotesk-Bold.ttf
new file mode 100644 (file)
index 0000000..35f9b25
Binary files /dev/null and b/output/theme/fonts/HankenGrotesk-Bold.ttf differ
diff --git a/output/theme/fonts/Karla-Bold.ttf b/output/theme/fonts/Karla-Bold.ttf
new file mode 100644 (file)
index 0000000..54f4e01
Binary files /dev/null and b/output/theme/fonts/Karla-Bold.ttf differ
diff --git a/output/theme/fonts/Karla-BoldItalic.ttf b/output/theme/fonts/Karla-BoldItalic.ttf
new file mode 100644 (file)
index 0000000..1e3d92c
Binary files /dev/null and b/output/theme/fonts/Karla-BoldItalic.ttf differ
diff --git a/output/theme/fonts/Karla-Italic.ttf b/output/theme/fonts/Karla-Italic.ttf
new file mode 100644 (file)
index 0000000..ebb5c8c
Binary files /dev/null and b/output/theme/fonts/Karla-Italic.ttf differ
diff --git a/output/theme/fonts/Karla-Regular.ttf b/output/theme/fonts/Karla-Regular.ttf
new file mode 100644 (file)
index 0000000..edcd1eb
Binary files /dev/null and b/output/theme/fonts/Karla-Regular.ttf differ
index 94d9ae14d58dea5bf74d0b29ee05bf53f55dc656..7a6616bd96ff4e2974eaa5417875b8e6c1af2102 100644 (file)
@@ -39,7 +39,7 @@ DEFAULT_PAGINATION = False
 
 # You need to copy the scripts in the plugins directory into
 # ./lib/python3x/site-packages/pelican/plugins/liquid_tags/
-LIQUID_TAGS = ["img", "literal", "include_code", "matplotlib", "comment"]
+LIQUID_TAGS = ["img", "include_code", "matplotlib", "comment"]
 
 IMAGE_PROCESS = {
     "article-image": ["scale_in 800 800 True"],
@@ -57,7 +57,7 @@ MARKDOWN = {
         "markdown.extensions.extra": {},
         "markdown.extensions.meta": {},
         # This is for enabling the TOC generation
-        "markdown.extensions.toc": {"title": "Table of Contents", "toc_depth": "1"},
+        "markdown.extensions.toc": {"title": "Table of Contents", "toc_depth": "2"},
     },
     "output_format": "html5",
 }
index 3e5d56e2485b512f1164848138620382ed5b61ac..35ee10826b05f66570af1aae964cf2ea3925a2da 100644 (file)
@@ -21,8 +21,22 @@ import re
 from .mdx_liquid_tags import LiquidTags
 
 @LiquidTags.register("comment")
-def matplotlib_parser(preprocessor, tag, markup):
-    print(tag)
+def comment_parser(preprocessor, tag, markup):
     return ""
 
+@LiquidTags.register("image")
+def image_parser(preprocessor, tag, markup):
+    data = loads(markup)
+    return '<div class="imageblock"><img src="%s" alt="%s"/>\
+    <div class="caption">%s</div>\
+    <div class="credit">Credit: %s</div>\
+    </div>' % (data['url'],data.get('alt', "Picture"),data['caption'],data['credit'])
+
+@LiquidTags.register("separator")
+def separator_parser(preprocessor, tag, markup):
+    data = loads(markup)
+    return '<div class="quote-box">\
+    <h4>%s</h4>\
+    <blockquote><p>"%s"</p></blockquote>' % (data['title'], data['quote'])
+
 from .liquid_tags import register  # noqa
index c929164076fe6cfde6065b3c0dd867cb53e6fada..8c7f63379a7d546e91eee31dc2a1a99f51d76241 100644 (file)
@@ -2,7 +2,7 @@
   Based on liquid-tags pygalcharts.py
 
   Copyright (c) 2016-2022 Pelican Dev Team <authors@getpelican.com>
-  Copyright (c) 2022 Free Software Foundation, Inc.
+  Copyright (c) 2022 Free Software Foundation
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as
@@ -76,20 +76,24 @@ def run_matplotlib(data, options=[]):
     labels=[]
     values=[]
     explode=[]
+    colors=[]
     total=0
     for data_set in data.get("data", []):
         total+=data_set.get("values", None)
         labels.append(data_set.get("title", None))
         values.append(data_set.get("values", None))
+        colors.append(data_set.get("colors", None))
         explode.append(0)
 
     fig1, ax1 = plt.subplots()
-    patches, texts, pcts = ax1.pie(values, explode=explode, labels=labels,
+    patches, texts, pcts = ax1.pie(values, explode=explode, labels=labels, colors=colors,
             autopct=lambda p: '${:,}\n ({:.0f}%)'.format(int(p * total / 100), p),
-            shadow=True, startangle=0)
+            shadow=False, startangle=0)
     ax1.axis('equal')  # Equal aspect ratio ensures that pie is drawn as a circle.
 
-    ax1.set_title(data.get("title", None), fontsize=24, fontfamily="Droid Sans", fontweight='bold')
+    title=data.get("title", None)
+    if title is not None:
+      ax1.set_title(data.get("title", None), fontsize=24, fontfamily="Droid Sans", fontweight='bold')
     filename=data.get("filename", None)
     plt.setp(pcts, color='white', fontweight='bold', fontsize=9, fontfamily="Droid Sans")
     plt.setp(texts, color='black', fontsize=12, fontfamily="Droid Sans")
@@ -111,7 +115,7 @@ def matplotlib_parser(preprocessor, tag, markup):
         output = run_matplotlib(data)
         # Return embedded SVG image
         return (
-            '<div class="matplotlib" style="text-align: center;"><img type="image/png" src=%s "/></div>'
+                '<img class="matplotlib" type="image/png" src=%s "/>'
             % output
         )
 
index 1a75f8e038956ece8a5f1060a48745de89cb4a48..90e2dfb24952c0d6ed8e0aa78bbc0c3ebd936351 100644 (file)
  * Yellow highlight: #fbe54e hsl(yellow/52, 96%, 65%)
  * Yellow for Error: #f2f2a6 (yellow, 75% saturation, 80% lightness)
  * Citation table and left-edge of admonitons: #808080
- * Rubric and headers: #a00000
+ * Rubric and headers: var(--darkaccent)
  * "dim" sets foreground to: #444444
  */
 
 
+:root {
+    --background: #fffff6;
+    --brightaccent: #ece1bd;
+    --darkaccent: #ac4f30;
+    --lightaccent: #d1b661;
+    --colortone: -40deg;
+}
+
+
+
 
 /*****************************************************************************/
 /* Some basic settings                                                       */
 
+@font-face {
+  font-family: "HankenGrotesk";
+  font-weight: 700;
+  font-style: normal;
+  src: local("HankenGrotesk Bold"), url("/theme/fonts/HankenGrotesk-Bold.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Karla";
+  font-weight: 400;
+  font-style: normal;
+  src: local("Karla"), url("/theme/fonts/Karla-Regular.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Karla";
+  font-weight: 700;
+  font-style: normal;
+  src: local("Karla Bold"), url("/theme/fonts/Karla-Bold.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Karla";
+  font-weight: 400;
+  font-style: italic;
+  src: local("Karla Italic"), url("/font/fonts/Karla-Italic.ttf") format("truetype");
+}
+@font-face {
+  font-family: "Karla";
+  font-weight: 700;
+  font-style: italic;
+  src: local("Karla BoldItalic"), url("/font/fonts/Karla-BoldItalic.ttf") format("truetype");
+}
+body {
+  font-family: "Karla", Roboto, DejaVu Sans, sans-serif;
+}
+
+
+h1, h2, h3, h4, h5 h6 {
+  clear:both;
+  color: var(--darkaccent);
+  font-family: "HankenGrotesk", Roboto, DejaVu Sans, sans-serif;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
 @charset "UTF-8";
 
 body {
-       font-family: "Roboto", Ariel, Helvetica, sans-serif;
-       background-color: #fffff6;
+       background-color: var(--background);
        color: #111111;
 }
 
@@ -173,16 +225,16 @@ p.admonition-title {
        font-weight: bold;
 }
 div.attention p.admonition-title {
-       color: #a00000;
+       color: var(--darkaccent);
 }
 div.caution p.admonition-title {
-       color: #a00000;
+       color: var(--darkaccent);
 }
 div.danger p.admonition-title {
-       color: #a00000;
+       color: var(--darkaccent);
 }
 div.error p.admonition-title {
-       color: #a00000;
+       color: var(--darkaccent);
 }
 
 div.body p.centered {
@@ -212,7 +264,7 @@ div.body p.centered {
 }
 
 blockquote {
-       font-family: "Roboto Condensed", Ariel, Helvetica, sans-serif;
+       font-family: "HankenGrotesk", Ariel, Helvetica, sans-serif;
        margin-left: 2em;
        margin-right: 2em;
        border-left: solid 1px #808080;
@@ -240,7 +292,7 @@ blockquote.pull-quote {
         font-weight: bold;
         font-style: oblique;
         font-size: 1.5rem;
-        color: #a00000;
+        color: var(--darkaccent);
         position: relative;
 }
 blockquote.pull-quote p.attribution {
@@ -255,11 +307,11 @@ blockquote.pull-quote p {
         font-weight: bold;
         font-style: oblique;
         font-size: 2rem;
-        color: #a00000;
+        color: var(--darkaccent);
 }
 
 p.rubric {
-       color: #a00000;
+       color: var(--darkaccent);
        margin-top: 2em;
        font-weight: bold;
 }
@@ -275,10 +327,10 @@ pre {
        padding-bottom: 0.5em;
        overflow: auto;
        overflow-y: hidden;  /* fixes display issues on Chrome browsers */
-       font-family: "Roboto Mono", monospace;
+       font-family: "HankenGrotesk", monospace;
 }
 tt {
-       font-family: "Roboto Mono", monospace;
+       font-family: "HankenGrotesk", monospace;
 }
 
 pre.address {
@@ -320,7 +372,6 @@ table.docutils {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        border: 0;
-       border-collapse: collapse;
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
 }
@@ -374,10 +425,13 @@ h6 {
        margin-top: 0;
        padding-top: 1em;
        font-weight: bold;
-       color: #a00000;
+       color: var(--darkaccent);
 }
 h1 {
-       font-size: 1.5rem;
+       font-size: 5rem;
+       line-height:4rem;
+       margin:0;
+       padding:1rem 0 2rem 0
 }
 h2 {
        font-size: 1.25rem;
@@ -521,11 +575,12 @@ ul.bulletless {
 
 header,
 footer {
-       font-family: "Roboto Condensed", Ariel, Helvetica, sans-serif;
+       font-family: "HankenGrotesk", Ariel, Helvetica, sans-serif;
 }
 header {
        padding-left: 5%;
        padding-right: 5%;
+       font-size: 1rem;
 }
 
 footer {
@@ -567,7 +622,7 @@ footer a.link-transition {
 }
 header > nav a:link,
 header > nav a:visited {
-       color: #a00000;
+       color: var(--darkaccent);
 }
 header > nav a {
        display: block;
@@ -828,7 +883,7 @@ html {
 
 @media (min-width: 800px) {
        html {
-               font-size: 24px;
+               font-size: 20px;
        }
 }
 
@@ -850,40 +905,44 @@ border-top:3px solid black;
 }
 
 table{
-border-collapse:collapse;
+width:100%;
 border-spacing:0;
-width: 30% !important;
-float: left;
+max-width: 30vw !important;
 }
 
 h1{
-clear:both
+clear:both;
+color:white
 }
 
 th{
-color:#a00000;
+color:var(--darkaccent);
 font-size:1rem
 }
 
 table em{
-color:#e09000!important;
+color:var(--lightaccent)!important;
 font-weight:bold;
 font-style:normal
 }
 
 .matplotlib{
-max-width:50vw}
+width:50%!important;
+float:right;
+}
 
 header{
 
   display: block;
   position:fixed;
+  z-index:3;
   top:0;
-  background: white;
+  background-color:rgba(255, 255, 255, 0.95);;
   margin:0;
-  padding:0;
+  padding:0.7rem;
   width:100%;
-  box-shadow: 0 0 2px black
+  box-shadow: 0 0 2px black;
+  font-size:0.75rem;
 }
 
 body, html{
@@ -891,41 +950,214 @@ body, html{
   padding:0;
 }
 
-article{
-}
+
 
 .grid{
 display:block;
+margin-top:1rem;
+}
+
+.grid h4{
+line-height: 1.2;
+padding: 0.5rem;
+background-color: var(--darkaccent);
+letter-spacing: 1px;
+font-size:1.1rem;
+width:80%
+}
+
+.grid a{
+ background:transparent!important;
+ color:white;
+ text-decoration:none
 }
+
 .column{
 float:left;
-width: 20%;
-margin:10px
+width: 25%;
 }
-.column p {width:100%}
+.column p {width:80%}
 
-.toc{
-display:block;
-background:#eee;
-width:100%;
-padding:2rem
-}
 
-section{
-padding-left:0!important
+.column3{
+padding:0 1rem 0 1rem;
+float:left;
+width: calc(33% - 2rem);
 }
 
-h1, h2, h3, h4, h5, h6, article p, table{
-margin:20px !important;
+.column2{
+padding-right:1rem!important;
+float:left;
+width: calc(50% - 2rem) !important;
+}
 
+section{
+  padding-left:0!important
 }
 
+
 footer{
-margin: 1rem;
-padding-bottom:3rem
+  padding:3rem;
+  background-color: var(--lightaccent)
 }
 
 .fsflogo{
-width:40%;
-margin-top:3rem
+  margin-top:5rem;
+  display: inline-block;
+  width: 60%!important;
+  max-width: 500px;
+  height: auto;
+}
+
+#toc{
+  display:block;
+  width:100%;
+  background-repeat:no-repeat !important;
+  background-position: center top !important;
+  -webkit-background-size: cover !important;
+  -moz-background-size: cover !important;
+  -o-background-size: cover !important;
+  background-size: cover!important;
+  border-bottom: 1rem solid var(--lightaccent);
+}
+
+#tocimage{
+  padding-top:12rem;
+  padding-left: 10%;
+  /*backdrop-filter: brightness(50%) sepia(100%) saturate(150%) hue-rotate(var(--colortone));
+  z-index:1 */
+}
+
+.toctitle{
+  color: #fff;
+  padding: 1rem 0 0;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-top: auto;
+  font-weight:bold;
+  font-size:1.5rem;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+}
+
+#toc ul {
+  padding: 1rem 0;
+  line-height: 1.5;
+  margin-bottom: auto;
+  list-style:none;
+  color:white;
+  font-weight:bold;
+  margin-bottom: 10rem;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+#toc ul a {
+  text-decoration:none;
+}
+
+#toc ul li:not(:last-child) {
+}
+
+.caption{
+  color: var(--brightaccent);
+  font-size:80%;
+}
+
+.caption a{
+  text-decoration:none;
+  color:white;
+  font-weight:bold
+}
+
+.credit {
+    font-size: 70%;
+    opacity: 0.7;
+    padding-bottom: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+.quote-box {
+  clear:both;
+  margin: 0 auto;
+  padding: 2rem;
+  color: #fff;
+  background: var(--darkaccent);
+  text-align: center;
+}
+
+.quote-box h4 {
+  font-size: 120%;
+  color: var(--lightaccent);
+}
+.quote-box blockquote {
+  font-size: 180%;
+  line-height: 1.3;
+  font-weight: 700;
+  padding-top: 1rem;
+  text-align: center;
+  border:none;
+}
+
+.subtitle p{
+font-weight:bold;
+}
+
+.dates p, .subtitle p{
+padding-top:0!important;
+margin-top:0!important;
+padding-bottom:0!important;
+margin-bottom:0!important;
+}
+
+#head{
+background-color: var(--lightaccent);
+padding-bottom:2rem;
+}
+
+.document > blockquote{
+border-left:none;
+max-width:50%;
+margin:0 auto;
+margin-top:2rem;
+margin-bottom:2rem;
+padding:0!important;
+border-top: 0.3rem solid var(--lightaccent);
+border-bottom: 0.3rem solid var(--lightaccent);
+color: var(--darkaccent);
+font-size:1rem;
+line-height:1.5rem
+}
+
+.document > blockquote a{
+text-decoration:none;
+color:black;
+}
+
+.document > blockquote > p{
+margin:1rem;
+padding:0;
+
+}
+
+.imageblock{
+width:50%!important;
+padding:0!important;
+float:left!important;
+}
+
+.imageblock .caption{
+color:black!important
+}
+
+.compact *{
+margin:0!important;
+padding:0!important;
+}
+
+.compact h4{
+line-height:1.5rem;
+font-size:1.5rem
+}
+
+.compact p{
+font-size:0.8rem
 }
index 95c7d090d1e53f8c294c8992b2106b7018bdc096..fbcc2a2b300294f2b5773ec49a6870d053bd817c 100644 (file)
@@ -61,6 +61,24 @@ img {
        max-width: 100%;
 }
 
+        /*.document > h2, .document > h3, .document > h4, .document > h5, .document > h6, .document > p, .document > table, .document > .imageblock, .document > img, .document blockquote, .title, .fsflogo, .grid, #head p, .document > div{
+                padding-left:5%;
+                padding-right:5%;
+        }*/
+
+.document, #head p, h1, .fsflogo, .grid{
+margin-left:5%;
+width:90%
+}
+
+
+#head, .quote-box, #toc{
+width:100vw!important;
+padding:0!important;
+position:relative;
+right:5vw;
+}
+
 
 /*
  * if width wide enough, then put asides in wide right-hand margin
@@ -80,19 +98,22 @@ img {
        }
 
 
-       /*
-        * most basic elements goes into left-most 2/3rds of display
-        * -- note: pre is left unconstrained
-        */
-       div > p,
-       div > dl,
-       div > ol,
-       div > ul,
-       div > table,
-       div > blockquote {
-               /* Constrain width for direct descendants of a div */
-               width: 55%;
-       }
+       /*.document > h2, .document > h3, .document > h4, .document > h5, .document > h6, .document > p, .document > table, .document > .imageblock, .document > img, .document blockquote, .title, .fsflogo, .grid, #head p, .document > div{
+               padding-left:10%;
+               width: 80%
+       }*/
+.document, #head p, h1, .fsflogo, .grid{
+margin-left:10%;
+width: 80%
+}
+
+#head, .quote-box, #toc{
+width:100vw!important;
+padding:0!important;
+position:relative;
+right:10vw;
+}
+
 
 
        /*
diff --git a/theme/static/fonts/HankenGrotesk-Bold.ttf b/theme/static/fonts/HankenGrotesk-Bold.ttf
new file mode 100644 (file)
index 0000000..35f9b25
Binary files /dev/null and b/theme/static/fonts/HankenGrotesk-Bold.ttf differ
diff --git a/theme/static/fonts/Karla-Bold.ttf b/theme/static/fonts/Karla-Bold.ttf
new file mode 100644 (file)
index 0000000..54f4e01
Binary files /dev/null and b/theme/static/fonts/Karla-Bold.ttf differ
diff --git a/theme/static/fonts/Karla-BoldItalic.ttf b/theme/static/fonts/Karla-BoldItalic.ttf
new file mode 100644 (file)
index 0000000..1e3d92c
Binary files /dev/null and b/theme/static/fonts/Karla-BoldItalic.ttf differ
diff --git a/theme/static/fonts/Karla-Italic.ttf b/theme/static/fonts/Karla-Italic.ttf
new file mode 100644 (file)
index 0000000..ebb5c8c
Binary files /dev/null and b/theme/static/fonts/Karla-Italic.ttf differ
diff --git a/theme/static/fonts/Karla-Regular.ttf b/theme/static/fonts/Karla-Regular.ttf
new file mode 100644 (file)
index 0000000..edcd1eb
Binary files /dev/null and b/theme/static/fonts/Karla-Regular.ttf differ
index d2f545a52692572b27207f2e9f3a3f8e081947de..cbe157ba4d8ed3cf4748f0d4cc3f456f178c6ac3 100644 (file)
 <article>
   <section>
     <div class="document">
+      <div id="head">
+      <img class="fsflogo" src="./theme/fsf-logo.svg">
       <h1 class="title">{{ article.title }}</h1>
+      <div class="subtitle">{{ article.summary }}</div>
+      <div class="dates"><p>{{ article.dates }}</p></div>
+
+        <div class="grid">
+         <div class="column">
+          <h4><a href="#licensing">Licensing</a></h4>
+          <p>Educating you about free software licenses, advocating for copyleft and enforcing the GNU General Public License</p>
+         </div>
+         <div class="column">
+          <h4><a href="#campaigns">Campaigns</a></h4>
+          <p>Empowering you to understand, adopt, develop, and defend free software</p>
+         </div>
+         <div class="column">
+          <h4><a href="#tech">Tech</a></h4>
+          <p>Providing infrastructure to accelerate development and distribution of the free software you need</p>
+         </div>
+         <div class="column">
+           <h4><a href="#financials">Operations</a></h4>
+           <p>Running an efficient, effective nonprofit, using free software, supported by you</p>
+         </div>
+        </div>
+        <div style="clear:both"></div>
+        
+
+      </div>
       {{ article.content }}
     </div>
   </section>
index 30affaecd88220cc16ad0e97f44b46e886dcd84d..2db0f0586aa8db351d76f48a0a4d0405b969ba99 100644 (file)
@@ -15,9 +15,9 @@
         {% endif %}
             <li><a class="active" href="#toc">Table of Contents</a></li>
             <li><a class="active" href="https://my.fsf.org">Join the fsf</a></li>
+            <li><a class="active" href="https://my.fsf.org">PDF</a></li>
     </ul>
   </nav>
 </header>
 
-<img class="fsflogo" src="theme/fsf-logo.svg">
 
index ccc9b50d89ead4c1f2545dc0b2b99584a1c2ec05..a3f37352df8c94138caa4b09ef4456e8ac03bd99 100644 (file)
@@ -1,2 +1,2 @@
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=600, initial-scale=1">
index c9cd79604fcbddd2a198db582ddc2269755141c6..64e7b28524b95417f6f11bf17ca2e0665fa87642 100644 (file)
@@ -1,2 +1 @@
-<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700|Roboto+Condensed:300i,400,400i,700,700i|Roboto+Mono:400,400i" rel="stylesheet">
-<link href="{{ SITEURL }}/theme/css/b-side-base.css" rel="stylesheet">
+<link href="./theme/css/b-side-base.css" rel="stylesheet">
index 353493a98fc9e17e75c45244768d65b09a998a94..3e8468a348c0befb99fb4f48161401e7eb3835ad 100644 (file)
@@ -1 +1 @@
-<link href="{{ SITEURL }}/theme/css/b-side-post.css" rel="stylesheet">
\ No newline at end of file
+<link href="./theme/css/b-side-post.css" rel="stylesheet">
index 71934359b2f7d71e655f9b7a4f49266cc08b8da1..99497ed00c0ad77e7beb1ba4fb59007aec074b5f 100644 (file)
@@ -1 +1 @@
-<link href="{{ SITEURL }}/theme/css/b-side-wide.css" rel="stylesheet">
\ No newline at end of file
+<link href="./theme/css/b-side-wide.css" rel="stylesheet">