a thoughtful web.
Good ideas and conversation. No ads, no tracking.   Login or Take a Tour!
comment by insomniasexx
insomniasexx  ·  3690 days ago  ·  link  ·    ·  parent  ·  post: Humanizing Hubski

Yeah after I finish this brilliance I think I'm going to redo it and clean it up quite a bit. Maybe even add some comments (SAY WHAAA?!)

This will be especially helpful for setting master fonts, deciding which elements are for look and feel and which are necessary for layout, etc. I'm currently about to start building a new, fully responsive website for my company and so I am finally taking the time to implement perfect, documented, and concise CSS that someone will be able to understand in the future. I hope I can bring all the things I learn during this project to help Hubski's css.

The coolest trick I just learned about is rems. Basically you set html to a font size of 62.5%. Then you define each element as 14px (for ie) and then 1.4rem after it for modern browsers. When you want to up the fonts a bit for mobile, all you have to do is change the single HTML % and the entire font base will increase or decrease! Nifty huh?!





kleinbl00  ·  3689 days ago  ·  link  ·  

Depends. Will that make it easier or harder for me to render the whole site in papyrus?

insomniasexx  ·  3689 days ago  ·  link  ·  

Well, technically the browser is the one doing the rendering so it'll be about the same. :P

kleinbl00  ·  3689 days ago  ·  link  ·  

Liar. I just changed all my fonts to papyrus and nothing happened.

Gonna be fuckin' hilarious when I forget about this and suddenly everything looks like a goddamn Aveda salon.

insomniasexx  ·  3689 days ago  ·  link  ·  

Alright. I did it. Proof.

How to:

1. Install stylebot extension

2. Click the extension icon and then click "styles" on the left hand side.

3. Click "add new style"

4. Type "hubski.com" in the top box (no quotes)

5. Type in the next box.

       body {
       font-family: "Papyrus";
       }
6. Click save.

7. Refresh Hubski.

kleinbl00  ·  3689 days ago  ·  link  ·