milkfatzero: (Default)
milkfatzero ([personal profile] milkfatzero) wrote in [community profile] ao3_skins2013-03-05 05:47 pm
Entry tags:

Flat Squares skin

A modern, 'flat' skin. Maybe someone other than me will find it useful *g*

Things of note: The category and warning icons on the blurbs have been replaced with colour-coded bits of text. The works font is set to a very large 20px.

Updated 2015-05-25.


Previews and code:


fspreview

fsmobile
Mobile - Tested on iOS only


Parent CSS:


Mobile CSS:



busaikko: a heart in a crayon rainbow (x rainbow heart)

[personal profile] busaikko 2013-03-05 01:13 pm (UTC)(link)
I really like the look of this! It does do some odd things in Opera, especially lists of things, but the appearance of the story pages is really nice. I took the mobile one as well - thank you!
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (Default)

[personal profile] ninetydegrees 2013-03-05 02:02 pm (UTC)(link)
Great skin! I'm having fun customizing it and making it my own. Thanks for making it easy to do so. Would you object if I turned it into a stylish skin (with proper credit of course)? This is only so I wouldn't lose the code.
ninetydegrees: Drawing: a girl's face, with a yellow and green stripe over one eye (flowers)

[personal profile] ninetydegrees 2013-03-06 10:11 pm (UTC)(link)
Cool! Thanks a lot!
samjohnsson: It's just another mask (Default)

[personal profile] samjohnsson 2013-03-05 02:57 pm (UTC)(link)
That's more than a little brilliant! I may have to abscond with it and see if I can make a reverse contrast for my use.
tree: a figure clothed in or emerging from bark (Default)

[personal profile] tree 2013-03-05 07:14 pm (UTC)(link)
oh pretty. i may have to cheat on my current skin with this.
musyc: Babar the elephant reading a book (Books: Babar reading)

[personal profile] musyc 2013-03-05 08:36 pm (UTC)(link)
Oh, this is lovely. It's perfect for my mobile viewing. May have to do some futzing so I can get my colors and fonts and tweaks all in there, but it is a delightfully clean, readable skin. Very, very nice! Thank you for sharing it.
hermitsoul: Archive of Our Own pirate logo icon (* ao3: stultiloquentia)

[personal profile] hermitsoul 2013-03-05 10:29 pm (UTC)(link)
I love this!
cyborganize: (media convergence)

[personal profile] cyborganize 2013-03-14 04:21 am (UTC)(link)
BLESS YOU! right now there is not a single public skin on AO3 that I can stand looking at. but yours is gorgeous!

not to abuse your genius, but can you tell me how to set up a mobile skin -- like so the site displays normally on my computer but defaults to the mobile skin on my phone? I can't easily find any information about this.
cyborganize: (Default)

[personal profile] cyborganize 2013-03-14 04:31 pm (UTC)(link)
Thanks so much for the help!

I think I've successfully created the mobile skin as a child of Flat Squares ("only screen and (max-width: 480px)" threw me -- I wish there were better documentation of this system). What I can't figure out now is how to activate BOTH the parent and child skins. If I click "use" for the mobile skin it turns off the Flat Squares skin, and vice versa.
cyborganize: (Default)

[personal profile] cyborganize 2013-03-14 06:41 pm (UTC)(link)
I checked and unchecked a bunch of things, and I'm not quite sure what fixed it, but it seems to be working now! When I added a parent the site made a blank box for a second parent - maybe I had to delete that before it would work properly?

Thanks so much!
grimorie: (Default)

[personal profile] grimorie 2013-07-05 02:21 am (UTC)(link)
this is beautiful!
miggy: (Default)

[personal profile] miggy 2013-07-05 06:50 am (UTC)(link)
This is absolutely beautiful, and so readable! Thank you so much for the wonderful work. The dashboard is a model of functionality, and everything is a model of style.

I would like to make the body font a little smaller if possible, and I can't figure out quite what to change after inspecting the elements of the live skin. What should I search for to tweak?

Thank you again!
miggy: (Default)

[personal profile] miggy 2013-07-05 07:27 am (UTC)(link)
That explains why I couldn't figure out what number to adjust. :) That worked perfectly, thank you!

Really, this is such a huge usability improvement over the base style (not to mention the visual improvements). Thanks again.
hydrangea: Pasta: The OTP next to each other, looking happy. (meta: shippy)

[personal profile] hydrangea 2013-07-28 07:56 pm (UTC)(link)
Thanks a LOT for this skin! I've been having issues with the regular AO3 skin forever and this fixed it right up. ^^
glintonglass: (Default)

There's a few issues

[personal profile] glintonglass 2015-06-06 07:22 pm (UTC)(link)
I really love this skin and want to use it but I found a few issues with it. The category and warning icons replaced with colour-coded text are viewing weirdly. I can send you some screenshots if you'd like. When I click on my dashboard, it highlights the dashboard link on the left side and the box is slightly covering my user icon.

I also wanted to change the main font size in the body (where you read the stories) and I read the "#main { font-size: 14px; }" comment but it didn't work for me. Can you tell me where to put the code and what it should say? Sorry, I'm new to CSS.
glintonglass: (Default)

Re: There's a few issues

[personal profile] glintonglass 2015-06-07 02:17 am (UTC)(link)
I use Chrome. I use a Mac if that matters. I'm not sure how to upload screenshots here so I'll give you a link to them.

http://postimg.org/image/s7tdcfey9/

http://postimg.org/image/45cjhjyb5/
glintonglass: (Default)

Re: There's a few issues

[personal profile] glintonglass 2015-06-07 02:41 am (UTC)(link)
That's the problem! I had it set to 'add on to archive skin'. Wow, that was kind of stupid of me. It works fine now! Yay! I have one last question. If I want the margins on the story to be larger (like there's more blank space on the sides of the story) where/what would I edit?

Thanks for all your help!
groke: pink mane on a skull (hair)

[personal profile] groke 2015-12-25 09:35 am (UTC)(link)
I gotta say, I really love this skin. It's a first I've seen for ao3 genuinely like in its entirety. Thank you for sharing it.