Skip to content

More small fixes #1254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 30, 2019
Merged

More small fixes #1254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2a4eec4
Make the header more responsive
cnunciato Jun 28, 2019
01b041b
Bottom-align the image on the whitepaper layout
cnunciato Jun 28, 2019
c15a1b7
Add team@pulumi link to the footer
cnunciato Jun 28, 2019
2e30e14
Restore the newsroom and investors sections
cnunciato Jun 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 36 additions & 39 deletions assets/sass/_hero.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,65 @@
header {
.header-hero {
@apply bg-purple-500 text-white py-8 px-4;

&.header-hero {
@apply bg-purple-500 text-white py-8 px-4;
&-dark {
@apply bg-purple-800;
}

&-dark {
@apply bg-purple-800;
}
@screen lg {
@apply py-24;
}

h1 {
@apply text-white;
}

.header-hero-items {

@screen lg {
@apply py-24;
@apply flex;
}

h1 {
@apply text-white;
}
.header-hero-item {

.header-hero-items {
// On large screens, hero items are distributed evenly with intersticial padding.

@screen lg {
@apply flex;
@apply px-4 flex-1;
}

.header-hero-item {

// On large screens, hero items are distributed evenly with intersticial padding.
&:first-of-type {
@apply pr-0;

@screen lg {
@apply px-4 flex-1;
@apply pl-0;
}

&:first-of-type {
@apply pr-0;
p {
@apply text-xl text-purple-100 leading-relaxed;
}

@screen lg {
@apply pl-0;
}
.header-hero-actions {
@apply flex flex-col items-center mt-4;

p {
@apply text-xl text-purple-100 leading-relaxed;
@screen lg {
@apply inline-flex flex-row mt-2;
}

.header-hero-actions {
@apply flex flex-col items-center mt-4;
.btn-lg {
@apply w-full text-center mb-4;

@screen lg {
@apply inline-flex flex-row mt-2;
}

.btn-lg {
@apply w-full text-center mb-4;

@screen lg {
@apply mb-0 mr-4;
}
@apply mb-0 mr-4;
}
}
}
}

&:last-of-type {
@apply text-white mt-0;
&:last-of-type {
@apply text-white mt-0;

@screen lg {
@apply pr-0;
}
@screen lg {
@apply pr-0;
}
}
}
Expand Down
49 changes: 49 additions & 0 deletions layouts/page/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,55 @@ <h4 class="{{if .bio }}cursor-pointer{{ end }} mb-0 text-gray-900" {{ if .bio }}
</div>
</section>

<!-- Investors -->
<section id="investors" class="py-16 px-4 md:px-0">
<div class="container mx-auto text-center">
<h2 class="mb-8">Pulumi Investors</h2>
<div class="inline-flex items-center">
<a class="mx-8" href="https://www.madrona.com/">
<img class="w-24" src="/logos/investors/madrona.png" alt="Madrona Venture Group logo">
</a>
<a class="mx-8" href="https://www.tolacapital.com/">
<img class="w-24" src="/logos/investors/tola.png" alt="TOLA Capital logo">
</a>
</div>
</div>
</section>

<section id="newsroom" class="bg-gray-100 py-16 px-4 md:px-0">
<div class="container mx-auto md:flex items-top max-w-5xl">
<div class="md:w/1-2 md:px-8">
<h2 class="text-center md:text-left">Press Releases</h2>
<ul class="list-none my-8 p-0">
{{ range $.Site.Data.newsroom.releases }}
<li class="py-4">
<div class="text-sm text-gray-500">{{ .date }}</div>
<h5 class="mt-2 mb-0">{{ .title }}</h5>
<a class="block my-4" href="{{ .url }}">Read more &rarr;</a>
</li>
{{ end }}
</ul>
</div>
<div class="md:w/1-2 md:px-8">
<h2 class="text-center md:text-left">Recent News</h2>
<ul class="list-none my-8 p-0">
{{ range $.Site.Data.newsroom.coverage }}
<li class="py-4 flex items-top">
<div class="w-20 flex-shrink">
<img class="inline-block w-full rounded p-2 border-2 border-gray-300" src="{{ .img }}">
</div>
<div class="pl-4 flex-1">
<div class="text-sm text-gray-500">{{ .date }}</div>
<h5 class="mt-2 mb-0">{{ .title }}</h5>
<a class="block my-2" href="{{ .url }}">Read more &rarr;</a>
</div>
</li>
{{ end }}
</ul>
</div>
</div>
</section>

<section class="bg-purple-500 py-24 text-white text-center px-4 md:px-0">
<img class="inline-block md:mx-auto" src="/images/cloud.png">
<h2 class="mt-0 text-white text-4xl">Why Pulumi?</h2>
Expand Down
2 changes: 1 addition & 1 deletion layouts/page/whitepaper.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{ define "hero" }}
<header class="header-hero">
<header class="header-hero pb-0">
<div class="header-hero-items container mx-auto">
<div class="header-hero-item">
<h1>
Expand Down
5 changes: 3 additions & 2 deletions layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@
<div class="md:flex items-top justify-between flex-wrap">

<div class="mb-6 md:w-4/12">
<a class="block mb-4" href="/">
<a class="block mt-2" href="/">
<img class="h-10 opacity-50" src="/images/logo/logo-white.svg" alt="Pulumi logo">
</a>
<a class="inline-block my-4 opacity-50 text-white text-lg" href="mailto:team@pulumi.com">team@pulumi.com</a>
<ul class="flex inline-items text-blue-300 text-2xl">
<li class="mr-4"><a class="hover:text-blue-200" href="https://twitter.com/pulumicorp" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li class="mr-4"><a class="hover:text-blue-200" href="https://www.linkedin.com/company/pulumi/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
Expand Down Expand Up @@ -46,7 +47,7 @@
</div>
</div>

<div class="text-gray-200 text-sm lg:flex items-center border-t border-purple-500 mt-4 pt-4">
<div class="text-white opacity-75 text-sm lg:flex items-center border-t border-purple-500 mt-4 pt-4">
{{/* Note: The "2006" is just how dates are formatted; it will be replaced with the current year. */}}
<p class="md:w-4/12">&copy; {{ now.Format "2006" }} Pulumi. All rights reserved.</p>

Expand Down
19 changes: 9 additions & 10 deletions layouts/partials/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<nav class="bg-black text-white text-sm py-2 px-4 md:px-0 transition-all max-h-screen md:max-h-full">
<nav class="bg-black text-white text-sm py-2 px-4 lg:px-0 transition-all max-h-screen md:max-h-full">
<div class="container mx-auto">
<ul class="flex justify-end items-center h-6">
<li class="mr-8"><a href="https://slack.pulumi.io/" target="_blank">Slack</a></li>
Expand All @@ -16,37 +16,36 @@
<a class="underline" href="/crosswalk/aws">Learn more</a>.
</div> -->

<nav class="nav-main bg-purple-700 py-6 px-4 md:px-0 border-t border-purple-500">
<nav class="nav-main bg-purple-700 py-6 px-4 lg:px-0 border-t border-purple-500">
<div class="container mx-auto">
<header class="flex items-center justify-between flex-wrap">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<a class="block" href="/">
<img class="h-10 hidden md:block" src="/images/logo/logo-inv.svg" alt="Pulumi logo">
<img class="h-10 md:hidden" src="/images/logo/logo-symbol-inv.svg" alt="Pulumi logo">
<img class="h-10 block" src="/images/logo/logo-inv.svg" alt="Pulumi logo">
</a>
</div>

<div class="nav-header-toggle block md:hidden">
<button class="flex items-center px-3 py-2 border rounded text-white border-purple">
<button class="flex items-center px-3 py-2 border rounded text-white border-purple-400 bg-purple-600">
<i class="fas fa-bars"></i>
</button>
</div>

<ul class="nav-header-items hidden w-full flex-grow md:flex md:items-center md:w-auto text-white text-xs lg:text-base uppercase pt-4 md:pt-0">
<ul class="nav-header-items hidden w-full flex-grow md:flex md:items-center md:w-auto text-white text-sm md:text-xs lg:text-sm uppercase pt-4 md:pt-0">
{{ range $.Site.Menus.header }}
<li>
{{ $active := hasPrefix $.RelPermalink .URL }}
<a href="{{ .URL }}" class="block py-2 px-4 md:px-0 md:py-0 md:px-4 md:py-2 md:mx-4 border text-sm hover:border-purple-500 hover:bg-purple-600 rounded {{ if $active }}border-purple-500 bg-purple-600{{ else }}border-purple-700{{ end }}">
<a href="{{ .URL }}" class="block py-2 px-4 md:px-0 md:py-0 md:px-4 md:py-2 my-2 md:my-0 lg:mx-4 border hover:border-purple-500 hover:bg-purple-600 rounded {{ if $active }}border-purple-500 bg-purple-600{{ else }}border-purple-700{{ end }}">
{{ .Name }}
</a>
</li>
{{ end }}

<li class="md:ml-auto md:mr-4">
<a class="block mt-4 md:mt-0 btn btn-orange-translucent" href="https://app.pulumi.com/">Sign In</a>
<li class="md:ml-auto md:mr-2 lg:mr-4">
<a class="block mt-4 md:mt-0 md:text-xs lg:text-sm btn btn-orange-translucent" href="https://app.pulumi.com/">Sign In</a>
</li>
<li>
<a class="block mt-4 md:mt-0 btn" href="https://app.pulumi.com/signup">Sign Up</a>
<a class="block mt-4 md:mt-0 md:text-xs lg:text-sm btn" href="https://app.pulumi.com/signup">Sign Up</a>
</li>
</ul>
</header>
Expand Down