Style: Summertime/Tabula Rasa

[ninetydegrees]

Edit: these are now live and can be selected from Customize Style. Original layers and pics are no longer available.


Style: Summertime
Author: ninetydegrees
Images info:
-- background texture by Design Shard. Usage terms : "Free to use for commercial and non commercial work no credit or link back needed, but please don’t redistribute or sell them as your own."
-- icons by Romeo Barreto, John Caserta, Denis Chenu, Pedro Lalli, Marcus Michaels, P.J. Onori, Laurent Patain and Cor Tiemens from The Noun Project. All licensed under No Rights Reserved ( CC0 ) or Attribution ( CC BY 3.0 ).

Themes:
Karting / Preview (shown in one-column-split mode with fewer modules)
Regatta / Preview (shown in three-columns-sides mode)
Swimming Pool / Preview (shown in one-column mode with fewer modules)
Tennis Court / Preview (shown in two-columns-right mode)

This style ate my mind so there will be more themes once I grow a new brain. :)


Testing would be appreciated as well as feedback on one-column modes as I wasn't sure if putting modules in the below-header and above-footer areas was the right thing to do. I'm not sold on any of the names either so suggestions are welcome.

Comments

[baggyeyes]

Just a heads up - your link for the layout layer isn't public.

[ninetydegrees]

And of course it's the only one I didn't check! :) Thanks a lot! It should be fixed now.

[baggyeyes]

For a name, how about Summertime?

I'm testing this now, btw.

[branchandroot]

These look nice! (Firefox 14 on Mac 10.7)

I think the modules below-header, in one column, will work reasonably well? I really doubt anyone will put anything hugely long there. I'd be happier with it if we had the wai-aria roles in place for major page divisions, though, so screen readers could skip ahead to the content. I was also wondering whether some journal-owner-visible link to the effect of "go here to re-arrange your modules" would be useful, though, just to reinforce that these can be moved around and let people who haven't quite discovered the customize pages do so quickly.

[ninetydegrees]

Thank you!

Originally I wanted these sections to be opened and closed with a mouse click but that requites JS so I couldn't do it.

These are great ideas but do you mean for this style specifically or in general? I know there's an bug for WAI-ARIA throughout the site for instance.

[branchandroot]

I'd say, since there /is/ a site-wide bug for wai-aria, to not put anything into this style that might conflict. And I don't think you need to make this style reliant on that bug. But I think it'll be a big gain in usability for the one-column version this style when that bug is closed.

[foxfirefey]

Originally I wanted these sections to be opened and closed with a mouse click but that requites JS so I couldn't do it.

Since this will end up an official style, we COULD add in the needed JS, because official styles do not go through the cleaner.

[ex_rising236]

This is absolutely stunning and brilliant, and with some tweaking that I think I'm going to do for line-spacing, because it's a personal pet peeve of mine when metadata displays with paragraph breaks rather than line breaks, it's about to become a new absolute favourite.

Want: Dark theme a la Carting, with jeweltones for links and such, maybe blue for the buttons.

[ninetydegrees]

Wow! Thank you! It means a lot to hear you say this.
Do you mean the break between current and tags? Because I hate it too but was too lazy to fix it. Otherwise, clue me in please?

Do it, do it! :)

[ex_rising236]

I mean that, too-- but basically that... argh words. Um.

The line space between the individual lines of metadata, and the metadata and the tags, should only ever, in my not so humble opinion, amount to the amount of space generated by one
tag. It should look like they're lines that are part of the same paragraph, rather than having the blank lead space in between. If that makes sense. Of course, this is just me.

[baggyeyes]

Metadata display are generated by ul/li tags. I get what you mean, though. I actually like the spacing, because it makes it easy to read. Everybody has their preferences. :)

[ex_rising236]

*nods.* Yeah. It's interesting to me, that what makes something easier for one person to read can make it difficult for another and impossible for a third, you know? I mean, some people like low contrast, and some people need much higher or different contrasts, and I guess it's the same way for amounts of white space.

[katsuko]

This is utterly lovely, but there's just one little thing:

When I go to compile the layout, I get an error reading "Compile error: line 29, column 1: Can't set non-existent property 'color_page_title_shadow'". Is this something that will need to be "turned on" so to say, or is it something that can just be ignored?

[ninetydegrees]

Thank you! I'm very glad you think so.

Question: are you also using the layout layer which is linked at the very top of the entry? Because color_page_title_shadow is a custom property I created in this layout layer and this error message makes me thing you're only using the theme file.

