Improved responsive setup, added color theme, improved styling
authorRuben Rodriguez <ruben@gnu.org>
Tue, 10 Jan 2023 21:03:00 +0000 (22:03 +0100)
committerRuben Rodriguez <ruben@gnu.org>
Tue, 10 Jan 2023 21:03:00 +0000 (22:03 +0100)
20 files changed:
content/2018.md
content/extra/custom.css [new file with mode: 0644]
content/extra/favicon.ico [new file with mode: 0644]
content/images/corner.svg [new file with mode: 0644]
output/author/free-software-foundation.html
output/custom.css [new file with mode: 0644]
output/favicon.ico [new file with mode: 0644]
output/fy2018.html
output/images/corner.svg [new file with mode: 0644]
output/index.html
output/theme/css/b-side-base.css
output/theme/css/b-side-base.css.css [new file with mode: 0644]
output/theme/css/b-side-post.css
pelicanconf.py
plugins/comment.py
theme/static/css/b-side-base.css
theme/static/css/b-side-base.css.css [new file with mode: 0644]
theme/static/css/b-side-post.css
theme/templates/partials/head-meta.html
theme/templates/partials/head-style-base.html

index 6462024a148a773913a036e96e6460f5dde98f25..e09a5432560127441f00f072a98efb26f4261330 100644 (file)
@@ -17,17 +17,18 @@ Dates: (October 1, 2016 - September 30, 2017)
 
 > 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 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 id="toc" markdown="1">
+<div id="tocbg" markdown="1" style="background:url(./images/toc-libreplanet_grad.jpg)" >
+<div id="toctext" 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>
 
 
 <div class="column2" markdown="1">
-
 ## Licensing and Compliance
 
 The FSF's Licensing and Compliance Lab defends free software through license enforcement and enforcement support, a rigorous product certification, and educational resources.
@@ -110,8 +111,8 @@ The DMCA is a particularly egregious example of legislative endorsement of DRM.
 Along with our own comments, we rallied the free software community to submit their own comments in favor of anti-circumvention exemptions — and passionate critiques of the entire process.
 
 </div>
-<div class="column3 float-left" markdown="1">
 
+<div class="column3 float-left" markdown="1">
 ### EME in Web standards
 
 Encrypted Media Extensions (EME) is just another way to dress up DRM. The FSF and the free software community organized to oppose a proposal by the World Wide Web Consortium (W3C) to make EME a Web standard. We called and wrote W3C president Tim Berners-Lee, asking him to keep the Web free. While we lost this battle, and EME became a Web standard, we're looking at our options for next steps. We are not giving up hope for a free Web, even if its inventor did.
@@ -119,11 +120,9 @@ Encrypted Media Extensions (EME) is just another way to dress up DRM. The FSF an
 ### Free people, free net
 
 Internet freedom in the United States found itself on the national stage in 2017. Over the course of the year, Ajit Pai became chairman of the Federal Communications Commission (FCC) and instigated a war against net neutrality. The FSF joined with dozens of other organizations to raise awareness and organize in support of net neutrality.
-
 </div>
 
 <div class="column5 float-left" markdown="1">
-
 ### Free Software Supporter subscribers
 
 119,299
@@ -159,8 +158,7 @@ Credit: Kori Feener, CC-BY 4.0
   "quote": "To fight the dystopia of a DRM-overgrown world."
 }%}
 
-<div class="column2 float-left" markdown="1">
-
+<div class="xx column2 float-left" markdown="1">
 ## Tech
 
 ### Infrastructure for free software development and activism
@@ -203,7 +201,6 @@ Credit: Kori Feener, CC-BY 4.0
 </div>
 
 <div class="column5 float-left" markdown="1">
-
 ### Defending user freedom with free software
 
 FSF and GNU infrastructure includes:
@@ -224,8 +221,8 @@ over 100
 : Amazon EC2 instances
 
 </div>
-<div class="column3 float-left" markdown="1">
 
