From 6951eb85239f386c8a0b6fd4051f5fbc1d8a77e0 Mon Sep 17 00:00:00 2001
From: bnewbold <bnewbold@manus.(none)>
Date: Sat, 30 Jun 2007 03:23:00 -0400
Subject: added hack-ish style tweaking controls TODO: add font selector
 styles, make it all work, cookies?

---
 bn_django/templates/base.html      |  26 ++++--
 bn_django/templates/frontpage.html |   8 +-
 static/style/font-sans.css         |   1 +
 static/style/font-serif.css        |   1 +
 static/style/site-nuts.css         |  16 ++++
 static/style/site-sane.css         |  14 +++
 static/style/styleswitcher.js      | 184 +++++++++++++++++++++++++++++++++++++
 static/style/width-flexy.css       |  20 ++++
 static/style/width-full.css        |  19 ++++
 9 files changed, 276 insertions(+), 13 deletions(-)
 create mode 100644 static/style/font-sans.css
 create mode 100644 static/style/font-serif.css
 create mode 100644 static/style/site-nuts.css
 create mode 100644 static/style/site-sane.css
 create mode 100644 static/style/styleswitcher.js
 create mode 100644 static/style/width-flexy.css
 create mode 100644 static/style/width-full.css
diff --git a/bn_django/templates/base.html b/bn_django/templates/base.html
index 7349669..95be2a4 100644
--- a/bn_django/templates/base.html
+++ b/bn_django/templates/base.html
@@ -3,8 +3,21 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 {% block stylesheets %}
-<link rel="STYLESHEET" type="text/css" href="/static/style/default.css" />
-<link rel="STYLESHEET" type="text/css" href="/static/style/commentary.css" />
+<script type="text/javascript" src="/static/style/styleswitcher.js" />
+<link rel="stylesheet" type="text/css" href="/static/style/default.css" />
+<link rel="stylesheet" type="text/css" href="/static/style/commentary.css" />
+<link rel="alternate stylesheet" type="text/css" 
+    href="/static/style/site-sane.css" title="site-sane" />
+<link rel="alternate stylesheet" type="text/css" 
+    href="/static/style/site-nuts.css" title="site-nuts" />
+<link rel="alternate stylesheet" type="text/css" 
+    href="/static/style/font-sans.css" title="font-sans" />
+<link rel="alternate stylesheet" type="text/css" 
+    href="/static/style/font-serif.css" title="font-serif"  />
+<link rel="alternate stylesheet" type="text/css" 
+    href="/static/style/width-fixed.css" title="width-fixed" />
+<link rel="alternate stylesheet" type="text/css" 
+    href="/static/style/width-flexy.css" title="width-flexy" />
 {% endblock %}
 {% block externaljs %} {% endblock %}
 <title>{% block windowtitle %}bryannewbold.com{% endblock %}</title>
@@ -29,12 +42,13 @@
 <br />&nbsp;&nbsp;style: &nbsp;
     <a onclick="swapstyle('font');return;" href="#" 
         id="style_font" class="subtle">
-    <span class="style_font_first">a</span><span class="style_font_second">A
+    <span class="style_font_first" id="style_font_first">
+    a</span><span class="style_font_second" id="style_font_second">A
     </span></a>
-    &nbsp;<a onclick="swapstyle('font');return;" href="#"
+    &nbsp;<a onclick="swapstyle('width');return;" href="#"
         id="style_width" class="subtle">fixed</a>
-    &nbsp;<a onclick="swapstyle('font');return;" href="#"
-        id="style_sheet" class="subtle">sane</a>
+    &nbsp;<a onclick="swapstyle('site');return;" href="#"
+        id="style_site" class="subtle">sane</a>
 <span class="righty"></span>
 </form>
 </div>
diff --git a/bn_django/templates/frontpage.html b/bn_django/templates/frontpage.html
index d8a9cfc..7401ff7 100644
--- a/bn_django/templates/frontpage.html
+++ b/bn_django/templates/frontpage.html
@@ -21,18 +21,12 @@ Other sites: <br />
 {% block content %}
 <div class="notice">
 <center><b>This site is under active development!</b></center>
-<p /> There are undoubtedly bugs, errors, aesthetic travesties, ommissions, etc (notably the <a href="/knowledge">knowledge</a> section isn't anything yet).
+<p /> There are undoubtedly bugs, errors, aesthetic travesties, ommissions, etc. 
 If you're curious you can track my work in the <a href="/code">code</a> section.
 <p />In the meanwhile you can get your bryan newbold fix at my <a href="http://web.mit.edu/bnewbold/www">old site</a>.
 </div>
  <h3>Where am I?</h3>
 For 2007 i'm taking a year break from <a href="http://web.mit.edu">MIT</a>...
-<!--
-<div class="righty_content">
-<b> Are you going to Burning Man? Let me know...</b>
-</div>
--->
-
 as of February i'm living in Seattle working at <a href="http://azalea.com/AboutUs">Azalea Software</a> doing tech work. Starting in mid-May i'll be working at the Moss Landing Marine Labs in California, followed in October by field work in Antarctica. I will be back at MIT for the spring 2008 semester.
 <br />
 
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; }
-- 
cgit v1.2.3

