Skip to content

Commit 8900543

Browse files
ebidelebidel
committed
Scrolling, leftnav, and refactor work
1 parent 2bde0f2 commit 8900543

19 files changed

Lines changed: 908 additions & 238 deletions

‎_includes/top-nav.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<nav id="sitebanner" class="main-bg bar" fixed>
1+
<nav id="sitebanner" class="main-bg bar sticky">
22
<polymer-flex-layout align="center"></polymer-flex-layout>
33
<!-- <a href="/" class="brand align-center" flexbox><img src="/images/logos/polymer-logo-32.png">{{site.project_title|downcase}}</a> -->
44
<a href="/" flexbox><img src="/images/logos/lockup.svg"></a>

‎_layouts/default.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<main id="content-container">
1313

1414
<aside id="sidebar" class="main-bg">
15-
<a href="/"><img src="/images/logos/lockup.svg"></a>
15+
<a href="/" class="logo"><img src="/images/logos/lockup.svg"></a>
1616
<docs-menu></docs-menu>
1717
</aside>
1818
<scroll-area>
@@ -27,7 +27,7 @@
2727
</app-bar>
2828
<header>
2929
<h1>Core</h1>
30-
<summary>Learn more about {{site.project-title}}'s next-generation framework.</summary>
30+
<summary>{{page.title}}</summary>
3131
</header>
3232
</site-banner>
3333

‎config.rb‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
javascripts_dir = "js"
99

1010
# You can select your preferred output style here (can be overridden via the command line):
11-
output_style = :compressed #:expanded or :nested or :compact or :compressed
11+
# NOTE: using :compressed will strip out the @polyfill comments and make
12+
# polyfilled styling rules not work correctly.
13+
output_style = :compact #:expanded or :nested or :compact or :compressed
1214

1315
# To enable relative paths to assets via compass helper functions. Uncomment:
1416
# relative_assets = true

‎css/elements/app-bar.css‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,15 @@
1-
:host{display:-webkit-box;display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center}:host(site-banner){right:0;top:0;position:absolute}:ancestor(site-banner){right:0;top:0;position:absolute}
1+
/* line 3, ../../sass/elements/app-bar.scss */
2+
:host { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; }
3+
4+
/* line 8, ../../sass/elements/app-bar.scss */
5+
:host(site-banner) { right: 0; top: 0; position: absolute; }
6+
7+
/* line 13, ../../sass/elements/app-bar.scss */
8+
:ancestor(site-banner) { right: 0; top: 0; position: absolute; }
9+
10+
/* line 19, ../../sass/elements/app-bar.scss */
11+
:host(.fixed:host) { position: fixed; }
12+
13+
/* @polyfill :host > polymer-ui-icon */
14+
/* line 24, ../../sass/elements/app-bar.scss */
15+
::content > polymer-ui-icon { opacity: 0.6; margin-left: 10px; }

‎css/elements/scroll-area.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* line 3, ../../sass/elements/scroll-area.scss */
2+
:host { display: block; padding-left: 248px; }
3+
4+
/* @polyfill :host.scrolling site-banner */
5+
/* line 9, ../../sass/elements/scroll-area.scss */
6+
:host(.scrolling:host) ::content site-banner { height: 80px; padding-bottom: 0; position: fixed !important; width: 100%; }
7+
8+
/* @polyfill :host.scrolling > article */
9+
/* line 17, ../../sass/elements/scroll-area.scss */
10+
:host(.scrolling:host) ::content > article { padding-top: 310px; }
11+
12+
/* @polyfill :host.scrolling app-bar */
13+
/* line 22, ../../sass/elements/scroll-area.scss */
14+
:host(.scrolling:host) ::content app-bar { /* Note: this number should be updated if the height of of the nav changes */ -webkit-transform: translate3d(0, -siteBannerHeightMin, 0); transform: translate3d(0, -80px, 0); position: inherit; }
15+
16+
/* @polyfill :host > article */
17+
/* line 30, ../../sass/elements/scroll-area.scss */
18+
::content > article { padding: 24px 64px; max-width: 912px; overflow: hidden; }

‎css/elements/site-banner.css‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,27 @@
1-
:host{display:block;position:relative;z-index:1;height:286px;color:white;padding-left:64px;padding-bottom:40px}:host([type="platform"]:host){background-color:#9f499b}:host([type="core"]:host){background-color:#d61a7f}:host([type="elements"]:host){background-color:#5c6bc0}:host(.sticky:host){height:80px;padding-bottom:0}
1+
/* line 3, ../../sass/elements/site-banner.scss */
2+
:host { background-color: #1f2036; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-align: flex-end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; position: relative; z-index: 1; height: 286px; color: white; overflow: hidden; padding-left: 64px; }
3+
4+
/* line 17, ../../sass/elements/site-banner.scss */
5+
:host([type="platform"]:host) { background-color: #9f499b; }
6+
7+
/* line 21, ../../sass/elements/site-banner.scss */
8+
:host([type="core"]:host) { background-color: #d61a7f; }
9+
10+
/* line 25, ../../sass/elements/site-banner.scss */
11+
:host([type="elements"]:host) { background-color: #5c6bc0; }
12+
13+
/* @polyfill :host > header */
14+
/* line 30, ../../sass/elements/site-banner.scss */
15+
::content header { padding-top: 11px; padding-bottom: 40px; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; }
16+
17+
/* @polyfill :host > h1 */
18+
/* line 38, ../../sass/elements/site-banner.scss */
19+
::content h1 { letter-spacing: -0.01em; line-height: 48px; font-size: 40px; }
20+
21+
/* @polyfill :host > header.fixed */
22+
/* line 45, ../../sass/elements/site-banner.scss */
23+
::content header.fixed { position: fixed; }
24+
25+
/* @polyfill header > summary */
26+
/* line 51, ../../sass/elements/site-banner.scss */
27+
::content summary { margin-top: 20px; opacity: 0.6; }

0 commit comments

Comments
 (0)