+<div class="column3 float-left" markdown="1">
 ### Working Together for Free Software
 
 [![GNU Guix logo](images/guix.svg)](https://my.fsf.org/civicrm/contribute/transact?reset=1&id=50){.logos}
@@ -325,8 +322,6 @@ Fundraising                                 | $65,639
 
 ## Donors
 
-
-
 ### Institutional Support
 
 <div class="donors" markdown=1>
@@ -403,7 +398,6 @@ Fundraising                                 | $65,639
 
 ### $500-$999
 
-
 <div class="donors" markdown=1>
 * Jean-Louis Abraham
 * Ben Abrams
@@ -496,10 +490,10 @@ Fundraising                                       | $65,639
 
 This list includes our patrons, in-kind supporters, and those who receive ThankGNUs for donations totaling over $500 in a year. The FSF appreciates and thanks the thousands of individual donors, members, and corporate patrons worldwide who make our work possible.
 
-
 <div class="column2" markdown=1>
-![An image of a keyboard](images/donors-opener.jpg)
+![An image of a keyboard](images/donors-opener.jpg){.colortone}
 </div>
+
 <div class="column2" markdown=1>
 ## Associate Membership
 
@@ -511,11 +505,10 @@ Our mission is to promote computer user freedom and defend the rights of all sof
 
 ## Leadership and Staff
 
-
 <div class="column3" markdown=1>
 ### Board of Directors
 
-![Richard M. Stallman](images/richard-stallman_grad.jpg){.width-50}
+![Richard M. Stallman](images/richard-stallman_grad.jpg){.width-50 .colortone}
 #### Richard M. Stallman
 Founder and President
 #### Gerald J. Sussman
@@ -532,8 +525,7 @@ President and Distinguished Technologist, Software Freedom Conservancy
 Attorney
 </div>
 
-
-<div class="staffcolumn width-60 float-left" markdown=1>
+<div class="staffcolumn float-left" markdown=1>
 ### Leadership
 
 <div class="staff" markdown=1>
diff --git a/content/extra/custom.css b/content/extra/custom.css
new file mode 100644 (file)
index 0000000..a9ecbfa
--- /dev/null
@@ -0,0 +1,19 @@
+
+/* 2017 colors */
+:root {
+    --background: #fffff6;
+    --brightaccent: #ece1bd;
+    --darkaccent: #ac4f30;
+    --lightaccent: #d1b661;
+    --colortone: -40deg;
+}
+
+/* Blue tones */
+:root {
+    --background: #f6faff;
+    --brightaccent: #bde3ec;
+    --darkaccent: #2870cc;
+    --lightaccent: #79b4f2;
+    --colortone: 195deg;
+}
+
diff --git a/content/extra/favicon.ico b/content/extra/favicon.ico
new file mode 100644 (file)
index 0000000..1a616bd
Binary files /dev/null and b/content/extra/favicon.ico differ
diff --git a/content/images/corner.svg b/content/images/corner.svg
new file mode 100644 (file)
index 0000000..786147f
--- /dev/null
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10.000002"
+   height="10"
+   viewBox="0 0 2.6458338 2.6458332"
+   version="1.1"
+   id="svg567"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="corner.svg">
+  <defs
+     id="defs561" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8747573"
+     inkscape:cx="50.73287"
+     inkscape:cy="-67.14286"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1040"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata564">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(78.792918,-25.733333)">
+    <g
+       aria-label="+"
+       transform="matrix(0.13072302,0,0,0.13072302,-39.863603,14.357836)"
+       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#d1b661;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="flowRoot569">
+      <path
+         d="m -277.56,95.939844 v 2.4 h -8.92 v 8.919996 h -2.4 v -8.919996 h -8.92 v -2.4 h 8.92 v -8.92 h 2.4 v 8.92 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'HK Grotesk';-inkscape-font-specification:'HK Grotesk';fill:#d1b661;fill-opacity:1"
+         id="path577"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
index 0ca68438e185db878f9493ce81cd5cf0298d221e..76e0c7b337cb17712c58d99f819616937318ac0a 100644 (file)
@@ -4,8 +4,9 @@
 <head>
 <title>Free Software Foundation - FSF FY2018 Annual Report</title>
 <link href="" rel="canonical"/>
+<link href="custom.css" rel="stylesheet"/>
 <link href="./theme/css/b-side-base.css" rel="stylesheet"/><meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport"><link href="./theme/css/b-side-wide.css" rel="stylesheet"/> </meta></head>
+<meta content="width=680" name="viewport"><link href="./theme/css/b-side-wide.css" rel="stylesheet"/> </meta></head>
 <body>
 <header class="top-menu">
 <nav class="top-menu">
diff --git a/output/custom.css b/output/custom.css
new file mode 100644 (file)
index 0000000..a9ecbfa
--- /dev/null
@@ -0,0 +1,19 @@
+
+/* 2017 colors */
+:root {
+    --background: #fffff6;
+    --brightaccent: #ece1bd;
+    --darkaccent: #ac4f30;
+    --lightaccent: #d1b661;
+    --colortone: -40deg;
+}
+
+/* Blue tones */
+:root {
+    --background: #f6faff;
+    --brightaccent: #bde3ec;
+    --darkaccent: #2870cc;
+    --lightaccent: #79b4f2;
+    --colortone: 195deg;
+}
+
diff --git a/output/favicon.ico b/output/favicon.ico
new file mode 100644 (file)
index 0000000..1a616bd
Binary files /dev/null and b/output/favicon.ico differ
index 0d582d70a4669b24df47763f889ffe5829f99535..441926693004e56c69b081222fa0fb74b1693165 100644 (file)
@@ -4,8 +4,9 @@
 <head>
 <title>FY2018 Annual Report - FSF FY2018 Annual Report</title>
 <link href="" rel="canonical"/>
+<link href="custom.css" rel="stylesheet"/>
 <link href="./theme/css/b-side-base.css" rel="stylesheet"/><meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport"><link href="./theme/css/b-side-post.css" rel="stylesheet"/> </meta></head>
+<meta content="width=680" name="viewport"><link href="./theme/css/b-side-post.css" rel="stylesheet"/> </meta></head>
 <body>
 <header class="top-menu">
 <nav class="top-menu">
@@ -49,8 +50,9 @@
 <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" style="background:url(./images/toc-libreplanet_grad.jpg)">
-<div id="tocimage">
+<div id="toc">
+<div id="tocbg" style="background:url(./images/toc-libreplanet_grad.jpg)">
+<div id="toctext">
 <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>
@@ -67,6 +69,7 @@
 <div class="credit">Credit: Kori Feener, CC BY 4.0</div>
 </div>
 </div>
+</div>
 <div class="column2">
 <h2 id="licensing-and-compliance">Licensing and Compliance</h2>
 <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>
@@ -96,7 +99,7 @@
 <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>
+<p><div class="quote-box-top"></div> <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>
 <p><img alt="A photo of a wall in Florida. Spraypainted on the wall is 'DRM' with a red circle and crossed out." class="image-process-article-image" src="images/derivatives/article-image/campaigns-drm.png"/></p>
 <p class="caption">34th Street Wall, Gainesville, Florida</p>
 <p class="credit">Credit: Gavin Baker, CC-BY-SA 4.0 </p>
@@ -138,8 +141,8 @@ International Day Against DRM</p>
 <dd>hours of streamed and recorded videos</dd>
 </dl>
 </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>
-<div class="column2 float-left">
+<p><div class="quote-box-top"></div> <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>
+<div class="xx column2 float-left">
 <h2 id="tech">Tech</h2>
 <h3 id="infrastructure-for-free-software-development-and-activism">Infrastructure for free software development and activism</h3>
 <p>This year, the FSF's tech team made some crucial infrastructure upgrades that improve both the Foundation's daily operations and the GNU Project. The changes included running more services on hardware that is Respects Your Freedom certified, including a Librebooted BIOS and running Trisquel GNU/Linux, proving that complex software projects and modern nonprofit organizations can succeed relying on free software.</p>
@@ -356,7 +359,7 @@ International Day Against DRM</p>
 </table>
 </div>
 </div>
-<p><div class="quote-box"> <h4>Why I joined the FSF</h4> <blockquote><p>"I simply use GNU tools every day."</p></blockquote></div></p>
+<p><div class="quote-box-top"></div> <div class="quote-box"> <h4>Why I joined the FSF</h4> <blockquote><p>"I simply use GNU tools every day."</p></blockquote></div></p>
 <h2 id="donors">Donors</h2>
 <h3 id="institutional-support">Institutional Support</h3>
 <div class="donors">
@@ -526,7 +529,7 @@ International Day Against DRM</p>
 </ul>
 <p>This list includes our patrons, in-kind supporters, and those who receive ThankGNUs for donations totaling over $500 in a year. The FSF appreciates and thanks the thousands of individual donors, members, and corporate patrons worldwide who make our work possible.</p>
 <div class="column2">
-<p><img alt="An image of a keyboard" src="images/donors-opener.jpg"/></p>
+<p><img alt="An image of a keyboard" class="colortone" src="images/donors-opener.jpg"/></p>
 </div>
 <div class="column2">
 <h2 id="associate-membership">Associate Membership</h2>
@@ -536,7 +539,7 @@ International Day Against DRM</p>
 <h2 id="leadership-and-staff">Leadership and Staff</h2>
 <div class="column3">
 <h3 id="board-of-directors">Board of Directors</h3>
-<p><img alt="Richard M. Stallman" class="width-50" src="images/richard-stallman_grad.jpg"/></p>
+<p><img alt="Richard M. Stallman" class="width-50 colortone" src="images/richard-stallman_grad.jpg"/></p>
 <h4 id="richard-m-stallman">Richard M. Stallman</h4>
 <p>Founder and President</p>
 <h4 id="gerald-j-sussman">Gerald J. Sussman</h4>
@@ -552,7 +555,7 @@ International Day Against DRM</p>
 <h4 id="kat-walsh">Kat Walsh</h4>
 <p>Attorney</p>
 </div>
-<div class="staffcolumn width-60 float-left">
+<div class="staffcolumn float-left">
 <h3 id="leadership">Leadership</h3>
 <div class="staff">
 <p><img alt="John Sullivan" src="images/john-sullivan_square_grad.jpg"/></p>
diff --git a/output/images/corner.svg b/output/images/corner.svg
new file mode 100644 (file)
index 0000000..786147f
--- /dev/null
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10.000002"
+   height="10"
+   viewBox="0 0 2.6458338 2.6458332"
+   version="1.1"
+   id="svg567"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="corner.svg">
+  <defs
+     id="defs561" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8747573"
+     inkscape:cx="50.73287"
+     inkscape:cy="-67.14286"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1040"
+     inkscape:window-x="0"
+     inkscape:window-y="20"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata564">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(78.792918,-25.733333)">
+    <g
+       aria-label="+"
+       transform="matrix(0.13072302,0,0,0.13072302,-39.863603,14.357836)"
+       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#d1b661;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="flowRoot569">
+      <path
+         d="m -277.56,95.939844 v 2.4 h -8.92 v 8.919996 h -2.4 v -8.919996 h -8.92 v -2.4 h 8.92 v -8.92 h 2.4 v 8.92 z"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'HK Grotesk';-inkscape-font-specification:'HK Grotesk';fill:#d1b661;fill-opacity:1"
+         id="path577"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
index 2aff0a7e65748dfa3ea27e187e62ea12b62f8366..9c1b6a04ed4aa9d63966545b146edd2eb3638f62 100644 (file)
@@ -4,8 +4,9 @@
 <head>
 <title>FSF FY2018 Annual Report</title>
 <link href="" rel="canonical"/>
+<link href="custom.css" rel="stylesheet"/>
 <link href="./theme/css/b-side-base.css" rel="stylesheet"/><meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport"><link href="./theme/css/b-side-wide.css" rel="stylesheet"/> </meta></head>
+<meta content="width=680" name="viewport"><link href="./theme/css/b-side-wide.css" rel="stylesheet"/> </meta></head>
 <body>
 <header class="top-menu">
 <nav class="top-menu">
index 21d09be44c051744d3d70cf8bf7dc7d66134b431..33b9cfb8b735a4290508f4955b50c761f27c2795 100644 (file)
  */
 
 
-:root {
-    --background: #fffff6;
-    --brightaccent: #ece1bd;
-    --darkaccent: #ac4f30;
-    --lightaccent: #d1b661;
-    --colortone: -40deg;
-}
-
-
-
-
 /*****************************************************************************/
 /* Some basic settings                                                       */
 
@@ -969,7 +958,6 @@ border-top:3px solid black;
 table{
 width:100%;
 border-spacing:0;
-max-width: 30vw !important;
 }
 
 h1{
@@ -1019,8 +1007,11 @@ min-width:500px
 
 
 .grid{
-display:block;
+display:inline-flex;
+align-items: flex-start;
+flex-flow: wrap;
 margin-top:1rem;
+gap:2%
 }
 
 .grid h4{
@@ -1029,15 +1020,12 @@ padding: 0.5rem;
 background-color: var(--darkaccent);
 letter-spacing: 1px;
 font-size:1.1rem;
-width:80%;
 margin-bottom:0.5rem;
 }
 
 .grid p{
 line-height:1.2rem;
 padding:0;
-width:80%!important;
-margin:0 0 3rem
 }
 
 .grid a{
@@ -1047,26 +1035,26 @@ margin:0 0 3rem
 }
 
 .column{
-float:left;
-width: 25%;
+margin: 0 auto;
+width: 22%;
 }
 .column p {width:80%}
 
 .column5{
 float:left;
-width: 18% !important;
+width: 18%;
 margin:0 1% 0 1%;
 }
 
 .column3{
 float:left;
-width: 28% !important;
+width: 28%;
 margin:0 1% 0 1%;
 }
 
 .column2{
 float:left;
-width: 48% !important;
+width: 48%;
 margin:0 1% 0 1%;
 }
 
@@ -1089,6 +1077,14 @@ footer{
 }
 
 #toc{
+  border-bottom: 1rem solid var(--lightaccent);
+  display:inline-grid;
+  width:100%;
+  margin:0;
+  padding:0;
+}
+
+#tocbg{
   display:block;
   width:100%;
   background-repeat:no-repeat !important;
@@ -1097,10 +1093,9 @@ footer{
   -moz-background-size: cover !important;
   -o-background-size: cover !important;
   background-size: cover!important;
-  border-bottom: 1rem solid var(--lightaccent);
 }
 
-#tocimage{
+#toctext{
   padding-top:12rem;
   padding-left: 10%;
   /*backdrop-filter: brightness(50%) sepia(100%) saturate(150%) hue-rotate(var(--colortone));
@@ -1140,7 +1135,9 @@ footer{
   color: black;
   font-size:70%;
   margin:0;
-  padding:0
+  padding:0;
+  position:relative;
+  top: -1rem;
 }
 
 #toc .caption{
@@ -1163,13 +1160,20 @@ a{
 .credit {
     font-size: 70%;
     opacity: 0.7;
-    margin-top:0;
+    margin:0;
     padding-top:0;
-    padding-bottom: 0.65rem;
     text-transform: uppercase;
     letter-spacing: 1px;
-    color:var(--darkaccent)
+    color:var(--darkaccent);
+  position:relative;
+  top: -0.5rem;
+}
+
+p + .quote-box-top{
+height:3rem;
+clear:both;
 }
+
 .quote-box {
   clear:both;
   margin: 0 auto;
@@ -1181,17 +1185,24 @@ a{
 
 .quote-box h4 {
   font-size: 120%;
+  padding-top: 3rem;
   color: var(--lightaccent);
 }
 .quote-box blockquote {
   font-size: 180%;
   line-height: 1.3;
   font-weight: 700;
-  padding-top: 1rem;
+  padding:0;
+  margin:0;
   text-align: center;
   border:none;
 }
 
+.quote-box p{
+  padding:0;
+  margin:0 0 3rem 0;
+}
+
 .subtitle p{
 font-weight:bold;
 }
@@ -1274,7 +1285,15 @@ dd{
 margin:0;
 padding:0;
 font-size:0.8rem;
+}
 
+dl{
+       width:fit-content;
+       padding:.5rem;
+  background-image: url(/images/corner.svg), url(/images/corner.svg), url(/images/corner.svg), url(/images/corner.svg);
+  background-size: 10px 10px;
+  background-position: bottom left, bottom right, top left, top right;
+  background-repeat: no-repeat;
 }
 
 .logos{
@@ -1296,8 +1315,8 @@ vertical-align:middle
 
     display: inline-block;
     margin: 0 0.5rem 0.65rem;
-    color: #ac4f30;
-    border-bottom: 2px solid #ece1bd;
+    color: var(--darkaccent);
+    border-bottom: 2px solid var(--lightaccent);
 
 }
 
@@ -1328,6 +1347,19 @@ padding-left:10%
 
 .staffcolumn h3{
 width:100%;
-border-bottom:1px solid var(--lightaccent);
-margin-bottom:2rem
+border-bottom:1px solid var(--lightaccent)
+}
+
+
+p {
+margin-top:0
+}
+
+p:empty{
+margin:0}
+
+
+
+.staff img, .colortone, .matplotlib, #tocbg{
+filter:  hue-rotate(var(--colortone)) grayscale(50%)
 }
diff --git a/output/theme/css/b-side-base.css.css b/output/theme/css/b-side-base.css.css
new file mode 100644 (file)
index 0000000..e69de29
index a92b44641efebc4b696b258f806e0133cf2d0578..52dc1ce573228f0c2482155e1c57d54162d647ce 100644 (file)
@@ -66,13 +66,14 @@ img {
                 padding-right:5%;
         }*/
 
-.document, #head p, h1, .fsflogo, .grid{
+.document, #head p, h1, .fsflogo{
 margin-left:2%;
 margin-right:2%;
 width:96%
 }
 
 
