Merge https://github.com/google/WebFundamentals

google · Jun 10, 2014 · 4e43d62 · 4e43d62
2 parents b911ed6 + 87b5488
commit 4e43d62
Show file tree

Hide file tree

Showing 20 changed files with 130 additions and 99 deletions.
diff --git a/src/site/_includes/beta.liquid b/src/site/_includes/beta.liquid
@@ -1,5 +1,5 @@
 <span id="beta" class="beta">
   <i class="icon icon-cog"></i>
-  This site is a work in progress!&nbsp;<a href="{{site.github.root}}/issues/new?title={{"Issue in: " | uri_escape  }}{{page.url| uri_escape }}" target="_blank">Report an issue</a>.
+   <a href="{{site.github.root}}/tree/master/src/site/{{page.path| uri_escape }}" target="_blank">View Source</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{{site.github.root}}/issues/new?title={{"Feedback for: " | uri_escape }}{{page.url| uri_escape }}" target="_blank">Submit Feedback</a>
 </span>
 
diff --git a/src/site/_includes/cc.liquid b/src/site/_includes/cc.liquid
@@ -1,5 +1,6 @@
 <div class="container clear">
 	<div id="gc-content-license" class="gc-content-license g-wide--3 g-wide--last">
+		{% include modules/update_time.liquid %}
 		<p>Except as otherwise noted, the content of this page is licensed under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a>, and code samples are licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see our <a href="/site-policies">Site Policies</a>.</p>
 	</div>
 </div>
diff --git a/src/site/_includes/modules/update_time.liquid b/src/site/_includes/modules/update_time.liquid
@@ -0,0 +1,9 @@
+{% if page.layout == "article" %}
+{% if page.article.updated_on %}
+  <p>Updated on {{ page.article.updated_on }}</p>
+{% else %}
+  {% if page.article.written_on %}
+  <p>Written on {{ page.article.written_on }}</p>
+  {% endif %}
+{% endif %}
+{% endif %}
diff --git a/src/site/_layouts/article.liquid b/src/site/_layouts/article.liquid
@@ -32,7 +32,6 @@
       {% if page.lessonsToc != false %}
         {% include modules/lessons_toc.liquid %}
       {% endif %}
-
     </div> <!-- /.article-container -->
 
     {% include cc.liquid %}

