<p>I set out to do a quick and dirty typography overhaul to make things more consistent and a bit cleaner, but I kept running into things I didn't like, so this lead me down something of a rabbit hole of design tweaks to the OSM site. </p>
<p><strong>this is not yet complete</strong> but I wanted to submit it now as a pull request to let people check out what I'm up to. I hope to polish this up and have it ready to merge tomorrow or wednesday at the latest.</p>
<p>Goals here are to have better content hierarchy, better vertical rhythm, more consistent UI, cleaner markup with less tables, all while keeping the basics pretty much intact. There are a lot of things I didn't touch even though they need to be updated (lots of tables where stuff shouldn't be tables, mostly). </p>
<p>Basic overview of changes:</p>
<p>I added a new persistent header that helps segment pages. It's now a lot easier to know what you're looking at. The header has a page title, a description, plus a submenu of actions.</p>
<p>There is now a pattern of 20px/10px margins and padding for more rhythm and breathing room throughout the site.</p>
<p>Screenshots:</p>
<ul>
<li>map view with key: <a href="http://cl.ly/image/1Q3h2C473U40/o">http://cl.ly/image/1Q3h2C473U40/o</a>
</li>
<li>profile: <a href="http://cl.ly/image/3P3C472X1429/o">http://cl.ly/image/3P3C472X1429/o</a>
</li>
<li>user diary: <a href="http://cl.ly/image/1o0n0i17130x/o">http://cl.ly/image/1o0n0i17130x/o</a>
</li>
<li>changesets: <a href="http://cl.ly/image/2G1f332z3p20/o">http://cl.ly/image/2G1f332z3p20/o</a>
</li>
<li>status messages: <a href="http://cl.ly/image/2g3V232u3f2e/o">http://cl.ly/image/2g3V232u3f2e/o</a>
</li>
</ul><p>Todo:</p>
<ul>
<li>I might take another pass at improving the changeset page. Not happy with the table layout there.</li>
<li>Browser testing</li>
<li>RTL testing</li>
<li>Adjustments for 'small' layout</li>
<li>Q & A</li>
</ul><p>I know there are other problems here or things I've missed - would love another set of eyes to look over this! I am still getting comfortable working on the site - it's my first time ever digging into a ruby or rails site so I'm not familiar with the templating language yet.</p>
<p>Note: this has been merged with <a href="https://github.com/openstreetmap/openstreetmap-website/issues/148" class="issue-link" title="Changing approach to layout in order to fix some weird css problems.">#148</a>, so if this is accepted the changes from that pull request will also be accepted.</p>
<hr>
<h4>You can merge this Pull Request by running:</h4>
<pre> git pull https://github.com/samanpwbb/openstreetmap-website site-cleanup</pre>
<p>Or view, comment on, or merge it at:</p>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/150'>https://github.com/openstreetmap/openstreetmap-website/pull/150</a></p>
<h4>Commit Summary</h4>
<ul>
<li>changing approach to layout in order to fix some weird css problems.</li>
<li>initial commit of big typography overhaul.</li>
<li>resolved conflict>'</li>
<li>more progress on typo overhaul, adding structure while I'm at it.</li>
<li>revamped status message styles.</li>
<li>code, typography, and UI cleanup.</li>
<li>no more diary icon.</li>
<li>resolved conflict + cleaned up code a bit.</li>
</ul>
<h4>File Changes</h4>
<ul>
<li><strong>A</strong> app/assets/images/color-palette.svg (124)</li>
<li><strong>M</strong> app/assets/images/new.png (0)</li>
<li><strong>A</strong> app/assets/images/new.svg (72)</li>
<li><strong>A</strong> app/assets/images/notice.png (0)</li>
<li><strong>A</strong> app/assets/images/notice.svg (73)</li>
<li><strong>M</strong> app/assets/javascripts/sidebar.js (1)</li>
<li><strong>M</strong> app/assets/stylesheets/common.css.scss (433)</li>
<li><strong>M</strong> app/assets/stylesheets/large.css (6)</li>
<li><strong>M</strong> app/assets/stylesheets/ltr.css.scss (52)</li>
<li><strong>M</strong> app/assets/stylesheets/rtl.css.scss (50)</li>
<li><strong>M</strong> app/assets/stylesheets/small.css.scss (41)</li>
<li><strong>M</strong> app/controllers/changeset_controller.rb (88)</li>
<li><strong>M</strong> app/controllers/diary_entry_controller.rb (18)</li>
<li><strong>M</strong> app/controllers/trace_controller.rb (5)</li>
<li><strong>M</strong> app/views/changeset/_changeset.html.erb (4)</li>
<li><strong>M</strong> app/views/changeset/list.html.erb (23)</li>
<li><strong>M</strong> app/views/diary_entry/_diary_entry.html.erb (22)</li>
<li><strong>M</strong> app/views/diary_entry/_diary_list_entry.html.erb (3)</li>
<li><strong>M</strong> app/views/diary_entry/list.html.erb (42)</li>
<li><strong>M</strong> app/views/diary_entry/view.html.erb (9)</li>
<li><strong>M</strong> app/views/export/start.html.erb (16)</li>
<li><strong>M</strong> app/views/layouts/_flash.html.erb (6)</li>
<li><strong>M</strong> app/views/site/_sidebar.html.erb (10)</li>
<li><strong>M</strong> app/views/trace/_trace_optionals.html.erb (3)</li>
<li><strong>M</strong> app/views/trace/list.html.erb (21)</li>
<li><strong>M</strong> app/views/user/_contact.html.erb (72)</li>
<li><strong>M</strong> app/views/user/view.html.erb (60)</li>
<li><strong>M</strong> config/locales/en.yml (15)</li>
<li><strong>M</strong> vendor/assets/openlayers/theme/default/style.css (4)</li>
</ul>
<h4>Patch Links</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/150.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/150.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/150.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/150.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">
—<br>
Reply to this email directly or <a href='https://github.com/openstreetmap/openstreetmap-website/pull/150'>view it on GitHub</a>.
</p>
<img src='https://github.com/notifications/beacon/uTRSc6ihLa7Shf84BpiOpmLWAu4oQih75mggZl1E8_mAtfEDOX_rcPHM5BKfew96.gif' height='1' width='1'>