-
diff --git a/aio/e2e/app.e2e-spec.ts b/aio/e2e/app.e2e-spec.ts
index f17ae40885..b5271d6041 100644
--- a/aio/e2e/app.e2e-spec.ts
+++ b/aio/e2e/app.e2e-spec.ts
@@ -6,6 +6,7 @@ describe('site App', function() {
beforeEach(() => {
page = new SitePage();
+ page.setWindowWidth(1050); // Make the window wide enough to show the SideNav side-by-side.
page.navigateTo();
});
diff --git a/aio/e2e/app.po.ts b/aio/e2e/app.po.ts
index e8a269b4bb..6d28739a5a 100644
--- a/aio/e2e/app.po.ts
+++ b/aio/e2e/app.po.ts
@@ -35,6 +35,11 @@ export class SitePage {
return browser.executeScript('return arguments[0].innerHTML;', element);
}
+ setWindowWidth(newWidth: number) {
+ const win = browser.driver.manage().window();
+ return win.getSize().then(oldSize => win.setSize(newWidth, oldSize.height));
+ }
+
/**
* Replace the ambient Google Analytics tracker with homebrew spy
* don't send commands to GA during e2e testing!
diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index effa2795e6..01cfb6a1bd 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -64,7 +64,7 @@ describe('AppComponent', () => {
describe('onResize', () => {
it('should update `isSideBySide` accordingly', () => {
- component.onResize(1000);
+ component.onResize(1033);
expect(component.isSideBySide).toBe(true);
component.onResize(500);
expect(component.isSideBySide).toBe(false);
@@ -168,7 +168,7 @@ describe('AppComponent', () => {
it('should be called when a document has been rendered', () => {
const scrollService: AutoScrollService = fixture.debugElement.injector.get(AutoScrollService);
spyOn(scrollService, 'scroll');
- component.onDocRendered(null);
+ component.onDocRendered();
expect(scrollService.scroll).toHaveBeenCalledWith(jasmine.any(HTMLElement));
});
});
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index 243a4535ba..de06a196c7 100644
--- a/aio/src/app/app.component.ts
+++ b/aio/src/app/app.component.ts
@@ -28,7 +28,9 @@ export class AppComponent implements OnInit {
isSideBySide = false;
private isSideNavDoc = false;
private previousNavView: string;
- private readonly sideBySideWidth = 600;
+ // Set to 1032 to account for computed html window size
+ private readonly sideBySideWidth = 1032;
+
sideNavNodes: NavigationNode[];
topMenuNodes: NavigationNode[];
versionInfo: VersionInfo;
diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index a10ccf5930..04f990236d 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -65,6 +65,9 @@
font-size: 14px;
line-height: 24px;
letter-spacing: 0.30px;
+ & > em {
+ letter-spacing: 0.30px;
+ }
}
ol li {
@@ -117,7 +120,7 @@
text-align: left;
}
- p > code {
+ p > code, li > code, table code {
font-family: $code-font;
font-size: 90%;
color: $blue;
diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss
index ef4685160c..7acf592691 100644
--- a/aio/src/styles/1-layouts/_content-layout.scss
+++ b/aio/src/styles/1-layouts/_content-layout.scss
@@ -20,12 +20,4 @@
.sidenav-content button {
min-width: 50px;
-}
-
-.l-sub-section {
- color: $blue;
- margin: 0 0 10px 0px;
- padding: 10px;
- background: $offwhite;
- border-left: 4px solid $blue;
}
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/_footer.scss
index 52a7a09898..7344d68154 100644
--- a/aio/src/styles/1-layouts/_footer.scss
+++ b/aio/src/styles/1-layouts/_footer.scss
@@ -42,6 +42,10 @@ footer {
p {
text-align: center;
margin: 10px 0px 5px;
+
+ @media (max-width: 480px) {
+ text-align: left;
+ }
}
div.grid-fluid {
@@ -65,8 +69,18 @@ footer {
text-align: left;
}
}
+
+ @media (max-width: 480px) {
+ flex-direction: column;
+ .footer-block {
+ margin: 8px 24px;
+ }
+ }
}
+
+
+
@media (max-width: 700px) {
h3 {
font-size: 110%;
diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss
index 0c643dabef..150a3179b7 100644
--- a/aio/src/styles/1-layouts/_layout-global.scss
+++ b/aio/src/styles/1-layouts/_layout-global.scss
@@ -2,4 +2,18 @@
content: "";
display: table;
clear: both;
+}
+
+l-relative {
+ position: relative;
+}
+
+.l-clearfix:after, .clearfix:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+.is-visible {
+ display: block!important;
}
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
index 6360dbe040..58575854cb 100644
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -1,12 +1,128 @@
-.hero {
+#home {
+ padding: 0rem 0rem 3rem;
+
+ @media (max-width: 800px) {
+ article {
+ padding: 0 30px;
+ }
+ }
+}
+
+div[layout=row]{
+ display: flex;
+ box-sizing: border-box;
+
+ @media (max-width: 480px) {
+ display: block;
+ }
+}
+
+.layout-row {
+ flex-direction: row;
+}
+
+.home-rows {
+ margin-top: 112px;
+}
+
+.home-row .promo-image-container, .home-row .text-container {
+ max-width: 50%;
+}
+
+.background-superhero-paper {
+ background: url('assets/images/backgrounds/super-hero-large.png') no-repeat bottom center , $bluegradient;
+ background-blend-mode: multiply;
+ background-size: 100%;
+}
+
+.background-sky {
+ background-color: $blue;
+ background: $bluegradient;
+ color: $white;
+}
+
+header.bckground-sky.l-relative {
display: flex;
flex-direction: column;
- align-items: center;
- text-align: center;
- h1:after {
- display: none;
+}
+
+.home-rows {
+ // NOTE (ericjim): if a banner is placed on the homescreen, add this margin.
+ margin-top: 112px;
+}
+
+.home-row {
+ max-width: 920px;
+ margin: 0 0 60px 0;
+ margin-left: auto;
+ margin-right: auto;
+
+ @media (max-width: 480px) {
+ display: block;
+ }
+
+ h3.text-headline {
+ font-size: 28px;
+ margin-top: 10px;
+ }
+
+ // NOTE (ericjim): remove if graphic changes.
+ .promo-3 {
+ margin-top: 15px;
+
+ @media(max-width: 599px) {
+ margin-top: 0;
}
+ }
+
+ // -- Utility margins for promos
+ .promo-1-desc, .promo-3-desc {
+ padding-left: 5px;
+ }
+
+ // -- Reset margins for the utility margins
+ @media(max-width: 599px) {
+ .promo-1, .promo-2, .promo-3, .promo-4 {
+ margin: 0;
+ }
+ }
+
+ .text-block {
+ padding-right: 15%;
+
+ @media(max-width: 599px) {
+ padding: 0;
+ }
+ }
+
+ @media(max-width: 599px) {
+ .promo-image-container, .text-container {
+ max-width: 100%;
+ }
+
+ &:nth-child(even) {
+ flex-direction: column-reverse;
+ }
+ }
+
+ .promo-img-container {
+
+ @media (max-width: 375px) {
+ text-align: initial;
+ }
+
+ p {
+ margin: 0 20px;
+ }
+
img {
- max-width: 200px;
+ max-width: 90%;
+
+
+ @media (max-width: 599px) {
+ max-width: 100%;
+ float: initial !important;
+ }
}
+ }
}
\ No newline at end of file
diff --git a/aio/src/styles/1-layouts/_search-results.scss b/aio/src/styles/1-layouts/_search-results.scss
index 20ab21cb29..88c527dbad 100644
--- a/aio/src/styles/1-layouts/_search-results.scss
+++ b/aio/src/styles/1-layouts/_search-results.scss
@@ -17,16 +17,22 @@ aio-search-results {
background-color: $darkgray;
border: 24px solid $darkgray;
- @include bp(tiny) {
+ @media (max-width: 480px) {
display: block;
- max-height: 60%;
+ max-height: 70%;
+ box-sizing: border-box;
+ .search-area {
+ display: block;
+ margin: 16px 16px;
+ }
}
}
.search-area {
display: flex;
flex-direction: column;
- margin: 0 10px;
+ margin: 16px 16px;
+ height: 100%;
h2 {
font-size: 16px;
margin: 10px 0px 5px;
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 3e75580014..7834a72760 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -10,6 +10,20 @@ aio-nav-menu.top-menu .vertical-menu-item {
min-width: 260px;
}
+md-sidenav-container.sidenav-container {
+ height: auto;
+ transform: none;
+ }
+
+// md-sidenav.sidenav.mat-sidenav.mat-sidenav-side.mat-sidenav-opened {
+// position: fixed;
+// padding-top: 72px;
+// }
+
+md-sidenav-container div.mat-sidenav-content {
+ height: auto;
+}
+
.vertical-menu-item {
box-sizing: border-box;
color: $darkgray;
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index 658c7fa8e8..da57bfa6fd 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -85,7 +85,7 @@ aio-search-box input {
width: 50%;
}
}
- @include bp(medium) {
+ @media (max-width: 480px) {
transition: width 0.4s ease-in-out;
&:focus {
width: 50%;
diff --git a/aio/src/styles/2-modules/_alert.scss b/aio/src/styles/2-modules/_alert.scss
index eed3f42bb4..f8049f48f9 100644
--- a/aio/src/styles/2-modules/_alert.scss
+++ b/aio/src/styles/2-modules/_alert.scss
@@ -6,19 +6,31 @@
&.is-critical {
border-left: 10px solid $brightred;
background-color: rgba($brightred, 0.05);
+
+ h1, h2, h3, h4, h5, h6 {
+ color: $brightred;
+ }
}
&.is-important {
border-left: 10px solid $orange;
background-color: rgba($orange, 0.05);
+
+ h1, h2, h3, h4, h5, h6 {
+ color: $orange;
+ }
}
&.is-helpful {
border-left: 10px solid $blue;
background-color: rgba($blue, 0.05);
+
+ h1, h2, h3, h4, h5, h6 {
+ color: $blue;
+ }
}
- p {
+ > * {
margin: 0;
padding: 8px 16px;
}
diff --git a/aio/src/styles/2-modules/_announcement-bar.scss b/aio/src/styles/2-modules/_announcement-bar.scss
new file mode 100644
index 0000000000..e26e8ea09d
--- /dev/null
+++ b/aio/src/styles/2-modules/_announcement-bar.scss
@@ -0,0 +1,179 @@
+/* Announcment Bar Module */
+/* A module displaying time senstive announcemnts */
+
+
+/* VARIABLES */
+
+$announcement-bar: '.announcement-bar';
+$announcement-bar-height: 104px;
+$announcement-bar-width: 784px;
+
+/* CLASS */
+
+#{$announcement-bar} {
+ height: 104px;
+ width: $announcement-bar-width;
+ position: absolute;
+ margin-left: auto;
+ top: 500px;
+ color: $darkgray;
+ background: $white;
+ border-radius: 4px;
+ overflow: hidden;
+ box-sizing: border-box;
+ box-shadow: 0 4px 4px rgba(0,0,0,0.24), 0 0 4px rgba(0,0,0,0.12);
+
+ @media (max-width: $announcement-bar-width) {
+ height: auto;
+ margin: 0;
+ position: static;
+ text-align: center;
+ width: 100%;
+ }
+}
+
+// SLIDES CONTAINER
+#{$announcement-bar}-slides {
+ position: relative;
+ overflow: hidden;
+ color: $darkgray;
+ background: $white;
+ height: $announcement-bar-height;
+ width: $announcement-bar-width;
+ box-sizing: border-box;
+ box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12);
+
+ @media (max-width: 480px) {
+ box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+ height: 240px;
+ margin: 0;
+ padding: 32px 48px;
+ text-align: center;
+ width: auto;
+ }
+}
+
+// INDIVIDUAL SLIDE
+#{$announcement-bar}-slide {
+ bottom: 0;
+ box-sizing: border-box;
+ height: $announcement-bar-height;
+ left: 0;
+ margin-bottom: -$announcement-bar-height;
+ opacity: 0;
+ padding: 32px;
+ position: absolute;
+ right: 0;
+ transition: all .8s;
+ width: $announcement-bar-width;
+ z-index: 1;
+
+ @media (max-width: 480px) {
+ height: auto;
+ margin: 0;
+ padding:0;
+ width: auto;
+ transition: opacity .8s;
+ visibility: hidden;
+ }
+
+ img, p {
+ float: left;
+
+ @media (max-width: 480px) {
+ display: block;
+ float: none;
+ }
+ }
+
+ img {
+ height: 40px;
+ margin: 8px auto;
+ }
+
+ p {
+ font-size: 18px;
+ line-height: 40px;
+ margin: 0;
+ padding: 0;
+
+ @media (max-width: 480px) {
+ line-height: 24px;
+ margin: auto;
+ }
+
+ }
+
+ .button,
+ .button.md-button {
+ margin: 0;
+ padding: 0 40px;
+ background: $lightgray;
+ color: $white;
+ float: right;
+ font-size: 14px;
+ line-height: 40px;
+ transition: all .3s ease-in-out;
+
+ &:hover {
+ background: $blue;
+ box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+ color: $white;
+ }
+
+ @media (max-width: $announcement-bar-width) {
+ float: none;
+ margin: 16px auto;
+ }
+ }
+
+ &.is-visible {
+ margin-bottom: 0;
+ opacity: 1;
+ z-index: 2;
+
+ @media (max-width: $announcement-bar-width) {
+ position: static;
+ visibility: visible;
+ justify-content: center;
+ display: flex !important;
+ flex-direction: column;
+ padding: 8px;
+ height: auto;
+ width: 100%;
+ margin: 0;
+ }
+
+ @media (max-width: 480px) {
+ padding: 16px;
+ }
+ }
+}
+
+// NAV BAR
+#{$announcement-bar} nav {
+ bottom: -40px;
+ color: $lightgray;
+ left: 0;
+ position: absolute;
+ right: 0;
+ text-align: center;
+ z-index: 1;
+
+ button {
+ background: $lightgray;
+ border: none;
+ border-radius: 100px;
+ height: 12px;
+ margin: 0 4px;
+ outline: none;
+ overflow: hidden;
+ text-indent: -3000px;
+ width: 12px;
+
+ &.is-selected,
+ &.selected {
+ background: $lightgray;
+ }
+ }
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_buttons.scss b/aio/src/styles/2-modules/_buttons.scss
new file mode 100644
index 0000000000..fd3ed6c003
--- /dev/null
+++ b/aio/src/styles/2-modules/_buttons.scss
@@ -0,0 +1,89 @@
+/* Button Styles */
+
+.button,
+a.button.md-button {
+ display: inline-block;
+ line-height: 32px;
+ padding: 0px 16px;
+ font-size: 14px;
+ font-weight: 400;
+ border-radius: 3px;
+ text-decoration: none;
+ text-transform: uppercase;
+ overflow: hidden;
+ border: none;
+
+ // SIZES
+ &.button-small {
+ font-size: 12px;
+ line-height: 24px;
+ padding: 0px 8px;
+ }
+
+ &.button-large {
+ font-size: 15px;
+ line-height: 48px;
+ padding: 0px 24px;
+ }
+
+ &.button-x-large {
+ font-size: 16px;
+ line-height: 56px;
+ padding: 0px 24px;
+ }
+
+
+ // COLORS
+
+ &.button-secondary {
+ background: $mediumgray;
+ color: rgba($white, .87);
+ }
+
+ &.button-plain {
+ background: $white;
+ color: rgba($darkgray, .87);
+ }
+
+ &.button-subtle {
+ background: $mediumgray;
+ color: darken($offwhite, 10%);
+ }
+
+ &.button-navy {
+ background: $blue;
+ color: rgba($white, .87);
+ }
+
+ &.button-banner {
+ background: $darkgray;
+ color: rgba($white, .87);
+ }
+
+ &.button-shield,
+ &.button-shield.md-button {
+ background-color: $blue;
+ background: $blue url('assets/images/logos/angular/angular_whiteTransparent.svg') 24px 13px no-repeat;
+ color: rgba($white, .87);
+ padding-left: 54px;
+
+ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
+ background: $blue url('assets/images/logos/angular/angular_whiteTransparent.svg') 24px 13px no-repeat;
+ background-size: 22px 22px;
+ }
+ }
+}
+
+.cta-bar {
+ text-align: center;
+
+ .button {
+ margin: 0px 8px;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ transition: all .2s ease-in-out;
+ &:hover {
+ transform: scale(1.1);
+ color: $offwhite;
+ }
+ }
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index 1a883b0685..eaff21db2f 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -7,6 +7,10 @@ code-tabs md-tab-body {
display: block;
padding: 8px 16px;
margin: 16px auto;
+
+ code {
+ overflow: auto;
+ }
}
// TERMINAL / SHELL TEXT STYLES
@@ -51,6 +55,10 @@ aio-code pre {
display: flex;
padding: 0 48px 0 0;
white-space: pre-wrap;
+
+ code span, code ol li {
+ line-height: 18px;
+ }
}
code ol {
@@ -79,6 +87,10 @@ code ol {
&:hover {
color: $mediumgray;
}
+ @media (max-width: 480px) {
+ top: 0;
+ bottom: 0;
+ }
}
.lang-sh .copy-button, .lang-bash .copy-button {
diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss
index 3661c532fe..3051b1da37 100644
--- a/aio/src/styles/2-modules/_contributor.scss
+++ b/aio/src/styles/2-modules/_contributor.scss
@@ -2,6 +2,24 @@ $metal: #536E7A;
$snow: #FFFFFF;
$steel: #253238;
+// .bio-card {
+// margin: 0 0 32px 0;
+// position: relative;
+// cursor: pointer;
+// box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+// background: $white;
+// transition: all .3s;
+
+// &:hover {
+// transform: translate3d(0,-3px,0);
+// box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
+
+// nav {
+// opacity: 1;
+// }
+// }
+
+
aio-contributor-list {
.grid-fluid {
margin: 0 auto;
@@ -69,7 +87,15 @@ aio-contributor {
header {
position: relative;
overflow: hidden;
- border-radius: 2px 2px 0px 0px;
+ border-radius: 4px;
+
+ img {
+ box-sizing: border-box;
+ display: flex;
+ flex: 0 0 auto;
+ width: 100%;
+ height: auto;
+ }
nav {
transition: opacity .5s;
@@ -78,13 +104,13 @@ aio-contributor {
left: 0;
right: 0;
z-index: 1;
- padding: $unit;
+ padding: 8px;
background: rgba($steel, .4);
opacity: 0;
button {
font-size: 14px;
- color: $snow;
+ color: $white;
text-transform: uppercase;
opacity: .87;
background: none;
@@ -92,17 +118,16 @@ aio-contributor {
}
a {
- color: $snow;
+ color: $white;
font-size: 20px;
text-decoration: none;
opacity: .87;
- margin-right: $unit;
+ margin-right: 8px;
float: right;
}
}
}
-
// MAIN CONTENT
h3 {
@@ -124,4 +149,4 @@ aio-contributor {
margin: 0;
text-overflow: ellipsis;
}
-}
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_hero.scss b/aio/src/styles/2-modules/_hero.scss
new file mode 100644
index 0000000000..4a2abd0acc
--- /dev/null
+++ b/aio/src/styles/2-modules/_hero.scss
@@ -0,0 +1,113 @@
+/*
+* Hero Module
+*
+* A hero banner located at the top of each page that displays the
+* title of the page and sometimes a decorative background.
+*
+*/
+
+
+/*
+* Class
+*/
+
+.hero {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ padding: 48px 48px 32px 48px;
+ position: relative;
+
+ @media (max-width: 480px) {
+ height: auto;
+ padding-top: 40px;
+ }
+
+ h1:after {
+ content: none;
+ }
+
+ .hero-title {
+ display: inline-block;
+ font-size: 28px;
+ font-weight: 400;
+ float: left;
+ line-height: 48px;
+ margin: 0 $unit 0 0;
+ text-transform: uppercase;
+
+ &.is-standard-case {
+ text-transform: none;
+ }
+ }
+
+ .hero-subtitle {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: $unit * 3;
+ margin: 0;
+ text-transform: uppercase;
+ }
+
+
+ // CTA BUTTONS
+ .button {
+ margin: 0px $unit;
+
+ // @include respond-to('mobile') {
+ // margin: 16px 0;
+ // display: block;
+ // }
+ }
+
+ button {
+ // Override md-button from angular material to align language select with hero title.
+ margin: 0 !important;
+ }
+
+
+ /*
+ * Large Banner
+ */
+
+ &.is-large {
+ padding-top: 32px;
+ text-align: center;
+
+ // @include respond-to('mobile') {
+ // height: auto;
+ // }
+
+ // LARGE SHEILD LOGO
+ .hero-logo {
+ filter: drop-shadow(0 2px 2px rgba($black, 0.24));
+ margin-bottom: 8px;
+ opacity: 1;
+ padding: 0;
+ width: 240px;
+
+ // @include respond-to('mobile') {
+ // width: 192px;
+ // }
+ }
+
+ .hero-cta,
+ .hero-cta.md-button {
+ background: rgba($white, .87);
+ border-radius: 2px;
+ color: $blue;
+ font-weight: 500;
+ padding: 0 64px;
+ margin: 40px 0;
+ transition: all .3s;
+
+ &:hover {
+ background: $white;
+ box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
+ color: $blue;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_images.scss b/aio/src/styles/2-modules/_images.scss
index 23bfaa48da..4481040eeb 100644
--- a/aio/src/styles/2-modules/_images.scss
+++ b/aio/src/styles/2-modules/_images.scss
@@ -1,3 +1,9 @@
+img {
+ @media (max-width: 600px) {
+ max-width: 100%;
+ float: none !important;
+ }
+}
.image-display {
border-radius: 4px;
@@ -12,4 +18,8 @@
display: inline-block;
max-width: 100%;
}
+}
+
+.home-row .promo-img-container img {
+ max-width: 90%;
}
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss
index b19699a98e..314fbbd614 100644
--- a/aio/src/styles/2-modules/_modules-dir.scss
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -12,3 +12,7 @@
@import 'table';
@import 'presskit';
@import 'card';
+ @import 'subsection';
+ @import 'buttons';
+ @import 'hero';
+ @import 'announcement-bar';
\ No newline at end of file
diff --git a/aio/src/styles/2-modules/_subsection.scss b/aio/src/styles/2-modules/_subsection.scss
index ade6298fcf..f3ee7e6965 100644
--- a/aio/src/styles/2-modules/_subsection.scss
+++ b/aio/src/styles/2-modules/_subsection.scss
@@ -1,8 +1,7 @@
.l-sub-section {
color: $darkgray;
- border-width: 1px;
- border-style: solid;
- padding: 20px;
- border-radius: 4px;
+ background-color: $lightgray;
+ border-left: 10px solid $mediumgray;
+ padding: 16px;
margin-bottom: 10px;
}
\ No newline at end of file