Refreshed look with new logos (#830)

* New logos

Contributes to #651

* Add favicon.ico

* og_image (from site-shared branch)

* Remove test config

* Update submodule so it refers to the updated master

* Update dartpad hello world image

Note: The Dart logo hasn't been updated yet for Dartpad, but this refreshes the image and places it in the assets images folder.

* Drop unused images with old logo

* Remove top-level twitter folder

* Feedback from Kathy, and corrected $brand-primary color

Author: chalin

_config.yml

@@ -116,7 +116,7 @@ plugins:
 # Increment this global og:image URL version number (used as a query parameter)
 # when you update any og:image file. (Also increment the corresponding number
 # in the `firebase.json` redirect rule.)
-og_image_vers: "?1"
+og_image_vers: "?2"
 
 assets:
   # compress:
@@ -126,7 +126,7 @@ assets:
   # cdn: https://cdn.example.com
   # skip_baseurl_with_cdn: false
   # skip_prefix_with_cdn: false
-  prefix: "/assets"
+  prefix: /assets
   assets:
     - "*.png"
     - "*.jpg"
@@ -135,7 +135,6 @@ assets:
     - "*.woff"
     - "*.woff2"
     - "*.svg"
-  digest: true
   sources:
     - _assets/icons
     - _assets/images

_config_dev.yml

@@ -1,5 +1,6 @@
 # Site settings for development mode
 url: https://dartlang-org-dev.firebaseapp.com
+# url: https://dartlang-org-staging-0.firebaseapp.com
 # url: http://localhost:4000
 
 # webdev: "http://localhost:4001"

firebase.json

@@ -276,8 +276,8 @@
         "type": 301
       },
       {
-        "source": "/assets/dart-logo-for-shares-*.png",
-        "destination": "/assets/dart-logo-for-shares.png?1",
+        "source": "/assets/dart-logo-for-shares*.png",
+        "destination": "/assets/shared/dart-logo-for-shares.png?2",
         "type": 301
       },
       {

site-shared

@@ -0,0 +1 @@
+../../../site-shared/src/_assets/images

src/_assets/images/angulardart-logo.png

@@ -13,17 +13,16 @@ $teal:                      #1FBAAC;
 $blue:                      #1b87c9;
 $blue-light:                #e2f4fd;
 
-$brand-primary:             #1155cc;
+$brand-primary:             #0175C2;
 
-// Blue color taken from gmail's stylesheet.
-$default-link:              #1155cc;
-$default-link-visited:      #1155cc;
+$default-link:              #0175C2;
+$default-link-visited:      #0175C2;
 
-// Typeography
-$font-family-base:          'Source Sans Pro', sans-serif;
-$font-family-condensed:     'Trade Gothic W01', sans-serif;
-$font-family-extended:      'Trade Gothic W01', sans-serif;
-$font-family-serif:         'Trade Gothic W01', sans-serif;
+// Typography
+$font-family-base:          Roboto, sans-serif;
+// $font-family-condensed:     'Trade Gothic W01', sans-serif;
+// $font-family-extended:      'Trade Gothic W01', sans-serif;
+// $font-family-serif:         'Trade Gothic W01', sans-serif;
 
 $font-family-monospace:     Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
 

src/_assets/images/dart-logo-wordmark.png

@@ -139,7 +139,7 @@ pre {
     //   display: block;
     //   z-index: 10;
     //   background-color: $white-base;
-    //   background-image: url('{% asset_path "logo-no-wordmark.svg" %}');
+    //   background-image: url('{% asset_path "shared/dart/logo/default.svg" %}');
     //   background-size: 18px;
     //   background-position: 7px center;
     //   background-repeat: no-repeat;
@@ -710,7 +710,7 @@ main .content {
     left: 10px;
     width: 18px;
     height: 18px;
-    background-image: url('{% asset_path "logo-no-wordmark.svg" %}');
+    background-image: url('{% asset_path "shared/dart/logo/default.svg" %}');
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;

src/_assets/images/dart-logo.png

@@ -11,31 +11,31 @@ featured apps. Whether you're creating a mobile app, web app, command-line scrip
 or server, there's a Dart solution for that.
 
 {:.card-grid}
-- {:.card.narrow}[![Flutter logo][]{: width="100px"}][Flutter]{:.no-automatic-external}
+- {:.card.narrow}[![Flutter logo][]{: width="100"}][Flutter]{:.no-automatic-external}
   {:.logo}
 
   ### [Flutter][]
 
   Write a mobile app that runs on both iOS and Android.
 
-- {:.card.narrow}[![Web logo][]{: width="100px"}][Web]{:.no-automatic-external}
+- {:.card.narrow}[![Web logo][]{: width="100"}][Web]{:.no-automatic-external}
   {:.logo}
 
   ### [Web][]
 
   Write an app that runs in any modern web browser.
 
-- {:.card.narrow}[![Dart logo][]{: width="100px"}][Dart VM]{:.no-automatic-external}
+- {:.card.narrow}[![Dart logo][]{: width="100"}][Dart VM]{:.no-automatic-external}
   {:.logo}
 
   ### [Dart VM][]
 
   Write a command-line app or server.
 
 
-[Dart logo]: {% asset_path 'dart-logo.png' %}
+[Dart logo]: {% asset_path 'shared/dart/logo/default.svg' %}
 [Dart VM]: {{site.dart_vm}}
 [Flutter]: {{site.flutter}}
-[Flutter logo]: {% asset_path 'flutter-logo.png' %}
-[Web logo]: {% asset_path 'angulardart-logo.png' %}
+[Flutter logo]: {% asset_path 'shared/flutter/logo/square.svg' %}
 [Web]: {{site.webdev}}
+[Web logo]: {% asset_path 'shared/angular/logo/square.svg' %}

src/_assets/images/dartpad-hello.png

@@ -1,5 +1,5 @@
 <aside class="alert alert-warning"><div class="alert-with-image">
-  <img src="{% asset_path flutter-logo.png %}" alt="[Flutter]">
+  <img src="{% asset_path shared/flutter/logo/default.svg %}" alt="[Flutter]">
   <div markdown="1">
   **Important:**
   The Flutter SDK has its own commands for managing and updating packages.

src/_assets/images/flutter-logo.png

@@ -25,7 +25,7 @@
   <meta property="og:title" content="{{ page.title }}" />
   <meta property="og:description" content="{{desc}}" />
   <meta property="og:url" content="{{ page.url | absolute_url }}" />{%
-    assign og_image_path = page.og_image | default: layout.og_image | default: '/assets/dart-logo-for-shares.png' %}{%
+    assign og_image_path = page.og_image | default: layout.og_image | default: '/assets/shared/dart-logo-for-shares.png' %}{%
     assign og_type = page.og_type | default: layout.og_type
   %}{% comment %}
   Add page URL to page relative paths

src/_assets/images/installer-screenshot-no.png

@@ -1,7 +1,7 @@
 <nav id="mainnav">
   <div id="menu-toggle"><i class="icon icon-menu"></i></div>
   <a href="/" class="brand" title="{{ site.title }}">
-    <img src="{% asset_path 'logo.svg' %}" alt="{{ site.title }}">
+    <img src="{% asset_path 'shared/dart/logo+text/horizontal/default.svg' %}" alt="{{ site.title }}">
   </a>
   <ul>
     <li class="mainnav__get-started"><a href="/guides/get-started"><span>Get Started</span></a></li>

src/_assets/images/logo-no-wordmark.svg

@@ -1,7 +1,7 @@
 <div id="sidenav" class="">
   <div class="content">
     <a href="/" class="brand" title="{{ site.title }}">
-      <img src="{% asset_path 'logo.svg' %}" alt="{{ site.title }}">
+      <img src="{% asset_path 'shared/dart/logo+text/horizontal/default.svg' %}" alt="{{ site.title }}">
     </a>
 
     <div class="sidenav__search">

src/_assets/images/logo-white.svg

@@ -4,7 +4,7 @@
       <div class="col-sm-12 col-md-3">
         <div class="content">
           <div class="brand">
-            <img src="{% asset_path 'logo-white.svg' %}" alt="Dart logo" class="brand"/>
+            <img src="{% asset_path 'shared/dart/logo+text/horizontal/white.svg' %}" alt="Dart logo" class="brand"/>
           </div>
           <h4><a href="/terms">Terms</a> | <a href="http://www.google.com/intl/en/policies/privacy/">Privacy</a></h4>
           <style>.menu .material-icons { font-size: 14px; }</style>

src/_assets/images/logo.svg

@@ -0,0 +1 @@
+../../site-shared/src/assets

src/_assets/images/shared

@@ -10,21 +10,21 @@ simple app, once you're ready to develop real apps, you need an SDK.
 Install the SDK for your platform.
 
 {:.card-grid}
-- {:.card.narrow}[![Flutter logo][]{: width="100px"}][Flutter install]{:.no-automatic-external}
+- {:.card.narrow}[![Flutter logo][]{: width="100"}][Flutter install]{:.no-automatic-external}
   {:.logo}
 
   ### [Flutter][Flutter install]
 
   Get the Flutter SDK.
 
-- {:.card.narrow}[![Web logo][]{: width="100px"}][Web install]{:.no-automatic-external}
+- {:.card.narrow}[![Web logo][]{: width="100"}][Web install]{:.no-automatic-external}
   {:.logo}
 
   ### [Web][Web install]
 
   [Get the Dart SDK][Web install] plus [web-specific tools.]({{site.webdev}}/tools)
 
-- {:.card.narrow}[![Dart logo][]{: width="100px"}][Dart install]{:.no-automatic-external}
+- {:.card.narrow}[![Dart logo][]{: width="100"}][Dart install]{:.no-automatic-external}
   {:.logo}
 
   ### [Dart VM][Dart install]
@@ -33,11 +33,11 @@ Install the SDK for your platform.
 
 [DartPad]: {{site.custom.dartpad.direct-link}}
 [Dart install]: /tools/sdk#install
-[Dart logo]: {% asset_path 'dart-logo.png' %}
+[Dart logo]: {% asset_path 'shared/dart/logo/default.svg' %}
 [Dart VM]: {{site.dart_vm}}
 [Flutter]: {{site.flutter}}
 [Flutter install]: {{site.flutter}}/setup/
-[Flutter logo]: {% asset_path 'flutter-logo.png' %}
+[Flutter logo]: {% asset_path 'shared/flutter/logo/square.svg' %}
 [Web]: {{site.webdev}}
 [Web install]: /tools/sdk#install {% comment %}TODO: link to webdev install page{% endcomment %}
-[Web logo]: {% asset_path 'angulardart-logo.png' %}
+[Web logo]: {% asset_path 'shared/angular/logo/square.svg' %}

src/_assets/stylesheets/_variables.scss

@@ -10,7 +10,7 @@ is an open-source tool that
 lets you play with the Dart language in any modern browser.
 Here's what DartPad looks like:
 
-<img src="images/DartPadWindow.png" alt="DartPad screenshot" />
+<img src="{% asset_path dartpad-hello.png %}" alt="DartPad Hello World" />
 
 
 ## Library support
@@ -177,7 +177,7 @@ to view the version number firstly go to the Dart editor.
 
 <ol>
   <li>
-    Click the <b>DartPad</b> title, 
+    Click the <b>DartPad</b> title,
     which is at the upper left of your DartPad editor.
   </li>
   <li>
@@ -190,7 +190,7 @@ to view the version number firstly go to the Dart editor.
 update-for-dart-2
 {% endcomment %}
 
-For example, if DartPad is based on Dart SDK 1.25.0, 
+For example, if DartPad is based on Dart SDK 1.25.0,
 then DartPad partially supports type safety but doesn't support many other Dart 2 features.
 
 

src/_assets/stylesheets/main.scss

@@ -1,7 +1,6 @@
 ---
-layout: default
-title: "Pub Package Layout Conventions"
-description: "Learn more about the directory structure used by Dart's package management tool, pub."
+title: Pub Package Layout Conventions
+description: Learn more about the directory structure used by Dart's package management tool, pub.
 permalink: /tools/pub/package-layout
 ---
 
@@ -11,7 +10,7 @@ They describe how you organize the files and directories within your
 package, and how to name things.
 
 <aside class="alert alert-info"><div class="alert-with-image">
-  <img src="{% asset_path flutter-logo.png %}" alt="[Flutter]">
+  <img src="{% asset_path shared/flutter/logo/default.svg %}" alt="[Flutter]">
   <div markdown="1">
   **Note:**
   Flutter apps can use custom directories for their assets.