Skip to content

Commit

Permalink
landing app uses landing- prefix
Browse files Browse the repository at this point in the history
  • Loading branch information
Gilad Gray committed Mar 27, 2018
1 parent 17f0057 commit d57cb01
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 89 deletions.
82 changes: 16 additions & 66 deletions packages/landing-app/src/_svgs.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
$initial-delay: 2s;

.#{$ns}-wireframes {
.landing-wireframes {
position: absolute;
top: 0;
left: 50%;
overflow: visible;
pointer-events: none;
}

.#{$ns}-wireframe {
.landing-wireframe {
position: absolute;

svg g {
Expand All @@ -21,122 +21,72 @@ $initial-delay: 2s;
}
}

// Disable SVG animation on live site while we tweak performance.
// See https://github.com/palantir/blueprint/issues/108

// Only do SVG stroke animation when not on mobile
// $mobile-breakpoint: 425px;

// @media not all and (max-width: $mobile-breakpoint) {
// .#{$ns}-wireframe svg g {
// path,
// line,
// circle,
// use {
// animation: pt-sketch-wireframe 7s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
// stroke-dasharray: 1000;
// stroke-dashoffset: 1000;
// }
// }
// }

@keyframes pt-sketch-wireframe {
to {
stroke-dashoffset: 0;
}
}

@mixin pt-wireframe-mixin($delay) {
svg g {
path,
line,
circle,
use {
animation-delay: $initial-delay + $delay;
}
}
}

.#{$ns}-logo-wireframe-alert {
@include pt-wireframe-mixin(1s);
.landing-logo-wireframe-alert {
top: 186px;
right: 280px;
}

.#{$ns}-logo-wireframe-buttons {
@include pt-wireframe-mixin(0s);
.landing-logo-wireframe-buttons {
top: 32px;
right: 252px;
}

.#{$ns}-logo-wireframe-calendar {
@include pt-wireframe-mixin(3s);
.landing-logo-wireframe-calendar {
top: 389px;
right: 238px;
}

.#{$ns}-logo-wireframe-checkboxes {
@include pt-wireframe-mixin(5s);
.landing-logo-wireframe-checkboxes {
top: 434px;
left: 300px;
}

.#{$ns}-logo-wireframe-file-upload {
@include pt-wireframe-mixin(1s);
.landing-logo-wireframe-file-upload {
top: 620px;
left: 3px;
}

.#{$ns}-logo-wireframe-input-groups {
@include pt-wireframe-mixin(1s);
.landing-logo-wireframe-input-groups {
top: 34px;
left: -197px;
}

.#{$ns}-logo-wireframe-inputs {
@include pt-wireframe-mixin(1s);
.landing-logo-wireframe-inputs {
top: 34px;
left: 130px;
}

.#{$ns}-logo-wireframe-labels {
@include pt-wireframe-mixin(1s);
.landing-logo-wireframe-labels {
top: 150px;
left: 500px;
}

.#{$ns}-logo-wireframe-radios {
@include pt-wireframe-mixin(5s);
.landing-logo-wireframe-radios {
top: 284px;
left: 300px;
}

.#{$ns}-logo-wireframe-select-menus {
@include pt-wireframe-mixin(1s);
.landing-logo-wireframe-select-menus {
top: 30px;
left: 500px;
}

.#{$ns}-logo-wireframe-sliders {
@include pt-wireframe-mixin(1s);
.landing-logo-wireframe-sliders {
top: 300px;
left: 500px;
}

.#{$ns}-logo-wireframe-switches {
@include pt-wireframe-mixin(5s);
.landing-logo-wireframe-switches {
top: 354px;
left: 300px;
}

.#{$ns}-logo-wireframe-time-selections {
@include pt-wireframe-mixin(1s);
.landing-logo-wireframe-time-selections {
top: 450px;
left: 500px;
}

