From 1e13d94b207a9d016e1354fa2ef20a64f7e5cf05 Mon Sep 17 00:00:00 2001 From: Greg Taylor Date: Tue, 5 Jun 2007 20:06:21 +0000 Subject: [PATCH] Beginnings of the integrated front-end website. --- apps/website/__init__.py | 0 apps/website/models.py | 3 + apps/website/urls.py | 5 + apps/website/views.py | 29 +++ apps/website/webcontext.py | 10 + media/css/prosimii-print.css | 225 +++++++++++++++++++ media/css/prosimii-screen-alt.css | 342 ++++++++++++++++++++++++++++ media/css/prosimii-screen.css | 359 ++++++++++++++++++++++++++++++ settings.py.dist | 9 +- urls.py | 3 + webtemplates/prosimii/index.html | 135 +++++++++++ webtemplates/prosimii/index2.html | 140 ++++++++++++ 12 files changed, 1258 insertions(+), 2 deletions(-) create mode 100644 apps/website/__init__.py create mode 100644 apps/website/models.py create mode 100644 apps/website/urls.py create mode 100644 apps/website/views.py create mode 100644 apps/website/webcontext.py create mode 100644 media/css/prosimii-print.css create mode 100644 media/css/prosimii-screen-alt.css create mode 100644 media/css/prosimii-screen.css create mode 100644 webtemplates/prosimii/index.html create mode 100644 webtemplates/prosimii/index2.html diff --git a/apps/website/__init__.py b/apps/website/__init__.py new file mode 100644 index 0000000000..e69de29bb2 diff --git a/apps/website/models.py b/apps/website/models.py new file mode 100644 index 0000000000..71a8362390 --- /dev/null +++ b/apps/website/models.py @@ -0,0 +1,3 @@ +from django.db import models + +# Create your models here. diff --git a/apps/website/urls.py b/apps/website/urls.py new file mode 100644 index 0000000000..5b1b94499e --- /dev/null +++ b/apps/website/urls.py @@ -0,0 +1,5 @@ +from django.conf.urls.defaults import * + +urlpatterns = patterns('apps.website.views', + (r'^$', 'page_index'), +) diff --git a/apps/website/views.py b/apps/website/views.py new file mode 100644 index 0000000000..3e19dec6cc --- /dev/null +++ b/apps/website/views.py @@ -0,0 +1,29 @@ +from django.shortcuts import render_to_response, get_object_or_404 +from django.db import connection +from django.template import RequestContext +from django import newforms as forms +from django.newforms.util import ValidationError +import django.views.generic.list_detail as list_detail +from django.contrib.auth.models import User +from django.utils import simplejson + +from apps.news.models import NewsEntry + +""" +This file contains the generic, assorted views that don't fall under one of +the other applications. +""" + +def page_index(request): + """ + Main root page. + """ + news_entries = NewsEntry.objects.all().order_by('-date_posted')[:2] + + pagevars = { + "page_title": "Front Page", + "news_entries": news_entries, + } + + context_instance = RequestContext(request) + return render_to_response('index.html', pagevars, context_instance) \ No newline at end of file diff --git a/apps/website/webcontext.py b/apps/website/webcontext.py new file mode 100644 index 0000000000..297a364602 --- /dev/null +++ b/apps/website/webcontext.py @@ -0,0 +1,10 @@ +from django.conf import settings + +def general_context(request): + """ + Returns common Evennia-related context stuff. + """ + return { + 'game_name': "Test Game", + 'media_url': settings.MEDIA_URL, + } diff --git a/media/css/prosimii-print.css b/media/css/prosimii-print.css new file mode 100644 index 0000000000..568882b860 --- /dev/null +++ b/media/css/prosimii-print.css @@ -0,0 +1,225 @@ +/************************************** + * TITLE: Prosimii Print Stylesheet * + * URI : prosimii/prosimii-print.css * + * MODIF: 2003-Apr-30 19:15 +0800 * + **************************************/ + + +/* ##### Common Styles ##### */ + +body { + color: black; + background-color: white; + font-family: "times new roman", times, roman, serif; + font-size: 12pt; + margin: 0; + padding: 0; +} + +acronym, .titleTip { + font-style: italic; + border-bottom: none; +} + +acronym:after, .titleTip:after { /* Prints titles after the acronyms/titletips. Doesn't work in MSIE */ + content: "(" attr(title) ")"; + font-size: 90%; + font-style: normal; + padding-left: 1ex; +} + +a { + color: black; + background-color: transparent; + text-decoration: none; +} + +a[href]:after { /* Prints the links' URIs after the links' texts. Doesn't work in MSIE */ + content: "<" attr(href) ">"; + font-size: 90%; + padding-left: 1ex; +} + +ol { + margin: -0.25em 0 1em 0; + padding: 0; +} + +ul { + list-style-type: square; + margin: -0.25em 0 1em 0; + padding: 0; +} + +dl { + margin: 0 0 1em 0; + padding: 0; +} + +ul li { + margin: 1ex 0 0 1.5em; + padding: 0; +} + +ol li { + margin: 1ex 0 0 1.5em; + padding: 0; +} + +dt { + font-weight: bold; + margin: 0; + padding: 0; +} + +dd { + margin: 0 0 0 1.5em; + padding: 0; +} + +.doNotPrint { + display: none; +} + + +/* ##### Header ##### */ + +#header { +} + +.superHeader { + display: none; +} + +.midHeader { + color: black; + background-color: transparent; + margin: 0; + padding: 0; + border-bottom: 1px solid black; +} + +.headerTitle { + font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; + font-size: 200%; + font-weight: normal; + margin: 0; + padding: 0; +} + +.headerSubTitle { + font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; + font-size: 110%; + font-weight: normal; + font-style: italic; + margin: 0; + padding: 0 0 1ex 0; +} + +.headerLinks { + display: none; +} + +.subHeader { + display: none; +} + + +/* ##### Side Menu ##### */ + +#side-bar { + display: none !important; +} + + +/* ##### Main Copy ##### */ + +#main-copy { + text-align: justify; + margin: 0 !important; + padding: 0; +} + +#main-copy h1 { + font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; + font-size: 120%; + margin: 2ex 0 1ex 0; + padding: 0; +} + +#main-copy h2 { + font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; + font-weight: normal; + font-size: 100%; + margin: 0; + padding: 2ex 0 0.5ex 0; +} + +#main-copy h1 + h2 { + padding-top: 0; +} + +#main-copy p { + margin: 0 0 2ex 0; + padding: 0; +} + +h2 a:after { + content: "" !important; +} + +.newsDate { + font-style: italic; + margin: 0; + padding: 0; + display: inline; +} + +.newsDate:before { /* Prints an '[' before the news item's date. Doesn't work in MSIE */ + content: "["; + font-style: normal; +} + +.newsDate:after { /* Prints a ']' after the news item's date. Doesn't work in MSIE */ + content: "]"; + font-style: normal; +} + +.newsSummary { + display: inline; + margin: 0 0 0 1ex !important; + padding: 0; +} + +.more { + display: none; +} + +.smallCaps { + font-variant: small-caps; +} + +.quarter, .oneThird, .half, .twoThirds, .fullWidth { + margin: 0; + padding: 0; +} + + +/* ##### Footer ##### */ + +#footer { + color: black; + background-color: transparent; + font-size: 100%; + text-align: center; + margin: 2em 0 0 0; + padding: 1ex 0 0 0; + border-top: 1px solid black; + display: block; +} + +#footer a { + color: black; + background-color: transparent; + text-decoration: none; +} \ No newline at end of file diff --git a/media/css/prosimii-screen-alt.css b/media/css/prosimii-screen-alt.css new file mode 100644 index 0000000000..b422ddba9b --- /dev/null +++ b/media/css/prosimii-screen-alt.css @@ -0,0 +1,342 @@ +/************************************************* + * TITLE: Prosimii Alternative Screen Stylesheet * + * URI : prosimii/prosimii-screen-alt.css * + * MODIF: 2004-Apr-28 21:56 +0800 * + *************************************************/ + + +/* ##### Common Styles ##### */ + +body { + font-family: verdana, helvetica, arial, sans-serif; + font-size: 73%; /* Enables font size scaling in MSIE */ + margin: 0; + padding: 0; +} + +html > body { + font-size: 9pt; +} + +acronym, .titleTip { + border-bottom: 1px dotted rgb(61,92,122); + cursor: help; + margin: 0; + padding: 0 0 0.4px 0; +} + +a { + color: rgb(61,92,122); + background-color: transparent; + text-decoration: underline; + margin: 0; + padding: 0 1px 2px 1px; +} + +a:hover { + color: rgb(117,144,174); + text-decoration: none; +} + +ol { + margin: 1em 0 1.5em 0; + padding: 0; +} + +ul { + list-style-type: square; + margin: 1em 0 1.5em 0; + padding: 0; +} + +dl { + margin: 1em 0 0.5em 0; + padding: 0; +} + +ul li { + line-height: 1.5em; + margin: 1.25ex 0 0 1.5em; + padding: 0; +} + +ol li { + line-height: 1.5em; + margin: 1.25ex 0 0 2em; + padding: 0; +} + +dt { + font-weight: bold; + margin: 0; + padding: 0 0 1ex 0; +} + +dd { + line-height: 1.75em; + margin: 0 0 1.5em 1.5em; + padding: 0; +} + +.doNotDisplay { + display: none !important; +} + + +.smallCaps { + font-size: 117%; + font-variant: small-caps; +} + + +/* ##### Header ##### */ + +.superHeader { + color: rgb(130,128,154); + background-color: rgb(33,50,66); + text-align: right; + margin: 0; + padding: 0.5ex 10px; +} + +.superHeader span { + color: rgb(195,196,210); + background-color: transparent; + font-weight: bold; + text-transform: uppercase; +} + +.superHeader a { + color: rgb(195,196,210); + background-color: transparent; + text-decoration: none; + margin: 0; + padding: 0 0.25ex 0 0; +} + +.superHeader a:hover { + color: rgb(193,102,90); + background-color: transparent; + text-decoration: none; +} + +.midHeader { + color: white; + background-color: rgb(61,92,122); + margin: 0; + padding: 0.26ex 10px; +} + +.headerTitle { + font-size: 300%; + margin: 0; + padding: 0; +} + +.headerSubTitle { + font-size: 151%; + font-weight: normal; + font-style: italic; + margin: 0 0 1ex 0; + padding: 0; +} + +.headerLinks { + text-align: right; + margin: 0; + padding: 0 0 2ex 0; + position: absolute; + right: 1.5em; + top: 3.5em; +} + +.headerLinks a { + color: white; + background-color: transparent; + text-decoration: none; + margin: 0; + padding: 0 0 0.5ex 0; + display: block; +} + +.headerLinks a:hover { + color: rgb(195,196,210); + background-color: transparent; + text-decoration: underline; +} + +.subHeader { + color: white; + background-color: rgb(117,144,174); + margin: 0; + padding: 0.5ex 10px; +} + +.subHeader a, .subHeader .highlight { + color: white; + background-color: transparent; + font-size: 110%; + font-weight: bold; + text-decoration: none; + margin: 0; + padding: 0 0.25ex 0 0; +} + +.subHeader a:hover, .subHeader .highlight { + color: rgb(255,204,0); + background-color: transparent; + text-decoration: none; +} + + +/* ##### Side Menu ##### */ + +#side-bar { + color: rgb(204,204,204); + background-color: transparent; + list-style-type: square; + list-style-position: inside; + width: 10em; + margin: 0; + padding: 1ex 0; + border: 1px solid rgb(204,204,204); + position: absolute; + left: 1.5ex; + top: 12em; +} + +[id="side-bar"] { + position: fixed !important; /* Makes the side menu scroll with the page. Doesn't work in MSIE */ +} + +#side-bar a { + text-decoration: none; +} + +#side-bar:hover { + color: rgb(117,144,174); + background-color: transparent; + border-color: rgb(117,144,174); +} + +#side-bar li { + margin: 0; + padding: 0.75ex 0 1ex 1.75ex; +} + +#side-bar li:hover { + color: rgb(61,92,122); + background-color: transparent; +} + + +#side-bar li a:hover { + text-decoration: underline; +} + + +/* ##### Main Copy ##### */ + +#main-copy { + text-align: justify; + margin: -0.5ex 1em 1em 12.5em; + padding: 0.5em 10px; + clear: left; +} + +#main-copy h1 { + color: rgb(117,144,174); + background-color: transparent; + font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; + font-size: 186%; + margin: 0; + padding: 1.5ex 0 0 0; +} + +#main-copy h2 { + color: rgb(61,92,122); + background-color: transparent; + font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; + font-weight: normal; + font-size: 151%; + margin: 0; + padding: 1ex 0 0 0; +} + +#main-copy p { + line-height: 1.75em; + margin: 1em 0 1.5em 0; + padding: 0; +} + +.newsHeading { + color: rgb(61,92,122); + background-color: transparent; + font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; + font-size: 145%; + text-decoration: none; + margin: 0; + padding: 1ex 0 0 0; + display: block; +} + +.newsHeading:hover { + color: rgb(117,144,174); + background-color: transparent; + text-decoration: underline; +} + +.newsDate { + font-style: italic; + margin: 0 !important; + padding: 0; +} + +.newsSummary { + margin: 1.5ex 0 2.5ex 0.75ex !important; + padding: 0; +} + +.more { + text-align: right; + margin: 0; + padding: 0.5em 0; +} + +.more a { + color: rgb(61,92,122); + background-color: transparent; + font-size: 92%; + text-decoration: underline; + margin: 0; + padding: 0.25ex 0.75ex; +} + +.more a:hover { + color: rgb(117,144,174); + text-decoration: none; +} + + +/* ##### Footer ##### */ + +#footer { + color: rgb(51,51,102); + background-color: rgb(239,239,239); + font-size: 87%; + text-align: center; + line-height: 1.25em; + margin: 2em 0 0 0; + padding: 1ex 10px; + clear: left; +} + +#footer a { + color: rgb(0,68,204); + background-color: transparent; + text-decoration: underline; +} + +#footer a:hover { + text-decoration: none; +} \ No newline at end of file diff --git a/media/css/prosimii-screen.css b/media/css/prosimii-screen.css new file mode 100644 index 0000000000..67b1eb9b11 --- /dev/null +++ b/media/css/prosimii-screen.css @@ -0,0 +1,359 @@ +/*************************************** + * TITLE: Prosimii Screen Stylesheet * + * URI : prosimii/prosimii-screen.css * + * MODIF: 2004-Apr-28 21:43 +0800 * + ***************************************/ + + +/* ##### Common Styles ##### */ + +body { + font-family: verdana, helvetica, arial, sans-serif; + font-size: 73%; /* Enables font size scaling in MSIE */ + margin: 0; + padding: 0; +} + +html > body { + font-size: 9pt; +} + +acronym, .titleTip { + border-bottom: 1px dotted rgb(61,92,122); + cursor: help; + margin: 0; + padding: 0 0 0.4px 0; +} + +a { + color: rgb(61,92,122); + background-color: transparent; + text-decoration: underline; + margin: 0; + padding: 0 1px 2px 1px; +} + +a:hover { + color: rgb(117,144,174); + text-decoration: none; +} + +ol { + margin: 1em 0 1.5em 0; + padding: 0; +} + +ul { + list-style-type: square; + margin: 1em 0 1.5em 0; + padding: 0; +} + +dl { + margin: 1em 0 0.5em 0; + padding: 0; +} + +ul li { + line-height: 1.5em; + margin: 1.25ex 0 0 1.5em; + padding: 0; +} + +ol li { + line-height: 1.5em; + margin: 1.25ex 0 0 2em; + padding: 0; +} + +dt { + font-weight: bold; + margin: 0; + padding: 0 0 1ex 0; +} + +dd { + line-height: 1.75em; + margin: 0 0 1.5em 1.5em; + padding: 0; +} + +.doNotDisplay { + display: none !important; +} + + +.smallCaps { + font-size: 117%; + font-variant: small-caps; +} + + +/* ##### Header ##### */ + +.superHeader { + color: rgb(130,128,154); + background-color: rgb(33,50,66); + text-align: right; + margin: 0; + padding: 0.5ex 10px; +} + +.superHeader span { + color: rgb(195,196,210); + background-color: transparent; + font-weight: bold; + text-transform: uppercase; +} + +.superHeader a { + color: rgb(195,196,210); + background-color: transparent; + text-decoration: none; + margin: 0; + padding: 0 0.25ex 0 0; +} + +.superHeader a:hover { + color: rgb(193,102,90); + background-color: transparent; + text-decoration: none; +} + +.midHeader { + color: white; + background-color: rgb(61,92,122); + margin: 0; + padding: 0.26ex 10px; +} + +.headerTitle { + font-size: 300%; + margin: 0; + padding: 0; +} + +.headerSubTitle { + font-size: 151%; + font-weight: normal; + font-style: italic; + margin: 0 0 1ex 0; + padding: 0; +} + +.headerLinks { + text-align: right; + margin: 0; + padding: 0 0 2ex 0; + position: absolute; + right: 1.5em; + top: 3.5em; +} + +.headerLinks a { + color: white; + background-color: transparent; + text-decoration: none; + margin: 0; + padding: 0 0 0.5ex 0; + display: block; +} + +.headerLinks a:hover { + color: rgb(195,196,210); + background-color: transparent; + text-decoration: underline; +} + +.subHeader { + color: white; + background-color: rgb(117,144,174); + margin: 0; + padding: 0.5ex 10px; +} + +.subHeader a, .subHeader .highlight { + color: white; + background-color: transparent; + font-size: 110%; + font-weight: bold; + text-decoration: none; + margin: 0; + padding: 0 0.25ex 0 0; +} + +.subHeader a:hover, .subHeader .highlight { + color: rgb(255,204,0); + background-color: transparent; + text-decoration: none; +} + + +/* ##### Main Copy ##### */ + +#main-copy { + margin: 0; + padding: 0.5em 10px; + clear: left; +} + +#main-copy h1 { + color: rgb(117,144,174); + background-color: transparent; + font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; + font-size: 200%; + margin: 0; + padding: 0; +} + +#main-copy h2 { + color: rgb(61,92,122); + background-color: transparent; + font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; + font-weight: normal; + font-size: 151%; + margin: 0; + padding: 1ex 0 0 0; +} + +#main-copy p { + line-height: 1.75em; + margin: 1em 0 1.5em 0; + padding: 0; +} + +.newsHeading { + color: rgb(61,92,122); + background-color: transparent; + font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif; + font-size: 145%; + text-decoration: none; + margin: 0; + padding: 1ex 0 0 0; + display: block; +} + +.newsHeading:hover { + color: rgb(117,144,174); + background-color: transparent; + text-decoration: underline; +} + +.newsDate { + font-style: italic; + margin: 0 !important; + padding: 0; +} + +.newsSummary { + margin: 1.5ex 0 2.5ex 0.75ex !important; + padding: 0; +} + +.more { + text-align: right; + margin: 0; + padding: 0.5em 0; +} + +.more a { + color: rgb(61,92,122); + background-color: transparent; + font-size: 92%; + text-decoration: underline; + margin: 0; + padding: 0.25ex 0.75ex; +} + +.more a:hover { + color: rgb(117,144,174); + text-decoration: none; +} + +.rowOfBoxes { + clear: both; +} + +.quarter, .oneThird, .half, .twoThirds, .fullWidth { + margin: 1em 0; + float: left; + border-left: 1px solid rgb(204,204,204); +} + +.quarter { + width: 21%; + padding: 0 1.9%; +} + +.oneThird { + width: 28%; + padding: 0 1.9%; +} + +.half { + text-align: justify; + width: 46%; + padding: 0 1.9%; +} + +.twoThirds { + text-align: justify; + width: 63%; + padding: 0 1.9%; +} + +.fullWidth { + text-align: justify; + width: 96%; + padding: 0 1.2em; + border-left: none; +} + +.filler { /* use with an empty

