dreamscapes | Tabula Rasa: Indexed

Theme name/layout: INDEXED / Tabula Rasa
Author:

syntheid
Layout info: "Spot Color" theme WIP preview.

CSS:

/*-------------------------------------------------
  Style: Tabula Rasa
  Title: INDEXED
  Theme: spot color
  Maker: Li ( binary @ janecraft.dreamwidth.org )
---------------------------------------------------*/

/* DEFAULT PAGE */
/* BODY HEADER FOOTER------------------------------------- */
body { 
	margin-top: 0;
	padding-top: 0;
	padding-left: 25em;
	font-family: arial, sans-serif;
	font-size: .7em;
	background: #000000;
}

#canvas {
	float: left;
	width: 80%;
	border: none;
	display: inline; /* So IE plays nice */
	padding-left: 10%;
}

#header, #footer {
	text-transform: lowercase;
	margin-left: -12em;
	margin-right: 7em;
	clear: both;
	padding: .5em;
}

#header {
	background-color: #666;
}

#header h1 {
	font-size: 8em;
	font-family: arial black;
	line-height: .2em;
}

#footer {
	text-align: right;
	background-color: #111 !important;
	margin-left: 0px !important;
}

#footer a, #footer a:visited, #footer a:active {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

#subtitle {
	font-family: arial;
	font-weight: normal;
	font-size: 1.2em;
	padding-left: 2em;
	margin-top: -2em;
	margin-bottom: 1em;
	margin-left: 24em;
}

#pagetitle {
	text-transform: uppercase;
	text-align: right;
	margin: 0 -.3em -.4em -.3em;
	padding: .2em .2em .4em .4em;
	background-color: #555;
	border-top: #444 1px solid;
	height: 1em;
	color: #598289;
}

.page-entry #pagetitle span {
	display: none;
}
/* end BODY HEADER FOOTER */

/* GENERIC------------------------------------------------  */
ul { 
	list-style: none;
	padding: 0 .5em;
}

ul li li {
	margin-left: .5em;
}

a {
	text-decoration: none;
	color: #fff;
}

a:hover {
	text-decoration: none;
	color: #95e2cf;
}

a:visited {
	text-decoration: none;
}

a:active {
	text-decoration: none;
	color: #ccc;
}
/* end GENERIC */

/* MAIN CONTENT COLUMN------------------------------------ */
#primary {
	float: left;
	width: 100%;
	margin-right: -100%;
}

#primary > .inner:first-child {
	margin-right: 7em;
	padding: 1em;
}

/* Entry Level */
#primary {
	background-color: none;
	color: #bbb;
}

#primary > .inner:first-child {
	background-color: #333;
}

#primary .entry-wrapper {
	margin-top: 1em;
	margin-left: -1em;
	margin-right: -8.1em;
	margin-bottom: 1.5em;
	padding-left: 1em;
	padding-right: .5em;
	border-right: #222 7.2em solid;
	background-color: #333;
}

#primary .entry {
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, arial, sans-serif;
	font-size: .9em;
	background-color: #444;
	margin: 0 1em 0 .5em;
	padding: .1em 1em;
	border: #303030 1px solid;
}

#primary .entry .contents img {
max-width: 100%;
}

#primary .entry-title {
	font-size: 2em;
	line-height: .6em;
	text-align: right;
	text-transform: uppercase;
	font-family: trebuchet ms;
	margin-bottom: 0;
}

#primary .entry-title a,
#primary .entry-title a:visited,
#primary .entry-title a:active,
#primary .entry-title a:hover {
	text-decoration: none;
}

#primary .datetime {
	font-size: 1em;
	color: #c8e686;
	text-transform: lowercase;
	font-style: italic;
	float: right;
}

#primary .entry-content {
	margin-top: 2em;
	margin-bottom: -2em;
}

#primary .entry-poster {
	font-style: italic;
	font-family: arial, sans-serif;
	font-size: .8em;
	text-transform: uppercase;
	float: left;
	padding: 0 1em;
	margin-top: -6em;
	margin-left: -1.5em;
	color: #666;
}

#primary .entry-poster a {
	text-decoration: none;
	color: #888;
}

#primary .entry-poster img {
	width: 1.5em;
	height: 1.5em;
	filter:alpha(opacity=50);
		-moz-opacity:0.5;
		-khtml-opacity: 0.5;
	opacity: 0.5;
}

#primary .access-filter {
	float: right;
	margin-top: -2.5em;
}

