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.
This commit is contained in:
Niels Serup 2012-06-27 19:46:13 +02:00
parent bd017a99e5
commit cd9c2221ad
11 changed files with 198 additions and 110 deletions

View File

@ -1,59 +1,66 @@
/*
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
Creative Commons Zero 1.0 license, see
http://creativecommons.org/publicdomain/zero/1.0/
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
Creative Commons Zero 1.0 license, see
http://creativecommons.org/publicdomain/zero/1.0/
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
functional.
*/
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
functional.
*/
get_window_size = function() {
if (window.innerHeight)
return [window.innerHeight, window.innerWidth];
else if (self.innerHeight)
return [self.innerHeight, self.innerWidth];
if (window.innerHeight)
return [window.innerHeight, window.innerWidth];
else if (self.innerHeight)
return [self.innerHeight, self.innerWidth];
else if (document.documentElement && document.documentElement.clientHeight)
return [document.documentElement.clientHeight,
document.documentElement.clientWidth];
return [document.documentElement.clientHeight,
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(
'screen') != -1 || (document.styleSheets &&
(document.styleSheets[0].media.mediaText.indexOf(
'screen') != -1 || document.styleSheets[0].media.indexOf(
'screen') != -1)));
return (document.getElementsByTagName('link')[1].getAttribute('media').indexOf(
'screen') != -1 || (document.styleSheets &&
(document.styleSheets[0].media.mediaText.indexOf(
'screen') != -1 || document.styleSheets[0].media.indexOf(
'screen') != -1)));
};
set_min_height = function() {
var ws, wh, ww, h;
ws = get_window_size();
wh = ws[0];
ww = ws[1];
var ws, wh, ww, h;
ws = get_window_size();
wh = ws[0];
ww = ws[1];
h = metadiv.offsetHeight + 25;
metadiv.style.position = 'absolute';
metadiv.style.bottom = '5px';
metadiv.style.width = (contentdiv.offsetWidth - 42) + 'px';
contentdiv.style.paddingBottom = h + 'px';
if (metadiv.offsetTop > wh)
return;
h = wh - h - menudiv.offsetHeight - 165;
contentdiv.style.minHeight = h + 'px';
h = metadiv.offsetHeight + 25;
metadiv.style.position = 'absolute';
metadiv.style.bottom = '5px';
metadiv.style.width = (contentdiv.offsetWidth - 42) + 'px';
contentdiv.style.paddingBottom = h + 'px';
h = wh - h - menudiv.offsetHeight - 146;
contentdiv.style.minHeight = h + 'px';
};
adjust_sizes = function() {
if (!is_screen_media())
return;
set_min_height();
set_min_height();
};
window.addEventListener('load', function(event){
menudiv = document.getElementById('menu');
contentdiv = document.getElementById('content');
metadiv = document.getElementById('metadata');
adjust_sizes();
}, false);
if (!is_screen_media())
return;
menudiv = document.getElementById('menu');
contentdiv = document.getElementById('content');
metadiv = document.getElementById('metadata');
window.addEventListener('resize', function(event){
adjust_sizes();
}, false);
adjust_sizes();
}, false);

View File

@ -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;
}

View File

@ -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 {

View File

@ -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
redirects all mails to that address)}&small.
creator), send him an electronic mail at [[mailto:ns@metanohi.name][ns@metanohi.name]] {(ns@metanohi.org no
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.

View File

@ -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
and your account is in Facebook's virtual hands. You have way too little
control. Use Identi.ca, GNU SOCIAL, Diaspora, or something else instead.
Also, I don't use Facebook (or Facebook-/like/ social networks). If I did, my
data would be in Facebook's virtual hands. Users have way too little control
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!

View File

@ -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
non-hackers.
exist. It is the personal website of [[/about/niels][Niels G. W. Serup]], a [[/writings/hacking][hacker]] apprentice in
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;'>
@ -51,8 +50,6 @@ Feel free to check out my [[/projects/][Projects]] page.
</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'
@ -60,17 +57,27 @@ Feel free to check out my [[/projects/][Projects]] page.
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.

View File

@ -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

View File

@ -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) {

View File

@ -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

View File

@ -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() {

View File

@ -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.