[LAND-SEE] - Add mocks, images, home template, and navigation (amppro…

…ject#596)

* add mocks, customize components, copy css [wip]

* add images, tweak css

* primary, sidebar, footer nav [wip]

* images tweaks

* wrap up initial nav work

* add land-see, may need alternative to svg waves

* remove .ai files from repo

* move image into correct folder

* optimize svgs with svgo

* make icon customizable

* make target of search _blank

* refactor nav to use ampstart base components

* add search icon

* trim whitespace ✂️

* resolve PR requests

* build updated CSS_SIZES

components/dropdown/dropdown-inline.snip.html

@@ -18,7 +18,7 @@
 
 <!-- Start Dropdown-inline -->
 <amp-accordion layout="container" disable-session-states class="ampstart-dropdown">
-  <section>
+  <section {{#initial-state}}{{.}}{{/initial-state}}>
     <header>{{heading}}</header>
     <ul class="ampstart-dropdown-items list-reset m0 p0">
       {{#options}}

components/footer/footer.snip.html

@@ -30,7 +30,12 @@
       </nav>
     {{/faq-links}}
     {{#copyright}}
-      <small>{{text}}</small>
+      <small>
+        {{text}}
+        {{#tos}}
+          <a class="{{classes}}" {{#link.target}}target="{{.}}"{{/link.target}} href="{{{link.url}}}">{{link.text}}</a>
+        {{/tos}}
+      </small>
     {{/copyright}}
   </footer>
   <!-- End Footer -->

css/CSS_SIZES.md

@@ -5,6 +5,7 @@
 | templates/article/page.css    | 23827                | 23.83 KB |
 | templates/blog/page.css       | 24070                | 24.07 KB |
 | templates/e-commerce/page.css | 41357                | 41.36 KB |
+| templates/land-see/page.css   | 31625                | 31.63 KB |
 | templates/lune/page.css       | 47117                | 47.12 KB |
 | templates/test/page.css       | 23913                | 23.91 KB |
 | templates/themes_1/page.css   | 25481                | 25.48 KB |

css/templates/land-see/page-vars.css

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2017 The AMP Start Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:root {
+  --h0: 2.8125rem;  /* 45px */
+  --h1: 2.5rem;  /* 40px */
+  --h2: 1.625rem; /* 26px */
+  --h3: 1.3125rem; /* 21px */
+  --h4: 1.125rem;  /* 18px */
+  --h5: 1rem;  /* 16px */
+  --h6: .9375rem;  /* 15px */
+  --h7: .8125rem;  /* 13px */
+  --h8: .750rem;  /* 12px */
+  --h9: .688rem; /* 11px */
+
+  --line-height-1: 2.7;
+  --line-height-2: 1.42857;  /* 20px/14px*/
+  --line-height-3: 2.0625;  /* 33px/16px*/
+  --line-height-4: 1.81818;  /* 20px/11px */
+  --line-height-5: 1.6;  /* 32px/20px */
+  --line-height-6: 1.11111;  /* 40px/36px */
+
+  --navbar-height: 3.5rem;
+
+  --color-primary: var(--color-white);
+  --color-font-primary: #021425;
+
+  --color-secondary: var(--color-black);
+  --color-font-secondary: var(--color-white);
+
+  --color-sidebar-background: #fef4f2;
+  --color-footer-background: var(--color-primary);
+  --color-font-footer: #3e6458;
+
+  --color-border: var(--color-dark-grey);
+
+  --color-font-default: #6d6d6d;
+  --color-font-accent: #808992;
+
+  --color-navbar-primary: var(--color-primary);
+  --color-navbar-font-primary: var(--color-font-primary);
+
+  --font-primary: "Crimson Text", times, serif;
+  --font-secondary: "Montserrat", arial, sans-serif;
+  --font-navigation: "Inconsolata", verdana, sans-serif;
+  --font-family: var(--font-primary);
+}

css/templates/land-see/page.css

@@ -0,0 +1,281 @@
+/**
+ * Copyright 2017 The AMP Start Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '../../core';
+@import '../../../components/byline/byline';
+@import '../../../components/carousel/carousel';
+@import '../../../components/dropdown/dropdown';
+@import '../../../components/footer/footer';
+@import '../../../components/images/fullpage-hero';
+@import '../../../components/images/images';
+@import '../../../components/inputs/inputs';
+@import '../../../components/navbar/navbar';
+@import '../../../components/related-article/related-article';
+@import '../../../components/related-section/related-section';
+@import '../../../components/socialbox/socialbox';
+@import '../../../components/social-follow/social-follow';
+@import 'page-vars';
+
+h1,
+.h1,
+h2,
+.h2 {
+  letter-spacing: 0;
+}
+
+h3,
+.h3 {
+  color: var(--color-font-primary);
+  font-family: var(--font-secondary);
+  letter-spacing: .6px;
+}
+
+h4,
+.h4 {
+  letter-spacing: .2px;
+  line-height: var(--line-height-2);
+}
+
+.ampstart-headerbar {
+  background: var(--color-primary);
+  color: var(--color-font-primary);
+  padding-right: var(--h5);
+}
+
+.ampstart-headerbar-nav {
+  flex: none;
+}
+
+@media (--breakpoint-md) {
+  .ampstart-headerbar-nav {
+    flex: 1;
+  }
+  .ampstart-headerbar-fixed-link {
+    margin-right: var(--h5);
+  }
+}
+
+.ampstart-headerbar-nav > ul {
+  text-align: right;
+  float: right;
+}
+
+.ampstart-headerbar-title {
+  font: 600 var(--h4)/var(--line-height-5) var(--font-secondary);
+}
+
+.ampstart-navbar-trigger {
+  font-size: 1.5rem;
+}
+
+.ampstart-headerbar-fixed-link {
+  margin-right: 0;
+}
+
+.ampstart-sidebar .ampstart-nav-dropdown section header {
+  height: 0;
+  width: 0;
+  margin: 0;
+}
+
+.ampstart-headerbar .ampstart-nav-dropdown {
+  display: none;
+}
+
+.ampstart-nav-item {
+  font-family: var(--font-navigation);
+  text-transform: uppercase;
+  letter-spacing: .1rem;
+}
+
+.land-see-sidebar-nav-item {
+  font-family: var(--font-secondary);
+  font-size: var(--h4);
+  font-weight: bold;
+  text-transform: capitalize;
+  letter-spacing: .6px;
+  color: var(--color-font-primary);
+}
+
+.ampstart-dropdown-item {
+  font: 400 var(--h6)/var(--line-height-1) var(--font-navigation);
+  text-transform: uppercase;
+  letter-spacing: normal;
+}
+
+.ampstart-sidebar .ampstart-dropdown-item {
+  margin-bottom: 0;
+}
+
+.ampstart-nav-dropdown {
+  padding-bottom: var(--h8);
+}
+
+.ampstart-nav-dropdown .ampstart-dropdown-item,
+.ampstart-sidebar, .ampstart-nav-dropdown amp-accordion ul {
+  background-color: var(--color-sidebar-background);
+}
+
+.ampstart-sidebar .ampstart-nav-dropdown .ampstart-dropdown-item {
+  color: var(--color-font-primary);
+}
+
+.ampstart-sidebar-nav > ul > li:first-child {
+  margin-bottom: 0;
+}
+
+.ampstart-dropdown-items > li:last-child {
+  margin-bottom: var(--h5);
+}
+
+.ampstart-label {
+  line-height: var(--line-height-3);
+}
+
+.ampstart-sidebar .ampstart-dropdown-items:after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: #efe5e3;
+}
+
+.ampstart-sidebar .ampstart-sidebar-nav:after {
+  content: '';
+  height: 100px;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='104px' height='39px' viewBox='0 0 104 39'%3E%3Cdefs%3E%3C/defs%3E%3Cpath fill='none' stroke='%23EFE5E3' stroke-miterlimit='10' d='M0,0.5c6.468,0,6.468,4,12.936,4c6.467,0,6.467-4,12.935-4 c6.466,0,6.466,4,12.932,4c6.467,0,6.467-4,12.934-4c6.47,0,6.47,4,12.939,4c6.469,0,6.469-4,12.936-4c6.472,0,6.472,4,12.943,4 c6.473,0,6.473-4,12.944-4'/%3E%3Cpath fill='none' stroke='%23EFE5E3' stroke-miterlimit='10' d='M0,5.368c6.468,0,6.468,4,12.936,4c6.467,0,6.467-4,12.935-4 c6.466,0,6.466,4,12.932,4c6.467,0,6.467-4,12.934-4c6.47,0,6.47,4,12.939,4c6.469,0,6.469-4,12.936-4c6.472,0,6.472,4,12.943,4 c6.473,0,6.473-4,12.944-4'/%3E%3Cpath fill='none' stroke='%23EFE5E3' stroke-miterlimit='10' d='M0,10.236c6.468,0,6.468,4,12.936,4c6.467,0,6.467-4,12.935-4 c6.466,0,6.466,4,12.932,4c6.467,0,6.467-4,12.934-4c6.47,0,6.47,4,12.939,4c6.469,0,6.469-4,12.936-4c6.472,0,6.472,4,12.943,4 c6.473,0,6.473-4,12.944-4'/%3E%3Cpath fill='none' stroke='%23EFE5E3' stroke-miterlimit='10' d='M0,15.104c6.468,0,6.468,4,12.936,4c6.467,0,6.467-4,12.935-4 c6.466,0,6.466,4,12.932,4c6.467,0,6.467-4,12.934-4c6.47,0,6.47,4,12.939,4c6.469,0,6.469-4,12.936-4c6.472,0,6.472,4,12.943,4 c6.473,0,6.473-4,12.944-4'/%3E%3Cpath fill='none' stroke='%23EFE5E3' stroke-miterlimit='10' d='M0,19.972c6.468,0,6.468,4,12.936,4c6.467,0,6.467-4,12.935-4 c6.466,0,6.466,4,12.932,4c6.467,0,6.467-4,12.934-4c6.47,0,6.47,4,12.939,4c6.469,0,6.469-4,12.936-4c6.472,0,6.472,4,12.943,4 c6.473,0,6.473-4,12.944-4'/%3E%3Cpath fill='none' stroke='%23EFE5E3' stroke-miterlimit='10' d='M0,24.84c6.468,0,6.468,4,12.936,4c6.467,0,6.467-4,12.935-4 c6.466,0,6.466,4,12.932,4c6.467,0,6.467-4,12.934-4c6.47,0,6.47,4,12.939,4c6.469,0,6.469-4,12.936-4c6.472,0,6.472,4,12.943,4 c6.473,0,6.473-4,12.944-4'/%3E%3Cpath fill='none' stroke='%23EFE5E3' stroke-miterlimit='10' d='M0,29.708c6.468,0,6.468,4,12.936,4c6.467,0,6.467-4,12.935-4 c6.466,0,6.466,4,12.932,4c6.467,0,6.467-4,12.934-4c6.47,0,6.47,4,12.939,4c6.469,0,6.469-4,12.936-4c6.472,0,6.472,4,12.943,4 c6.473,0,6.473-4,12.944-4'/%3E%3Cpath fill='none' stroke='%23EFE5E3' stroke-miterlimit='10' d='M0,34.576c6.468,0,6.468,4,12.936,4c6.467,0,6.467-4,12.935-4 c6.466,0,6.466,4,12.932,4c6.467,0,6.467-4,12.934-4c6.47,0,6.47,4,12.939,4c6.469,0,6.469-4,12.936-4c6.472,0,6.472,4,12.943,4 c6.473,0,6.473-4,12.944-4'/%3E%3C/svg%3E") repeat-x 0 61px;
+}
+
+.ampstart-sidebar .ampstart-icon {
+  color: var(--color-font-primary);
+  fill: var(--color-font-primary);
+}
+
+.ampstart-sidebar .ampstart-social-follow {
+  margin: 0 0 0;
+}
+
+.ampstart-social-follow {
+  margin: 0 0 0;
+}
+
+.ampstart-social-follow > li {
+  margin-right: 0;
+}
+
+.ampstart-sidebar .ampstart-nav-item {
+  margin: 0 0 .5rem;
+}
+
+.ampstart-sidebar .ampstart-faq-item {
+  margin-bottom: 1.5rem;
+}
+
+.ampstart-footer {
+  font-family: var(--font-navigation);
+  color: var(--color-font-footer);
+  padding-top: var(--space-7);
+  padding-bottom: var(--space-3);
+}
+
+.land-see:after {
+  content: '';
+  width: 100%;
+  height: 49px;
+  position: absolute;
+  left: 0;
+  background: var(--color-footer-background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104px' height='49px' viewBox='0 0 104 49'%3E%3Cdefs%3E%3C/defs%3E%3Cpath fill='none' stroke='%23EFEFEF' stroke-miterlimit='10' d='M0,0.5c6.468,0,6.468,4,12.935,4c6.468,0,6.468-4,12.936-4 c6.466,0,6.466,4,12.931,4c6.468,0,6.468-4,12.935-4c6.47,0,6.47,4,12.94,4c6.468,0,6.468-4,12.935-4c6.473,0,6.473,4,12.945,4 c6.471,0,6.471-4,12.943-4'/%3E%3Cpath fill='none' stroke='%23EFEFEF' stroke-miterlimit='10' d='M0,5.367c6.468,0,6.468,4,12.935,4c6.468,0,6.468-4,12.936-4 c6.466,0,6.466,4,12.931,4c6.468,0,6.468-4,12.935-4c6.47,0,6.47,4,12.94,4c6.468,0,6.468-4,12.935-4c6.473,0,6.473,4,12.945,4 c6.471,0,6.471-4,12.943-4'/%3E%3Cpath fill='none' stroke='%23EFEFEF' stroke-miterlimit='10' d='M0,10.235c6.468,0,6.468,4,12.935,4c6.468,0,6.468-4,12.936-4 c6.466,0,6.466,4,12.931,4c6.468,0,6.468-4,12.935-4c6.47,0,6.47,4,12.94,4c6.468,0,6.468-4,12.935-4c6.473,0,6.473,4,12.945,4 c6.471,0,6.471-4,12.943-4'/%3E%3Cpath fill='none' stroke='%23EFEFEF' stroke-miterlimit='10' d='M0,15.104c6.468,0,6.468,4,12.935,4c6.468,0,6.468-4,12.936-4 c6.466,0,6.466,4,12.931,4c6.468,0,6.468-4,12.935-4c6.47,0,6.47,4,12.94,4c6.468,0,6.468-4,12.935-4c6.473,0,6.473,4,12.945,4 c6.471,0,6.471-4,12.943-4'/%3E%3Cpath fill='none' stroke='%23EFEFEF' stroke-miterlimit='10' d='M0,19.972c6.468,0,6.468,4,12.935,4c6.468,0,6.468-4,12.936-4 c6.466,0,6.466,4,12.931,4c6.468,0,6.468-4,12.935-4c6.47,0,6.47,4,12.94,4c6.468,0,6.468-4,12.935-4c6.473,0,6.473,4,12.945,4 c6.471,0,6.471-4,12.943-4'/%3E%3Cpath fill='none' stroke='%23EFEFEF' stroke-miterlimit='10' d='M0,24.84c6.468,0,6.468,4,12.935,4c6.468,0,6.468-4,12.936-4 c6.466,0,6.466,4,12.931,4c6.468,0,6.468-4,12.935-4c6.47,0,6.47,4,12.94,4c6.468,0,6.468-4,12.935-4c6.473,0,6.473,4,12.945,4 c6.471,0,6.471-4,12.943-4'/%3E%3Cpath fill='none' stroke='%23EFEFEF' stroke-miterlimit='10' d='M0,29.708c6.468,0,6.468,4,12.935,4c6.468,0,6.468-4,12.936-4 c6.466,0,6.466,4,12.931,4c6.468,0,6.468-4,12.935-4c6.47,0,6.47,4,12.94,4c6.468,0,6.468-4,12.935-4c6.473,0,6.473,4,12.945,4 c6.471,0,6.471-4,12.943-4'/%3E%3Cpath fill='none' stroke='%23EFEFEF' stroke-miterlimit='10' d='M0,34.576c6.468,0,6.468,4,12.935,4c6.468,0,6.468-4,12.936-4 c6.466,0,6.466,4,12.931,4c6.468,0,6.468-4,12.935-4c6.47,0,6.47,4,12.94,4c6.468,0,6.468-4,12.935-4c6.473,0,6.473,4,12.945,4 c6.471,0,6.471-4,12.943-4'/%3E%3Cpath fill='none' stroke='%23EFEFEF' stroke-miterlimit='10' d='M0,39.443c6.468,0,6.468,4,12.935,4c6.468,0,6.468-4,12.936-4 c6.466,0,6.466,4,12.931,4c6.468,0,6.468-4,12.935-4c6.47,0,6.47,4,12.94,4c6.468,0,6.468-4,12.935-4c6.473,0,6.473,4,12.945,4 c6.471,0,6.471-4,12.943-4'/%3E%3Cpath fill='none' stroke='%23EFEFEF' stroke-miterlimit='10' d='M0,44.312c6.468,0,6.468,4,12.935,4c6.468,0,6.468-4,12.936-4 c6.466,0,6.466,4,12.931,4c6.468,0,6.468-4,12.935-4c6.47,0,6.47,4,12.94,4c6.468,0,6.468-4,12.935-4c6.473,0,6.473,4,12.945,4 c6.471,0,6.471-4,12.943-4'/%3E%3C/svg%3E") repeat-x left top local;
+}
+
+.ampstart-footer .ampstart-icon {
+  fill: var(--color-font-footer);
+}
+
+.ampstart-footer .ampstart-social-follow li:last-child {
+  margin-right: 0;
+}
+
+.ampstart-footer-nav ul {
+  margin-top: 0;
+  margin-bottom: var(--h9);
+  display: none;
+}
+
+.ampstart-footer-nav ul li {
+  padding: 0 var(--h5) 0 0;
+}
+
+.ampstart-footer small {
+  margin-bottom: var(--h2);
+  letter-spacing: .1rem;
+  font-size: var(--h7);
+  text-transform: uppercase;
+}
+
+.ampstart-footer .ampstart-label {
+  font-size: var(--h6);
+  text-transform: capitalize;
+}
+
+.ampstart-footer .ampstart-social-follow {
+  order: 2;
+  justify-content: flex-end;
+}
+
+.ampstart-footer, .ampstart-small-text {
+  line-height: var(--line-height-6);
+}
+
+@media (--breakpoint-xs) {
+  .ampstart-footer small {
+    font-size: var(--h9);
+  }
+}
+
+@media (--breakpoint-lg) {
+  .ampstart-footer {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+
+  .ampstart-footer-nav {
+    display: flex;
+    flex-basis: 50%;
+    order: 1;
+  }
+
+  .ampstart-footer-nav ul {
+    display: inline-flex;
+  }
+
+  .ampstart-footer small {
+    margin-bottom: var(--h8);
+    flex-basis: 50%;
+    order: 3;
+  }
+
+  .ampstart-footer .ampstart-social-follow {
+    flex-basis: 50%;
+    justify-content: flex-end;
+  }
+}