element to add padding to the end of a text box */ + border: 1px solid white; +} + +.noBorderOnLeft { + border-left: none; +} + +.dividingBorderAbove { + border-top: 1px solid rgb(204,204,204); +} + +/* More elegant alternatives to .noBorderOnLeft & .dividingBorderAbove + * that don't require the creation of new classes - but which are not + * supported by MSIE - are the following: + * + * .rowOfBoxes > div:first-child { + * border-left: none; + * } + * + * .rowOfBoxes + .rowOfBoxes { + * border-top: 1px solid rgb(204,204,204); + * } + */ + + +/* ##### Footer ##### */ + +#footer { + color: rgb(51,51,102); + background-color: rgb(239,239,239); + font-size: 87%; + text-align: center; + line-height: 1.25em; + margin: 2em 0 0 0; + padding: 1ex 10px; + clear: left; +} + +#footer a { + color: rgb(0,68,204); + background-color: transparent; + text-decoration: underline; +} + +#footer a:hover { + text-decoration: none; +} \ No newline at end of file diff --git a/settings.py.dist b/settings.py.dist index 127dd2f40b..ad09008443 100755 --- a/settings.py.dist +++ b/settings.py.dist @@ -77,12 +77,15 @@ MIDDLEWARE_CLASSES = ( ROOT_URLCONF = 'urls' +# The name of the currently selected web template. This corresponds to the +# directory names shown in the webtemplates directory. +ACTIVE_TEMPLATE = 'prosimii' + TEMPLATE_DIRS = ( # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates". # Always use forward slashes, even on Windows. # Don't forget to use absolute paths, not relative paths. - "%s/webtemplates" % (BASE_PATH), -) + "%s/webtemplates/%s" % (BASE_PATH, ACTIVE_TEMPLATE), INSTALLED_APPS = ( 'django.contrib.auth', @@ -93,5 +96,7 @@ INSTALLED_APPS = ( 'apps.objects', 'apps.helpsys', 'apps.genperms', + 'apps.news', + 'apps.website', ) diff --git a/urls.py b/urls.py index 728f5f2af9..56e7b798cd 100755 --- a/urls.py +++ b/urls.py @@ -11,4 +11,7 @@ from django.conf.urls.defaults import * urlpatterns = patterns('', # Admin interface (r'^admin/', include('django.contrib.admin.urls')), + + # Front page + (r'^', include('apps.website.urls')), ) diff --git a/webtemplates/prosimii/index.html b/webtemplates/prosimii/index.html new file mode 100644 index 0000000000..9bc4ca9766 --- /dev/null +++ b/webtemplates/prosimii/index.html @@ -0,0 +1,135 @@ + + + + + + + + + + + + + {{game_name}} + + + + +

