[gimp-web/testing] Clean more inline 'style=' for CSP migration
- From: Pat David <patdavid src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gimp-web/testing] Clean more inline 'style=' for CSP migration
- Date: Mon, 10 Oct 2016 16:35:44 +0000 (UTC)
commit 41042a37ad85cd2b138eca3b381955629458bf2e
Author: Pat David <patdavid gmail com>
Date: Fri Oct 7 17:14:51 2016 -0500
Clean more inline 'style=' for CSP migration
Manually cleaned up many inline styles on elements in preparation
for being CSP compliant. Almost there...
content/about/mail_lists.md | 2 +-
content/about/meta/file-list.md | 5 -
content/about/meta/social/index.md | 227 --------------------
content/about/meta/translating.md | 6 -
content/about/prehistory.md | 8 +-
content/bugs/index.md | 8 +-
content/donating/index.md | 2 +-
content/man/gimp-remote.md | 9 +-
content/man/gimp.md | 11 +-
content/man/gimprc.md | 21 +--
content/man/gimptool.md | 9 +-
content/news/2016-01-12 LGM/index.md | 8 +-
content/release-notes/gimp-2.4-cm.md | 2 +-
content/source/index.md | 16 +--
.../tutorials/Automate_Editing_in_GIMP/index.css | 25 +++
.../tutorials/Automate_Editing_in_GIMP/index.md | 36 +---
content/tutorials/Basic_Color_Curves/index.css | 3 +
content/tutorials/Basic_Color_Curves/index.md | 18 +-
content/tutorials/Basic_Perl/index.md | 42 ++---
content/tutorials/Basic_Scheme/index.md | 15 +--
.../Digital_Black_and_White_Conversion/index.css | 2 +
.../Digital_Black_and_White_Conversion/index.md | 5 +-
content/tutorials/Floating_Logo/index.css | 11 +
content/tutorials/Floating_Logo/index.md | 66 +++---
content/tutorials/GIMP_Quickies/index.md | 34 ++--
content/unix/gimprc.css | 4 +
content/unix/gimprc.md | 8 +-
themes/newgimp/static/css/article.css | 10 +
themes/newgimp/static/css/page.css | 68 ++++++
themes/newgimp/static/css/page_author.css | 1 +
themes/newgimp/templates/page_author.html | 2 +
31 files changed, 238 insertions(+), 446 deletions(-)
---
diff --git a/content/about/mail_lists.md b/content/about/mail_lists.md
index a677e55..7f7ee7c 100644
--- a/content/about/mail_lists.md
+++ b/content/about/mail_lists.md
@@ -13,7 +13,7 @@ Don't send any private or sensitive information!
<dl>
<dt><a href="https://mail.gnome.org/mailman/listinfo/gimp-user-list";><strong>GIMP User</strong></a></dt>
- <dd><span style='font-weight: 400; font-style: italic;'>This is the main list for questions about using
GIMP.</span><br>
+ <dd><strong><em>This is the main list for questions about using GIMP.</em></strong><br>
The original (mostly unix based) user list. For the everyday user.
Here you will find tips for doing cool effects, user questions, etc.<br>
Archives:
diff --git a/content/about/meta/file-list.md b/content/about/meta/file-list.md
index 45ca6ac..44e4045 100644
--- a/content/about/meta/file-list.md
+++ b/content/about/meta/file-list.md
@@ -234,8 +234,3 @@ The main page links go to legacy WGO, the link icon (if there) will go to the po
<http://www.gimp.org/windows/index.html> (Obsoleted? Directs to downloads page...)
-<style>
-a {
- word-break: break-all;
-}
-</style>
diff --git a/content/about/meta/social/index.md b/content/about/meta/social/index.md
index 629ba6d..4ccb15f 100644
--- a/content/about/meta/social/index.md
+++ b/content/about/meta/social/index.md
@@ -50,230 +50,3 @@ Here are the services that I currently have working:
## Twitter (GIMP Mentions)
</div>
-<style>
-#FBOut figure,
-#FBTagged figure {
- max-width: 34rem;
- max-width: 50%;
-}
-.FBData, .TData {
- margin-bottom: 3rem;
- font-size: 0.85rem;
-}
-.FBData img, .TData img {
- max-width: 50%;
-}
-.FBDate, .TDate {
- display: block;
- margin: 0 auto;
- max-width: 34rem;
- border-bottom: dashed 1px #ccc;
- margin-bottom: 0.5rem;
-}
-.FBMore, .TMore {
- text-align: right;
- max-width: 34rem;
- margin: 0 auto;
- font-size: 0.75rem;
- margin-top: -1rem;
-}
-#FBTagged, #TwitterMentions {
- background-color: #f7f7f7;
-}
-</style>
-
-<script type='text/javascript'>
-function doFB(rsp, type){
- console.log( rsp );
- console.log( type );
-
- for( var i = 0; i < rsp.data.length; i++ ){
- var thisPost = rsp.data[i];
-
- var post = document.createElement('div');
- post.className = 'FBData';
-
- if( thisPost.updated_time ){
- var d = new Date( thisPost.updated_time );
- var fblink = document.createElement('a');
-
- fblink.href = "https://www.facebook.com/permalink.php?story_fbid=";;
- fblink.href += thisPost.id.split('_')[1] + "&id=";
- fblink.href += thisPost.id.split('_')[0];
-
- var dated = document.createElement('span');
- dated.className = 'FBDate';
-
- if( type == 'posts' ){
- fblink.innerHTML = "FB Post ";
- }else if(type == 'tagged' ){
- //fblink.innerHTML = "FB Tagged ";
- }
-
- fblink.innerHTML += d.getFullYear() +'-'+ ("0" + (d.getMonth() + 1)).slice(-2) +'-';
- fblink.innerHTML += ("0" + d.getDate()).slice(-2);
-
- if( type == 'tagged' && thisPost.from ){
- fblink.innerHTML += " by "+ thisPost.from.name;
- fblink.innerHTML += " <i class='fa fa-facebook-official'
style='float:right;font-size:1.25rem;'></i>";
- }else if( type == 'posts' ){
- fblink.innerHTML += " <i class='fa fa-facebook-official'
style='float:right;font-size:1.25rem;'></i>";
- }
-
- dated.appendChild( fblink );
- post.appendChild( dated );
-
- }
-
- if( thisPost.message ){
- var msg = document.createElement('p');
- msg.innerHTML = thisPost.message.replace(/(?:\r\n|\r|\n)/g, '<br />');
- post.appendChild( msg );
- }else if( thisPost.story ){
- var msg = document.createElement('p');
- msg.innerHTML = thisPost.story;
- post.appendChild( msg );
- }
-
- if( thisPost.full_picture ){
- var fig = document.createElement('figure');
- var pic = document.createElement('img');
-
- pic.src = thisPost.full_picture;
-
- if( thisPost.type == 'link' && thisPost.name && thisPost.link ){
- var thislink = document.createElement('a');
- thislink.href = thisPost.link;
- thislink.appendChild( pic );
- fig.appendChild( thislink );
- post.appendChild( fig );
- }else{
- fig.appendChild( pic );
- post.appendChild( fig );
- }
- }
-
- if( thisPost.type == 'link' && thisPost.name && thisPost.link ){
- var sharelink = document.createElement('p');
- var linker = document.createElement('a');
- linker.href = thisPost.link;
- linker.innerHTML = thisPost.name;
-
- sharelink.appendChild( linker );
- post.appendChild( sharelink );
-
- }
-
- if( fblink ){
- var readmore = document.createElement('div');
- readmore.className = 'FBMore readmore';
- var morelink = document.createElement('a');
- morelink.href = fblink.href;
- morelink.innerHTML = 'Read More →';
- readmore.appendChild( morelink );
- post.appendChild( readmore );
- }
-
-
- if( type == 'posts' ){
- document.getElementById('FBOut').appendChild( post );
- }else if( type == 'tagged' ){
- document.getElementById('FBTagged').appendChild( post );
- }
- }
-}
-
-function doFBPosts( rsp ){
- doFB(rsp, 'posts');
-}
-
-function doFBTagged( rsp ){
- doFB(rsp, 'tagged');
-}
-
-function doTwitter( rsp, type ){
- console.log( rsp );
- console.log( type );
-
- for( var i = 0; i < rsp.statuses.length; i++ ){
-
- var thisPost = rsp.statuses[i];
- var post = document.createElement('div');
- post.className = 'TData';
-
- if( thisPost.created_at ){
- var d = new Date( thisPost.created_at );
- var link = document.createElement('a');
-
- link.href='https://twitter.com/GIMP_Official/status/' + thisPost.id_str;
-
- var dated = document.createElement('span');
- dated.className = 'TDate';
- link.innerHTML = "";
- link.innerHTML += d.getFullYear() +'-'+ ("0" + (d.getMonth() + 1)).slice(-2) +'-';
- link.innerHTML += ("0" + d.getDate()).slice(-2);
- link.innerHTML += " by ";
-
- if( thisPost.user.name !== thisPost.user.screen_name ){
- link.innerHTML += thisPost.user.name +' ';
- }
-
- if( thisPost.user.screen_name !== 'GIMP_Official' ){
- link.innerHTML += "<span style='color: #666;'>@"+ thisPost.user.screen_name +"</span>";
- }
-
- link.innerHTML += " <i class='fa fa-twitter' style='float:right;font-size:1.25rem;'></i>";
-
- dated.appendChild( link );
- post.appendChild( dated );
-
- }
-
- if( thisPost.text ){
- var msg = document.createElement('p');
- msg.innerHTML = thisPost.text.replace(/(?:\r\n|\r|\n)/g, '<br />');
-
- if( thisPost.entities.media ){
- for( var j = 0; j < thisPost.entities.media.length; j++ ){
- var thisMedia = thisPost.entities.media[j];
- if( thisMedia.type == 'photo' ){
- msg.innerHTML += "<br><img src='" + thisMedia.media_url_https + "' alt='Twitter Image'>";
- }
- }
- }
-
- post.appendChild( msg );
-
- }
-
-
- if( type == 'posts' ){
- document.getElementById('TwitterOut').appendChild( post );
- }else if( type == 'mentions' ){
- document.getElementById('TwitterMentions').appendChild( post );
- }
-
- }
-}
-
-function doTwitterPosts( rsp ){
- doTwitter( rsp, 'posts' );
-}
-
-function doTwitterMentions( rsp ){
- doTwitter( rsp, 'mentions' );
-}
-
-
-</script>
-
-<!--
-Thanks to twitter I had to host a bridge on pixls.us to query the information using curl.
-This _could_ be re-written to use Python and possibly host on pentagon, but this should
-be fine for right now.
--->
-<script async src="https://pixls.us/gt/fb.php?callback=doFBPosts";></script>
-<script async src="https://pixls.us/gt/fbtagged.php?callback=doFBTagged";></script>
-
-<script async src="https://pixls.us/gt/gt.php?callback=doTwitterPosts";></script>
-<script async src="https://pixls.us/gt/gtto.php?callback=doTwitterMentions";></script>
diff --git a/content/about/meta/translating.md b/content/about/meta/translating.md
index 690cbcd..b38751b 100644
--- a/content/about/meta/translating.md
+++ b/content/about/meta/translating.md
@@ -113,9 +113,3 @@ Once that is done, the `Title` attribute can be different between the two files
lang: fr
slug: creating-translations
-
-<style>
-.codehilite .err {
- border: none;
-}
-</style>
diff --git a/content/about/prehistory.md b/content/about/prehistory.md
index f1340b7..805864a 100644
--- a/content/about/prehistory.md
+++ b/content/about/prehistory.md
@@ -9,7 +9,7 @@ Summary:
At the end of July 1995, Peter Mattis posted a message in several newsgroups related to X11 and Linux
application development, asking two questions and giving hints about an interesting program...
-<pre style='font-size: 0.75rem; white-space: pre-wrap; border: solid 1px #ccc; padding: 1rem;'>
+<pre class='mail'>
<b>From:</b> Peter Mattis
<b>Subject:</b> Image Manipulation Program Features
<b>Date:</b> 1995-07-29
@@ -31,7 +31,7 @@ Thanks in advance,
Two weeks before, he was mentioning some program using plug-ins...
-<pre style='font-size: 0.75rem; white-space: pre-wrap; border: solid 1px #ccc; padding: 1rem;'>
+<pre class='mail'>
<b>From:</b> Peter Mattis
<b>Subject:</b> Re: Best way to write plug-ins?
<b>Date:</b> 1995-07-16
@@ -74,7 +74,7 @@ Peter Mattis
And then in November comes the first announcement of a beta release of the General Image Manipulation
Program, "The GIMP" (later renamed to just "GIMP").
-<pre style='font-size: 0.75rem; white-space: pre-wrap; border: solid 1px #ccc; padding: 1rem;'>
+<pre class='mail'>
<b>From:</b> Peter Mattis
<b>Subject:</b> ANNOUNCE: The GIMP
<b>Date:</b> 1995-11-21
@@ -159,7 +159,7 @@ precise details on how it can be reliably reproduced.
GIMP 0.54, the (in)famous Motif release, is announced in February 1996.
-<pre style='font-size: 0.75rem; white-space: pre-wrap; border: solid 1px #ccc; padding: 1rem;'>
+<pre class='mail'>
<b>From:</b> Peter Mattis
<b>Subject:</b> The GIMP v0.54 -- General Image Manipulation Program
<b>Date:</b> 1996-02-15
diff --git a/content/bugs/index.md b/content/bugs/index.md
index 18335a7..24f7b68 100644
--- a/content/bugs/index.md
+++ b/content/bugs/index.md
@@ -4,11 +4,7 @@ Modified: 2015-08-17T11:09:40-05:00
Authors: Pat David
Status: hidden
-<a href="https://bugzilla.gnome.org/enter_bug.cgi?product=GIMP"; title="Report a bug for GIMP!"
-style="
- font-weight: bold;
- font-size: 1.2rem;
-">
+<a href="https://bugzilla.gnome.org/enter_bug.cgi?product=GIMP"; title="Report a bug for GIMP!"
class='reportBug'>
Report a bug here!
</a>
@@ -18,7 +14,7 @@ Report a bug here!
<input type="hidden" name="product" value="GIMP" />
<input type="hidden" name="list_id" value="91665"/>
<label>Search for an existing bug:<br/>
-<input type="text" name="short_desc" placeholder="e.g.: 'font loading'" style='width: 50%; padding-left:
0.2rem;' /></label>
+<input type="text" name="short_desc" placeholder="e.g.: 'font loading'" id='bugInput' /></label>
<input type="submit" value="Submit"/>
</form>
diff --git a/content/donating/index.md b/content/donating/index.md
index a43cfc9..574d1f2 100644
--- a/content/donating/index.md
+++ b/content/donating/index.md
@@ -36,7 +36,7 @@ Many thanks to all our [sponsors](sponsors.html)!
<iframe frameborder="0" height="420" src="//tools.flattr.net/widgets/thing.html?thing=707850"
width="292"></iframe>
</p>
-<a class="FlattrButton" style=""
+<a class="FlattrButton"
title="Click to Flattr GIMP"
data-flattr-uid="schumaml"
data-flattr-popout="1"
diff --git a/content/man/gimp-remote.md b/content/man/gimp-remote.md
index b4e2dfd..13f77f0 100644
--- a/content/man/gimp-remote.md
+++ b/content/man/gimp-remote.md
@@ -4,11 +4,6 @@ Modified: 2015-08-17T11:31:42-05:00
Authors: Pat David
Status: hidden
-<style>
-dt {
- font-family: monospace;
-}
-</style>
[Table of Contents](#toc)
@@ -18,7 +13,7 @@ gimp-remote - tells a running GIMP to open a (local or remote) image file.
## [Synopsis](#toc1)
-<span style="font-family: monospace;" markdown="1">
+<span class="man" markdown="1">
**gimp‑remote** [‑h] [‑‑help] [‑v] [‑‑version]
[‑‑display _display_] [‑e] [‑‑existing] [‑q] [‑‑query]
[‑s] [‑‑no‑splash] [‑p] [‑‑print‑xid] _filename_ ...
</span>
@@ -34,7 +29,7 @@ If you are using GIMP on Linux or another platform with the D-Bus message bus sy
_gimp-remote_ accepts the following options:
-<dl>
+<dl class='man'>
<dt>-h, --help</dt>
diff --git a/content/man/gimp.md b/content/man/gimp.md
index bd2d7f7..925314b 100644
--- a/content/man/gimp.md
+++ b/content/man/gimp.md
@@ -4,11 +4,6 @@ Modified: 2015-08-17T11:31:42-05:00
Authors: Pat David
Status: hidden
-<style>
-dt {
- font-family: monospace;
-}
-</style>
[Table of Contents](#toc)
@@ -19,12 +14,12 @@ gimp - an image manipulation and paint program.
## [Synopsis](#toc1)
-<span style="font-family: monospace;" markdown="1">
+<span class="man" markdown="1">
**gimp** [‑h] [‑‑help] [‑‑help‑all] [‑‑help‑gtk]
[‑v] [‑‑version] [‑‑license] [‑‑verbose] [‑n]
[‑‑new‑instance] [‑a] [‑‑as‑new] [‑i]
[‑‑no‑interface] [‑d] [‑‑no‑data] [‑f]
[‑‑no‑fonts] [‑s] [‑‑no‑splash] [‑‑no‑shm]
[‑‑no‑cpu‑accel] [‑‑display _display_]
[‑‑session _<name>_] [‑g] [‑‑gimprc _<gimprc>_]
[‑‑system‑gimprc _<gimprc>_] [‑‑dump‑gimprc]
[‑‑console‑messages] [‑‑debug‑handlers]
[‑‑stack‑trace‑mode _<mode>_]
[‑‑pdb‑compat‑mode _<mode>_] [‑‑batch‑interpreter&
nbsp;_<procedure>_] [‑b] [‑‑batch _<command>_] [_filename_] ...
</span>
<!--
If you're reading this, I'm sorry for what you see above. It's a man page formatting. HTML makes a mess of
it.
-And raw man pages suck, imo. Here's what I did:
+And raw man pagstyle="font-family: monospace;es suck, imo. Here's what I did:
1. Wrap it in a span, set the font family to mono.
2. escape all brackets (not sure I need this).
3. replace all "<" and ">" with < and >
@@ -48,7 +43,7 @@ On platforms with the D-Bus message bus system, GIMP will by default check if an
GIMP accepts the following options:
-<dl>
+<dl class='man'>
<dt>-h, --help</dt>
diff --git a/content/man/gimprc.md b/content/man/gimprc.md
index 35d047f..9954435 100644
--- a/content/man/gimprc.md
+++ b/content/man/gimprc.md
@@ -4,11 +4,6 @@ Modified: 2015-08-17T11:31:42-05:00
Authors: Pat David
Status: hidden
-<style>
-dt {
- font-family: monospace;
-}
-</style>
[Table of Contents](#toc)
@@ -24,7 +19,7 @@ Comments are introduced by a hash sign (#), and continue until the end of the li
The **gimprc** file associates values with properties. These properties may be set by lisp-like assignments
of the form:
-<dl>
+<dl class='man'>
<dt><em><strong>(property-name value)</strong></em></dt>
@@ -275,7 +270,7 @@ When enabled, the selected font will be used for all tools. Possible values are
<dt>(default-image</dt>
<dd>
-<pre style="font-size: 0.85rem;">
+<pre class='gimprcsmall'>
(width 640)
(height 400)
(unit pixels)
@@ -293,7 +288,7 @@ Sets the default image in the "File/New" dialog. This is a parameter list.
<dt>(default-grid</dt>
-<dd><pre style="font-size: 0.85rem;">
+<dd><pre class='gimprcsmall'>
(style solid)
(fgcolor (color-rgba 0.000000 0.000000 0.000000 1.000000))
(bgcolor (color-rgba 1.000000 1.000000 1.000000 1.000000))
@@ -399,7 +394,7 @@ Generally only a concern for 8-bit displays, this sets the minimum number of sys
<dt>(color-management</dt>
-<dd><pre style="font-size:0.85rem;">
+<dd><pre class='gimprcsmall'>
(mode display)
(display-profile-from-gdk no)
(display-rendering-intent perceptual)
@@ -539,7 +534,7 @@ When enabled, the mouse pointer will be shown over the image while using a paint
Sets the text to appear in image window titles. This is a format string; certain % character sequences are
recognised and expanded as follows:
-<pre style="font-size: 0.85rem;">
+<pre class='gimprcsmall'>
%% literal percent sign
%f bare filename, or "Untitled"
%F full path to file, or "Untitled"
@@ -574,7 +569,7 @@ Sets the text to appear in image window titles. This is a format string; certain
Sets the text to appear in image window status bars. This is a format string; certain % character sequences
are recognised and expanded as follows:
-<pre style="font-size:0.85rem;">
+<pre class='gimprcsmall'>
%% literal percent sign
%f bare filename, or "Untitled"
%F full path to file, or "Untitled"
@@ -646,7 +641,7 @@ Sets the size of the navigation preview available in the lower right corner of t
<dt>(default-view</dt>
<dd>
-<pre style="font-size: 0.85rem;">
+<pre class='gimprcsmall'>
(show-menubar yes)
(show-rulers yes)
(show-scrollbars yes)
@@ -667,7 +662,7 @@ Sets the default settings for the image view. This is a parameter list.
<dt>(default-fullscreen-view</dt>
<dd>
-<pre style="font-size: 0.85rem;">>
+<pre class='gimprcsmall'>>
(show-menubar yes)
(show-rulers yes)
(show-scrollbars yes)
diff --git a/content/man/gimptool.md b/content/man/gimptool.md
index 8dee1ae..1e1b522 100644
--- a/content/man/gimptool.md
+++ b/content/man/gimptool.md
@@ -4,11 +4,6 @@ Modified: 2015-08-17T11:31:42-05:00
Authors: Pat David
Status: hidden
-<style>
-dt {
- font-family: monospace;
-}
-</style>
[Table of Contents](#toc)
@@ -18,7 +13,7 @@ gimptool-2.0 - script to perform various GIMPy functions
## [Synopsis](#toc1)
-<span style="font-family: monospace;" markdown="1">
+<span class="man" markdown="1">
**gimptool‑2.0** [‑‑prefix_[=DIR]_] [‑‑exec‑prefix_[=DIR]_]
[‑‑version] [‑‑help] [‑‑quiet] [‑‑silent] [‑n]
[‑‑just‑print] [‑‑dry‑run] [‑‑recon]
[‑‑msvc‑syntax] [‑‑bindir] [‑‑sbindir] [‑‑libexecdir]
[‑‑datadir] [‑‑sysconfdir] [‑‑sharedstatedir]
[‑‑localstatedir] [‑‑libdir] [‑‑infodir] [‑‑mandir]
[‑‑includedir] [‑‑gimpplugindir] [‑‑gimpdatadir] [‑‑libs]
[‑‑libs‑noui] [‑‑cflags] [‑‑cflags‑noi]
[‑‑build _plug‑in.c_] [‑‑build‑strip _plug‑in.c_]
[‑‑install _plug‑in.c_] [‑‑install‑strip _plug‑in.c_]
[‑‑
install‑admin _plug‑in.c_] [‑‑install‑bin _plug‑in_]
[‑‑install‑admin‑strip _plug‑in.c_]
[‑‑install‑bin‑strip _plug‑in_]
[‑‑install‑admin‑bin _plug‑in_]
[‑‑install‑script _script.scm_]
[‑‑install‑admin‑script _script.scm_]
[‑‑uninstall‑bin _plug‑in_]
[‑‑uninstall‑admin‑bin _plug‑in_]
[‑‑uninstall‑script _script.scm_]
[‑‑uninstall‑admin‑script _script.scm_]
</span>
@@ -32,7 +27,7 @@ gimptool-2.0 - script to perform various GIMPy functions
<em>gimptool-2.0</em> accepts the following options:
-<dl>
+<dl class='man'>
<dt>--version</dt>
diff --git a/content/news/2016-01-12 LGM/index.md b/content/news/2016-01-12 LGM/index.md
index 82b4d9f..9735a0b 100644
--- a/content/news/2016-01-12 LGM/index.md
+++ b/content/news/2016-01-12 LGM/index.md
@@ -4,7 +4,7 @@ Category: News
Authors: Pat David
Summary: Join us April 15-18 at the 11th annual Libre Graphics Meeting being hosted by Westminster School of
Media Arts and Design in London, UK! Come and meet developers of free graphics software, participate in a
workshop, and collaborate with other visual artists who choose to work in free software.
-<a style='float: right; margin: 0 0 0.5rem 0.5rem;' href='https://pledgie.com/campaigns/30935'><img
alt='Click here to lend your support to: Libre Graphics Meeting 2016 - London and make a donation at
pledgie.com !' src='https://pledgie.com/campaigns/30935.png?skin_name=chrome' border='0' ></a>
+<a class='pledgieRight' href='https://pledgie.com/campaigns/30935'><img alt='Click here to lend your support
to: Libre Graphics Meeting 2016 - London and make a donation at pledgie.com !'
src='https://pledgie.com/campaigns/30935.png?skin_name=chrome' border='0' ></a>
_Join us_ **April 15-18** at the 11th annual [**Libre Graphics Meeting**][lgm] (LGM) hosted by the
[Westminster School of Media Arts and Design][westminster], University of Westminster, in London, UK.
Come and meet developers of free graphics software, participate in a workshop, or collaborate with other
visual artists who choose to work in [free software][].
@@ -21,7 +21,7 @@ There's also an opportunity to meet some of the GIMP team as well!
This year the host is the [Westminster School of Media Arts and Design][westminster], University of
Westminster at their Harrow Campus:
<a href='https://www.westminster.ac.uk/' title='University of Westminster'>
-<img src='{filename}UoW-logo.jpg' alt='University of Westminster Logo' style='width:50%;' width='326'
height='78' />
+<img src='{filename}UoW-logo.jpg' alt='University of Westminster Logo' width='326' height='78' />
</a>
Harrow Campus
@@ -31,13 +31,13 @@ Middlesex
HA1 3TP
<div class='fluid-video' markdown=1>
-<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.3714752197265625%2C51.550444854394286%2C-0.27611732482910156%2C51.60506465084748&layer=mapnik&marker=51.57776295788465%2C-0.32379627227783203";
style="border: 1px solid black"></iframe><br/><small><a
href="https://www.openstreetmap.org/?mlat=51.5778&mlon=-0.3238#map=14/51.5778/-0.3238";>View Larger
Map</a></small>
+<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://www.openstreetmap.org/export/embed.html?bbox=-0.3714752197265625%2C51.550444854394286%2C-0.27611732482910156%2C51.60506465084748&layer=mapnik&marker=51.57776295788465%2C-0.32379627227783203";
</iframe><br/><small><a
href="https://www.openstreetmap.org/?mlat=51.5778&mlon=-0.3238#map=14/51.5778/-0.3238";>View Larger
Map</a></small>
</div>
If you are unable to join us at the meeting, please [consider donating something][pledgie] to help offset
the costs of project participants to make the trip out to collaborate with so many other awesome projects!
LGM has a [Pledgie campaign][pledgie] running to assist with travel costs for participants:
-<a style='display:block; text-align: center;' href='https://pledgie.com/campaigns/30935'><img alt='Click
here to lend your support to: Libre Graphics Meeting 2016 - London and make a donation at pledgie.com !'
src='https://pledgie.com/campaigns/30935.png?skin_name=chrome' border='0' ></a>
+<a href='https://pledgie.com/campaigns/30935'><img alt='Click here to lend your support to: Libre Graphics
Meeting 2016 - London and make a donation at pledgie.com !'
src='https://pledgie.com/campaigns/30935.png?skin_name=chrome' border='0' ></a>
Funds from their Pledgie go towards helping contributors from all around the world converge at the meeting
to share and present their work with others.
diff --git a/content/release-notes/gimp-2.4-cm.md b/content/release-notes/gimp-2.4-cm.md
index 8c9cfca..62525cf 100644
--- a/content/release-notes/gimp-2.4-cm.md
+++ b/content/release-notes/gimp-2.4-cm.md
@@ -8,7 +8,7 @@ Status: hidden
Many devices you use in your design or photography workflow, like digital photo cameras, scanners, displays,
printers etc., have their own color reproduction characteristics. If those are not taken into account during
opening, editing and saving, harmful adjustments can be done to images. With GIMP 2.4 this has changed: now
you can have reliable output for both Web and print.
<figure>
-<img src="{filename}images/color-management.png" alt="color management" style="background-color: #2e3436;"/>
+<img src="{filename}images/color-management.png" alt="color management" class='graybackground' />
</figure>
## Color Managed Workflow
diff --git a/content/source/index.md b/content/source/index.md
index 2caa717..6c07e54 100644
--- a/content/source/index.md
+++ b/content/source/index.md
@@ -4,18 +4,6 @@ Modified: 2015-08-17T15:38:12-05:00
Authors: Pat David
Status: hidden
-<style>
-table {
-max-width: 40rem;
-font-size: 0.85rem;
-margin: 1rem auto;
-}
-table td {
- padding: 0.25rem;
- border: solid 1px #eee;
-}
-</style>
-
The official distribution of GIMP is the source code, distributed in tar files from the GIMP FTP site and
its [mirrors](/downloads/#mirrors). The same source code can be compiled to create binaries for different
platforms such as [GNU/Linux](/unix/), [Microsoft Windows](/windows/), [Mac OS X](/macintosh/),
[Solaris](/unix/) and many others.
@@ -46,7 +34,7 @@ All requirements below must be met to be able compiling GIMP from source. This l
### Stable version 2.8.x
-<table markdown='span' >
+<table markdown='span' class='gimpfromsrc'>
<tbody>
<tr>
<th>Package</th>
@@ -121,7 +109,7 @@ To find out more about GIMP development, [http://wiki.gimp.org/](http://wiki.gim
To make it easy for you to understand how to get GIMP and what is required to run GIMP, the list of packages
has been done below. Not only is the list for the required packages but also for the packages that can be
added to support other things like fileformats etc.
-<table markdown="span">
+<table markdown="span" class='gimpfromsrc'>
<tbody>
<tr>
<th>Package</th>
diff --git a/content/tutorials/Automate_Editing_in_GIMP/index.css
b/content/tutorials/Automate_Editing_in_GIMP/index.css
new file mode 100644
index 0000000..ad24ce8
--- /dev/null
+++ b/content/tutorials/Automate_Editing_in_GIMP/index.css
@@ -0,0 +1,25 @@
+.toc > ul {
+ list-style-type: decimal;
+}
+.toc > ul > li {
+ margin-top: 0;
+}
+.toc li ul {
+ margin-bottom: 1rem;
+}
+.toc > ul > li > ul {
+list-style-type: upper-alpha;
+}
+.toc > ul > li > ul > li > ul {
+list-style-type: lower-roman;
+}
+
+table {
+max-width: 40rem;
+font-size: 0.85rem;
+margin: 1rem auto;
+}
+table td {
+ padding: 0.25rem;
+ border: solid 1px #eee;
+}
diff --git a/content/tutorials/Automate_Editing_in_GIMP/index.md
b/content/tutorials/Automate_Editing_in_GIMP/index.md
index 3a61d33..68437da 100644
--- a/content/tutorials/Automate_Editing_in_GIMP/index.md
+++ b/content/tutorials/Automate_Editing_in_GIMP/index.md
@@ -14,23 +14,7 @@ Template: page_author
## Table of Contents
-<style>
-.toc > ul {
- list-style-type: decimal;
-}
-.toc > ul > li {
- margin-top: 0;
-}
-.toc li ul {
- margin-bottom: 1rem;
-}
-.toc > ul > li > ul {
-list-style-type: upper-alpha;
-}
-.toc > ul > li > ul > li > ul {
-list-style-type: lower-roman;
-}
-</style>
+<link rel='stylesheet' type='text/css' href='index.css' />
<!-- Yes, it's a hot mess. -->
[TOC]
@@ -137,7 +121,7 @@ A final thing that we need to talk about that is not a 'category' of execution b
* An architectural advantage is we create this list with a function that reads a configuration file. We
only have to define and maintain this configuration list in one place within our system and use the resulting
list in as many places as we want by calling a reading function. This is how we will get new macros to show
up in the menus when we add them.
* The following skeletal code fragments illustrate defining a list 'cmdList' at the top level – 'main',
and using it within the registration block and function. Because it is defined at the ‘main’ level, we can
reference it within the function and registration block. We can recover the argument from the index (passed
by the widget) because we are using the same list in both places:
-<span style="font-style: italic">Example - Lists and Scope in Functions</span>
+*Example - Lists and Scope in Functions*
cmdList = cmdrReadObj.CommanderMacros()
#
@@ -216,7 +200,7 @@ The keyword will determine both the “tag” associated with the line of pseudo
After all of the \*.def files are read into the tree and written back out in the form of an XML file, the
formatting is done. Writing out a tree automatically generates all of the containing enclosures, essentially
making properly formatting the XML a trivial task. The fragment from combinedCommander.xml illustrates the
XML from the pseudo code in NormalGridCanvas.def.
-<span style="font-style: italic">Example - combinedCommander.xml (fragment)</span>
+*Example - combinedCommander.xml (fragment)*
<combined>
Definition
@@ -428,20 +412,8 @@ The Flow Control Parasites provide a method to make each image “self aware”
Let's examine the steps of the “Standard” flow example that is included with this tutorial. The steps the
image will go through are:
-<span style="font-style: italic">Example – States or Steps in the Standard Flow Example</span>
+*Example – States or Steps in the Standard Flow Example*
-<style>
-table {
-max-width: 40rem;
-font-size: 0.85rem;
-margin: 1rem auto;
-}
-table td {
- padding: 0.25rem;
- border: solid 1px #eee;
-}
-
-</style>
<table>
<tbody>
diff --git a/content/tutorials/Basic_Color_Curves/index.css b/content/tutorials/Basic_Color_Curves/index.css
new file mode 100644
index 0000000..a2f12f5
--- /dev/null
+++ b/content/tutorials/Basic_Color_Curves/index.css
@@ -0,0 +1,3 @@
+.comp {
+ width: 450px;
+}
diff --git a/content/tutorials/Basic_Color_Curves/index.md b/content/tutorials/Basic_Color_Curves/index.md
index 2a8aa89..eb112f8 100644
--- a/content/tutorials/Basic_Color_Curves/index.md
+++ b/content/tutorials/Basic_Color_Curves/index.md
@@ -5,11 +5,7 @@ Author: Pat David
Template: page_author
<noscript>
-<style>
-.comp {
- width: 450px;
-}
-</style>
+<link rel='stylesheet' type='text/css' href='index.css' />
</noscript>
<small>
@@ -70,7 +66,7 @@ So now let’s see what goes into making up your pixel:
<figure>
<img src="{filename}curves-your-pixel-info.png" alt="GIMP Color Picker Pixel View" >
<figcaption>
-The RGB components that mix into your final <span style="color: #7ba3ce;">blue pixel</span>.
+The RGB components that mix into your final <span class='tBrightBlue'>blue pixel</span>.
</figcaption>
</figure>
@@ -103,7 +99,7 @@ In the main area of the dialog I am presented with a linear curve, behind which
<img src="{filename}curves-dialog-original-IO.png" alt="GIMP Base Curves Dialog Input Output" />
</figure>
-What we can do right now is to adjust the values of each pixel in the image using this curve. The best way
to visualize it is to remember that the bottom range from black to white represents the <span style="color:
#0000ff">**_current_** value of the pixels</span>, and the left range is the <span style="color:
#ff6f00">value to be mapped to</span>.
+What we can do right now is to adjust the values of each pixel in the image using this curve. The best way
to visualize it is to remember that the bottom range from black to white represents the <span
class='tBrightBlue'>**_current_** value of the pixels</span>, and the left range is the <span
class='tOrange'>value to be mapped to</span>.
So to show an example of how this curve will affect your image, suppose I wanted to remap all the values in
the image that were in the midtones, and to make them all lighter. I can do this by clicking on the curve
near the midtones, and dragging the curve higher in the Y direction:
@@ -111,12 +107,12 @@ So to show an example of how this curve will affect your image, suppose I wanted
<img src="{filename}curves-dialog-midtones.png" alt="GIMP Base Curves Dialog Push Midtones" />
</figure>
-What this curve does is takes the values around the midtones, and pushes their values to be much lighter
than they were. In this case, values around <span style="color: #0000ff">128</span> were re-mapped to now be
closer to <span style="color: #ff6f00">192</span>.
+What this curve does is takes the values around the midtones, and pushes their values to be much lighter
than they were. In this case, values around <span class='tBrightBlue'>128</span> were re-mapped to now be
closer to <span class='tOrange'>192</span>.
Because the curve is set **Smooth**, there will be a gradual transition for all the tones surrounding my
point to be pulled in the same direction (this makes for a smoother fall-off as opposed to an abrupt change
at one value). Because there is only a single point in the curve right now, this means that all values will
be pulled higher.
<figure>
-<noscript><img alt="Hollow Moon Example" class="comp" src="{FILENAME}flickr-qsimple-5636649561-original.jpg"
/></noscript>
+<noscript><img alt="Hollow Moon Example" class="comp" src="{filename}flickr-qsimple-5636649561-original.jpg"
/></noscript>
<img class="comp" alt="Hollow Moon Example Pushed Midtones"
data-swap-src="{filename}flickr-qsimple-5636649561-original.jpg"
src="{filename}flickr-qsimple-5636649561-mid-boostl.jpg" />
<figcaption>
The results of pushing the midtones of the value curve higher<br/>
@@ -154,7 +150,7 @@ In general, I find it easiest to visualize in terms of which regions in the curv
If there is one thing you take away from reading this, let it be the image above.
-## Curves: <span style="color:red;">Co</span><span style="color:green;">lo</span><span
style="color:blue;">rs</span>[](#curves-span-style-color-red-co-span-span-style-color-green-lo-span-span-style-color-blue-rs-span-)
+## Curves: <span class='tRed'>Co</span><span class='tGreen'>lo</span><span
class='tBlue'>rs</span>[](#curves-span-style-color-red-co-span-span-style-color-green-lo-span-span-style-color-blue-rs-span-)
So how does this apply to other channels? Let’s have a look.
@@ -200,7 +196,7 @@ Well, there’s no “Yellow” curve to modify, so how to approach that? Have a
The thing to look out for here is that opposite your blue tones on this wheel, you’ll find yellow. In fact,
for each of the Red, Green, and Blue channels, the opposite colors on the color wheel will show you what an
absence of that color will do to your image. So remember:
-<div style="text-align: center;"><span style="color: red;">Red</span> → <span style="color:
cyan;">Cyan</span></span><br/><span><span style="color: green;">Green</span> → <span style="color:
magenta;">Magenta</span></span><br/><span><span style="color: blue;">Blue</span> → <span style="color:
yellow;">Yellow</span></div>
+<div "text-align: center;"><span class='tRed'>Red</span> → <span
class='tCyan'>Cyan</span></span><br/><span><span class='tGreen'>Green</span> → <span
class='tMagenta'>Magenta</span></span><br/><span><span class='tBlue'>Blue</span> → <span
class='tYellow'>Yellow</span></div>
What this means to you while manipulating curves is that if you drag a curve for blue up, you will boost the
blue in that region of your image. If instead you drag the curve for blue down, you will be **_removing_**
blues (or boosting the **Yellows** in that region of your image).
diff --git a/content/tutorials/Basic_Perl/index.md b/content/tutorials/Basic_Perl/index.md
index 4fef8fb..3fae037 100644
--- a/content/tutorials/Basic_Perl/index.md
+++ b/content/tutorials/Basic_Perl/index.md
@@ -98,7 +98,7 @@ Before going into the details of the Gimp::Fu script, we will describe how to ac
Gimp comes with a PDB browser available in **Help/Procedure Browser**. This browser provides a way of seeing
all the functions in the PDB, as well as their input and output parameters. E.g. the DB Browser entry for
`plug-in-gauss-iir`, which will be used in the example below looks like this:
-<table>
+<table class='tut'>
<tbody><tr><th align="right" valign="top">Name:</th><td colspan="3">plug-in-gauss-iir</td></tr>
<tr><th align="right" valign="top">Blurb:</th><td colspan="3" valign="top">Apply a gaussian blur</td></tr>
<tr>
@@ -166,7 +166,7 @@ The main function for a Gimp-Fu script is the <tt>podregister</tt> function. Thi
This list contains a list of image types acceptable.
This field is only used for scripts that are in the "<Image>" hieararchy. Some possible values are
listed in the table below:
- <table>
+ <table class='tut'>
<tbody>
<tr>
<th bgcolor="#dfdfdf">value</th>
@@ -198,7 +198,7 @@ This field is only used for scripts that are in the "<Image>" hieararchy.
* Parameters, from the <tt>PARAMETERS</tt> section. This will be Perl code, which Gimp::Fu evaluates as a
list of parameters. Each parameter in turn is a reference to an array containing the following four or five
values (A reference to an array in Perl is simply an array written within square brackets):
* The type of the parameter. The types recognized by Gimp::Fu and their Perl counterparts are given in
the following table:
- <table>
+ <table class='tut'>
<tbody>
<tr>
<th >Type</th>
@@ -370,7 +370,7 @@ Most of these commands are directly copied out the PDB.
This script shows the essential steps of producing a stand-alone script:
-<table>
+<table class='tut'>
<tbody>
<tr>
<th>line(s)</th>
@@ -437,7 +437,7 @@ Choosing the default values results in the image:
Gimp-Perl provides an alternative object-oriented syntax for the image and the drawable commands. Here is a
table showing the procedural vs the object oriented syntax for a few commands:
-<table>
+<table class='tut'>
<tbody>
<tr>
<th bgcolor="#E0E0E0">procedural syntax</th>
@@ -462,7 +462,7 @@ Note that the object-oriented syntax appears to be only syntactic sugar that mak
In the <tt>uni</tt> script the function <tt>gimp_edit_fill</tt> was called to fill the whole image. Looking
at the info for <tt>gimp_edit_fill</tt> in the DB browser we find the following:
-<table>
+<table class='tut'>
<tbody>
<tr>
<th align="right" valign="top">Name:</th>
@@ -495,11 +495,11 @@ Thus, if a selection is active when <tt>gimp_edit_fill</tt> is called, only the
There are lots of ways of choosing a selection as can be seen when searching for a "select" in the PDB. The
example below uses <tt>gimp_image_select_rectangle</tt>, whose entry in the PDB looks as follows:
-<table>
+<table class='tut'>
<tbody>
<tr>
<td >
-<table>
+<table class='tut'>
<tbody>
<tr>
<th align="right" valign="top">Name:</th>
@@ -561,7 +561,7 @@ A simple use of this function which selects a rectangle in the middle of an imag
* The script is associated with an image since its menu path starts with "<Image>/...". Note that as
a result of this the callback sub in line 6 receives two additional parameters, the active image and the
selected drawable.
* The use of the PDB functions <tt>gimp_image_undo_group_start</tt> and
<tt>gimp_image_undo_group_end</tt>. These functions declare an undo group. When an undo is done on the image,
instead of having the individual operators undo, all the actions between the undo start and the undo end
calls will be undone at once.
-<table markdown='1'>
+<table markdown='1' class='tut'>
<tbody>
<tr>
<th bgcolor="#E0E0FF">[paint-select](paint-select)</th>
@@ -648,7 +648,7 @@ Search for "select" in the DB Browser to see a list of all the selection related
In perl it is trivial to write loops that together with the various selection tools gives powerful creative
possibilities. Here is an example that mixes colors in circles. There is nothing really new here, but it
shows the power of what we have described above.
-<table markdown="1">
+<table markdown="1" class='tut'>
<tbody>
<tr>
<th bgcolor="#E0E0FF">[circles](circles)</th>
@@ -739,7 +739,7 @@ To create text the PDB function <tt>gimp_text_fontname()</tt> may be used.
Here is an example of a script that creates an image containing "Hello world".
-<table markdown="1">
+<table markdown="1" class='tut'>
<tbody>
<tr>
<th bgcolor="#E0E0FF">[hello-world1](hello-world1)</th>
@@ -822,7 +822,7 @@ This script suffers from the problem that the image size is unrelated to the tex
The result is an image composed of two layers; a transparent text layer on top of a uniform background.
-<table markdown="1">
+<table markdown="1" class='tut'>
<tbody>
<tr>
<th bgcolor="#E0E0FF">[basic-logo](basic-logo)</th>
@@ -916,7 +916,7 @@ When a region has been selected through one of the selection routines, the area
This is illustrated in the following program, which works on one image and takes as a parameter another
image, which it concatenates to the right of the first image. The lines 28-38 shows how the second image is
copied and glued into the first image.
-<table markdown="1">
+<table markdown="1" class='tut'>
<tbody>
<tr>
<th bgcolor="#E0E0FF">[horiz-cat](horiz-cat)</th>
@@ -1004,7 +1004,7 @@ The filename for the <tt>--output</tt> has some special magic that allows to set
Here are two invocations of the scripts declared above, but with output written to a jpg file and a png file.
-<table border="None">
+<table border="None" class='tut'>
<tbody>
<tr>
<th bgcolor="#E0E0FF"><a href="perl-gimp-from-shell">perl-gimp-from-shell</a></th>
@@ -1026,7 +1026,7 @@ When using the Perl-Server it is not necessary to use <tt>Gimp::Fu</tt> and the
For a simple but powerful example of the use of the Gimp without Fu, here is a an interactive Gimp-Perl
shell that may be run from the command line:
-<table markdown="1">
+<table markdown="1" class='tut'>
<tbody>
<tr>
<th bgcolor="#E0E0FF">[pg-shell](pg-shell)</th>
@@ -1059,7 +1059,7 @@ For a simple but powerful example of the use of the Gimp without Fu, here is a a
Here is an example of an interactive session with this shell:
-<table border="None">
+<table border="None" class='tut'>
<tbody>
@@ -1120,13 +1120,3 @@ The Gimp-Perl distribution also has over 50 more example scripts supplied. Take
by [Ed J] is licensed under a [Creative Commons Attribution-ShareAlike 3.0 Unported
License](http://creativecommons.org/licenses/by-sa/3.0/deed.en_US).
</small>
-<style>
-table {
-max-width: 40rem;
-font-size: 0.85rem;
-margin: 1rem auto;
-}
-table td, table th{
- padding: 0.25rem;
-}
-</style>
diff --git a/content/tutorials/Basic_Scheme/index.md b/content/tutorials/Basic_Scheme/index.md
index f1c7f91..7e59ea2 100644
--- a/content/tutorials/Basic_Scheme/index.md
+++ b/content/tutorials/Basic_Scheme/index.md
@@ -313,7 +313,7 @@ Here is an example script which copies the current layer to a new layer, blurs i
In uni-img we called the procedure gimp-edit-fill to fill the whole image. Looking at the info for
gimp-edit-fill in the Procedure Browser we find the following:
-<table>
+<table class='tut'>
<tbody>
<tr>
<th align="right" valign="top">Name:</th>
@@ -344,7 +344,7 @@ In uni-img we called the procedure gimp-edit-fill to fill the whole image. Looki
Thus, if we have a selection active when gimp-edit-fill is called, then only the selection is painted. There
are lots of ways of choosing a selection as can be seen when searching for a "select" in the PDB. We will use
gimp-rect-select, whose entry in the PDB looks as follows:
-<table>
+<table class='tut'>
<tbody>
<tr>
<th align="right" valign="top">Name:</th>
@@ -528,14 +528,3 @@ In the following example the selection is copied, pasted into the same layer, of
The original tutorial can be found [here](http://imagic.weizmann.ac.il/~dov/gimp/scheme-tut.html).
-
-<style>
-table {
-max-width: 40rem;
-font-size: 0.85rem;
-margin: 1rem auto;
-}
-table td, table th{
- padding: 0.25rem;
-}
-</style>
diff --git a/content/tutorials/Digital_Black_and_White_Conversion/index.css
b/content/tutorials/Digital_Black_and_White_Conversion/index.css
new file mode 100644
index 0000000..3a1df66
--- /dev/null
+++ b/content/tutorials/Digital_Black_and_White_Conversion/index.css
@@ -0,0 +1,2 @@
+table { margin: 1rem auto; }
+td { padding-right: 1rem; }
diff --git a/content/tutorials/Digital_Black_and_White_Conversion/index.md
b/content/tutorials/Digital_Black_and_White_Conversion/index.md
index 9ed61a8..62b4357 100644
--- a/content/tutorials/Digital_Black_and_White_Conversion/index.md
+++ b/content/tutorials/Digital_Black_and_White_Conversion/index.md
@@ -457,10 +457,7 @@ Due to the popularity of the **Channel Mixer** as a straightforward means of con
Borrowing the table from [Petteri Sulonen’s
site](http://www.prime-junta.net/pont/How_to/100_Curves_and_Films/_Curves_and_films.html#N104E4), these are
some common RGB Channel Mixer values to emulate some B&W films. These aren’t exact, of course, but some
people may find them useful. Particularly as a starting-off point for further modifications.
-<style>
-table { margin: 1rem auto; }
-td { padding-right: 1rem; }
-</style>
+<link rel='stylesheet' type='text/css' href='index.css' />
<table>
<thead>
diff --git a/content/tutorials/Floating_Logo/index.css b/content/tutorials/Floating_Logo/index.css
new file mode 100644
index 0000000..8307145
--- /dev/null
+++ b/content/tutorials/Floating_Logo/index.css
@@ -0,0 +1,11 @@
+.green {
+ color: #00AA00;
+}
+
+.bright_green {
+ color: #00FF00;
+}
+
+.red {
+ color: red;
+}
diff --git a/content/tutorials/Floating_Logo/index.md b/content/tutorials/Floating_Logo/index.md
index 3f02a77..6697d53 100644
--- a/content/tutorials/Floating_Logo/index.md
+++ b/content/tutorials/Floating_Logo/index.md
@@ -29,7 +29,7 @@ The concepts are ones that you’ll likely come across multiple times while work
Create a new image of appropriate size for your logo:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">F</span>ile → <span
style="text-decoration: underline;">N</span>ew…</span></div>
+<div class="MenuCmd"><span>File → New…</span></div>
This will open the “Create a New Image” dialog, with options for you to specify:
@@ -50,7 +50,7 @@ The first thing we are going to do is fill our new image with black. The first s
<figure>
<img src="{filename}Change-Foreground-Color.png" alt="GIMP change foreground color"/>
<figcaption>
-Click the <span style="color:#00FF00;">foreground color</span> to change.
+Click the <span class='bright_green'>foreground color</span> to change.
</figcaption></figure>
The “Change Foreground Color” dialog allows you to now set the foreground color. We want to set the color to
black RGB(0, 0, 0):
@@ -63,7 +63,7 @@ The “Change Foreground Color” dialog allows you to now set the foreground co
With the foreground color set, we can now use the **Bucket Fill Tool** to fill in our image:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">T</span>ools → <span
style="text-decoration: underline;">P</span>aint Tools → <span style="text-decoration:
underline;">B</span>ucket Fill</span></div>
+<div class="MenuCmd"><span>Tools → Paint Tools → Bucket Fill</span></div>
<figure>
<img src="{filename}Bucket-Fill-Tool.png" alt="GIMP bucket fill tool"/>
@@ -77,7 +77,7 @@ Activating the <strong>Bucket Fill</strong> tool.
Now we want to add text to our image to create our logo with. To see what we’re doing, though, will require
us to change the foreground color to something other than black (black text on black background doesn’t show
up so well).
-Now, you can follow the above procedures again to set the foreground color. If your background color is
already white, though, you can quickly swap foreground/background colors using the <span style="color:
#00FF00;">arrows</span>:
+Now, you can follow the above procedures again to set the foreground color. If your background color is
already white, though, you can quickly swap foreground/background colors using the <span
class='bright_green'>arrows</span>:
<figure>
<img src="{filename}Color-Swap.png" alt="GIMP swap color foreground background"/>
@@ -89,7 +89,7 @@ You can also use they keyboard shortcut “**X**” to swap the colors.
With the foreground color set to white, we can now use the **Text Tool** to add some text to our image:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">T</span>ools → Te<span
style="text-decoration: underline;">x</span>t</span></div>
+<div class="MenuCmd"><span>Tools → Text</span></div>
<figure>
<img src="{filename}Text-Tool.png" alt="GIMP text tool"/>
@@ -107,12 +107,12 @@ This is what you should see on your canvas after clicking and dragging from the
Defining the text box boundaries.
</figcaption></figure>
-If you’d like to re-size the box for some reason, you can now click and drag in any of the <span
style="color: #00AA00;">green areas</span> shown below:
+If you’d like to re-size the box for some reason, you can now click and drag in any of the <span
class='green'>green areas</span> shown below:
<figure>
<img src="{filename}Text-Box-Resize.png" alt="GIMP resize text box"/>
<figcaption>
-<span style="color:#00AA00;">Resize handles</span> to modify text box boundary.
+<span class='green'>Resize handles</span> to modify text box boundary.
</figcaption></figure>
Your text will go into the black box inside the green areas shown above.
@@ -127,9 +127,9 @@ Text Tool Options (left), canvas view (right).
Chances are when you first start entering text, it will be very small on your canvas. So let’s have a look
at some options on the **Text Tool Options** palette (left, above).
-If you want to make your text appear bigger, you can change the <span style="color: red;">**Size**</span> in
the field shown. For instance, here I’ve chosen to set my <span style="color: red;">**Size**</span> to 100px.
+If you want to make your text appear bigger, you can change the <span class='red'>**Size**</span> in the
field shown. For instance, here I’ve chosen to set my <span class='red'>**Size**</span> to 100px.
-You may also not like the font that is chosen by default. In that case, we can change the <span
style="color: #00FF00;">**Font**</span> to something better by clicking the icon. This will open a drop-down
to scroll through all the fonts that GIMP knows about on your system. You can see in my example that I’ve
changed the font to “Tw Cen MT Bold”.
+You may also not like the font that is chosen by default. In that case, we can change the <span
class='bright_green'>**Font**</span> to something better by clicking the icon. This will open a drop-down to
scroll through all the fonts that GIMP knows about on your system. You can see in my example that I’ve
changed the font to “Tw Cen MT Bold”.
<figure>
<img src="{filename}Text-New-From-Visible.png" alt="GIMP context new layer from visible"/>
@@ -137,11 +137,11 @@ You may also not like the font that is chosen by default. In that case, we can c
Creating a new layer from all visible layers.
</figcaption></figure>
-Once we’ve gotten the text how we want it, we can now create a new layer from all the visible layers so far
(the text layer, and the black background layer). On your **Layers** tab, right click on the text layer we
just made, and choose “<span style="color: #00FF00;">New from Visible</span>”.
+Once we’ve gotten the text how we want it, we can now create a new layer from all the visible layers so far
(the text layer, and the black background layer). On your **Layers** tab, right click on the text layer we
just made, and choose “<span class='bright_green'>New from Visible</span>”.
Alternatively, you can also create a new layer from visible using the menu:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → New from <span
style="text-decoration: underline;">V</span>isible</span></div>
+<div class="MenuCmd"><span>Layer → New from Visible</span></div>
At this point, our layer palette will have three layers on it, the background, the text (“PAT”), and our new
layer “Visible”:
@@ -157,7 +157,7 @@ Which is good, because we are about to blur this new layer a bit!
To apply a slight Gaussian blur to this layer, we simply invoke the command through the menu:
-<div class="MenuCmd"><span>Filte<span style="text-decoration: underline;">r</span>s → <span
style="text-decoration: underline;">B</span>lur → <span style="text-decoration: underline;">G</span>aussian
Blur…</span></div>
+<div class="MenuCmd"><span>Filters → Blur → Gaussian Blur…</span></div>
This will invoke the **Gaussian Blur** dialog, where we can specify how much blur we want to apply:
@@ -167,7 +167,7 @@ This will invoke the **Gaussian Blur** dialog, where we can specify how much blu
</figcaption></figure>
-The defaults were pretty good, but I wanted just a tad more blur, so I increased the **Blur Radius** to 7\.
When you’re done, just hit “<span style="text-decoration: underline;">O</span>K”.
+The defaults were pretty good, but I wanted just a tad more blur, so I increased the **Blur Radius** to 7\.
When you’re done, just hit “OK”.
## Adding Some Color
@@ -175,7 +175,7 @@ Now that we have our text done, it’s time to add a splash of color!
We are going to add a new layer to our image first:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → <span
style="text-decoration: underline;">N</span>ew Layer…</span></div>
+<div class="MenuCmd"><span>Layer → New Layer…</span></div>
Or by Right-Clicking on the “Visible” layer in the layer palette, and choosing “**New Layer…**” from the
context menu:
@@ -185,13 +185,13 @@ Or by Right-Clicking on the “Visible” layer in the layer palette, and choosi
New Layer using the Right-Click context menu.
</figcaption></figure>
-The “**Create a New Layer**” dialog will appear - it doesn’t matter what it gets filled with, so you can
leave it at whatever **Layer Fill Type** it’s set at (White by default I believe). Hit **<span
style="text-decoration: underline;">O</span>K** to create the new layer.
+The “**Create a New Layer**” dialog will appear - it doesn’t matter what it gets filled with, so you can
leave it at whatever **Layer Fill Type** it’s set at (White by default I believe). Hit **OK** to create the
new layer.
We are now going to fill this new layer with some color to add some interest. To do this we will use the
**Plasma** plugin:
-<div class="MenuCmd"><span>Filte<span style="text-decoration: underline;">r</span>s → <span
style="text-decoration: underline;">R</span>ender → <span style="text-decoration: underline;">C</span>louds →
<span style="text-decoration: underline;">P</span>lasma…</span></div>
+<div class="MenuCmd"><span>Filters → Render → Clouds → Plasma…</span></div>
-I just left the default values and hit **<span style="text-decoration: underline;">O</span>K**, but feel
free to fiddle with the values. Our layers now look like this:
+I just left the default values and hit **OK**, but feel free to fiddle with the values. Our layers now look
like this:
<figure>
<img src="{filename}Layer-Plasma.png" alt="GIMP plasma layer"/>
@@ -211,7 +211,7 @@ Here is what my canvas looks like right now (with the plasma layer on top and vi
Now we’re going to use the text we created earlier to generate a fake 3D shape on this plasma layer. The
process is known as “bump mapping”. I won’t get into the technical details of how this works, as it is best
seen rather than explained. Open the **Bump Map** dialog through the menu:
-<div class="MenuCmd"><span>Filte<span style="text-decoration: underline;">r</span>s → <span
style="text-decoration: underline;">M</span>ap → <span style="text-decoration: underline;">B</span>ump
Map…</span></div>
+<div class="MenuCmd"><span>Filters → Map → Bump Map…</span></div>
The **Bump Map** dialog gives a good preview of what the plugin does:
@@ -221,17 +221,17 @@ The **Bump Map** dialog gives a good preview of what the plugin does:
</figcaption></figure>
-To get it working correctly, this plugin requires that you properly point to the source for the bump
mapping. In our case the source is the text layer we created earlier (the layer was named “Visible”). So
we’ll click on the spinner for the <span style="color: #00FF00;">Bump map</span>, and choose our “Visible”
layer from the list.
+To get it working correctly, this plugin requires that you properly point to the source for the bump
mapping. In our case the source is the text layer we created earlier (the layer was named “Visible”). So
we’ll click on the spinner for the <span class='bright_green'>Bump map</span>, and choose our “Visible” layer
from the list.
-As before, feel free to play with the options. The only one that I changed was the **<span
style="text-decoration: underline;">D</span>epth** to increase the illusion of depth (I finally set the value
to 6 in my example). Once it looks good, we’ll hit the **<span style="text-decoration:
underline;">O</span>K** button to apply it to the layer.
+As before, feel free to play with the options. The only one that I changed was the **Depth** to increase the
illusion of depth (I finally set the value to 6 in my example). Once it looks good, we’ll hit the **OK**
button to apply it to the layer.
## Apply a Layer Mask
Now we are going to use a **Layer Mask** to isolate our bump mapped text. First we need to add a **Layer
Mask** to the plasma layer:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → <span
style="text-decoration: underline;">M</span>ask → Add Layer Mask…</span></div>
+<div class="MenuCmd"><span>Layer → Mask → Add Layer Mask…</span></div>
-Or Right-Click on the plasma layer and choose “<span style="color:#00FF00;">Add Layer Mask…</span>” from the
context menu:
+Or Right-Click on the plasma layer and choose “<span class='bright_green'>Add Layer Mask…</span>” from the
context menu:
<figure>
<img src="{filename}Bump-Mask.png" alt="GIMP add layer mask"/>
@@ -239,7 +239,7 @@ Or Right-Click on the plasma layer and choose “<span style="color:#00FF00;">Ad
</figcaption></figure>
-When the “Add a Mask to the Layer” dialog comes up, set the **Initialize Layer Mask to:** <span
style="text-decoration: underline;">W</span>hite (full opacity).
+When the “Add a Mask to the Layer” dialog comes up, set the **Initialize Layer Mask to:** White (full
opacity).
Once you’ve added a mask to the plasma layer, your layers should now look like this:
@@ -261,7 +261,7 @@ Remember, the white border will indicate the layer is active.
With the layer active, we want to now copy it:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">E</span>dit → <span
style="text-decoration: underline;">C</span>opy</span></div>
+<div class="MenuCmd"><span>Edit → Copy</span></div>
Then we want to make the plasma layer mask active by Left-Clicking on the **mask**:
@@ -273,7 +273,7 @@ Plasma layer mask now active again.
With the mask active again, we now want to paste the “Visible” layer back into the image:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">E</span>dit → <span
style="text-decoration: underline;">P</span>aste</span></div>
+<div class="MenuCmd"><span>Edit → Paste</span></div>
This will now insert a _Floating Selection (Pasted Layer)_ into your image:
@@ -285,7 +285,7 @@ This will now insert a _Floating Selection (Pasted Layer)_ into your image:
To get this _Floating Selection_ into the mask, we need to **Anchor** it:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → <span
style="text-decoration: underline;">A</span>nchor Layer</span></div>
+<div class="MenuCmd"><span>Layer → Anchor Layer</span></div>
This will **Anchor** the selection down onto the mask. Our image and layers should now look something like
this:
@@ -313,7 +313,7 @@ I want to clean up the edges of the text with what we have so far. Right now, th
To do this, we first make sure the layer mask is active by clicking on it. Then we can open the **Adjust
Color Levels** dialog through the menu:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">C</span>olors → <span
style="text-decoration: underline;">L</span>evels…</span></div>
+<div class="MenuCmd"><span>Colors → Levels…</span></div>
With the **Adjust Color Levels** dialog, we now want to sharpen up the edges of the mask a little bit:
@@ -339,9 +339,9 @@ Now we may want to get a little fancier and add an effect of a drop shadow behin
Make a copy of your “Visible” layer that had your original blurred text on it. Select the layer first to
activate it, then you can do:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → D<span
style="text-decoration: underline;">u</span>plicate Layer</span></div>
+<div class="MenuCmd"><span>Layer → Duplicate Layer</span></div>
-Or Right-Click on the “Visible” layer, and choose “<span style="color: #00FF00;">D<span
style="text-decoration: underline;">u</span>plicate Layer</span>”:
+Or Right-Click on the “Visible” layer, and choose “<span class='bright_green'>Duplicate Layer</span>”:
<figure>
<img src="{filename}Duplicate-Layer.png" alt="GIMP context duplicate layer"/>
@@ -359,15 +359,15 @@ Click and drag the “Visible copy” layer to beneath the plasma layer
This layer will become our shadow, but we need to modify a couple of things first. We’ll first invert the
colors of the layer to make the text black using:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">C</span>olors → In<span
style="text-decoration: underline;">v</span>ert</span></div>
+<div class="MenuCmd"><span>Colors → Invert</span></div>
Then we need to change the layer so that all of the white areas will be transparent. This can be found in
the menu:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">L</span>ayer → Tr<span
style="text-decoration: underline;">a</span>nsparency → Color to <span style="text-decoration:
underline;">A</span>lpha…</span></div>
+<div class="MenuCmd"><span>Layer → Transparency → Color to Alpha…</span></div>
The layer should now have black text over a transparent background. We’ll now just want to shift this layer
a bit to simulate a height by offseting it down and to the right a bit. To do this we can use the **Move
Tool**:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">T</span>ools → <span
style="text-decoration: underline;">T</span>ransfom Tools → <span style="text-decoration:
underline;">M</span>ove</span></div>
+<div class="MenuCmd"><span>Tools → Transfom Tools → Move</span></div>
<figure>
<img src="{filename}Move-Tool.png" alt="GIMP move tool"/>
@@ -434,3 +434,5 @@ The original tutorial this was adapted from can be found [here](../The_Basics).
</a>
<span xmlns:dct="http://purl.org/dc/terms/";>GIMP Tutorial - GIMP Quickies (text & images)</span> by [Pat
David](http://blog.patdavid.net)
Licensed under a [Creative Commons Attribution-ShareAlike 3.0 Unported
License](http://creativecommons.org/licenses/by-sa/3.0/deed.en_US).
+
+<link rel='stylesheet' type='text/css' href='index.css' />
diff --git a/content/tutorials/GIMP_Quickies/index.md b/content/tutorials/GIMP_Quickies/index.md
index d5ff2bb..5a6747c 100644
--- a/content/tutorials/GIMP_Quickies/index.md
+++ b/content/tutorials/GIMP_Quickies/index.md
@@ -29,7 +29,7 @@ In keeping with the spirit of the predecessor to this page, I will be using imag
All you need to know to follow these quick examples is to be able to find your image and open it:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">F</span>ile → <span
style="text-decoration: underline;">O</span>pen</span></div>
+<div class="MenuCmd"><span>File → Open</span></div>
## Changing the Size (Dimensions) of an Image (Scale)
@@ -48,11 +48,11 @@ View of the GIMP canvas, with information at the top of the window.
</figcaption>
</figure>
-Notice that the information at the top of the window shows the <span style="color: #00FF00;">current pixel
dimensions</span> of the image (in this case, the pixel size is 1225×1280).
+Notice that the information at the top of the window shows the <span class="tGreen">current pixel
dimensions</span> of the image (in this case, the pixel size is 1225×1280).
To resize the image to new dimensions, we need only invoke the **Scale Image** dialog:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">I</span>mage → <span
style="text-decoration: underline;">S</span>cale Image…</span></div>
+<div class="MenuCmd"><span>Image → Scale Image…</span></div>
This will then open the **Scale Image** dialog:
@@ -63,16 +63,16 @@ The <strong>Scale Image</strong> dialog.
</figcaption>
</figure>
-In the **Scale Image** dialog, you’ll find a <span style="color: #00FF00;">place to enter new values</span>
for **Width** and **Height**. If you know one of the new dimensions you’d like for the image, fill in the
appropriate one here.
+In the **Scale Image** dialog, you’ll find a <span class="tGreen">place to enter new values</span> for
**Width** and **Height**. If you know one of the new dimensions you’d like for the image, fill in the
appropriate one here.
-You’ll also <span style="color: #0080FF;">notice a small chain</span> just to the right of the **Width** and
**Height** entry boxes. This icon shows that the Width and Height values are locked with respect to each
other, meaning that changing one value will cause the other to change in order to keep the same aspect ratio
(no strange compression or stretching in the image).
+You’ll also <span class='tLightBlue'>notice a small chain</span> just to the right of the **Width** and
**Height** entry boxes. This icon shows that the Width and Height values are locked with respect to each
other, meaning that changing one value will cause the other to change in order to keep the same aspect ratio
(no strange compression or stretching in the image).
For example, if you knew that you wanted your image to have a new width of 600px, you can enter that value
in the **Width** input, and the **Height** will automatically change to maintain the aspect ratio of the
image:
<figure>
<img src='{filename}Scale-Image-Dialog-Scaled.png' alt='Scaled Image'>
<figcaption>
-Changing the **Width** to 600px.
+Changing the <strong>Width</strong> to 600px.
</figcaption>
</figure>
@@ -120,7 +120,7 @@ As you can see, even at a quality setting of 80, the image is significantly smal
When you’ve finished any image modifications you are doing, and are ready to export, simply invoke the
export dialog with:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">F</span>ile → Export…</span></div>
+<div class="MenuCmd"><span>File → Export…</span></div>
This will invoke the **Export Image** dialog:
@@ -131,9 +131,9 @@ This will invoke the **Export Image** dialog:
</figcaption>
</figure>
-You can now enter a <span style="color: #00FF00;">new name for your file here</span>. If you include the
filetype extension (in this case, .jpg), GIMP will automatically try to export in that file format for you.
Here I am exporting the image as a JPEG file.
+You can now enter a <span class="tGreen">new name for your file here</span>. If you include the filetype
extension (in this case, .jpg), GIMP will automatically try to export in that file format for you. Here I am
exporting the image as a JPEG file.
-You can also navigate to a new location on your computer through the **Places** pane, if you need to export
the file to a different location. When you are ready to export the image, just hit <span style="color:
#0080FF;">the **Export** button.</span>
+You can also navigate to a new location on your computer through the **Places** pane, if you need to export
the file to a different location. When you are ready to export the image, just hit <span
class='tLightBlue'>the **Export** button.</span>
This will then bring up the **Export Image as JPEG** dialog, where you can change the quality of the export:
@@ -144,9 +144,9 @@ This will then bring up the **Export Image as JPEG** dialog, where you can chang
</figcaption>
</figure>
-From this dialog you can now <span style="color: #00FF00;">change the quality of the export</span>. If you
also have the “Show preview in image window” option checked, the image on the canvas will update to reflect
the quality value you input. This will also enable the “File size:” information to tell you what the
resulting file size will be. (You may need to move some windows around to view the preview on the canvas in
the background).
+From this dialog you can now <span class="tGreen">change the quality of the export</span>. If you also have
the “Show preview in image window” option checked, the image on the canvas will update to reflect the quality
value you input. This will also enable the “File size:” information to tell you what the resulting file size
will be. (You may need to move some windows around to view the preview on the canvas in the background).
-When you are happy with the results, hit the **<span style="text-decoration: underline;">E</span>xport**
button to export.
+When you are happy with the results, hit the **Export** button to export.
To see more details about exporting different image formats, see [Getting Images out of
GIMP](http://docs.gimp.org/2.8/en/gimp-images-out.html) in the manual.
@@ -163,7 +163,7 @@ Original image (left), cropped image (right).
</figcaption>
</figure>
-The procedure to crop an image is straightforward. You can either get to <span style="color: #00FF00;">the
**Crop Tool**</span> through the tools palette:
+The procedure to crop an image is straightforward. You can either get to <span class="tGreen">the **Crop
Tool**</span> through the tools palette:
<figure>
<img src='{filename}Crop-Tool.png' alt='Crop Tool'>
@@ -174,7 +174,7 @@ Crop Tool on the Tools Palette.
Or you can access the crop tool through the menus:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">T</span>ools → <span
style="text-decoration: underline;">T</span>ransform Tools → <span style="text-decoration:
underline;">C</span>rop</span></div>
+<div class="MenuCmd"><span>Tools → Transform Tools → Crop</span></div>
Once the tool is activated, you’ll notice that your mouse
cursor on the canvas will change to indicate the **Crop Tool** is being used.
@@ -210,11 +210,11 @@ Rectangle Select Tool.
Or through the menus:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">T</span>ools → <span
style="text-decoration: underline;">S</span>election Tools → <span style="text-decoration:
underline;">R</span>ectangle Select</span></div>
+<div class="MenuCmd"><span>Tools → Selection Tools → Rectangle Select</span></div>
You can then highlight a selection the same way as the **Crop Tool**, and adjust the selection as well. Once
you have a selection you like, you can crop the image to fit that selection through:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">I</span>mage → <span
style="text-decoration: underline;">C</span>rop to Selection</span></div>
+<div class="MenuCmd"><span>Image → Crop to Selection</span></div>
## Rotate and/or Flip an Image
@@ -222,11 +222,11 @@ There may be a time that you would need to rotate an image. For instance, you ma
There may also be a time that you’d like to flip an image as well. These commands are grouped together under
the same menu item:
-<div class="MenuCmd"><span><span style="text-decoration: underline;">I</span>mage → <span
style="text-decoration: underline;">T</span>ransform</span></div>
+<div class="MenuCmd"><span>Image → Transform</span></div>
### Flip an Image
-If you want to flip your image, the **Transform** menu offers two options, **Flip <span
style="text-decoration: underline;">H</span>orizontally**, or **Flip <span style="text-decoration:
underline;">V</span>ertically**. This operation will mirror your image along the specified axis. For example,
here are all of the flip operations shown in a single image:
+If you want to flip your image, the **Transform** menu offers two options, **Flip Horizontally**, or **Flip
Vertically**. This operation will mirror your image along the specified axis. For example, here are all of
the flip operations shown in a single image:
<figure>
<img src='{filename}Flip-Sample-Arrow.jpg' alt='Flipping'>
diff --git a/content/unix/gimprc.css b/content/unix/gimprc.css
new file mode 100644
index 0000000..c7236aa
--- /dev/null
+++ b/content/unix/gimprc.css
@@ -0,0 +1,4 @@
+.codehilite {
+ max-width: 40rem;
+ font-size: 0.75rem;
+}
diff --git a/content/unix/gimprc.md b/content/unix/gimprc.md
index 7810074..6e6215f 100644
--- a/content/unix/gimprc.md
+++ b/content/unix/gimprc.md
@@ -3,13 +3,7 @@ Date: 2015-08-17T16:27:52-05:00
Author: Pat David
Status: hidden
-<style>
- .codehilite {
- max-width: 40rem;
- font-size: 0.75rem;
- }
-</style>
-
+<link rel='stylesheet' type='text/css' href='index.css' />
# This is the system-wide gimprc file. Any change made in this file will
# affect all users of this system, provided that they are not overriding the
diff --git a/themes/newgimp/static/css/article.css b/themes/newgimp/static/css/article.css
index 56c4281..74f7a71 100644
--- a/themes/newgimp/static/css/article.css
+++ b/themes/newgimp/static/css/article.css
@@ -89,3 +89,13 @@ figure figcaption {
text-align: right;
font-size: 0.75rem;
}
+
+
+.pledgieRight {
+ float: right;
+ margin: 0 0 0.5rem 0.5rem;
+}
+
+.graybackground {
+ background-color: #2e3436;
+}
diff --git a/themes/newgimp/static/css/page.css b/themes/newgimp/static/css/page.css
index 23a07fc..90f3c0b 100644
--- a/themes/newgimp/static/css/page.css
+++ b/themes/newgimp/static/css/page.css
@@ -141,3 +141,71 @@ address.vcard.author {
border: dotted 1px #ccc;
font-size: 80%;
}
+
+.codehilite .err {
+ border: none;
+}
+
+span.man, dl.man dt {
+ font-family: monospace;
+}
+
+table.gimpfromsrc {
+ max-width: 40rem;
+ font-size: 0.85rem;
+ margin: 1rem auto;
+}
+
+table.gimpfromsrc td {
+ padding: 0.25rem;
+ border: solid 1px #eee;
+}
+
+table.tut {
+ max-width: 40rem;
+ font-size: 0.85rem;
+ margin: 1rem auto;
+}
+
+table.tut td, table.tut th {
+ padding: 0.25rem;
+}
+
+pre.mail {
+ font-size: 0.75rem;
+ white-space: pre-wrap;
+ border: solid 1px #ccc;
+ padding: 1rem;
+}
+
+.reportBug {
+ font-size: 1.2rem;
+ font-weight: bold;
+}
+
+#bugInput {
+ width: 50%;
+ padding-left: 0.2rem;
+}
+
+
+pre.gimprcsmall {
+ font-size: 0.85rem;
+}
+
+.underline {
+ text-decoration: underline;
+}
+
+.tRed { color: red; }
+.tGreen { color: green; }
+.tBlue { color: blue; }
+.tCyan { color: cyan; }
+.tMagenta { color: magenta; }
+.tYellow { color: yellow; }
+
+.tGreen { color: #00FF00; }
+.tLightBlue { color: #0080FF; }
+.tBrightBlue { color: #0000ff; }
+.tOrange { color: #ff6f00; }
+
diff --git a/themes/newgimp/static/css/page_author.css b/themes/newgimp/static/css/page_author.css
new file mode 100644
index 0000000..d3f5a12
--- /dev/null
+++ b/themes/newgimp/static/css/page_author.css
@@ -0,0 +1 @@
+
diff --git a/themes/newgimp/templates/page_author.html b/themes/newgimp/templates/page_author.html
index 4430e05..210e2dc 100644
--- a/themes/newgimp/templates/page_author.html
+++ b/themes/newgimp/templates/page_author.html
@@ -6,6 +6,8 @@
{{ super() }}
<link rel='stylesheet' type='text/css' href="/theme/css/page.css" />
<link rel='stylesheet' type='text/css' href="/theme/css/pygments-default.css" />
+
+ <link rel='stylesheet' type='text/css' href="/theme/css/page_author.css" />
<meta itemprop='url' content='{{ SITEURL }}/{{ page.url }}' />
<meta itemprop='name' content='{{ SITENAME }} - {{ page.title|striptags }}' />
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