#primary .navigation {
	float: right;
	margin-right: -8em;
	margin-top: -2.5em;
	font-weight: bold;
	text-transform: uppercase;
}

#primary .navigation a,
#primary .navigation a:visited,
#primary .navigation a:hover,
#primary .navigation a:active {
	text-decoration: none;
}

#primary .page-separator {
	display: none;
}

#primary .page-back {
	margin-bottom: -3.2em;
}

#primary .entry .userpic img {
	width: 6em;
	height: 6em;
	margin-top: -4em;
	margin-right: -9.7em;
	float: right;
	border: none;
}

#primary .metadata {
	margin-top: 3em;
	margin-bottom: -3em;
}

#primary .metadata-label {
	font-weight: bold;
	font-family: tahoma;
	text-transform: lowercase;
	font-size: .9em;
	padding-left: 1.5em;
	margin: 0;
	background-image: url( http://i161.photobucket.com/albums/t208/sodalicium/0150_bullet.png );
	background-repeat: no-repeat;
}

#primary .metadata-item {
	text-transform: uppercase;
	font-size: .9em;
}

#primary .metadata-item a,
#primary .metadata-item a:visited,
#primary .metadata-item a:active,
#primary .metadata-item a:hover {
	text-decoration: none;
}

#primary .metadata img {
	float: left;
	display: none;
}

#primary .footer {
	text-align: right;
	padding-top: 3em;
}

#primary .comment-management-links ul,
#primary .entry-management-links ul,
#primary .tag ul,
#primary .entry-interaction-links ul,
#primary .comment-interaction-links ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

#primary .comment-management-links li,
#primary .entry-management-links li,
#primary .tag li,
#primary .entry-interaction-links li,
#primary .comment-interaction-links li {
	display: inline;
}

#primary .tag-text {
	display: none;
}

#primary .tag a {
	text-decoration: none;
}

#primary .entry-interaction-links a {
	background: #333;
	border: #333 5px solid;
	line-height: 2em;
	text-transform: uppercase;
	font-weight: bold;
	font-family: arial;
	font-size: 1.1em;
	text-decoration: none;
}

#primary .entry-interaction-links a:hover {
	text-decoration: none;
	color: #fff;
	background-color: #000;
	border: #000 5px solid;
}

#primary .comment-interaction-links a {
	background: #333;
	border: #333 5px solid;
	line-height: 2em;
	text-transform: uppercase;
	font-weight: bold;
	font-family: arial;
	font-size: 1em;
	text-decoration: none;
}

#primary .comment-interaction-links a:hover {
	text-decoration: none;
	color: #fff;
	background-color: #000;
	border: #000 5px solid;
}

#primary .above-entry-interaction-links,
#primary .below-reply-container {
	display: none;
}

#primary .comment-wrapper {
	background-color: #444;
	margin-left: .5em;
	padding: 1em;
	border: 1px #303030 solid;
}

#primary .comment-wrapper .userpic img {
	margin: 0 1em 1em 0;
	float: left;
	background: #333;
	padding: 1em;
	border: 0;
}

#primary .comment-poster {
	font-style: italic;
	font-family: arial, sans-serif;
	font-size: .8em;
	text-transform: uppercase;
	color: #666;
}

#primary .comment-poster a {
	text-decoration: none;
	color: #888;
}

#primary .comment-poster img {
	width: 1.5em;
	height: 1.5em;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

#primary .poster-ip {
	font-style: italic;
	text-transform: lowercase;
	font-family: 'Lucida Sans Unicode', Helvetica, arial, sans-serif;
	font-size: .7em;
}

#primary .comment-content {
	margin-top: 1em;
	font-family: 'Lucida Sans Unicode', Helvetica, arial, sans-serif;
}
/*end MAIN CONTENT COLUMN*/

/* FIRST SIDEBAR------------------------------------------ */
#secondary {
	float: left;
	width: 13em;
	margin-left: -25em;
	margin-top: -10em;
}

#secondary {
	background-color: none;
	color: #bbb;
}

#secondary > .inner:first-child {
	font-family: verdana, arial, sans-serif;
	font-size: .8em;
}

#secondary .module-section-one .userpic img {
	margin: 1em 0 0 1em;
	border: solid #000000 10px;
}

#secondary h2 {
	text-transform: uppercase;
	font-family: arial, sans-serif;
	font-size: 1.2em;
	background: #222;
	padding: .2em 0 .2em 1em;
	color: #808959;
}

