Fixed The Very Old CSS Problem of the black bar in the bottom not fully

reaching the right side of the screen on pages where id='content' =>
class='full'.

Added useful text. Changed other text.

prestatic/aesthetics.js

@@ -1,59 +1,66 @@
 /*
-  To the extent possible under law, Niels Serup has waived all copyright and
+ To the extent possible under law, Niels Serup has waived all copyright and
-  related or neighboring rights to this file. This file is available under the
+ related or neighboring rights to this file. This file is available under the
-  Creative Commons Zero 1.0 license, see
+ Creative Commons Zero 1.0 license, see
-  http://creativecommons.org/publicdomain/zero/1.0/
+ http://creativecommons.org/publicdomain/zero/1.0/
 
-  This JavaScript file contains trivial code. It is required for aesthetic
+ This JavaScript file contains trivial code. It is required for aesthetic
-  reasons only. Not loading it will not make a website depending on it less
+ reasons only. Not loading it will not make a website depending on it less
-  functional.
+ functional.
-*/
+ */
 
 get_window_size = function() {
-    if (window.innerHeight)
+  if (window.innerHeight)
-        return [window.innerHeight, window.innerWidth];
+    return [window.innerHeight, window.innerWidth];
-    else if (self.innerHeight)
+  else if (self.innerHeight)
-        return [self.innerHeight, self.innerWidth];
+  return [self.innerHeight, self.innerWidth];
   else if (document.documentElement && document.documentElement.clientHeight)
-      return [document.documentElement.clientHeight,
+  return [document.documentElement.clientHeight,
-              document.documentElement.clientWidth];
+          document.documentElement.clientWidth];
   else if (document.body)
-      return [document.body.clientHeight, document.body.clientWidth];
+  return [document.body.clientHeight, document.body.clientWidth];
 };
 
 is_screen_media = function() {
-    return (document.getElementsByTagName('link')[1].getAttribute('media').indexOf(
+  return (document.getElementsByTagName('link')[1].getAttribute('media').indexOf(
-        'screen') != -1 || (document.styleSheets &&
+            'screen') != -1 || (document.styleSheets &&
-        (document.styleSheets[0].media.mediaText.indexOf(
+                                (document.styleSheets[0].media.mediaText.indexOf(
-            'screen') != -1 || document.styleSheets[0].media.indexOf(
+                                   'screen') != -1 || document.styleSheets[0].media.indexOf(
-                'screen') != -1)));
+                                     'screen') != -1)));
 };
 
 set_min_height = function() {
-    var ws, wh, ww, h;
+  var ws, wh, ww, h;
-    ws = get_window_size();
+  ws = get_window_size();
-    wh = ws[0];
+  wh = ws[0];
-    ww = ws[1];
+  ww = ws[1];
+  
+  if (metadiv.offsetTop > wh)
+    return;
 
-    h = metadiv.offsetHeight + 25;
+  h = metadiv.offsetHeight + 25;
-    metadiv.style.position = 'absolute';
+  metadiv.style.position = 'absolute';
-    metadiv.style.bottom = '5px';
+  metadiv.style.bottom = '5px';
-    metadiv.style.width = (contentdiv.offsetWidth - 42) + 'px';
+  metadiv.style.width = (contentdiv.offsetWidth - 42) + 'px';
-    contentdiv.style.paddingBottom = h + 'px';
+  contentdiv.style.paddingBottom = h + 'px';
 
-    h = wh - h - menudiv.offsetHeight - 165;
+  h = wh - h - menudiv.offsetHeight - 146;
-    contentdiv.style.minHeight = h + 'px';
+  contentdiv.style.minHeight = h + 'px';
 };
 
 adjust_sizes = function() {
-    if (!is_screen_media())
+  set_min_height();
-        return;
-    set_min_height();
 };
 
 window.addEventListener('load', function(event){
-    menudiv = document.getElementById('menu');
+                          if (!is_screen_media())
-    contentdiv = document.getElementById('content');
+                            return;
-    metadiv = document.getElementById('metadata');
+                          menudiv = document.getElementById('menu');
-    adjust_sizes();
+                          contentdiv = document.getElementById('content');
-}, false);
+                          metadiv = document.getElementById('metadata');
+                          window.addEventListener('resize', function(event){
+                                                    adjust_sizes();
+                                                  }, false);
+                          adjust_sizes();
+                        }, false);
+

