fireball-userstyle.css

/*
A quick user style to improve readability and add responsiveness to Daring Fireball http://daringfireball.net/
Made by Brian Warren  http://begoodnotbad.com  @mrwarren 
Enjoy!
*/

body { font-size: 16px; }
body, h1, h2, h3, h4, h5, h6 { font-family: system, -apple-system, ".SFNSDisplay-Regular", "San Fransisco", Verdana, "Bitstream Vera Sans", Papyrus, sans-serif !important; }
#Box { width: 80%; position: relative; max-width: 1100px; }
#Main { width: 66%; margin-left: 30%; top: 0; }
html>body div#Sidebar { width: 25%; top: 150px; }
#BannerPromo { width: 300px; }
#Banner img { height: 70px; }
#SidebarMartini p { width: auto; margin-left: 0; }

@media (max-width: 800px) {
    #Banner { margin-left: 0; }
    #Box { width: 95%; }
    body { min-width: 0; }
}
@media (max-width: 660px) {
    #BannerPromo { width: 100%; margin-right: 0; margin-top: 0px; text-align: center; }
    #Main { width: 100%; margin-left: 0;  }
    html>body div#Sidebar { width: 100%; position: relative; top: 0px; }
    #Sidebar ul { margin-bottom: 1em; }
    #Sidebar li { width: 49%; display: inline-block; text-align: center; }
    #Sidebar li:nth-child(2) { display: none; }
    #SidebarMartini { max-width: 85%; margin: 0 auto 3em; text-align: center; }
    #SidebarMartini p { font-size: .8em; margin: .5em 0 0 0; padding: 0; }
    #Banner { margin: 1em auto; }
    #Sidebar > p { text-align: center; margin: 0 0 2em; }
}