added hack-ish style tweaking controls

TODO: add font selector styles, make it all work, cookies?

7 files changed, 255 insertions, 0 deletions

diff --git a/static/style/font-sans.css b/static/style/font-sans.css
new file mode 100644
index 0000000..171e507
--- /dev/null
+++ b/static/style/font-sans.css
@@ -0,0 +1 @@
+body { font-family: sans; }
diff --git a/static/style/font-serif.css b/static/style/font-serif.css
new file mode 100644
index 0000000..dd3e369
--- /dev/null
+++ b/static/style/font-serif.css
@@ -0,0 +1 @@
+body { font-family: serif; }
diff --git a/static/style/site-nuts.css b/static/style/site-nuts.css
new file mode 100644
index 0000000..330a234
--- /dev/null
+++ b/static/style/site-nuts.css
@@ -0,0 +1,16 @@
+body { 
+    background-image: url("/static/style/fractal.gif"); 
+    background-color: green; }
+
+a { color: magenta; }
+a:visited { color: orange; }
+a:hover { color: yellow; }
+
+.content { background-color: purple; }
+
+#top_bar { background-color: #FF00FF; }
+
+#top_bar_content {
+    background-color: #FF00FF;
+    border-right: 200px solid #FF00FF;
+}
diff --git a/static/style/site-sane.css b/static/style/site-sane.css
new file mode 100644
index 0000000..053b06d
--- /dev/null
+++ b/static/style/site-sane.css
@@ -0,0 +1,14 @@
+body { 
+    background-image: none;
+    background-color: #E3E3E3; }
+
+a { color: blue; }
+a:visited { color: blue; }
+a:hover { color: blue; }
+
+.content { background-color: #FFFFFF; }
+
+#top_bar { background-color: #993333; }
+#top_bar_content {
+    background-color: #993333;
+    border-right: 200px solid #993333; }
diff --git a/static/style/styleswitcher.js b/static/style/styleswitcher.js
new file mode 100644
index 0000000..981a6ca
--- /dev/null
+++ b/static/style/styleswitcher.js
@@ -0,0 +1,184 @@
+function setActiveSiteStyleSheet(title) {
+  var i, a, main;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
+      if(a.getAttribute("title").indexOf("site") != 1) a.disabled = true;
+      if(a.getAttribute("title") == title) a.disabled = false;
+    }
+  }
+}
+function setActiveWidthStyleSheet(title) {
+  var i, a, main;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
+      if(a.getAttribute("title").indexOf("width") != 1) a.disabled = true;
+      if(a.getAttribute("title") == title) a.disabled = false;
+    }
+  }
+}
+function setActiveFontStyleSheet(title) {
+  var i, a, main;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
+      if(a.getAttribute("title").indexOf("font") != 1) a.disabled = true;
+      if(a.getAttribute("title") == title) a.disabled = false;
+    }
+  }
+}
+
+function getActiveSiteStyleSheet() {
+  var i, a;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled && a.getAttribute("title").indexOf("site") != -1) return a.getAttribute("title");
+  }
+  return null;
+}
+function getActiveFontStyleSheet() {
+  var i, a;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled && a.getAttribute("title").indexOf("font") != -1) return a.getAttribute("title");
+  }
+  return null;
+}
+function getActiveWidthStyleSheet() {
+  var i, a;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled && a.getAttribute("title").indexOf("width") != -1) return a.getAttribute("title");
+  }
+  return null;
+}
+
+function getPreferredSiteStyleSheet() {
+  var i, a;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1
+       && a.getAttribute("rel").indexOf("alt") == -1
+       && a.getAttribute("title")
+       && a.getAttribute("title").indexOf("site") != -1
+       ) return a.getAttribute("title");
+  }
+  return null;
+}
+function getPreferredFontStyleSheet() {
+  var i, a;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1
+       && a.getAttribute("rel").indexOf("alt") == -1
+       && a.getAttribute("title")
+       && a.getAttribute("title").indexOf("font") != -1
+       ) return a.getAttribute("title");
+  }
+  return null;
+}
+function getPreferredWidthStyleSheet() {
+  var i, a;
+  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+    if(a.getAttribute("rel").indexOf("style") != -1
+       && a.getAttribute("rel").indexOf("alt") == -1
+       && a.getAttribute("title")
+       && a.getAttribute("title").indexOf("width") != -1
+       ) return a.getAttribute("title");
+  }
+  return null;
+}
+
+function createCookie(name,value,days) {
+  if (days) {
+    var date = new Date();
+    date.setTime(date.getTime()+(days*24*60*60*1000));
+    var expires = "; expires="+date.toGMTString();
+  }
+  else expires = "";
+  document.cookie = name+"="+value+expires+"; path=/";
+}
+
+function readCookie(name) {
+  var nameEQ = name + "=";
+  var ca = document.cookie.split(';');
+  for(var i=0;i < ca.length;i++) {
+    var c = ca[i];
+    while (c.charAt(0)==' ') c = c.substring(1,c.length);
+    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+  }
+  return null;
+}
+
+window.onload = function(e) {
+  var cookie = readCookie("sitestyle");
+  var title = cookie ? cookie : getPreferredSiteStyleSheet();
+  setActiveSiteStyleSheet(title);
+  if(title.indexOf('nuts') != -1) {
+    document.getElementById('style_site').innerHTML = 'nuts'
+  }
+  var cookie = readCookie("fontstyle");
+  var title = cookie ? cookie : getPreferredFontStyleSheet();
+  setActiveFontStyleSheet(title);
+  if(title.indexOf('sans') != -1) {
+    document.getElementById('style_font_first').innerHTML = 'A'
+    document.getElementById('style_font_second').innerHTML = 'a'
+  }
+  var cookie = readCookie("widthstyle");
+  var title = cookie ? cookie : getPreferredWidthStyleSheet();
+  setActiveWidthStyleSheet(title);
+  if(title.indexOf('flexy') != -1) {
+    document.getElementById('style_width').innerHTML = 'flexy'
+  }
+}
+
+window.onunload = function(e) {
+  if (stuffset == true) {
+    var title = getActiveSiteStyleSheet();
+    createCookie("sitestyle", title, 365);
+    title = getActiveFontStyleSheet();
+    createCookie("fontstyle", title, 365);
+    title = getActiveWidthStyleSheet();
+    createCookie("widthstyle", title, 365);
+  }
+}
+
+var stuffset = false
+var cookie = readCookie("sitestyle");
+var title = cookie ? cookie : getPreferredSiteStyleSheet();
+setActiveSiteStyleSheet(title);
+var cookie = readCookie("fontstyle");
+var title = cookie ? cookie : getPreferredFontStyleSheet();
+setActiveFontStyleSheet(title);
+var cookie = readCookie("widthstyle");
+var title = cookie ? cookie : getPreferredFontStyleSheet();
+setActiveFontStyleSheet(title);
+
+function swapstyle(thing) {
+  stuffset = true;
+  switch(thing){
+    case 'font':
+      if(document.getElementById('style_font_first').innerHTML == 'a'){
+        document.getElementById('style_font_first').innerHTML = 'A'
+        document.getElementById('style_font_second').innerHTML = 'a'
+        setActiveFontStyleSheet('font-sans')
+      } else {
+        document.getElementById('style_font_first').innerHTML = 'a'
+        document.getElementById('style_font_second').innerHTML = 'A'
+        setActiveFontStyleSheet('font-serif')
+      }
+      break;
+    case 'site':
+      if(document.getElementById('style_site').innerHTML == 'sane'){
+        document.getElementById('style_site').innerHTML = 'nuts'
+        setActiveSiteStyleSheet('site-nuts')
+      } else {
+        document.getElementById('style_site').innerHTML = 'sane'
+        setActiveSiteStyleSheet('site-sane')
+      } 
+      break;
+    case 'width':
+      if(document.getElementById('style_width').innerHTML == 'fixed'){
+        document.getElementById('style_width').innerHTML = 'flexy'
+        setActiveWidthStyleSheet('width-flexy')
+      } else {
+        document.getElementById('style_width').innerHTML = 'fixed'
+        setActiveWidthStyleSheet('width-fixed')
+      } 
+      break;
+    
+  }
+}
diff --git a/static/style/width-flexy.css b/static/style/width-flexy.css
new file mode 100644
index 0000000..84d1a59
--- /dev/null
+++ b/static/style/width-flexy.css
@@ -0,0 +1,20 @@
+.content {
+    margin-left: none;
+    width: 75%;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-right: 250px;
+    padding-left: 15px;
+    padding-right: 5px;
+    padding-bottom: 5px; }
+.content_footer {
+    margin-left: none;
+    width: 75%;
+    margin-bottom: 5px;
+    margin-right: 250px;
+    margin-top: 0px;
+    border-top: 2px solid #000000;
+    padding-top: 6px;
+    padding-left: 15px;
+    padding-right: 5px; }
+
diff --git a/static/style/width-full.css b/static/style/width-full.css
new file mode 100644
index 0000000..d6f11cb
--- /dev/null
+++ b/static/style/width-full.css
@@ -0,0 +1,19 @@
+.content {
+    margin-left: 4%;
+    width: 680px;
+    margin-top: 0px;
+    margin-right: none;
+    margin-bottom: 0px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-bottom: 5px; }
+.content_footer {
+    margin-left: 4%;
+    width: 680px;
+    margin-bottom: 5px;
+    margin-right: none;
+    margin-top: 0px;
+    border-top: 2px solid #000000;
+    padding-top: 6px;
+    padding-left: 5px;
+    padding-right: 5px; }