fix(aio): home & marketing styles cleanup (#17926)
This commit is contained in:
Stefanie Fluin
Jason Aden
parent
6bae73c076
commit
e1174f3774
|
|
@ -2,7 +2,7 @@
|
|||
<h1 class="banner-headline no-toc no-anchor">Events</h1>
|
||||
</header>
|
||||
|
||||
<article class="l-content ">
|
||||
<article>
|
||||
<p>Where we'll be presenting:</p>
|
||||
<table class="is-full-width">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<h1 class="banner-headline no-toc no-anchor">Features & Benefits</h1>
|
||||
</header>
|
||||
|
||||
<article class="l-content ">
|
||||
<article>
|
||||
<div class="flex-center">
|
||||
<div>
|
||||
<div class="feature-section">
|
||||
|
|
@ -28,6 +28,7 @@
|
|||
<p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="feature-section">
|
||||
|
|
@ -52,6 +53,7 @@
|
|||
<p class="text-body">Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="feature-section">
|
||||
|
|
@ -76,6 +78,7 @@
|
|||
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="feature-section">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!--FULL HEADER BLOCK-->
|
||||
<header class="l-relative">
|
||||
<header>
|
||||
|
||||
<!--BACKGROUND IMAGE-->
|
||||
<div class="background-sky hero"></div>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
</header>
|
||||
|
||||
<article class="l-content">
|
||||
<article>
|
||||
<div class="home-rows">
|
||||
|
||||
<!--Announcement Bar-->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<h1 class="hero-title no-toc">News</h1>
|
||||
<div class="clear"></div>
|
||||
</header>
|
||||
<article class="l-content ">
|
||||
<artice>
|
||||
<div class="grid-fluid l-space-bottom-2">
|
||||
<div class="c12 text-center"><h3 class="text-headline text-uppercase"> Core Team</h3></div>
|
||||
<div class="clear"></div>
|
||||
|
|
|
|||
|
|
@ -78,10 +78,10 @@
|
|||
<div class="homepage-container">
|
||||
<div class="hero-headline">One framework.<br>Mobile & desktop.</div>
|
||||
</div>
|
||||
<h2 style="color: red; text-align: center;">
|
||||
<b><i>This website requires JavaScript.</i></b>
|
||||
</h2>
|
||||
</section>
|
||||
<h2 style="color: red; text-align: center; margin-top: -50px;">
|
||||
<b><i>This website requires JavaScript.</i></b>
|
||||
</h2>
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -86,8 +86,14 @@ p, ol, ul, ol, li, input, a {
|
|||
}
|
||||
}
|
||||
|
||||
ol li {
|
||||
margin: 14px 0px;
|
||||
ol {
|
||||
li, p {
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
li p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -16,10 +16,6 @@ body {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
l-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.l-clearfix:after, .clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
.hero {
|
||||
width: 100%;
|
||||
min-height: 480px;
|
||||
height: 80vh;
|
||||
max-height: 560px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 48px 48px 32px 48px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
min-height: 480px;
|
||||
height: 80vh;
|
||||
max-height: 560px;
|
||||
box-sizing: border-box;
|
||||
padding: 48px 48px 32px 48px;
|
||||
overflow: hidden;
|
||||
transform: skewY(8deg);
|
||||
transform-origin: 100%;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
max-height: 486px;
|
||||
padding-top: 40px;
|
||||
transform: none;
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
line-height: 48px;
|
||||
margin: 0 $unit 0 0;
|
||||
margin: 0 8px 0 0;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.is-standard-case {
|
||||
|
|
@ -40,20 +40,20 @@
|
|||
|
||||
section#intro {
|
||||
display: flex;
|
||||
width: 900px;
|
||||
height: 480px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 0 0;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 900px;
|
||||
height: 480px;
|
||||
margin: 0 auto -32px;
|
||||
padding: 48px 0 0;
|
||||
color: white;
|
||||
|
||||
@media (max-width: 780px) {
|
||||
flex-direction: column;
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 64px 0 32px;
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
padding: 40px 0 32px;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
|
|
@ -62,12 +62,12 @@ section#intro {
|
|||
}
|
||||
|
||||
.homepage-container {
|
||||
width: 100%;
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
margin-top: -7%;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
max-width: 1040px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: 780px) {
|
||||
display: flex;
|
||||
|
|
@ -92,22 +92,27 @@ section#intro {
|
|||
@media (max-width: 780px) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
font-size: 32px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
width: 400px;
|
||||
|
||||
@media (max-width: 780px) {
|
||||
width: 250px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img {
|
||||
filter: drop-shadow(0 2px 2px rgba($black, 0.24));
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
filter: drop-shadow(0 2px 2px rgba($black, 0.24));
|
||||
|
||||
@media (max-width: 780px) {
|
||||
width: 250px;
|
||||
|
|
@ -121,36 +126,44 @@ section#intro {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
padding: 16px;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
max-width: 50vw;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
background-color: $white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-in;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@media (max-width: 992px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
min-width: 100%;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
min-width: 160px;
|
||||
font-size: 16px;
|
||||
color: $white;
|
||||
background-color: $blue;
|
||||
border-radius: 48px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
|
||||
box-sizing: border-box;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
min-width: 160px;
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.7);
|
||||
|
|
@ -158,9 +171,9 @@ section#intro {
|
|||
}
|
||||
|
||||
.material-icons {
|
||||
display: none;
|
||||
right: 0;
|
||||
position: static;
|
||||
display: none;
|
||||
transition: all 0.3s ease-in;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -168,6 +181,7 @@ section#intro {
|
|||
p {
|
||||
font-size: 16px;
|
||||
margin: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -180,16 +194,16 @@ section#intro {
|
|||
|
||||
.home-row .card {
|
||||
@include card(70%, auto);
|
||||
min-width: 350px;
|
||||
width: 70%;
|
||||
height: auto;
|
||||
padding: 24px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-shadow: 0 6px 6px rgba(10, 16, 20, 0.15), 0 0 52px rgba(10, 16, 20, 0.12);
|
||||
position: relative;
|
||||
width: 70%;
|
||||
min-width: 350px;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
padding: 24px;
|
||||
box-shadow: 0 6px 6px rgba(10, 16, 20, 0.15), 0 0 52px rgba(10, 16, 20, 0.12);
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin: 16px auto 0;
|
||||
|
|
@ -206,8 +220,8 @@ section#intro {
|
|||
|
||||
@media (max-width: 1300px) {
|
||||
img {
|
||||
max-width: none;
|
||||
height: 70px;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -220,9 +234,9 @@ section#intro {
|
|||
|
||||
p {
|
||||
text-align: left;
|
||||
padding: 8px 0;
|
||||
color: $darkgray;
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -235,17 +249,20 @@ section#intro {
|
|||
}
|
||||
|
||||
.button.hero-cta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 184px;
|
||||
height: 40px;
|
||||
padding: 0 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 40px;
|
||||
background-color: $white;
|
||||
border-radius: 48px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 24px;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
|
|
@ -275,6 +292,12 @@ aio-shell {
|
|||
}
|
||||
}
|
||||
|
||||
&.page-features {
|
||||
article {
|
||||
padding: 0 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.page-home, &.page-resources, &.page-events, &.page-features {
|
||||
|
||||
.content img {
|
||||
|
|
@ -306,27 +329,10 @@ aio-shell {
|
|||
|
||||
.text-headline {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: $blue;
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
color: $blue;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.feature-section {
|
||||
.feature-header {
|
||||
text-align: center;
|
||||
|
||||
.text-headline {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
aio-shell:not(.view-SideNav) {
|
||||
|
|
@ -338,8 +344,8 @@ aio-shell:not(.view-SideNav) {
|
|||
div[layout=row]{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: block;
|
||||
|
|
@ -357,32 +363,26 @@ div[layout=row]{
|
|||
}
|
||||
}
|
||||
|
||||
.home-row .promo-img-container, .home-row .text-container {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.background-superhero-paper {
|
||||
background-blend-mode: multiply;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
header.bckground-sky.l-relative {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.home-row {
|
||||
max-width: 920px;
|
||||
margin: 32px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: 32px auto;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: block;
|
||||
.promo-img-container, .text-container {
|
||||
max-width: 50%;
|
||||
|
||||
.text-headline, .promo-img-container {
|
||||
text-align: center;
|
||||
@media(max-width: 480px) {
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
|
||||
&:nth-child(even) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-block {
|
||||
|
|
@ -393,20 +393,10 @@ header.bckground-sky.l-relative {
|
|||
}
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.promo-img-container, .text-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.promo-img-container {
|
||||
|
||||
@media (max-width: 375px) {
|
||||
text-align: initial;
|
||||
img {
|
||||
max-width: 90% !important;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -163,13 +163,6 @@ button.vertical-menu-item {
|
|||
// margin: 4px;
|
||||
}
|
||||
|
||||
.promo-img-container img {
|
||||
max-width: 90%;
|
||||
@include bp(small) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
aio-nav-menu.top-menu {
|
||||
padding: 24px 0 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,12 @@
|
|||
margin-right: 20px;
|
||||
top: 12px;
|
||||
height: 40px;
|
||||
|
||||
@media(max-width: 992px) {
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aio-top-menu {
|
||||
|
|
|
|||
|
|
@ -42,9 +42,6 @@ aio-api-list {
|
|||
}
|
||||
}
|
||||
|
||||
$phone-breakpoint: 480px;
|
||||
$tablet-breakpoint: 800px;
|
||||
|
||||
/* LAYOUT */
|
||||
|
||||
.docs-content {
|
||||
|
|
@ -59,8 +56,7 @@ $tablet-breakpoint: 800px;
|
|||
@media handheld and (max-width: $phone-breakpoint),
|
||||
screen and (max-device-width: $phone-breakpoint),
|
||||
screen and (max-width: $tablet-breakpoint) {
|
||||
padding: 0;
|
||||
padding-top: ($unit * 3);
|
||||
padding: 24px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +104,7 @@ $tablet-breakpoint: 800px;
|
|||
.material-icons {
|
||||
color: $blue-grey-100;
|
||||
font-size: 20px;
|
||||
left: $unit;
|
||||
left: 8px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
z-index: $layer-1;
|
||||
|
|
@ -186,7 +182,7 @@ $tablet-breakpoint: 800px;
|
|||
white-space: nowrap;
|
||||
|
||||
.symbol {
|
||||
margin-right: $unit;
|
||||
margin-right: 8px;
|
||||
}
|
||||
a {
|
||||
color: $blue-grey-600;
|
||||
|
|
@ -256,7 +252,7 @@ p {
|
|||
}
|
||||
|
||||
.code-margin {
|
||||
margin-bottom: $unit;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.no-bg {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,38 @@
|
|||
.feature-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 24px 0 0;
|
||||
// FEATURES MARKETING PAGE SPECIFIC STYLES
|
||||
|
||||
@media (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
.feature-section {
|
||||
margin: 0 0 32px;
|
||||
|
||||
.feature-header, .text-headline {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.features-desc {
|
||||
max-width: 920px;
|
||||
}
|
||||
.feature-header img {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
max-width: 300px;
|
||||
margin: 0 24px 32px 0;
|
||||
}
|
||||
.feature-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.feature {
|
||||
max-width: 300px;
|
||||
margin: 0 16px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -43,9 +43,4 @@
|
|||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// This page specific style should not really be here
|
||||
.home-row .promo-img-container img {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
.presskit-row {
|
||||
margin: $unit * 6 0;
|
||||
margin: 48px 0;
|
||||
width: 100%;
|
||||
|
||||
.presskit-inner {
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
color: #455A64;
|
||||
|
||||
@media(max-width: 599px) {
|
||||
padding-bottom: $unit * 2;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
|
||||
li {
|
||||
margin: 0 0 $unit 0;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin-bottom: $unit * 2;
|
||||
margin-bottom: 8px * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
$small-breakpoint-width: 840px;
|
||||
$unit: 8px;
|
||||
|
||||
// TYPOGRAPHY
|
||||
$main-font: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
|
||||
$code-font: "Droid Sans Mono", monospace;
|
||||
|
|
@ -113,3 +110,8 @@ $api-symbols: (
|
|||
background: $purple-600
|
||||
)
|
||||
);
|
||||
|
||||
// OTHER
|
||||
$small-breakpoint-width: 840px;
|
||||
$phone-breakpoint: 480px;
|
||||
$tablet-breakpoint: 800px;
|
||||
|
|
@ -58,6 +58,7 @@
|
|||
border: 0.5px solid $lightgray;
|
||||
}
|
||||
|
||||
// INFO CARD SKELETON
|
||||
@mixin card($height, $width) {
|
||||
height: $height;
|
||||
width: $width;
|
||||
|
|
|
|||
Loading…
Reference in New Issue