#secondary .module-wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
}

#secondary .module-content {
	background-color: #222;
	padding: 0.4em;
}

/* Profile Module */

#secondary .module-section-one .journal-name, #secondary .module-section-one .journal-website-name {
	display: none;
}

#secondary .module-userprofile .userlite-interaction-links {
	margin: 1em 11.5%;
}

#secondary .module-userprofile li { 
	display: inline;
	padding: 0; 
}

/* Calendar Module */

#secondary .module-calendar .module-content {
	font-family: arial, sans-serif;
	padding: 1em;
}

#secondary .module-calendar .module-content table {
	text-align: center;
	margin: auto;
}

#secondary .module-calendar .module-content .entry-day {
	background: #777;
	border: #666 1px solid;
	color: #000;
}

#secondary .module-calendar .module-content .entry-day a {
	color: #000;
}

#secondary .module-calendar .module-content .empty-day {
	background: #555;
	border: #444 1px solid;
	color: #000;
}
/* end FIRST SIDEBAR*/

/* SECOND SIDEBAR */
#tertiary {
	float: left;
	width: 12.5em;
	margin-left: -12em;
}

#tertiary {
	background-color: #333;
	color: #bbb;
}

#tertiary > .inner:first-child {
	font-family: verdana, arial, sans-serif;
	font-size: .8em;
}

/* Top Navigation Links */

#tertiary .module-navlinks {
	font-family: arial, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	text-transform: uppercase;
	margin-top: -3.8em;
	margin-bottom: 2.8em;
	margin-left: -1em;
	width: 40em;
}

#tertiary .module-navlinks li {
	display: inline;
}

#tertiary .bottomnav {
	padding-top: 1em;
	margin-bottom: -1em;
}

#tertiary > .inner:first-child {
	padding: 1em 0 2em 1.5em;
}

#tertiary .module-tags_multilevel h2 {
	display: none;
}

#tertiary .module-tags_multilevel .module-list-item {
	background-color: #444;
	margin: .3em 0;
	padding: .5em;
	border: #303030 1px solid;
}

#tertiary .module-tags_multilevel a {
	text-decoration: none;
}
/* end SECOND SIDEBAR */
/* end DEFAULT PAGE */

/* ARCHIVE PAGE */
.page-archive #primary .navigation {
	float: left;
}

.page-archive #primary .navigation li {
	display: inline;
}

.page-archive #primary .month .inner .header {
	font-family: helvetica, sans-serif;
	font-size: 2em;
	letter-spacing: -.1em;
	height: 1.7em;
	text-transform: lowercase;
	text-align: right;
}

.page-archive #primary .contents .inner caption {
	display: none;
}

.page-archive #primary .month table {
	width: 100%;
}

.page-archive #primary .month th {
	font-family: tahoma, sans-serif;
	font-size: 1em;
	padding: 1em;
}

.page-archive #primary .month tr{
	border: 1px solid #000;
}

.page-archive #primary .month td.day {
	text-align: center;
	padding: .3em;
	line-height: 3.5em;
	background-color: #222;
	margin-bottom: 10px;
}

.page-archive #primary .month td.day-has-entries {
	padding: .3em;
	line-height: .55em;
	background: #444;
}

/* end ARCHIVE PAGE */

/* DAY PAGE */
.page-day #primary .navigation {
	float: right;
	margin-right: -9em;
	margin-top: -2.5em;
	font-weight:bold;
	text-transform: uppercase;
}

.page-day .day-date {
	display: none;
}
/* end DAY PAGE */

/*-----------------CONTEXTUAL POP-UP-----------------*/
div.ContextualPopup {
	position: relative;
	margin: 10px 0 0 30px;
	text-align: left;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, arial, sans-serif !important;
	font-size: .8em !important;
}

div.ContextualPopup div.Inner {
	color: #888888 !important;
	border: 0px solid #111;
	background-color: transparent !important;
	padding: 0px;
	width: 30em;
}

div.ContextualPopup .Userpic {
	padding: 1em;
	margin-left: 0px;
	background-color: #000;
}

div.ContextualPopup .Content {
	padding: 1em;
	background-color: #111;
	margin: 1em 7.6em 1em 1em;
}

div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
	text-decoration: none !important;
	font-weight: bold;
	color: #555555 !important;
}

div.ContextualPopup .Relation {
	text-transform: lowercase;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, arial, sans-serif;
	font-size: 1.2em;
	letter-spacing: 0px;
}