+
 #head, .quote-box, #toc{
 width:106%!important;
 padding:0!important;
@@ -80,6 +81,32 @@ position:relative;
 right:2%
 }
 
+@media (max-width: 899px) {
+.column2 {
+width:100%
+}
+
+.column3, .column5 {
+width:47%!important
+}
+
+.staffcolumn{
+padding:0 !important;
+width:100%
+}
+
+html{font-size:22px}
+
+.grid{
+width:95%;
+margin-left:2%;
+margin-right:2%;
+}
+
+.grid .column{
+width:49%}
+
+}
 
 /*
  * if width wide enough, then put asides in wide right-hand margin
@@ -109,11 +136,17 @@ margin-right:10%;
 width: 80%
 }
 
+
+
 #head, .quote-box, #toc{
 width:100vw!important;
 padding:0!important;
 position:relative;
 right:10vw;
+}
+
+.staffcolumn{
+width:60%
 }
 
        /*
index 7a6616bd96ff4e2974eaa5417875b8e6c1af2102..d4c2a7858ea8747c6861a3fdd4a32977be7186b7 100644 (file)
@@ -3,7 +3,19 @@ SITENAME = 'FSF FY2018 Annual Report'
 SITEURL = ''
 
 PATH = 'content'
-STATIC_PATHS = ['images']
+
+STATIC_PATHS = [
+    'images',
+    'extra',
+]
+EXTRA_PATH_METADATA = {
+    'extra/custom.css': {'path': 'custom.css'},
+    'extra/robots.txt': {'path': 'robots.txt'},
+    'extra/favicon.ico': {'path': 'favicon.ico'},  # and this
+    'extra/CNAME': {'path': 'CNAME'},
+    'extra/LICENSE': {'path': 'LICENSE'},
+    'extra/README': {'path': 'README'},
+}
 
 TIMEZONE = 'US/Eastern'
 
index 35ee10826b05f66570af1aae964cf2ea3925a2da..a15a770a0a9d9bdfe123ad108ee5cd5a71be1424 100644 (file)
@@ -35,8 +35,9 @@ def image_parser(preprocessor, tag, markup):
 @LiquidTags.register("separator")
 def separator_parser(preprocessor, tag, markup):
     data = loads(markup)
-    return '<div class="quote-box">\
+    return '<div class="quote-box-top"></div>\
+            <div class="quote-box">\
     <h4>%s</h4>\
-    <blockquote><p>"%s"</p></blockquote>' % (data['title'], data['quote'])
+    <blockquote><p>&quot;%s&quot;</p></blockquote></div>' % (data['title'], data['quote'])
 
 from .liquid_tags import register  # noqa
index 0e58804c9523ff670275539230ff1e311eb878d4..33b9cfb8b735a4290508f4955b50c761f27c2795 100644 (file)
  */
 
 
