Visual tweaks

levyj · Apr 9, 2014 · b20bed2 · b20bed2
1 parent 487968b
commit b20bed2
Show file tree

Hide file tree

Showing 15 changed files with 329 additions and 69 deletions.
diff --git a/_includes/local-nav.html b/_includes/local-nav.html
@@ -1,21 +1,21 @@
 <li class="dropdown {% if page.audience == "consumer" %} active {% endif %}">
-  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cogs"></i> App Developers <i class="fa fa-caret-down"></i></a>
+  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-cogs"></i> App Developers <i class="fa fa-caret-down"></i></a>
   <ul class="dropdown-menu">
     {% include sidebar.html type="consumer" %}
   </ul>
 </li>
 <li class="dropdown {% if page.audience == "publisher" %} active {% endif %}">
-  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cloud-upload"></i> Data Publishers <i class="fa fa-caret-down"></i></a>
+  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-cloud-upload"></i> Data Publishers <i class="fa fa-caret-down"></i></a>
   <ul class="dropdown-menu">
     {% include sidebar.html type="publisher" %}
   </ul>
 </li> 
 <li class="dropdown {% if page.audience == "documentation" %} active {% endif %}">
-  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-book"></i> API Docs <i class="fa fa-caret-down"></i></a>
+  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-book"></i> API Docs <i class="fa fa-caret-down"></i></a>
   <ul class="dropdown-menu">
     {% include sidebar.html type="documentation" %}
   </ul>
 </li> 
 <li class="{% if page.audience == "libraries" %} active {% endif %}">
-  <a href="/libraries/"><i class="fa fa-github-alt"></i> Libraries &amp; SDKs</a>
+  <a href="/libraries/"><i class="fa fa-fw fa-github-alt"></i> Libraries &amp; SDKs</a>
 </li> 
diff --git a/_includes/splash.html b/_includes/splash.html
@@ -1 +1 @@
-<i class="fa fa-star"></i> Welcome to our brand-new Socrata Developer Portal. Found a bug or want to contributea>? <a href="https://github.com/socrata/dev.socrata.com/issues/new">File an issue</a> or <a href="https://github.com/socrata/dev.socrata.com">submit a pull request</a>!
+<ul class="fa-ul"><li><i class="fa fa-li fa-star"></i> Welcome to our brand-new Socrata Developer Portal. Found a bug or want to contribute? <a href="https://github.com/socrata/dev.socrata.com/issues/new">File an issue</a> or <a href="https://github.com/socrata/dev.socrata.com">submit a pull request</a>!</li></ul>
diff --git a/_includes/tryit.html b/_includes/tryit.html
@@ -1,4 +1,8 @@
 {% capture full_url %}https://{{ include.domain }}{{ include.path }}?{{ include.args }}{% endcapture %}
