Commit 92132107 authored by Pat David's avatar Pat David

Clean up inline style and script tags for CSP compliance

This is a first pass at cleaning up all of the inline <script>,
<style>, and <... style=...> markup across the site.

Test at https://observatory.mozilla.org/analyze.html
parent 15e6c572
/*
* platform-display.js
*
* Used on /downloads/ to change download display blocks
* based on detected platform.
*
* Pat David, 2016
*/
if ( platform.os.family.indexOf('Win') !== -1 && platform.os.family.indexOf('Phone') == -1 ){
// Windows, _not_ Phone
document.getElementById('win').style.display = 'block';
document.getElementById('mac').style.display = 'none';
document.getElementById('linux').style.display = 'none';
document.getElementById('pOSTEST').innerHTML = 'Microsoft Windows.';
}else if ( platform.os.family.indexOf('OS X') !== -1 ){
// OS X
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'block';
document.getElementById('linux').style.display = 'none';
document.getElementById('pOSTEST').innerHTML = 'OS X.';
}else if ( platform.os.family.indexOf('iOS') !== -1 || platform.os.family.indexOf('Android') !== -1 ){
// iOS or Android
document.getElementById('pOSTEST').innerHTML = platform.os.family + '.';
var nope = "<br/><strong>This platform is not currently supported.</strong>";
document.getElementById('pOSTEST').innerHTML += nope;
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'none';
document.getElementById('linux').style.display = 'none';
}else {
// Everything else (assuming *nix-type)
document.getElementById('pOSTEST').innerHTML = platform.os.family + '.';
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'none';
document.getElementById('linux').style.display = 'block';
}
function render( os ){
switch( this.id ) {
case 'os_linux':
document.getElementById('linux').style.display = 'block';
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'none';
break;
case 'os_win':
document.getElementById('linux').style.display = 'none';
document.getElementById('win').style.display = 'block';
document.getElementById('mac').style.display = 'none';
break;
case 'os_mac':
document.getElementById('linux').style.display = 'none';
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'block';
break;
default:
document.getElementById('linux').style.display = 'block';
document.getElementById('win').style.display = 'block';
document.getElementById('mac').style.display = 'block';
break;
}
return false;
}
document.getElementById('os_all').addEventListener("click", render );
document.getElementById('os_linux').addEventListener("click", render );
document.getElementById('os_win').addEventListener("click", render );
document.getElementById('os_mac').addEventListener("click", render );
/*
* search-embed.js
*
* This should be included at the end of every page
* that we want to include search functionality on.
*
* Pat David, 2016
*/
var searchForm = document.getElementById('search-form');
var tipue_input = document.getElementById('tipue_search_input');
while( searchForm.firstChild ){
searchForm.removeChild( searchForm.firstChild );
}
tipue_input.placeholder = "Search GIMP.org";
searchForm.appendChild( tipue_input );
searchForm.action = "/search.html";
/*
* search-ready.js
*
* This is to be included on the search
* results page.
*
* Pat David, 2016
*/
$(document).ready(function() {
$('#tipue_search_input').tipuesearch({
'descriptiveWords': 50
});
});
/*
* downloads.css
*
* Styling specifically for the /downloads/ page
*
*/
table {
max-width: 35rem;
margin: 1rem auto;
}
td, th {
padding: 0 1rem;
}
.download-mirrors{
word-wrap: break-word;
}
@media ( max-width: 40rem ){
.download-mirrors dd {
margin-left: 0.5rem;
}
}
.os {
display: block;
}
#pOSTEST {
font-style: italic;
}
.show_links {
color: #497bad;
cursor: pointer;
}
.win-button {
display: inline-block;
border: solid 1px #666;
background-color: #f57900;
margin: 0.5rem 0;
border-radius: 10px;
box-shadow: 1px 1px 2px;
text-align: center;
font-family: Questrial;
font-weight: 400;
width: 49%;
}
#win-torrent, #osx-torrent {
background-color: #008080;
}
.win-button a {
color: white;
font-weight: bold;
display: inline-block;
padding: 1rem;
}
.mirrors {
display: none;
}
......@@ -254,6 +254,11 @@ figure {
vertical-align: text-top;
}
#gimp-home #menuWilber {
width: 25px;
height: 20px;
}
.codehilitetable {
margin: 1rem auto;
font-size: 0.8rem;
......@@ -727,3 +732,12 @@ form {
max-width: 34rem;
margin: 1rem auto;
}
#wilber-tiny {
width: 25px;
height: 20px;
}
a.donate-orange {
color:#f57900 !important;
}
......@@ -49,3 +49,7 @@ abbr[title] {
border: none;
color: #888;
}
.feed-text {
font-size: 0.85rem;
}
......@@ -136,3 +136,8 @@ figure figcaption {
address.vcard.author {
display: inline;
}
.debug {
border: dotted 1px #ccc;
font-size: 80%;
}
......@@ -212,6 +212,10 @@ http://www.tipue.com/search
width: 300px;
}
#tipue_search_input.on_search_page {
width: 100%;
}
.tipue_search_content_title {
font-family: Questrial;
line-height: 1.5rem;
......
......@@ -52,10 +52,9 @@
<body id="index" class="home">
{# <nav id="menu" style='display: none;'> #}
<nav id="menu">
<ul>
<li id='gimp-home'><a href="/"><img src='/images/wilbericon.svg' id='menuWilber' style='width:25px;height:20px;' alt='Tiny Wilber'> GIMP</a></li>
<li id='gimp-home'><a href="/"><img src='/images/wilbericon.svg' id='menuWilber' alt='Tiny Wilber'> GIMP</a></li>
<li><a href="/downloads/"><i class="fa fa-download"></i> Download</a></li>
<li><a href="/news/"><i class="fa fa-newspaper-o"></i> News</a></li>
<li><a href="/about/"><i class="fa fa-info-circle"></i> About</a></li>
......@@ -87,7 +86,7 @@
#}
<li>
<a href="/donating/" style="color:#f57900;"><i class="fa fa-money"></i> Donate</a>
<a class='donate-orange' href="/donating/"><i class="fa fa-money"></i> Donate</a>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=gimp%40gnome%2eorg&lc=US&item_name=Donation%20to%20GIMP%20Project&item_number=106&currency_code=USD" title='Donate with PayPal' class='donate-type'>
<img src='/theme/images/pp16.png' alt="PayPal" >
</a>
......@@ -105,7 +104,7 @@
<div id='navstrip' class='nav-down'>
<a href="/" class='navfive'>
<img id='wilber-tiny' src="/images/wilbericon.svg" style="width:25px;height:20px;" alt='Wilber Icon'><br/>
<img id='wilber-tiny' src="/images/wilbericon.svg" alt='Wilber Icon'><br/>
GIMP
</a>
<a href="/news/" class='navfive'>
......@@ -142,7 +141,7 @@
<div class="row clearfix">
<div class="column third">
<ul class="nav-bottom">
<li id='nav-btm-gimp-home'><a href="/"><img src='/images/wilbericon.svg' style='width:25px;height:20px;' id='footerWilber' alt='Tiny Wilber'> GIMP</a></li>
<li id='nav-btm-gimp-home'><a href="/"><img src='/images/wilbericon.svg' id='footerWilber' alt='Tiny Wilber'> GIMP</a></li>
<li id="nav-btm-downloads"><a href="/downloads/"><i class="fa fa-download fa-fw"></i> Download</a></li>
<li id="nav-btm-news"><a href="/news/"><i class="fa fa-newspaper-o fa-fw"></i> News</a></li>
</ul>
......@@ -256,18 +255,10 @@
</div>
{# We use this for the sliding menu on small responsive screen (phone/tablet) #}
<script async src="/js/push-menu.js"></script>
<script>
var searchForm = document.getElementById('search-form');
var tipue_input = document.getElementById('tipue_search_input');
while( searchForm.firstChild ){
searchForm.removeChild( searchForm.firstChild );
}
tipue_input.placeholder = "Search GIMP.org";
searchForm.appendChild( tipue_input );
searchForm.action = "/search.html";
</script>
<script async src='/js/push-menu.js'></script>
{# including the js snippet for searching with tipuesearch #}
<script async src='/js/search-embed.js'></script>
</body>
</html>
......@@ -5,6 +5,11 @@
Access it using GIMP.###
#}
{% block head %}
{{ super() }}
<link rel='stylesheet' type='text/css' href='/theme/css/downloads.css' />
{% endblock %}
{% block data %}
<figure>
......@@ -289,130 +294,8 @@
</div>
<script src="/js/platform.js"></script>
<script>
if ( platform.os.family.indexOf('Win') !== -1 && platform.os.family.indexOf('Phone') == -1 ){
// Windows, _not_ Phone
document.getElementById('win').style.display = 'block';
document.getElementById('mac').style.display = 'none';
document.getElementById('linux').style.display = 'none';
document.getElementById('pOSTEST').innerHTML = 'Microsoft Windows.';
}else if ( platform.os.family.indexOf('OS X') !== -1 ){
// OS X
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'block';
document.getElementById('linux').style.display = 'none';
document.getElementById('pOSTEST').innerHTML = 'OS X.';
}else if ( platform.os.family.indexOf('iOS') !== -1 || platform.os.family.indexOf('Android') !== -1 ){
// iOS or Android
document.getElementById('pOSTEST').innerHTML = platform.os.family + '.';
var nope = "<br/><strong>This platform is not currently supported.</strong>";
document.getElementById('pOSTEST').innerHTML += nope;
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'none';
document.getElementById('linux').style.display = 'none';
}else {
// Everything else (assuming *nix-type)
document.getElementById('pOSTEST').innerHTML = platform.os.family + '.';
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'none';
document.getElementById('linux').style.display = 'block';
}
function render( os ){
switch( this.id ) {
case 'os_linux':
document.getElementById('linux').style.display = 'block';
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'none';
break;
case 'os_win':
document.getElementById('linux').style.display = 'none';
document.getElementById('win').style.display = 'block';
document.getElementById('mac').style.display = 'none';
break;
case 'os_mac':
document.getElementById('linux').style.display = 'none';
document.getElementById('win').style.display = 'none';
document.getElementById('mac').style.display = 'block';
break;
default:
document.getElementById('linux').style.display = 'block';
document.getElementById('win').style.display = 'block';
document.getElementById('mac').style.display = 'block';
break;
}
return false;
}
document.getElementById('os_all').addEventListener("click", render );
document.getElementById('os_linux').addEventListener("click", render );
document.getElementById('os_win').addEventListener("click", render );
document.getElementById('os_mac').addEventListener("click", render );
</script>
<style>
table {
max-width: 35rem;
margin: 1rem auto;
}
td, th {
padding: 0 1rem;
}
.download-mirrors{
word-wrap: break-word;
}
@media ( max-width: 40rem ){
.download-mirrors dd {
margin-left: 0.5rem;
}
}
.os {
display: block;
}
#pOSTEST {
font-style: italic;
}
.show_links {
color: #497bad;
cursor: pointer;
}
.win-button {
display: inline-block;
border: solid 1px #666;
background-color: #f57900;
margin: 0.5rem 0;
border-radius: 10px;
box-shadow: 1px 1px 2px;
text-align: center;
font-family: Questrial;
font-weight: 400;
width: 49%;
}
#win-torrent, #osx-torrent {
background-color: #008080;
}
.win-button a {
color: white;
font-weight: bold;
display: inline-block;
padding: 1rem;
}
.mirrors {
display: none;
}
</style>
<script src='/js/platform.js'></script>
<script src='/js/platform-display.js'></script>
{% endblock data %}
......@@ -21,9 +21,7 @@
{% block header %}
<header id="banner" class="body clearfix">
{#
<img id='twenty-banner' src='/images/frontpage/20banner.svg' alt='GIMP 20th Anniversary Banner' width='250' height='250' style='position: absolute; left: 0; width: 250px; height: 250px;'/>
#}
<div class="container">
<div class="intro row">
......@@ -273,70 +271,5 @@
</section>
{#
<section style='background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(166,166,166,.07) 40px, rgba(166,166,166,.07) 80px);'>
<div class='container'>
<div class='row clearfix'>
<div class='column full'>
<h2>Temporary Stuff Below Here</h2>
<p>
The content below this section is almost entirely for testing the build system and article parsing.
Disregard the formatting/content unless specifically addressing something that was asked about.
</p>
</div>
</div>
</div>
</section>
#}
{#
<section id="articles">
{#
{% block content_title %}
<h2>Recent News</h2>
{% endblock %}
{# original stuff ...
<ol id="post-list">
{% for article in articles_page.object_list %}
<li><article class="hentry">
<header> <h2 class="entry-title"><a href="/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2> </header>
<footer class="post-info">
<abbr class="published" title="{{ article.date.isoformat() }}"> {{ article.locale_date }} </abbr>
<address class="vcard author">By
{% for author in article.authors %}
<a class="url fn" href="/{{ author.url }}">{{ author }}</a>
{% endfor %}
</address>
</footer><!-- /.post-info -->
<div class="entry-content"> {{ article.summary }} </div><!-- /.entry-content -->
</article></li>
{% endfor %}
</ol><!-- /#posts-list -->
{% if articles_page.has_other_pages() %}
{% include 'pagination.html' %}
{% endif %}
#}
{#
<h3>Articles Object</h3>
<div>
<a href="{{ articles[0].url }}">{{ articles[0].title }}</a>
</div>
<div>
{{ articles[0].summary }}
</div>
<div>
{{ articles[0].author }}
</div>
<div>
articles[0].date: {{ articles[0].date }}<br/>
articles[0].locale_date: {{ articles[0].locale_date }}<br/>
articles[0].locale_modified: {{ articles[0].locale_modified }}
</div>
</section><!-- /#content -->
#}
{% endblock content %}
......@@ -49,80 +49,14 @@
#}
{% block content %}
{#
<section id='introduction'>
<div class='container'>
<div class='row clearfix'>
<div class='column two-thirds'>
<h2>The Free &amp; Open Source Image Editor</h2>
{# <h2>This is the official GIMP website</h2> #}
{#
<p>
This is the official GIMP website.
It contains information about downloading, installing, using, and enhancing it.
This site also serves as a distribution point for the latest releases.
We try to provide as much information about the GIMP community and related projects as possible.
Hopefully you will find what you need here.
Grab a properly chilled beverage and enjoy...
</p>
<p>
<b>I feel that this section should tell a visitor exactly <em>what</em> GIMP is, what it does, as well as how to get it.</b>
</p>
</div>
<div class='column third' style="background-color: white; margin-left: 10px; margin-right: -10px; padding: 1rem; box-shadow: rgba(127,127,127,1) 2px 2px, rgba(127,127,127,1) 3px 3px, rgba(127,127,127,1) 4px 4px, rgba(127,127,127,1) 5px 5px, rgba(127,127,127,1) 6px 6px;">
<h2 style="color: red;">STILL WORKING</h2>
<p style='font-size: 0.85rem;color: red;'>
I am still in the process of building this site out. Things are in a great state of flux. For further information on building the new site refer to the <a href="/about/meta">Meta</a> page.
</p>
</div>
</div>
</div>
</section>
<section id='cap-photos'>
<div class='container'>
<div class='row clearfix'>
<div class='column third'>
&nbsp;
</div>
<div class='column two-thirds'>
<h3>High Quality Photo Manipulation</h3>
<p>
GIMP provides the tools for needed for high quality image manipulation.
From retouching to creative composites, the only limit is your imagination.
</p>
</div>
</div>
</div>
</section>
<section style='background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(166,166,166,.07) 40px, rgba(166,166,166,.07) 80px);'>
<div class='container'>
<div class='row clearfix'>
<div class='column full'>
<h2>Temporary Stuff Below Here</h2>
<p>
The content below this section is almost entirely for testing the build system and article parsing.
Disregard the formatting/content unless specifically addressing something that was asked about.
(Like, do those dates look funny to you?)
</p>
</div>
</div>
</div>
</section>
#}
<div class="container title">
<div class="row clearfix">
<div class="column full">
{% block content_title %}
<h1>Recent News</h1>
<div style='font-size: 0.85rem;'><a href='/feeds/atom.xml'>Feed <i class='fa fa-rss'></i></a></div>
<div class='feed-text'><a href='/feeds/atom.xml'>Feed <i class='fa fa-rss'></i></a></div>
{% endblock %}
</div>
</div>
......
{% extends "base.html" %}
{% block head %}
{{ super() }}
<link rel='stylesheet' type='text/css' href="{{ SITEURL }}/theme/css/index.css" />
{% endblock head %}
{% block header %}
<header id="banner" class="body clearfix">
<div class="container">
<div class="intro row">
<img id='WilberLogo' src="{{ SITEURL }}/theme/images/wilber-big.png" alt="GIMP Wilber" width='200' height='150'/>
<h1>
<a href="{{ SITEURL }}/">GIMP</a>
{#<a href="{{ SITEURL }}/">{{ SITENAME }} <strong>{{ SITESUBTITLE }}</strong></a> #}
{# <a href="{{ SITEURL }}/"><img src="{{ SITEURL }}/theme/images/wilber-big.png" alt="GIMP Wilber"/>{{ SITENAME }}</a> #}
</h1>
<div class='introInfo'>
<span id='gFirst'>GNU IMAGE</span>
<span id='gSecond'>MANIPULATION PROGRAM</span>
<span id='gThird'>
<a href="/downloads/">
<span id="DLButton"><i class="fa fa-download"></i> DOWNLOAD</span>
</a>
<span id="ReleaseButton">RELEASE NOTES</span></span>
</div>
</div>
</div>
</header><!-- /#banner -->
{% endblock header %}
{% block content %}
<section id='introduction'>
<div class='container'>
<div class='row clearfix'>
<div class='column two-thirds'>
<h2>The Free &amp; Open Source Image Editor</h2>
{# <h2>This is the official GIMP website</h2> #}
<p>
This is the official GIMP website.
It contains information about downloading, installing, using, and enhancing it.
This site also serves as a distribution point for the latest releases.
We try to provide as much information about the GIMP community and related projects as possible.
Hopefully you will find what you need here.
Grab a properly chilled beverage and enjoy...
</p>
<p>
<b>I feel that this section should tell a visitor exactly <em>what</em> GIMP is, what it does, as well as how to get it.</b>
</p>
</div>
<div class='column third' style="background-color: white; margin-left: 10px; margin-right: -10px; padding: 1rem; box-shadow: rgba(127,127,127,1) 2px 2px, rgba(127,127,127,1) 3px 3px, rgba(127,127,127,1) 4px 4px, rgba(127,127,127,1) 5px 5px, rgba(127,127,127,1) 6px 6px;">
<h2 style="color: red;">STILL WORKING</h2>
<p style='font-size: 0.85rem;color: red;'>
I am still in the process of building this site out. Things are in a great state of flux. For further information on building the new site refer to the <a href="/about/meta">Meta</a> page.
</p>
</div>
</div>
</div>
</section>
<section id='cap-photos'>
<div class='container'>
<div class='row clearfix'>
<div class='column third'>
&nbsp;
</div>
<div class='column two-thirds'>
<h3>High Quality Photo Manipulation</h3>
<p>
GIMP provides the tools for needed for high quality image manipulation.
From retouching to creative composites, the only limit is your imagination.
</p>
</div>
</div>
</div>
</section>
<section style='background: repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(166,166,166,.07) 40px, rgba(166,166,166,.07) 80px);'>
<div class='container'>
<div class='row clearfix'>
<div class='column full'>
<h2>Temporary Stuff Below Here</h2>
<p>
The content below this section is almost entirely for testing the build system and article parsing.
Disregard the formatting/content unless specifically addressing something that was asked about.
(Like, do those dates look funny to you?)
</p>
</div>
</div>
</div>
</section>
<section id="articles">
{% block content_title %}
<h2>Recent News</h2>
{% endblock %}
<div class="container">
{% for article in articles_page.object_list %}
<div class='row clearfix'>
<h3 class="entry-title">
<a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">
{{ article.title }}
</a>
</h3>
<div class='post-info'>
<abbr class="published" title="{{ article.date.isoformat() }}"> {{ article.locale_date }} </abbr>
<address class="vcard author">by
{% for author in article.authors %}
<a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
{% endfor %}
</address>
</div>
<div class='entry-content'> {{ article.summary }} </div>
</div>