-:root {
-    --background: #fffff6;
-    --brightaccent: #ece1bd;
-    --darkaccent: #ac4f30;
-    --lightaccent: #d1b661;
-    --colortone: -40deg;
-}
-
-
-
-
 /*****************************************************************************/
 /* Some basic settings                                                       */
 
@@ -969,7 +958,6 @@ border-top:3px solid black;
 table{
 width:100%;
 border-spacing:0;
-max-width: 30vw !important;
 }
 
 h1{
@@ -1019,8 +1007,11 @@ min-width:500px
 
 
 .grid{
-display:block;
+display:inline-flex;
+align-items: flex-start;
+flex-flow: wrap;
 margin-top:1rem;
+gap:2%
 }
 
 .grid h4{
@@ -1029,15 +1020,12 @@ padding: 0.5rem;
 background-color: var(--darkaccent);
 letter-spacing: 1px;
 font-size:1.1rem;
-width:80%;
 margin-bottom:0.5rem;
 }
 
 .grid p{
 line-height:1.2rem;
 padding:0;
-width:80%!important;
-margin:0 0 3rem
 }
 
 .grid a{
@@ -1047,26 +1035,26 @@ margin:0 0 3rem
 }
 
 .column{
-float:left;
-width: 25%;
+margin: 0 auto;
+width: 22%;
 }
 .column p {width:80%}
 
 .column5{
 float:left;
-width: 18% !important;
+width: 18%;
 margin:0 1% 0 1%;
 }
 
 .column3{
 float:left;
-width: 28% !important;
+width: 28%;
 margin:0 1% 0 1%;
 }
 
 .column2{
 float:left;
-width: 48% !important;
+width: 48%;
 margin:0 1% 0 1%;
 }
 
@@ -1089,6 +1077,14 @@ footer{
 }
 
 #toc{
+  border-bottom: 1rem solid var(--lightaccent);
+  display:inline-grid;
+  width:100%;
+  margin:0;
+  padding:0;
+}
+
+#tocbg{
   display:block;
   width:100%;
   background-repeat:no-repeat !important;
