zvi: self-portrait: short, fat, black dyke in bunny slippers (Default)
still kind of a stealthy love ninja ([personal profile] zvi) wrote in [site community profile] dreamscapes2009-08-11 02:52 am
Entry tags:

Refried Tablet

Okay, so I made it my personal mission to make a theme for Tabula Rasa that looks like Refried Paper. Can you let me know if there's any essential Refried Paper element you think I'm missing, or anything I added that seems against the spirit of Refried Paper?

(I know that all of the metadata is above the entry in Refried Paper. I cannot wrap my head around CSS positioning to get that to work on a Tabula Rasa based theme. Any advice would be welcome.)

Theme name/layout: Refried Tablet / Tabula Rasa
Author: [personal profile] zvi
Layout info:
/* Refried Tablet, a css port of Refried Paper, implemented by zvi of zvilikestv.net */

/* WHOLE PAGE */

A { color: #CC6633; text-decoration: none; }
A:visited { color: #CCB333; }
A:active { color: #FF9966; text-decoration: underline; }
A:hover { color: #FF9966; text-decoration: underline;}


body {
margin: 0; padding: 0; background: #ffffff none;
color: #666666;
font-family: "NimbusRoman No9 L", Rekha, Georgia, serif; }

p,td,tr,table,hr,br,ul,ol,li {font-size:1em; line-height:1.5em; text-align:justify; }

h1, h2, h3, h4, h5, h6 {font-family: Loma, Verdana, Geneva, sans-serif; }

/* PAGE HEADER */

#canvas {border-top: #666666 20px solid; }
h1#title, h2#subtitle { font-weight:900;
letter-spacing:.1em; font-variant: small-caps;
background-color: #CCCC99;color: #666666;
margin: 0em auto; padding-bottom: 0em;
}
h1#title { font-size: 2em; }
h1#title:after {content: ": "; }
h2#subtitle { margin-top: -1em; font-size: 1.5em; }

#header {border-top: white 2px solid; background-color: #CCCC99; border-bottom: black 1px solid; }


h2#pagetitle {color: #999966; background-color: #CCCC99; clear: both; font-size: 1.25em; font-weight:bold;text-transform:uppercase; letter-spacing:.2em; line-height: padding-right: 5em; padding-top: 0em;}
h2#pagetitle:after { content: " PAGE"; }
.page-archive h2#pagetitle:after { content: " ARCHIVE PAGE"; }

/* ENTRIES */

/* Make the headers a different color than the rest of the text. */
.tag, .metadata, .entry .inner .header, .entry .inner .poster, .entry .inner .userpic { color: #336699; font-size: 1em; line-height:1.4em; }

/* Add identifiers to the header content, pt 1 */

h3.entry-title:before {content: "Subject: ";}
h3.entry-title {color: #336699; font-size: 1em; line-height:1.4em; margin-bottom: 0em; padding-bottom: 0em; font-family: "NimbusRoman No9 L", Rekha, Georgia, serif; }

.restrictions-18 .entry-title:after { display: block; content: "Rating: Restricted to adults 18 and older."; color: #c33; background-color: white; }
.restrictions-NSFW .entry-title:after { display: block; content: "Rating: Discretion advised. Not safe for work."; }
span.restrictions { display: none; }

.entry .inner .header .datetime:before {content: "Date: ";}

/* replace icons for restriction/security with text */
.security-public .entry .inner .header:after { content: "Security: Public"; display: block; clear: left; }
.security-private .entry .inner .header:after { content: "Security: Private"; display: block; clear: left; }
.security-protected .entry .inner .header:after { content: "Security: Access Only"; display: block; clear: left; }
.security-custom .entry .inner .header:after { content: "Security: Access Filter"; display: block; clear: left; }
.access-filter { display: none; }

/* Add identifiers to the header content, pt 2 */

.entry .inner .userpic:before { content: "Poster: "; vertical-align: text-top; }
.entry .inner .userpic img { vertical-align: text-bottom; }
.entry .inner .userpic {margin-bottom: 1em;}


/* make metadata and tags more header-ish */
.metadata {padding: 0em; margin: 0em; margin-top: 1em; margin-bottom: -1em;}
.metadata ul { margin: 0em; padding: 0em; }
.metadata li {line-height: 1.4em; margin: 0em auto;}
.tags {margin-bottom: 0em; }
div.inner > ul {margin-top: 0em; }

/* put the icons on the same line as the text entry management stuff */
.entry-management-links {float: right; display: inline; }

/* Put a line under all the entries, add space between entries */

.entry-wrapper { border-bottom: 1px black solid; padding-bottom: 1em; margin-bottom: 1.5em; }

/* attempts to make the poster's username/accountname visible. Not successful yet */

.entry .inner .poster {visibility: visible; }
.poster, .entryposter {visibility: visible; }

/* Make text entry management links left-align and pretty */

.entry .inner {margin-bottom: 1em; }
ul.entry-interaction-links { text-align: left;}
ul.entry-interaction-links li { font-family: Loma, Verdana, Geneva, sans-serif; font-size: 0.8em; color: #336699; line-height:1.4em; text-transform: uppercase;}

/* SIDEBARS AND MODULES */

/* make headers pretty */
div h2.module-header { border: 1px black solid; border-bottom-width: 2px; padding: 0em 1em; margin-bottom: 1em; margin: 0em;
color: #333333; background-color: #CCCCCC;
font-size: 1.25em; font-weight:bold; letter-spacing: .1em; text-transform: lowercase; }

/* get rid of padding so that the header borders go all the way to the sides, add border around the columns */
#secondary {padding: 0em; border: thin black solid; }
#secondary .inner:first-child {padding: 0em; }
/* add padding to module content because whitespace is good! */
.module-content { margin: auto 1em; }
/* make lists prettier */
.module-content li { text-align: left; list-style-type: none;}
/* special case for the syndicate tags, too close to top */
.module-syndicate .module-content {margin-top: .5em; }

/* FOOTER */
/* make footer a contrast color bar */
#footer { background-color: #999999 }
#footer a { font-weight: bold; display: block; color: #CCB333;}

/* don't make tertiary modules in two column into 15px boxes, the data doesn't fit! */
.two-columns-left #tertiary .module, .two-columns-right #tertiary .module { float:none; width:auto; }

/* ENTRIES */
/* add line between comments */
.comment-wrapper { border-bottom: thin black inset; }
/* make comment headers headerish */
.comment .inner .header, .comment .inner .contents .poster, .comment .inner .contents .poster-ip { color: #336699; line-height:1.4em; font-weight: bold; }

/* visually distinguish screened/frozen comments */
.screened { font-family: "Nimbus Mono L", "Courier New", monospace; font-size: .9em; font-weight: 300; background-color: #ecf7ff; }
.frozen { font-family: "Nimbus Mono L", "Courier New", monospace; font-size: .9em; font-weight: 300; background-color: #F5F5F5; }

Image info: No images

P.S. I have it live on my journal, if you're interested in checking it out.

P.P.S. I am using the Tabula Rasa stylesheet. Can someone let me know if that has to be changed pre-conversion?

Post a comment in response:

This account has disabled anonymous posting.
If you don't have an account you can create one now.
HTML doesn't work in the subject.
More info about formatting