[katsuko]

That was the problem, I forgot a step! Thank you for helping so quickly.

[turlough]

This is a great style! It's got just the right amount of detail so it looks sleek and fancy but neither too fussy nor too sterile.

The only thing I think I would like to change is to have drop shadows on the modules too in Regatta and Tennis Court. Since the entries and the header and footer all have them I keep expecting the "sidebars" to have them too.

[ninetydegrees]

Thank you! I try to keep things from being 'overwhelming' so I'm glad it worked for you.

Ha! I debated over that actually because I was afraid it would be too much. The other thing is that I can't make the little punch mark decoration have a similar shadow (I mean I don't know how to do it in PS but maybe I'll find a solution).

[ninetydegrees]

Oh I think I managed to figure it out. Could you have another look at Regatta and tell me what you think please?

[baggyeyes]

I've tried compiling the layout layer with your new code and this error occurs:

S2 Compiler Output at Tue Aug 21 13:57:03 2012 Error compiling layer: Compile error: line 2418, column 13: Unexpected token found. Expecting: [TokenPunct] = ; Got: [TokenPunct] = $ S2::Node, S2/Node.pm, 144 S2::NodePrintStmt, S2/NodePrintStmt.pm, 49 S2::NodeStmt, S2/NodeStmt.pm, 38 S2::NodeStmtBlock, S2/NodeStmtBlock.pm, 43 S2::NodeFunction, S2/NodeFunction.pm, 104 S2::Layer, S2/Layer.pm, 59 S2::Compiler, S2/Compiler.pm, 27 Context 2414: var string page_background = generate_background_css ($*image_background_page_url, $*image_background_page_repeat, $*image_background_page_position, $*color_page_background); 2415: var string header_background = generate_background_css ($*image_background_header_url, $*image_background_header_repeat, $*image_background_header_position, $*color_header_background); 2416: if ($*image_background_header_height > 0) { 2417: $header_background = """ 2418: $header_background 2419: height: """ + $*image_background_header_height + """px;"""; 2420: } 2421: 2422: var string footer_background = generate_background_css( "", "", "", $*color_footer_background );

As well, the code is incomplete; it ends at the Contextual Pop-ups section.

Is this just me and my crappy Internet access?

[ninetydegrees]

It could be because it compiles fine for me. I've just tried it again. Do you want me to email you the layout layer to make sure?

[baggyeyes]

I've been testing this style for the last little while. The only issue I can see - which may or not be an issue - occurs when an entry makes use of 'pre', or has a very large image in the entry.

What happens is that the layout gets a long scroll bar along the bottom. Now, on desktop browsers, this may not be a problem, but on 7" tablets (portrait and landscape views) and on a iPod Touch/iPhone the whole layout shrinks to accommodate the long text or large image. I'm guessing the issue would be the same in another Smartphone?

I used two pieces of CSS to deal with the over-sized entries;
pre { overflow: auto; } img, embed { max-width:100%; max-height:auto; }

It could be that this is a layout that is optimized for desktop only.

Otherwise, long comment threads didn't become unreadable. And the entire layout/theme stayed readable, regardless what screen size I had.

I used Opera 12.01 (Mac), Safari 6.0 (Mac), Firefox 14 (Mac) Firefox 12 (Fedora Linux) Firefox 15 (Android 2.3.4, Kobo Vox 7" tablet) A version of Safari (No idea which one) on an iPod touch IOS, and iPhone 4. (It helps to know people with gadgets!)

[ninetydegrees]

Thank you so much for the extensive testing! The code looks awesome. I'll add it when I get back from work.

[ninetydegrees]

I was looking for this comment today because I'm adding this code to a layout I'm converting. I noticed that embed doesn't cover iframe so letting you know. .lj_embedcontent seems like a possible alternative too.

Also I came upon:

pre {
white-space: pre-line;
word-wrap: break-word;
}

which forces the line to break and prevent scrollbars. Not sure you'd like it better or that it works in all browsers but figured I could mention it. :)

[rakshi]

These are just spectacular!! I'm going to HAVE to try them. I hope I don't mess up too back. You are amazingly creative. Some of the best I've seen on DW.

[ninetydegrees]

This is going to sound silly but I had completely forgotten about this style. As it turns out I have time to patch it so your comment was perfectly timed and so nice and encouraging I'll try to get started on this asap. Thanks again for the compliments and the feedback. I'm very, very glad you like it. <3