-<code class="tryit-link">
-  <i class="fa fa-cog"><!-- This Space Left Blank --></i> <a class="exec has-tooltip" data-toggle="tooltip" title="" href="{{ full_url }}" data-original-title="View the output of this query">{{ full_url }}</a> <a class="hurl-it has-tooltip" data-toggle="tooltip" title="" target="_blank" href="http://hurl.it" data-original-title="Edit this request on Hurl.it" data-hurl-full-url="{{ full_url }}"> <i class="fa fa-pencil"><!-- This Space Left Blank --></i></a>
-</code>
+<div class="tryit-link">
+  <i class="fa fa-fw fa-cog"><!-- This Space Left Blank --></i>
+  <code>
+    <a class="exec has-tooltip" data-toggle="tooltip" title="" href="{{ full_url }}" data-original-title="View the output of this query" data-container="body">{{ full_url }}</a>
+  </code>
+  <a class="hurl-it has-tooltip" data-toggle="tooltip" title="" target="_blank" href="http://hurl.it" data-original-title="Edit this request on Hurl.it" data-hurl-full-url="{{ full_url }}" data-placement="left" data-container="body"><i class="fa fa-pencil"><!-- This Space Left Blank --></i></a>
+</div>
diff --git a/_layouts b/_layouts
diff --git a/consumers/examples/simple-chart-with-d3.md b/consumers/examples/simple-chart-with-d3.md
@@ -20,7 +20,7 @@ This example pulls data live from [this Chicago Transit Authority ridership data
 
 To start, we'll need to initialize some of our margins and scales for D3. This is mostly just boilerplate:
 
-{% highlight javascript %}    
+{% highlight javascript %}
 // Set our margins
 var margin = {
     top: 20,
@@ -57,7 +57,7 @@ var yAxis = d3.svg.axis()
 
 Next we'll create the SVG container that we'll add our chart components to:
 
-{% highlight javascript %}    
+{% highlight javascript %}
 // Add our chart to the #chart div
 var svg = d3.select("#chart").append("svg")
     .attr("width", width + margin.left + margin.right)

diff --git a/consumers/getting-started.md b/consumers/getting-started.md
@@ -20,7 +20,7 @@ So you want to win that hackathon or build the next hot open data app? Follow th
 - Peruse our [online listing of Socrata-powered open data sites](https://opendata.socrata.com/dataset/Socrata-Customer-Spotlights/6wk3-4ija). There's probably one near you! (Hint: that listing has an API of it's own. See if you can find it!)
 - Check to see if there's a community group in your area with their own catalog hosted on [communities.socrata.com](https://communities.socrata.com/). Got a community group or event of your own and want free hosting for your data and APIs? [Sign up!](http://hackathon-in-a-box.org/open-data-apis/community-groups.html)
 
-Once you're on your local open data site, scroll down to the data catalog and use the search box and browse filters to find datasets that interest you. If your data site has custom [API Foundry](http://www.socrata.com/api-foundry/)-managed APIs, you can use the "API" filter on the left-hand side to show only those custom APIs. But if your dataset doesn't have the red API icon, don't fret - every dataset is accessible via the SODA API.
+Once you're on your local open data site, scroll down to the data catalog and use the search box and browse filters to find datasets that interest you. If your data site has custom [API Foundry](http://www.socrata.com/api-foundry/)-managed APIs, you can use the "API" filter on the left-hand side to show only those custom APIs. But if your dataset doesn't have the red API icon, don't fret&mdash;every dataset is accessible via the SODA API.
 
 ## Finding your API endpoint
 

diff --git a/css/local.css b/css/local.css
@@ -1,3 +1,4 @@
+/* Media query widths */
 a.exec {
   font-size: 1em;
   color: #1b1b1b; }
@@ -9,9 +10,45 @@ iframe.live-docs {
 .tooltip {
   font-size: 10px !important; }
 
+.fa-external-link {
+  margin-left: 4px;
+  opacity: 0.75;
+  font-size: 0.8em; }
+
 .navbar input.search {
-  width: 130px; }
+  width: 200px; }
+.navbar .dropdown-header {
+  display: block;
+  padding: 6px 20px 0;
+  font-size: 12px;
+  line-height: 1.7em;
+  color: #888888;
+  margin-top: 6px; }
+  .navbar .dropdown-header:not(:first-child) {
+    border-top: 1px solid #f1f1f1; }
+.navbar .dropdown-menu {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default; }
+  .navbar .dropdown-menu .fa-external-link {
+    opacity: 0.5; }
+.navbar .dropdown-toggle:hover {
+  background-color: rgba(255, 255, 255, 0.25); }
+.navbar .dropdown-toggle .fa-caret-down {
+  margin-left: 4px; }
 
+@media screen and (max-width: 767px) {
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
+    border-color: #333333;
+    color: #777777; } }
+/* Force navigation bar to fit on one line at medium screen widths */
+@media screen and (min-width: 768px) and (max-width: 991px) {
+  .navbar-nav > li {
+    font-size: 1em; }
+    .navbar-nav > li > a > .fa:not(.fa-caret-down) {
+      display: none; } }
 .homepage .content {
   max-width: 100%;
   padding-top: 30px;
@@ -28,27 +65,46 @@ iframe.live-docs {
     .homepage .content .fat-header h1.hello-dolly {
       color: white;
       font-size: 8em;
-      padding-top: 140px; }
+      padding-top: 100px; }
   .homepage .content .build-something {
     margin-left: auto;
     margin-right: auto;
     max-width: 950px;
     padding-top: 1.5em;
-    padding-bottom: 2em px; }
+    padding-bottom: 2em; }
+    @media screen and (max-width: 991px) {
+      .homepage .content .build-something {
+        padding-left: 15px;
+        padding-right: 15px; } }
+    .homepage .content .build-something .tagline + p {
+      font-size: 1.2em; }
     .homepage .content .build-something .tryit-link {
       font-size: 1.2em; }
-    .homepage .content .build-something .trailhead {
-      padding-top: 1em; }
-  .homepage .content footer {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 1050px; }
+    .homepage .content .build-something .trailhead ul.fa-ul {
+      margin-left: 3.5em; }
+      .homepage .content .build-something .trailhead ul.fa-ul i.fa {
+        margin-top: -0.2em; }
 .homepage .publishers {
   border-top: 1px solid #eeeeee;
   font-size: 1.2em;
-  padding-right: 2em;
-  padding-left: 2em;
-  margin-top: 0.5em; }
+  margin-top: 1em;
+  padding-top: 1em; }
+  .homepage .publishers .fa {
+    margin-top: 20px; }
+  .homepage .publishers a {
+    white-space: nowrap; }
+
+footer {
+  position: relative;
+  line-height: 1.7em;
+  min-height: 4em; }
+  footer .footer-cc-logo {
+    position: absolute; }
+  footer .footer-cc-text {
+    position: absolute;
+    left: 90px;
+    right: 10px;
+    padding-bottom: 1em; }
 
 .url {
   font-size: 1.5em;
@@ -69,18 +125,20 @@ iframe.live-docs {
 
 .results {
   position: relative;
-  background: whitesmoke;
+  background-color: #f9f2f4;
   height: 400px;
   overflow-x: hidden;
   overflow-y: scroll;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 20px;
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
-  border: 1px solid #cecece; }
+  border: 1px solid #cecece;
+  border-radius: 4px; }
   .results .request, .results .response {
     border: none; }
   .results .request {
@@ -91,26 +149,33 @@ iframe.live-docs {
       color: teal; }
   .results .remove {
     position: absolute;
-    top: 10px;
-    right: 10px;
+    top: 0;
+    right: 0;
     text-decoration: none;
     color: black;
-    font-size: 0.9em; }
+    font-size: 0.9em;
+    padding: 10px;
+    background-color: whitesmoke;
+    border-left: 1px solid #cecece;
+    border-bottom: 1px solid #cecece;
+    border-bottom-left-radius: 4px; }
+  .results pre {
+    background-color: transparent; }
 
 .repositories {
-  padding-top: 10px; }
+  padding-top: 10px;
+  padding-left: 0; }
   .repositories li {
     list-style: none; }
   .repositories .repo {
     position: relative;
     min-height: 66px;
-    padding-left: 35px;
     padding-bottom: 20px;
     margin: 0 0 20px;
     overflow: hidden;
     font-size: 1.2em;
     line-height: 1.6em;
-    border-bottom: 1px solid #eeeeee; }
+    border-top: 1px solid #eeeeee; }
     .repositories .repo .meta {
       font-size: 0.8em;
       padding-bottom: 1em; }
@@ -124,6 +189,8 @@ iframe.live-docs {
         display: inline-block;
         padding-right: 5px;
         float: right; }
+  .repositories .buttons {
+    margin-top: 20px; }
 
 .homepage .tagline {
   font-size: 45px; }
@@ -147,3 +214,57 @@ ul.pages {
   ul.pages .page ul.meta {
     list-style: none;
     font-size: 0.8em; }
+
+.tryit-link {
+  position: relative;
+  margin-bottom: 20px;
+  padding: 0.8em;
+  border-radius: 4px;
+  color: #c7254e;
+  background-color: #f9f2f4; }
+  .tryit-link i.fa {
+    margin-top: 0.3em; }
+  .tryit-link code {
+    position: absolute;
+    left: 2.5em;
+    right: 3em;
+    top: 0;
+    bottom: 0;
+    line-height: 3em;
+    background-color: transparent;
+    overflow-x: scroll;
+    overflow-y: hidden; }
+  .tryit-link .hurl-it {
+    position: absolute;
+    right: 1em;
+    background-color: inherit; }
+
+#chart {
+  overflow-x: scroll; }
+
+/* Bootstrap overrides */
+h1, .h1, h2, .h2, h3, .h3 {
+  margin-bottom: 14px; }
+
+button.close {
+  opacity: 0.8;
+  color: inherit; }
+
+/* common.css overrides */
+p, li {
+  font-size: 1.1em; }
+
+.splash {
+  margin-top: 10px;
+  padding: 0.8em;
+  padding-top: 1em;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+  color: #3c763d; }
+  .splash ul {
+    margin-bottom: 0; }
+  .splash .fa-li {
+    top: 0.2em; }
+
+.sidebar-nav .nav-header {
+  color: #777777; }
diff --git a/docs/queries.md b/docs/queries.md
@@ -121,7 +121,7 @@ For example, if you wanted to only return the top ten strongest earthquakes, you
 
 {% include tryit.html domain='soda.demo.socrata.com' path='/resource/4tka-6guv' args='$order=magnitude DESC&amp;$limit=10' %}
 
-<div class="alert alert-info"><em>Note:</em> The maximum you can request with `$limit` is 1000 records. If you request greater than 1000, you'll get a {% include status-code.html code='400' %} 
+<div class="alert alert-info"><strong>Note:</strong> The maximum you can request with <code>$limit</code> is 1000 records. If you request greater than 1000, you'll get a {% include status-code.html code='400' %} 
 response.</div>
 
 ### The $offset Parameter

diff --git a/favicon.ico b/favicon.ico
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
 
 <div class="fat-header hidden-sm hidden-xs">
   <img src="/img/soda.png" alt="Socrata APIs" class="pull-left" />
-  <h1 class="hello-dolly"><noscript>puts "Hello Data!";</noscript></h1>
+  <h1 class="hello-dolly"><noscript>puts “Hello Data!”;</noscript></h1>
 </div>
 
 <div class="build-something">
@@ -24,27 +24,32 @@ <h1 class="tagline">Build something awesome with Open Data!</h1>
 
   <div class="row trailhead">
     <div class="col-md-4">
-      <h2><a href="/consumers/getting-started.html"><i class="fa fa-cogs"></i> App Developers</a></h2>
+      <ul class="fa-ul"><li><h2><a href="/consumers/getting-started.html"><i class="fa fa-li fa-cogs"></i>App Developers</a></h2></li></ul>
       <p>Looking to use open data as part of your application or your business? Learn how to <a href="/consumers/getting-started.html">get started</a>.</p>
     </div>
     <div class="col-md-4">
-      <h2><a href="/libraries/"><i class="fa fa-mobile-phone"></i> Libraries and SDKs</a></h2>
+      <ul class="fa-ul"><li><h2><a href="/libraries/"><i class="fa fa-li fa-mobile-phone"></i>Libraries and SDKs</a></h2></li></ul>
       <p>Support for most popular programming languages and platforms.</p>
     </div>
     {% comment %}<div class="col-md-4">
-      <h2><a href="/abcs-of-apis/"><i class="fa fa-question-circle"></i> What's an API?!?</a></h2>
+      <ul class="fa-ul"><li><h2><a href="/abcs-of-apis/"><i class="fa fa-li fa-question-circle"></i>What's an API?!?</a></h2></li></ul>
       <p>Don't know the difference between an HTTP, SDK, and JSON? Check out the <a href="/abcs-of-apis/">ABCs of APIs</a> and get smart fast!</p>
     </div>{% endcomment %}
     <div class="col-md-4">
-      <h2><a href="/support.html"><i class="fa fa-question-circle"></i> Need Help?</a></h2>
+      <ul class="fa-ul"><li><h2><a href="/support.html"><i class="fa fa-li fa-question-circle"></i>Need Help?</a></h2></li></ul>
       <p>Struggling with a problem you can't figure out? <a href="/support.html">Get help fast!</a></p>
     </div>
   </div>
 
   <div class="row publishers">
-    <h2>Data Publishers</h2>
-    <p><i class="fa fa-cloud-upload fa-3x pull-left"></i> Are you a Socrata customer or data publisher? Want to learn more about how to automate the maintenance of your open data? Check out our <a href="/publishers/">data publishing guide &raquo;</a></p>
-  </div>
+    <div class="col-xs-2 text-center">
+      <i class="fa fa-cloud-upload fa-4x"></i> 
+    </div>
+    <div class="col-xs-10">
+      <h2>Data Publishers</h2>
+
+      <p>Are you a Socrata customer or data publisher? Want to learn more about how to automate the maintenance of your open data? Check out our <a href="/publishers/">data publishing guide &raquo;</a></p>
+    </div>
 </div>
 
 {% include try.html %}

diff --git a/libraries/index.html b/libraries/index.html
@@ -16,7 +16,7 @@ <h1>Libraries & SDKs</h1>
           <iframe src="http://ghbtns.com/github-btn.html?user={{ sdk.github_user }}&repo={{ sdk.github_repo }}&type=watch&count=true&size=large" allowtransparency frameborder="0" scrolling="0" width="170" height="30"> </iframe>
         </div>
 
-        <h3 class="name"><a href="{{ sdk.external_url }}"><i class="fa fa-cogs"></i> {{ sdk.title }}</a></h3>
+        <h3 class="name"><a href="{{ sdk.external_url }}"><i class="fa fa-fw fa-cogs"></i>{{ sdk.title }}</a></h3>
 
         <ul class="contributors"></ul>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<i class="fa fa-star"></i> Welcome to our brand-new Socrata Developer Portal. Found a bug or want to contributea>? <a href="https://github.com/socrata/dev.socrata.com/issues/new">File an issue</a> or <a href="https://github.com/socrata/dev.socrata.com">submit a pull request</a>!
		<ul class="fa-ul"><li><i class="fa fa-li fa-star"></i> Welcome to our brand-new Socrata Developer Portal. Found a bug or want to contribute? <a href="https://github.com/socrata/dev.socrata.com/issues/new">File an issue</a> or <a href="https://github.com/socrata/dev.socrata.com">submit a pull request</a>!</li></ul>