prestatic/general.css

@@ -6,7 +6,6 @@
 
 body {
     font-family: 'Dejavu Sans', 'Nimbus Sans', Helvetica, Arial, Verdana, sans-serif;
-    font-size: 14px;
     color: #000;
 }
 
@@ -85,7 +84,7 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
     margin: 16px 0 5px 0;
-    font-size: 30px;
+    font-size: 2em;
 }
 
 h1:first-child {
@@ -94,30 +93,30 @@ h1:first-child {
 
 h2 {
     margin: 14px 0 5px 0 ;
-    font-size: 25px;
+    font-size: 1.8em;
     background-color: #ddd;
 }
 
 h3 {
     margin: 9px 0 3px 0;
-    font-size: 21px;
+    font-size: 1.6em;
 }
 
 h4 {
     margin: 7px 0 2px 0;
-    font-size: 18px;
+    font-size: 1.4em;
     font-weight: bold;
 }
 
 h5 {
     margin: 5px 0 1px 0;
-    font-size: 16px;
+    font-size: 1.2em;
     font-weight: bold;
 }
 
 h6 {
     margin: 3px 0 1px 0;
-    font-size: 14px;
+    font-size: 1.1em;
     font-weight: bold;
 }
 
@@ -183,7 +182,7 @@ cite, quote {
 
 blockquote {
     margin: 5px 0 5px 20px;
-    font-size: 15px;
+    font-size: 1.08em;
 }
 
 acronym, abbreviation {
@@ -396,23 +395,23 @@ div.left-float, img.left-float, video.left-float, audio.left-float  {
 }
 
 .huge, .huge * {
-    font-size: 25px !important;
+    font-size: 1.8em !important;
 }
 
 .large, .large * {
-    font-size: 18px !important;
+    font-size: 1.5em !important;
 }
 
 .medium, .medium * {
-    font-size: 14px !important;
+    font-size: 1em !important;
 }
 
 .small, .small * {
-    font-size: 11px !important;
+    font-size: 0.8em !important;
 }
 
 .tiny, .tiny * {
-    font-size: 9px !important;
+    font-size: 0.65em !important;
 }
 
 

prestatic/screen.css

@@ -32,7 +32,7 @@ body {
     /*@preval 'background-color: ' + page_bg + ';\n'@*/
     display: inline-block;
     padding: 2px 0 2px 16px;
-    font-size: 18px;
+    font-size: 1.3em;
 }
 
 ul#menulinks {
@@ -100,7 +100,10 @@ ul#menulinks {
 }
 
 #body.full #logo {
-    
+   position: relative;
+   left: 10px;
+   margin-left: -10px;
+   margin-right: -10px;
 }
 
 .highlighttable .code {

site/about/index.org

@@ -9,10 +9,10 @@ This is metanohi.
 
 Currently, metanohi resides on *metanohi.name*. Originally, it was on
 *metanohi.org* which now redirects requests to .name. To contact [[./niels][Niels]] (the
-creator), send him an electronic mail at [[mailto:ns@metanohi.name][ns@metanohi.name]] {(ns@metanohi.org
+creator), send him an electronic mail at [[mailto:ns@metanohi.name][ns@metanohi.name]] {(ns@metanohi.org no
-redirects all mails to that address)}&small.
+more redirects emails to that address)}&small.
 
-metanohi is XHTML 1.1 and CSS 2 valid (mostly). Currently, metanohi.name pages
+metanohi is mostly XHTML 1.1 and CSS 2 valid. Currently, metanohi.name pages
 are served as text/html and not as application/xml+xhtml (as they should). This
 might get fixed (it is extremely easy to fix, but if fixed, some things
 depending on external JavaScript which depends on non-XHTML, like the FSF
@@ -99,3 +99,23 @@ Click to go to fullsize image.
 
 metanohi is only available in English.
 
+** Font size
+
+The font sizes on metanohi are based on your default font size. Read more
+here.
+
+To change your default font size in the <a href='http://conkeror.org/'>Conkeror
+web browser</a>, put this in your .conkerorrc:
+
+#+BEGIN_SRC javascript
+session_pref("font.size.variable.x-western", YOUR_FONT_SIZE_HERE);
+#+END_SRC
+
+For example, I changed the font size from its default at 16 to a more suitable 14:
+
+#+BEGIN_SRC javascript
+session_pref("font.size.variable.x-western", 14);
+#+END_SRC
+
+It's probably just as easy in other web browsers.
+

site/about/niels.org

@@ -15,7 +15,7 @@ He studies datalogi (computer science) at the University of Copenhagen, [[https:
 
 Niels can be contacted at [[mailto:ns@metanohi.name][ns@metanohi.name]].
 
-** Software Niels uses
+** Software which Niels uses
 
 *** Emacs
 
@@ -62,6 +62,24 @@ It's fast, secure and durable (I often have poor or even none connection when
 working on my laptop).
 
 
+** Things which Niels uses but doesn't like
+
+*** GitHub
+When I want to make a git repository available online, I like to do it on the
+server which also hosts metanohi, or a free software online host, such as one
+running Gitorious. I don't quite like the very popular GitHub service, because
+it is not free software. The negative effects of GitHub's proprietarity is that
+its users cannot learn from studying GitHub's code, and that they cannot run
+their own GitHubs. Users mostly use GitHub for public data, and since git
+repositories are distributed, it is easy to move a git repository from GitHub
+to another git repo hosting service --- just change the push address of your
+local repository. All of this means that GitHub cannot cause serious problems
+when it comes to control over the data you give to it. As such GitHub is far
+from being as great a problem as e.g. Facebook. But I still don't like GitHub's
+attitude. I use GitHub because someone created a repository to which I
+contribute code on GitHub, not because of its "social coding".
+
+
 ** Virtual existences
 
 In order of randomness:
@@ -78,9 +96,11 @@ In order of randomness:
   + [[https://launchpad.net/~nqpz][Launchpad]]
   + [[http://uncyclopedia.wikia.com/wiki/User:Schabeindividuum][Uncyclopedia]] (don't take this one seriously)
 
-Also, don't use Facebook (or Facebook-/like/ social notworks). Both your data
+Also, I don't use Facebook (or Facebook-/like/ social networks). If I did, my
-and your account is in Facebook's virtual hands. You have way too little
+data would be in Facebook's virtual hands. Users have way too little control
-control. Use Identi.ca, GNU SOCIAL, Diaspora, or something else instead.
+over Facebook. The solution to Facebook and other centralized services is to
+use decentralized services. So in the case of social networking, use Diaspora,
+friendica, or something else instead of Facebook.
 
 *** I'm not on Facebook --- I'm on friendica!
 

site/index.org

@@ -6,15 +6,18 @@
 #++show
 #+BEGIN_SRC javascript
   // Add the FSF widget after the page has loaded.
-  window.addEventListener('load', function(event){add_fsf_widget(8085);}, false);
+  window.addEventListener('load',
+                          function(event) {
+                              add_fsf_widget(8085);
+                          }, false);
 #+END_SRC
 
 
 * This is metanohi
 
 *metanohi* is a website founded in 2009 with a well-defined purpose: to
-exist. It is the personal website of [[/about/niels][Niels G. W. Serup]], a [[/writings/hacking][hacker]] in a world of
+exist. It is the personal website of [[/about/niels][Niels G. W. Serup]], a [[/writings/hacking][hacker]] apprentice in
-non-hackers.
+a world of non-hackers.
 
 Historically, this start page has featured text which had little purpose except
 to exist. That is over now. /metanohi/ has no real need for a start page ---
@@ -22,16 +25,12 @@ and that means no more superfluous text[fn:extra].
 
 Feel free to check out my [[/projects/][Projects]] page.
 
-* Passive activism
+* Passive activism[fn:oxymoron]
+
+Beware, for the following Hyperlinks contain Knowledge!
 
 #++show
 #+BEGIN_SRC html
-  <div style='margin-left: -14px;'>
-    <a href="http://dayagainstdrm.org">
-      <img src="http://static.fsf.org/nosvn/dbd/2012/day-against-drm/banner-sm.png"
-           alt="Day Against DRM vertical banner" />
-    </a>
-  </div>
   <div style='background-color: silver; padding: 5px; border: 5px outset red;'>
     <div style='margin: 0 auto; width: 525px; text-align: center;'>
       <div style='height: 200px;'>
@@ -50,27 +49,35 @@ Feel free to check out my [[/projects/][Projects]] page.
                alt='Use ODF!' style='width: 200px; height: 200px' />
         </a>
       </div>
-  
+      
-      <a style='display: block; font-size: 40px; background-color: red' href='http://stopacta.info/'>STOP ACTA</a>
-  
       <a href='http://www.fsf.org/facebook/mark-zuckerberg-is-time-magazines-person-of-the-year-wheres-the-dislike-button/'
          style='display: block; padding: 6px 0; background-color: yellow;'>
         <img src='http://static.fsf.org/nosvn/dislike200.png'
              alt="Don't use Facebook!" title="Don't use Facebook!"
              style='width: 200px; height: 105px' />
       </a>
-  
+      
-      <a style='display: block; font-size: 30px; background-color: red' href='http://petition.stopsoftwarepatents.eu/'>STOP SOFTWARE PATENTS</a>
+      <a style='display: block; font-size: 30px; background-color: crimson' href='http://stopacta.info/'>Stop ACTA</a>
-  
+      <a style='display: block; font-size: 30px; background-color: red' 
+         href='http://petition.stopsoftwarepatents.eu/'>Stop software patents</a>
+      <a style='display: block; font-size: 30px; background-color: magenta'
+         href='http://defectivebydesign.org/'>Stop Digital Rights Management</a>
+      
       <div style='padding: 6px 0; background-color: green;'>
         <div style='margin: 0 auto; width: 260px;' id='fsfextern'></div>
       </div>
     </div>
   </div>
-  
 #+END_SRC
 
 
 [fn:extra] Not much, anyway.[fn:notsuperfluous]
-[fn:notsuperfluous] This footnote is not superfluous.
+
+[fn:notsuperfluous] This footnote is not superfluous.[fn:notfunny]
+
+[fn:oxymoron] "Passive activism" is an oxymoron. Activism is, of course, not a
+  passive thing. But having links stowed on the front of one's web page
+  certainly is.
+
+[fn:notfunny] This footnote is not funny.
 

site/projects/index.org

@@ -14,6 +14,8 @@ These are my projects, new and old.
 #+BEGIN_SRC python3
   top_projs = (
       'magicng',
+      ('suum', 'SUUM', 'Webcomic drawn in the art style of <em>banal naivism</em>',
+       'http://suum.metanohi.name/'),
       'gravnoise',
       'hbcht',
       'mege',
@@ -22,30 +24,17 @@ These are my projects, new and old.
       'exoskelegram',
       'desurveil',
       'aeltei',
-      ('roptoligs', 'roptoligs', 'RPG project with planned modules and games',
-       'http://roptoligs.metanohi.name/'),
-      'sadbipws',
-      ('suum', 'SUUM', 'Webcomic drawn in the art style of <em>banal naivism</em>',
-       'http://suum.metanohi.name/'),
       'alart',
-      'forbi',
       'shadowloss',
       'alp',
       'electruth',
       'kvigall',
-      'naghni',
       'forestquest',
       'dililatum',
-      'noncrawl',
       'enigma',
-      'wordwork',
-      'simplechat',
-      ('nohix', 'nohiX', 'Small web experiments, some of them useful', 'http://nohix.metanohi.name/'),
-      'movact',
-      'wontofor',
-      'totxt',
-      ('natur', "Niels' Nature", 'Watch Niels as he spouts nonsense about nature', 'http://nature.metanohi.name/'),
       ('films', 'nohifilms', "Niels' films", 'http://films.metanohi.name/'),
+      ('nohix', 'nohiX', 'Small web experiments, some of them useful', 'http://nohix.metanohi.name/'),
+      ('natur', "Niels' Nature", 'Watch Niels as he spouts nonsense about nature', 'http://nature.metanohi.name/'),
       )
    
   other_projs = (
@@ -53,16 +42,15 @@ These are my projects, new and old.
       ('ticso', 'Create dynamic functions in C uglily', 'https://gitorious.org/ticso'),
       'sleinlib',
       'kando',
+      'bolg',
       ('drget', 'Get media from Danmarks Radio', 'https://gitorious.org/drget'),
       ('folketingetmeninger', 
   'A small Python script to download and show the opinions of the Danish parties',
   'http://projects.metanohi.name/misc/folketingetmeninger.py.gz'),
       'nanonote',
-      'bolg',
+      'totxt',
       ('pdfsplit', 'A small Python script to split PDF files on a page-basis',
        'http://projects.metanohi.name/misc/pdfsplit.tar.gz'),
-      ('poemgen', 'A poem generator using Identi.ca blog posts as its source',
-       'http://projects.metanohi.name/poemgen/'),
       'dotbox',
       'vit',
       ('woiwo', 'Find words in words',
@@ -75,6 +63,8 @@ These are my projects, new and old.
        'http://projects.metanohi.name/misc/gadon.tgz'),
       ('colchs', 'A simple GTK color chooser',
        'http://projects.metanohi.name/misc/colchs.tgz'),
+      ('Japanese web apps', 'Javascript/CSS experiments with a theme',
+       'http://projects.metanohi.name/jap/'),
       ('wikiaq', 'A quiz system using Wikipedia articles',
        'http://projects.metanohi.name/misc/wikiaq-0.1.tar.gz'),
       ('BiBBoB 0.1.1', "A simple sound wave generator (older versions: \
@@ -88,8 +78,6 @@ These are my projects, new and old.
       ('googolplex', 'A program that attempts to print one googolplex. \
   If saved to a file, this requires 1 googol + 1 bytes.',
        'http://projects.metanohi.name/misc/googolplex.c'),
-      ('Japanese web apps', 'Javascript/CSS experiments with a theme',
-       'http://projects.metanohi.name/jap/'),
       ('data2png', 'Save data as a png file, and restore the data from the png file.',
        'http://projects.metanohi.name/misc/data2png.tar.gz'),
       ('stanimate', 'A bash script to aid in the creation of stop motion films.',
@@ -100,6 +88,12 @@ These are my projects, new and old.
       )
   
   old_top_projs = (
+      'forbi',
+      'naghni',
+      'movact',
+      'noncrawl',
+      'wordwork',
+      'simplechat',
       ('words', 'words', 'Words and sentences. Not a blog.', 'http://words.metanohi.name/'),
       ('pictures', 'Pictures', 'Pictures uploaded by me', 'http://pictures.metanohi.name/'),
       ('eonaton', 'Eon Aton', 'An underdeveloped RPG-style JS system and a story', 'http://projects.metanohi.name/eonaton/'),
@@ -113,9 +107,12 @@ These are my projects, new and old.
       ('gt3000', 'GT 3000', 'Retro JS mini racing game.', 'http://projects.metanohi.name/gt3000/'),
       ('sq', "Satan's Quest", 'Retro RPG-style JS minigame. You are Gabruel.', 'http://projects.metanohi.name/sq/'),
       ('evolution', 'Evolution', 'Notice the intelligence.', 'http://projects.metanohi.name/evolution/'),
+      ('roptoligs', 'roptoligs', 'RPG project with planned modules and games',
+       'http://roptoligs.metanohi.name/'),
       )
   
   other_old_projs = (
+      'sadbipws',
       'bito',
       'nalgh',
       ('Graphical web experiments',
@@ -129,9 +126,12 @@ These are my projects, new and old.
        'http://projects.metanohi.name/dsktp/'),
       ('webCLI', 'A CLI lookalike in JavaScript with XML',
        'http://projects.metanohi.name/webcli/'),
+      'wontofor',
       ('lapyrint', 'A stupid maze solver. Includes example labyrinths.',
        'http://projects.metanohi.name/misc/lapyrint.tar.gz'),
-      ('problist', "Probalistic list generator (isn't as intelligent as it sounds).",
+      ('poemgen', 'A poem generator using Identi.ca blog posts as its source',
+       'http://projects.metanohi.name/poemgen/'),
+      ('problist', "A newbie's way of programming permutations in Python. Kept here for its funny code and misuse of terms",
        'http://projects.metanohi.name/misc/problist.tar.gz'),
       ('The Life of a Snowman', "Life can be cruel towards snowmen. This is proof.",
        'http://projects.metanohi.name/snowman/'),
@@ -191,7 +191,7 @@ These are my projects, new and old.
   
 #+END_SRC
 
-** Fairly prominent
+** Pretty useful and not very buggy
 
 #++exec
 #+BEGIN_SRC python
@@ -199,7 +199,7 @@ boxprojs(top_projs)
 #+END_SRC
 
 #&clear
-*** Others
+*** Less prominent
 
 #++exec
 #+BEGIN_SRC python
@@ -208,7 +208,7 @@ listprojs(other_projs)
 
 
 #+mark: old
-** Less prominent
+** Less useful (and in a few cases a bit more buggy)
   
 #++exec
 #+BEGIN_SRC python
@@ -216,7 +216,7 @@ boxprojs(old_top_projs)
 #+END_SRC
 
 #&clear
-*** Others
+*** Less prominent
 
 #++exec
 #+BEGIN_SRC python

site/projects/wontofor/parts/ajax.js

@@ -1,5 +1,5 @@
 /*  wontofor: A JavaScript shortcut system
- *  Copyright (C) 2010  Niels Serup
+ *  Copyright (C) 2010  Niels G. W. Serup
  *
  *  This file is part of wontofor.
  *
@@ -17,7 +17,7 @@
  *  along with wontofor.  If not, see <http://www.gnu.org/licenses/>.
  *
  *  Maintained by Niels Serup <ns@metanohi.name>
- *  See <http://metanohi.org/projects/wontofor/>
+ *  See <http://metanohi.name/projects/wontofor/>
  */
 
 wontofor.ajax.getWeb = function(url, func, args, method) {

site/projects/wontofor/parts/html.js

@@ -1,5 +1,5 @@
 /*  wontofor: A JavaScript shortcut system
- *  Copyright (C) 2010  Niels Serup
+ *  Copyright (C) 2010  Niels G. W. Serup
  *
  *  This file is part of wontofor.
  *
@@ -17,7 +17,7 @@
  *  along with wontofor.  If not, see <http://www.gnu.org/licenses/>.
  *
  *  Maintained by Niels Serup <ns@metanohi.name>
- *  See <http://metanohi.org/projects/wontofor/>
+ *  See <http://metanohi.name/projects/wontofor/>
  */
 
 wontofor.html.body = document.body

site/projects/wontofor/wontofor.js

@@ -1,5 +1,5 @@
 /*  wontofor: A JavaScript shortcut system
- *  Copyright (C) 2010  Niels Serup
+ *  Copyright (C) 2010  Niels G. W. Serup
  *
  *  This file is part of wontofor.
  *
@@ -17,7 +17,7 @@
  *  along with wontofor.  If not, see <http://www.gnu.org/licenses/>.
  *
  *  Maintained by Niels Serup <ns@metanohi.name>
- *  See <http://metanohi.org/projects/wontofor/>
+ *  See <http://metanohi.name/projects/wontofor/>
  */
 
 wontofor = function() {

site/writings/css-failings.org

@@ -0,0 +1,32 @@
+#+title: CSS failings
+#&summary
+A travel through my past Cascading Style Sheets mistakes
+#&
+#+license: bysa
+
+* CSS failings
+
+Once, I did not know about Cascading Style Sheets, or CSS. I knew HTML... What
+else would there be to know?
+
+Oh, and I knew the =font= tag. It's safe to say my websites were not optimal.
+
+
+** px in font-size
+
+First, my apologies for not using the em&emph unit in font-size attributes. For
+years I have consistently used the px&emph unit when setting the sizes of
+fonts. I recently found out how wrong this is, how an incredibly arrogant
+offense to the universe it is, and I have begun correcting this mistake.
+
+Why is it wrong, you ask? I once thought about that, because I had read
+somewhere that it was best to use em&emph. But I didn't fully understand the
+unit, and I certainly didn't want my precious design to be viewed differently
+by different users! I wanted to force every user to view the exact same render
+of my pages. This was not ill-meant; I think it originated because of general
+browser incompabilities and was then taken to an unfortunate extreme.
+
+Essentially, it's wrong because it {forces the user to view the text in a
+specific size}&emph.
+
+If I had read that earlier on, I wouldn't have made so many px-based CSS's.