Skip to main content.
+ + + + + + + +
+
+
+

Welcome!

+

Insert body text

+
+ +
+

Latest News

+ {% for entry in news_entries %} + {{entry.title}} +

{{entry.date_posted|time}}

+

{{entry.body|truncatewords:20}}

+ {% endfor %} + +
More News »
+ +

+
+
+ +
+
+

Standards

+

Prosimii is 100% compliant with + XHTML 1.0 Strict and + uses CSS. + [Validate + XHTML]

+ +

Unlike this design’s inspiration, no tables have been used to layout elements + and text.

+
+ +
+

Stylesheet

+

An external stylesheet dictates the format and layout of text in this design.

+ +

Thus, website-wide design changes can be achieved by editing only the stylesheet.

+ +

+
+ +
+

Compatibility

+

Prosimii’s stylesheet is more robust and comprehensive than + my previous designs.

+ +

This design has been tested for consistent rendering in Gecko + (Mozilla Firefox + 0.10.1), Opera (7.01) and Internet Explorer (6.0).

+
+ +
+

Accessibility

+

Prosimii tentatively conforms to the + + WCAG double A rating + and § 508 guidelines for web + content accessibility.

+ +

Additionally, most document metrics (lengths, widths and spacings) are font-size + relative.

+
+
+
+ + + + + + diff --git a/webtemplates/prosimii/index2.html b/webtemplates/prosimii/index2.html new file mode 100644 index 0000000000..e04502c1e3 --- /dev/null +++ b/webtemplates/prosimii/index2.html @@ -0,0 +1,140 @@ + + + + + + + + + + + + + + + + + + + + + + + Prosimii Page Two + + + + +
Skip to main content.
+ + + + + + + +