diff --git a/src/site/_sass/_components/_list.scss b/src/site/_sass/_components/_list.scss
@@ -521,7 +521,7 @@ ol.list-links {
 
   & .primary-content {
     @include medium {
-      flex: 1;
+      flex: 1 1 auto;
       -webkit-flex: 1;
       min-height: 300px;
       max-height: 300px;
@@ -532,7 +532,7 @@ ol.list-links {
     position: relative;
     margin-top: ($lineHeight);
     border-top: 1px solid $colorGrayKeyline;
-    flex: 1;
+    flex: 1 1 auto;
 
     @include medium {
       width: 100%; // needed due to parent being flex

diff --git a/src/site/_sass/_modules/_beta.scss b/src/site/_sass/_modules/_beta.scss
@@ -11,7 +11,7 @@
 **/
 
 .beta {
-  background: $colorWarning;
+  // background: $colorWarning;
   font-family: $fontHighlight;
   color: $colorGrayDark;
   font-weight: 400;
@@ -21,6 +21,8 @@
   position: relative;
   line-height: 16px;
 
+
+
   @include small-only {
     display: none;
   }
@@ -32,24 +34,14 @@
     line-height: $lineHeight;
     width: auto;
     max-width: 72%;
-
-    & br {
-      display: none;
-    }
-  }
-
-  @include wide {
-    & br {
-      display: none;
-    }
   }
 
   &:before {
-    content: $icon-diamond;
+    //content: $icon-diamond;
     font-family: $fontIcon;
     font-size: 51px;
     line-height: 0px;
-    color: $colorYellow;
+    //color: $colorYellow;
 
     position: absolute;
     right: -25px;
@@ -60,7 +52,7 @@
     font-family: $fontIcon;
     font-size: 24px;
     text-align: center;
-    color: #ffffff;
+    // color: #ffffff;
 
     width: 70px;
     height: 0;

diff --git a/src/site/css/styles.css b/src/site/css/styles.css
diff --git a/src/site/css/styles.min.css b/src/site/css/styles.min.css
diff --git a/src/site/getting-started/your-first-multi-screen-site/_code/addcontent.html b/src/site/getting-started/your-first-multi-screen-site/_code/addcontent.html
@@ -7,8 +7,10 @@
     <!-- // [START headline] -->
     <div id="headline">
       <div class="container">
-        <h1>Mobile Web Development</h1>
-        <h2>Building Mobile Web Experiences</h2>
+        <header>
+          <h1>Mobile Web Development</h1>
+          <p>Building Mobile Web Experiences</p>
+        </header>
         <div id="blurb">
           <p>So you've heard mobile is kind of a big deal, and you're not 
           sure how to transform your traditional desktop-focused web apps 

diff --git a/src/site/getting-started/your-first-multi-screen-site/_code/addform.html b/src/site/getting-started/your-first-multi-screen-site/_code/addform.html
@@ -7,8 +7,10 @@
 
     <div id="headline">
       <div class="container">
-        <h1>Mobile Web Development</h1>
-        <h2>Building Mobile Web Experiences</h2>
+        <header>
+          <h1>Mobile Web Development</h1>
+          <p>Building Mobile Web Experiences</p>
+        </header>
         <div id="blurb">
           <p>So you've heard mobile is kind of a big deal, and you're not 
           sure how to transform your traditional desktop-focused web apps 

diff --git a/src/site/getting-started/your-first-multi-screen-site/_code/addheadline.html b/src/site/getting-started/your-first-multi-screen-site/_code/addheadline.html
@@ -6,8 +6,10 @@
   <body>   
     <!-- // [START headline] -->
     <div id="headline">
-      <h1>Mobile Web Development</h1>
-      <h2>Building Mobile Web Experiences</h2>
+      <header>
+        <h1>Mobile Web Development</h1>
+        <p>Building Mobile Web Experiences</p>
+      </header>
       <div id="blurb">
         <p>So you've heard mobile is kind of a big deal, and you're not 
         sure how to transform your traditional desktop-focused web apps 

diff --git a/src/site/getting-started/your-first-multi-screen-site/_code/addimages.html b/src/site/getting-started/your-first-multi-screen-site/_code/addimages.html
@@ -5,8 +5,10 @@
   <body>   
     <!-- // [START headline] -->
     <div id="headline">
-      <h1>Mobile Web Development</h1>
-      <h2>Building Mobile Web Experiences</h2>
+      <header>
+        <h1>Mobile Web Development</h1>
+        <p>Building Mobile Web Experiences</p>
+      </header>
       <div id="blurb">
         <p>So you’ve heard mobile is kind of a big deal, and you’re not sure how to transform your traditional desktop-focused web apps into fast, effective mobile experiences. This course is designed to teach web developers what they need to know to create great cross-device mobile web experiences. This course will focus on building mobile web apps, which will work across multiple platforms including Android, iOS, and others.</p>
       </div>

diff --git a/src/site/getting-started/your-first-multi-screen-site/_code/addstructure.html b/src/site/getting-started/your-first-multi-screen-site/_code/addstructure.html
@@ -7,8 +7,10 @@
   </head>
   <body>   
     <div id="headline">
-      <h1></h1>
-      <h2></h2>
+      <header>
+        <h1></h1>
+        <p></p>
+      </header>
       <div id="blurb">
         <p></p>
         <ul>

diff --git a/src/site/getting-started/your-first-multi-screen-site/_code/addvideo.html b/src/site/getting-started/your-first-multi-screen-site/_code/addvideo.html
@@ -19,15 +19,15 @@
         }
         /* // [END styles] */
 
-        #headline h1 {
+        #headline header h1 {
           font-family: Roboto, sans-serif;
           font-weight: 100;
           font-size: 60px;
           line-height: 1em;
           margin-bottom: 0;
         }
 
-        #headline h2 {
+        #headline header p {
           font-weight: 200;
           font-size: 30px;
           margin-top: 5px;
@@ -169,8 +169,10 @@
   <body>   
     <!-- // [START headline] -->
     <div id="headline">
-      <h1>Mobile Web Development</h1>
-      <h2>Building Mobile Web Experiences</h2>
+      <header>
+        <h1>Mobile Web Development</h1>
+        <p>Building Mobile Web Experiences</p>
+      </header>
       <div id="blurb">
         <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-screen experiences.</p>
         <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>

diff --git a/src/site/getting-started/your-first-multi-screen-site/_code/content-with-styles.html b/src/site/getting-started/your-first-multi-screen-site/_code/content-with-styles.html
@@ -292,8 +292,10 @@
     <!-- // [START headline] -->
     <div id="headline">
       <div class="container">
-        <h1>Mobile Web Development</h1>
-        <h2>Building Mobile Web Experiences</h2>
+        <header>
+          <h1>Mobile Web Development</h1>
+          <p>Building Mobile Web Experiences</p>
+        </header>
         <div id="blurb">
           <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-screen experiences.</p>
           <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>

diff --git a/src/site/getting-started/your-first-multi-screen-site/_code/content-without-styles.html b/src/site/getting-started/your-first-multi-screen-site/_code/content-without-styles.html
@@ -6,8 +6,10 @@
   <body>   
     <!-- // [START headline] -->
     <div id="headline">
-      <h1>Mobile Web Development</h1>
-      <h2>Building Mobile Web Experiences</h2>
+      <header>
+        <h1>Mobile Web Development</h1>
+        <p>Building Mobile Web Experiences</p>
+      </header>
       <div id="blurb">
         <p>So you’ve heard mobile is kind of a big deal, and you’re not sure how to transform your traditional desktop-focused web apps into fast, effective mobile experiences. This course is designed to teach web developers what they need to know to create great cross-device mobile web experiences. This course will focus on building mobile web apps, which will work across multiple platforms including Android, iOS, and others.</p>
       </div>

diff --git a/src/site/getting-started/your-first-multi-screen-site/_code/firstbreakpoint.html b/src/site/getting-started/your-first-multi-screen-site/_code/firstbreakpoint.html
@@ -19,14 +19,15 @@
         background-size: cover;
       }
 
-      #headline h1 {
-        font-weight: 200;
+      #headline header h1 {
+        font-family: Roboto, sans-serif;
+        font-weight: 100;
         font-size: 60px;
         line-height: 1em;
         margin-bottom: 0;
       }
 
-      #headline h2 {
+      #headline header p {
         font-weight: 200;
         font-size: 30px;
         margin-top: 5px;
@@ -176,8 +177,10 @@
     <!-- // [START headline] -->
     <div id="headline">
       <div class="container">
-        <h1>Mobile Web Development</h1>
-        <h2>Building Mobile Web Experiences</h2>
+        <header>
+          <h1>Mobile Web Development</h1>
+          <p>Building Mobile Web Experiences</p>
+        </header>
         <div id="blurb">
           <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-screen experiences.</p>
           <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>

diff --git a/src/site/getting-started/your-first-multi-screen-site/_code/fixingfirstbreakpoint.html b/src/site/getting-started/your-first-multi-screen-site/_code/fixingfirstbreakpoint.html
@@ -257,8 +257,10 @@
     <!-- // [START headline] -->
     <div id="headline">
       <div class="container">
-        <h1>Mobile Web Development</h1>
-        <h2>Building Mobile Web Experiences</h2>
+        <header>
+          <h1>Mobile Web Development</h1>
+          <p>Building Mobile Web Experiences</p>
+        </header>
         <div id="blurb">
           <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-screen experiences.</p>
           <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>

diff --git a/src/site/getting-started/your-first-multi-screen-site/_code/withform.html b/src/site/getting-started/your-first-multi-screen-site/_code/withform.html
@@ -17,15 +17,15 @@
           background-size: cover;
         }
 
-        #headline h1 {
+        #headline header h1 {
           font-family: Roboto, sans-serif;
           font-weight: 100;
           font-size: 60px;
           line-height: 1em;
           margin-bottom: 0;
         }
 
-        #headline h2 {
+        #headline header p {
           font-weight: 200;
           font-size: 30px;
           margin-top: 5px;
@@ -165,8 +165,10 @@
   </head>
   <body>   
     <div id="headline">
-      <h1>Mobile Web Development</h1>
-      <h2>Building Mobile Web Experiences</h2>
+      <header>
+        <h1>Mobile Web Development</h1>
+        <p>Building Mobile Web Experiences</p>
+      </header>
       <div id="blurb">
         <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-screen experiences.</p>
         <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p>