> 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.
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.
### 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
"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
</div>
<div class="column5 float-left" markdown="1">
-
### Defending user freedom with free software
FSF and GNU infrastructure includes:
: 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}
## Donors
-
-
### Institutional Support
<div class="donors" markdown=1>
### $500-$999
-
<div class="donors" markdown=1>
* Jean-Louis Abraham
* Ben Abrams
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
## 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
Attorney
</div>
-
-<div class="staffcolumn width-60 float-left" markdown=1>
+<div class="staffcolumn float-left" markdown=1>
### Leadership
<div class="staff" markdown=1>
--- /dev/null
+
+/* 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;
+}
+
--- /dev/null
+<?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>
<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">
--- /dev/null
+
+/* 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;
+}
+
<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">
<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>
<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>
<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>
<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>
</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">
</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>
<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>
<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>
--- /dev/null
+<?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>
<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">
*/
-:root {
- --background: #fffff6;
- --brightaccent: #ece1bd;
- --darkaccent: #ac4f30;
- --lightaccent: #d1b661;
- --colortone: -40deg;
-}
-
-
-
-
/*****************************************************************************/
/* Some basic settings */
table{
width:100%;
border-spacing:0;
-max-width: 30vw !important;
}
h1{
.grid{
-display:block;
+display:inline-flex;
+align-items: flex-start;
+flex-flow: wrap;
margin-top:1rem;
+gap:2%
}
.grid h4{
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{
}
.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%;
}
}
#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;
-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));
color: black;
font-size:70%;
margin:0;
- padding:0
+ padding:0;
+ position:relative;
+ top: -1rem;
}
#toc .caption{
.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;
.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;
}
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{
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);
}
.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%)
}
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;
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
width: 80%
}
+
+
#head, .quote-box, #toc{
width:100vw!important;
padding:0!important;
position:relative;
right:10vw;
+}
+
+.staffcolumn{
+width:60%
}
/*
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'
@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>"%s"</p></blockquote></div>' % (data['title'], data['quote'])
from .liquid_tags import register # noqa
*/
-:root {
- --background: #fffff6;
- --brightaccent: #ece1bd;
- --darkaccent: #ac4f30;
- --lightaccent: #d1b661;
- --colortone: -40deg;
-}
-
-
-
-
/*****************************************************************************/
/* Some basic settings */
table{
width:100%;
border-spacing:0;
-max-width: 30vw !important;
}
h1{
.grid{
-display:block;
+display:inline-flex;
+align-items: flex-start;
+flex-flow: wrap;
margin-top:1rem;
+gap:2%
}
.grid h4{
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{
}
.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%;
}
}
#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;
-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));
color: black;
font-size:70%;
margin:0;
- padding:0
+ padding:0;
+ position:relative;
+ top: -1rem;
}
#toc .caption{
.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;
.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;
}
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{
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);
}
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%)
+}
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;
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
width: 80%
}
+
+
#head, .quote-box, #toc{
width:100vw!important;
padding:0!important;
position:relative;
right:10vw;
+}
+
+.staffcolumn{
+width:60%
}
/*
<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
+<meta name="viewport" content="width=680" />
+<link href="custom.css" rel="stylesheet">
<link href="./theme/css/b-side-base.css" rel="stylesheet">