@@ -1097,10 +1093,9 @@ footer{
   -moz-background-size: cover !important;
   -o-background-size: cover !important;
   background-size: cover!important;
-  border-bottom: 1rem solid var(--lightaccent);
 }
 
-#tocimage{
+#toctext{
   padding-top:12rem;
   padding-left: 10%;
   /*backdrop-filter: brightness(50%) sepia(100%) saturate(150%) hue-rotate(var(--colortone));
@@ -1140,7 +1135,9 @@ footer{
   color: black;
   font-size:70%;
   margin:0;
-  padding:0
+  padding:0;
+  position:relative;
+  top: -1rem;
 }
 
 #toc .caption{
@@ -1163,13 +1160,20 @@ a{
 .credit {
     font-size: 70%;
     opacity: 0.7;
-    margin-top:0;
+    margin:0;
     padding-top:0;
-    padding-bottom: 0.65rem;
     text-transform: uppercase;
     letter-spacing: 1px;
-    color:var(--darkaccent)
+    color:var(--darkaccent);
+  position:relative;
+  top: -0.5rem;
+}
+
+p + .quote-box-top{
+height:3rem;
+clear:both;
 }
+
 .quote-box {
   clear:both;
   margin: 0 auto;
@@ -1181,17 +1185,24 @@ a{
 
 .quote-box h4 {
   font-size: 120%;
+  padding-top: 3rem;
   color: var(--lightaccent);
 }
 .quote-box blockquote {
   font-size: 180%;
   line-height: 1.3;
   font-weight: 700;
-  padding-top: 1rem;
+  padding:0;
+  margin:0;
   text-align: center;
   border:none;
 }
 
+.quote-box p{
+  padding:0;
+  margin:0 0 3rem 0;
+}
+
 .subtitle p{
 font-weight:bold;
 }
@@ -1274,7 +1285,15 @@ dd{
 margin:0;
 padding:0;
 font-size:0.8rem;
+}
 
+dl{
+       width:fit-content;
+       padding:.5rem;
+  background-image: url(/images/corner.svg), url(/images/corner.svg), url(/images/corner.svg), url(/images/corner.svg);
+  background-size: 10px 10px;
+  background-position: bottom left, bottom right, top left, top right;
+  background-repeat: no-repeat;
 }
 
 .logos{
@@ -1296,8 +1315,8 @@ vertical-align:middle
 
     display: inline-block;
     margin: 0 0.5rem 0.65rem;
-    color: #ac4f30;
-    border-bottom: 2px solid #ece1bd;
+    color: var(--darkaccent);
+    border-bottom: 2px solid var(--lightaccent);
 
 }
 
@@ -1330,3 +1349,17 @@ padding-left:10%
 width:100%;
 border-bottom:1px solid var(--lightaccent)
 }
+
+
+p {
+margin-top:0
+}
+
+p:empty{
+margin:0}
+
+
+
+.staff img, .colortone, .matplotlib, #tocbg{
+filter:  hue-rotate(var(--colortone)) grayscale(50%)
+}
diff --git a/theme/static/css/b-side-base.css.css b/theme/static/css/b-side-base.css.css
new file mode 100644 (file)
index 0000000..e69de29
index a92b44641efebc4b696b258f806e0133cf2d0578..52dc1ce573228f0c2482155e1c57d54162d647ce 100644 (file)
@@ -66,13 +66,14 @@ img {
                 padding-right:5%;
         }*/
 
-.document, #head p, h1, .fsflogo, .grid{
+.document, #head p, h1, .fsflogo{
 margin-left:2%;
 margin-right:2%;
 width:96%
 }
 
 
+
 #head, .quote-box, #toc{
 width:106%!important;
 padding:0!important;
@@ -80,6 +81,32 @@ position:relative;
 right:2%
 }
 
+@media (max-width: 899px) {
+.column2 {
+width:100%
+}
+
+.column3, .column5 {
+width:47%!important
+}
+
+.staffcolumn{
+padding:0 !important;
+width:100%
+}
+
+html{font-size:22px}
+
+.grid{
+width:95%;
+margin-left:2%;
+margin-right:2%;
+}
+
+.grid .column{
+width:49%}
+
+}
 
 /*
  * if width wide enough, then put asides in wide right-hand margin
@@ -109,11 +136,17 @@ margin-right:10%;
 width: 80%
 }
 
+
+
 #head, .quote-box, #toc{
 width:100vw!important;
 padding:0!important;
 position:relative;
 right:10vw;
+}
+
+.staffcolumn{
+width:60%
 }
 
        /*
index 9917d096a1f615e58f04d35453ba3287ec74a34f..daff1490b1ae9ee9674603e470f15b6d3eb84fcf 100644 (file)
@@ -1,2 +1,2 @@
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
+<meta name="viewport" content="width=680" />
index 64e7b28524b95417f6f11bf17ca2e0665fa87642..e9d841b5beee1c41239fbadadb9a1fbf1807f4ee 100644 (file)
@@ -1 +1,2 @@
+<link href="custom.css" rel="stylesheet">
 <link href="./theme/css/b-side-base.css" rel="stylesheet">