.#{$ns}-logo-wireframe-toggles {
@include pt-wireframe-mixin(3s);
.landing-logo-wireframe-toggles {
top: 250px;
left: -201px;
}
20 changes: 10 additions & 10 deletions packages/landing-app/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,30 +36,30 @@
<body>
<header>
<canvas id="pt-logo-background"></canvas>
<div class="pt-wireframes"></div>
<div class="landing-wireframes"></div>
<canvas id="pt-logo"></canvas>
<div class="pt-container">
<div class="landing-container">
<h1>Blueprint</h1>
<h3>A React-based UI toolkit for the web</h3>
<div>
<a class="pt-button pt-large pt-minimal" href="docs/v2/">Documentation</a>
<a class="landing-button pt-button pt-large pt-minimal" href="docs/v2/">Documentation</a>
<span class="pt-icon-standard pt-icon-dot"></span>
<a class="pt-button pt-large pt-minimal" href="https://github.com/palantir/blueprint" target="_blank">GitHub</a>
<a class="landing-button pt-button pt-large pt-minimal" href="https://github.com/palantir/blueprint" target="_blank">GitHub</a>
</div>
</div>
</header>
<footer class="pt-dark">
<div class="pt-about">
<div class="pt-container">
<div class="landing-about">
<div class="landing-container">
<img src="assets/palantir.svg" alt="Palantir">
<p>Blueprint is an open source project<br>developed at Palantir.</p>
<div class="pt-separator"></div>
<div class="landing-separator"></div>
<p>We’re hiring designers and engineers!</p>
<a class="pt-button pt-intent-primary" href="https://www.palantir.com/careers/" target="_blank">View openings</a>
<a class="landing-button pt-button pt-intent-primary" href="https://www.palantir.com/careers/" target="_blank">View openings</a>
</div>
</div>
<div class="pt-copyright">
<div class="pt-container">
<div class="landing-copyright">
<div class="landing-container">
<div id="copyright">© 2014–2018 Palantir Technologies</div>
<div>Licensed under <a href="https://github.com/palantir/blueprint/blob/develop/LICENSE" target="_blank">Apache-2.0</a></div>
</div>
Expand Down
22 changes: 11 additions & 11 deletions packages/landing-app/src/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ body {
padding: 0;
}

.#{$ns}-container {
.landing-container {
margin: 0 auto;
max-width: $container-width;
padding: 0 $pt-grid-size * 2;
Expand All @@ -43,7 +43,7 @@ header {
text-align: center;
user-select: none;

.#{$ns}-container {
.landing-container {
@include position-all(absolute, 0);
z-index: $pt-z-index-base;
pointer-events: none;
Expand All @@ -66,7 +66,7 @@ header {
font-weight: 400;
}

.#{$ns}-button.#{$ns}-minimal {
.#{$ns}-button.landing-button {
position: relative;
color: rgba($white, 0.7);
pointer-events: all;
Expand Down Expand Up @@ -96,8 +96,8 @@ footer {
background-color: transparent;
}

.#{$ns}-about {
.#{$ns}-container {
.landing-about {
.landing-container {
@include pt-flex-container(column, $pt-grid-size * 3);
align-items: center;
padding-top: $pt-grid-size * 6;
Expand All @@ -117,14 +117,14 @@ footer {
font-weight: 300;
}

.#{$ns}-separator {
.landing-separator {
background-color: $dark-gray5;
width: $pt-grid-size * 4;
height: 2px;
}
}

.#{$ns}-copyright {
.landing-copyright {
&::before {
display: block;
background-image: linear-gradient(
Expand All @@ -137,7 +137,7 @@ footer {
content: "";
}

.#{$ns}-container {
.landing-container {
display: flex;
align-items: center;
justify-content: space-between;
Expand Down Expand Up @@ -166,12 +166,12 @@ footer {
}

@media (max-width: $tablet-breakpoint) {
.#{$ns}-copyright {
.#{$ns}-container {
.landing-copyright {
.landing-container {
flex-direction: column;
}

.#{$ns}-button {
.landing-button {
margin: $pt-grid-size / 2;
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/landing-app/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ initializeLogo(
document.getElementById("pt-logo-background") as HTMLCanvasElement,
);

initializeSVGs(document.querySelector(".pt-wireframes") as HTMLElement);
initializeSVGs(document.querySelector(".landing-wireframes") as HTMLElement);

document.getElementById("copyright").innerHTML = `© 2014–${new Date().getFullYear()} Palantir Technologies`;
2 changes: 1 addition & 1 deletion packages/landing-app/src/svgs/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const HERO_SVGS: Record<string, string> = {

function injectSVG(elem: HTMLElement, id: string) {
const wrapper = document.createElement("div");
wrapper.classList.add("pt-wireframe", `pt-logo-wireframe-${id}`);
wrapper.classList.add("landing-wireframe", `landing-logo-wireframe-${id}`);
wrapper.innerHTML = HERO_SVGS[id];
elem.appendChild(wrapper);
}
Expand Down

1 comment on commit d57cb01

@blueprint-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

landing app uses landing- prefix

Preview: documentation | landing | table

Please sign in to comment.