Image info: Layout currently only uses small bullets that I made, everything else is just CSS.

I'd like suggestions on things to do with the navlinks? I'm not real happy with how they are now, since I have them at fixed width and at small resolutions (namely, 800x600), they'll overlap with the pagetitle text (Recent Entries/Reading/etc. on the right), and for navigation reasons I like keeping the pagetitle visible. Or does this seem like not a problem? Someone also suggested putting separators in between the menu items, but that would make the text even longer.

Also anything else you can think of in particular that might be a problem? Like if there are obvious ways to eliminate the bits of non-fluid code I still have. Still working on eliminating duplicate/messy code in the CSS, but hopefully this is a bit more readable than my first draft.

Flat | Top-Level Comments Only

I'm using Firefox 3.5.3 and the whole layout is shifted far on the right, making a scrollbar appear. See the screenshot: http://img28.imageshack.us/img28/695/binaryirecententries092.png

I think it's caused by border-left: 300px solid transparent;.

Hmm, that's odd, I used Firefox 3.5.3 to do the design. But I'm not sure why I had that particular line in there, so I've commented it out and it seems to still be okay on mine-- did it fix it for you?

Yes it looks ok now! Another problem I noticed is that the sidebar calendar is cut off. I can't see day 1, day 8, day 15 etc. I think it's also visible on the screenshot.

This is super-late, but what browser/OS are you using? I'm trying to replicate it to see if I can fix it/figure out why it's doing that, because it definitely doesn't on mine.

Still using the latest non-beta Firefox. :) I'm using Windows Vista Pro and a 1440px wide screen resolution.

If I use:

#secondary {
float: left;
width: 200px;
margin-left: -350px;
margin-top: -150px;
}

it looks fine.

Hm, I'm really baffled-- I don't have Vista to try it on right now (I'm on XP), but I am using the latest version of Firefox and changing it wider just makes it very wide for all other browsers as far as I can tell. I tweaked it a little to clean up some code that seems to be unnecessary/changed it to em instead of px, did that do anything?

If I had to make a guess, I would say it's because we're not using the same font and the same font size.

It's much better and it fixed other alignment issues too.

Other issues I noticed:
The right border of the the separation/space between entries is not really aligned with the same border on the entry box.
The navigation items (Recent Entrie, Archive, etc.) are not vertically aligned. The page title is, though.
On the Month page, the month selector/navigation element is half outside the month box and the previous and next entries are above and below it instead of on the left/on the right (unless it's on purpose?).

That might be it-- my default settings for font in FF are for Times New Roman at 16pt.

I'm glad that fixed some of it, though.

Looking at the other issues... the right border not being aligned seems to be issue of using em instead of px. In some resolutions it seems to be unaligned. I'll have to see if there's a better way I can code that.

On the navigation items, can you screencap? I'm not sure exactly what you mean.

And no, that's definitely not meant to look like that, it was an oversight on my part, thank you. :)

Sure. Here it is: http://yfrog.com/18binaryirecententries094p

I think that might also be due to the font size difference. I tried something else, let me know if that changed anything for you? I'm not sure what I did is a *good* way to code it, but I'd like to know if that was indeed the issue. (I fixed the default em size for the page to a particular pixel size.)

I'm sorry. It looks exactly the same.

Hi, double-checking have you submitted your CLA yet? http://wiki.dwscoalition.org/notes/CLA

Just looked through my records, and I can't seem to find yours on file. Let me know if I just missed it!

I submitted one to Denise in... March/April since I did a couple bugs? Unless you need me to send it directly to you as well, which I can totally do.

Oh! No, if you've already submitted a CLA previously, then that's perfect. (CLAs go to Denise; I'm just the middle man who wanders around double-checking stuff).

Is this final?

No, it's still a draft, I'm just taking immensely long to figure out the tweaks.

Does this still need testing? I just set this up on my journal.

Er. I've sort of ... redone it entirely into what's currently up on my journal? So I'm not sure. I'm kind of ridiculously perfectionistic sometimes, so I keep tweaking things. I think what's on my journal is about ready to convert, there's just a couple elements that are bugging me, but it is kind of dissimilar to the stylesheet I posted here, and I don't know if this one can be made the way I want it/cross-browser compatible without more serious overhauls to the actual layer setup which I haven't figured out how to do yet.

Tabula Rasa: Indexed

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject