diff options
author | bnewbold <bnewbold@manus.(none)> | 2007-06-30 03:23:00 -0400 |
---|---|---|
committer | bnewbold <bnewbold@manus.(none)> | 2007-06-30 03:23:00 -0400 |
commit | 6951eb85239f386c8a0b6fd4051f5fbc1d8a77e0 (patch) | |
tree | fff1aa978025b227e8ad6222fb50af191379dabd | |
parent | fed6d5930825914e07095cf2c330add257088bfb (diff) | |
download | bnewnet-6951eb85239f386c8a0b6fd4051f5fbc1d8a77e0.tar.gz bnewnet-6951eb85239f386c8a0b6fd4051f5fbc1d8a77e0.zip |
added hack-ish style tweaking controls
TODO: add font selector styles, make it all work, cookies?
-rw-r--r-- | bn_django/templates/base.html | 26 | ||||
-rw-r--r-- | bn_django/templates/frontpage.html | 8 | ||||
-rw-r--r-- | static/style/font-sans.css | 1 | ||||
-rw-r--r-- | static/style/font-serif.css | 1 | ||||
-rw-r--r-- | static/style/site-nuts.css | 16 | ||||
-rw-r--r-- | static/style/site-sane.css | 14 | ||||
-rw-r--r-- | static/style/styleswitcher.js | 184 | ||||
-rw-r--r-- | static/style/width-flexy.css | 20 | ||||
-rw-r--r-- | static/style/width-full.css | 19 |
9 files changed, 276 insertions, 13 deletions
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 /> style: <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> - <a onclick="swapstyle('font');return;" href="#" + <a onclick="swapstyle('width');return;" href="#" id="style_width" class="subtle">fixed</a> - <a onclick="swapstyle('font');return;" href="#" - id="style_sheet" class="subtle">sane</a> + <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; } |