This page’s menu:

+ + + + +
+

Alternative Layout

+

This is an alternative layout of Prosimii. Notice the presence of a + side menu on the left of page. If you are viewing this page in a fully standards-compliant browser, the side + menu will scroll with the page. If you are viewing in Internet Explorer, however, the menu + will appear stationary.

+ +

The following text is essentially the same as the previous page except elaborated.

+ +

Improved Cross-browser Compatibility

+

Before Prosimii, I did not test my designs in Opera prior to submitting + them to OSWD. As a result, these templates don’t render properly in that browser. In + contrast, Prosimii has been fully tested in + Opera (7.01), Gecko + (Mozilla Firefox 0.10.1) + and Internet Explorer (6.0) for consistent rendering.

+ +

This means that people using standards-compliant browsers + will see the same format and layout of your page.

+ +

Comprehensive Stylesheets

+
+
More robust screen stylesheet
+
The improved cross-browser consistency is a result of + Prosimii’s more comprehensive screen stylesheet. Major style + parameters are explicitly defined in the stylesheet, resulting in less dependence on + browser-determined defaults and thus fewer rendering idiosyncrasies.
+
Addition of a print media stylesheet
+
Prosimii has a print media stylesheet that styles the page in a + format appropriate for black and white printing. To see the effect of this stylesheet, + select print preview from the + file menu, or direct this page to a printer (NB: print only + this frame if you are viewing this template in a multi-frame document). Alternatively, + if you're using Firefox, use the stylesheet switcher + in the bottom right-hand corner of the browser window.
+
+ +

Accessibility Features

+

Prosimii incorporates accessibility features for people with impaired + vision. The template tentatively conforms to the + WCAG double A rating and + § 508 guidelines for web content + accessibility. The relative simplicity of the template’s underlying markup ensures that + your page can be easily transformed for rendering in aural, tactile (braille) and other + non-visual user agents.

+ +

Additionally, the majority of document metrics (widths, lengths and spacings) are font-size + relative. This means that a user can increase the default font size of your page (using their + browser) without compromising it’s layout.

+
+ + + + + +