ResiLien
/
terraform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Latest Section (#12151) 

* enhance latest web section

* final cleanup

* lowercase w
This commit is contained in:
Jonathan Thomas 2017-02-23 11:25:19 -08:00 committed by Paul Stack
parent 229a1343b4
commit 9f826dcdab
5 changed files with 163 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/source/assets/images/webinar-image.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
website/source/assets/images/webinar-image@2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

32
website/source/assets/stylesheets/_buttons.scss
View File

@ -30,6 +30,13 @@
border: 2px solid $purple;
}
&.small-outline-btn{
font-size: 16px;
padding: 0px 15px 3px 10px;
letter-spacing: 0;
border: 2px solid rgba(255, 255, 255, .7);
}
&:hover{
color: $white;
background-color: rgba(255, 255, 255, .2);
@ -41,6 +48,31 @@
}
}
.simple-btn{
position: relative;
display: inline-block;
// Extra 3px of bottom padding compensates for ::after content
background-color: transparent;
color: $white;
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
text-decoration: none !important;
@include transition(color .3s ease-in-out);
&::after {
font-size: 1.2em;
content: "»";
position: relative;
left: 5px;
}
&:hover{
color: rgba(255, 255, 255, .4);
@include transition(color .3s ease-in-out);
}
}
.terra-btn{
position: relative;
display: inline-block;

94
website/source/assets/stylesheets/_home.scss
View File

@ -434,13 +434,69 @@ body.page-home {
#latest-announcement{
position: relative;
margin-top: -80px;
padding: 240px 0 160px;
padding: 160px 0 200px;
color: $white;
text-align: center;
text-align: left;
>.container{
z-index: 51;
}
h2{
margin-bottom: 60px;
}
.latest-col-right{
position: relative;
padding-left: 60px;
&:after{
content: '';
position: absolute;
left: 30px;
top: 0;
width: 2px;
height: 100%;
background-color: rgba(255, 255, 255, .15);
}
}
.latest-item{
&.latest-item-text{
border-bottom: 2px solid rgba(255, 255, 255, .15);
&:first-child{
h3{
margin-top: 0;
}
}
&:last-child{
border-bottom: none;
}
}
img{
box-shadow: 8px 8px 8px rgba(0,0,0,.25);
margin-bottom: 10px;
max-width: 100%;
}
h3{
line-height: 1.2;
font-family: $font-family-open-sans;
text-transform: none;
}
p{
margin-bottom: 10px;
}
a{
margin-top: 5px;
margin-bottom: 10px;
}
}
}
#latest-announcement-bg{
@ -552,7 +608,7 @@ body.page-home {
#latest-announcement{
margin-top: -140px;
padding: 320px 0 180px;
padding: 180px 0 240px;
}
#enterprise-intro{
@ -563,7 +619,6 @@ body.page-home {
@media (max-width: 992px) {
#demos{
.terminals{
.terminal-item{
@ -580,6 +635,37 @@ body.page-home {
}
}
}
#latest-announcement{
.latest-col-left{
.latest-item{
border-bottom: 2px solid rgba(255, 255, 255, .15);
}
}
.latest-col-right{
padding-left: 15px;
&:after{
width: 0;
}
}
.latest-item{
padding-bottom: 30px;
margin-bottom: 30px;
&.latest-item-text{
border-bottom: 2px solid rgba(255, 255, 255, .15);
&:first-child{
h3{
margin-top: 20px;
}
}
}
}
}
}
@media (max-width: 768px) {

56
website/source/index.html.erb
View File

@ -156,6 +156,46 @@
<div class="feature-skew" id="feature-create-bg"></div>
</div> <!-- /feature -->
<div class="skew-item" id="latest-announcement">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-11 col-sm-12">
<h2>Latest</h2>
</div>
<div class="latest-col latest-col-left col-md-4 col-md-offset-1 col-sm-12">
<div class="latest-item">
<img src="<%= image_path('webinar-image.jpg') %>" srcset="<%= image_path('webinar-image@2x.jpg') %> 2x, <%= image_path('webinar-image.jpg') %> 1x">
<h3 class="latest-title">Join the live webinar to learn about provisioning Microsoft Azure with HashiCorp Terraform and see a demo</h3>
<p>
<a class="outline-btn small-outline-btn" href="http://hashi.co/2lJIzDl">Register Now</a>
</p>
</div>
</div>
<div class="latest-col latest-col-right col-md-6 col-sm-12">
<div class="latest-item latest-item-text">
<h3 class="latest-title">Terraform 0.8 Released</h3>
<p class="lower-opacity">
Terraform continues to be HashiCorp's fastest growing project. Read the highlights from the 0.8 release
</p>
<p>
<a class="outline-btn small-outline-btn" href="https://www.hashicorp.com/blog/terraform-0-8.html">Read more</a>
</p>
</div>
<div class="latest-item latest-item-text">
<h3 class="">Applying Graph Theory to Infrastructure As Code</h3>
<p class="lower-opacity">
Watch this talk from HashiConf 2016 where we explore the graph theory at the heart of Terraform's orchestration engine.
</p>
<p>
<a class="outline-btn small-outline-btn" href="https://www.youtube.com/watch?v=4Pd9NrZSbGU">Watch Video</a>
</p>
</div>
</div>
</div>
</div><!-- /.container -->
<div class="feature-skew" id="latest-announcement-bg"></div>
</div><!-- /#latest-announcement -->
<div class="skew-item" id="demos">
<div class="container">
<div class="terminals row">
@ -248,20 +288,6 @@
<div class="feature-skew" id="demo-bg"></div>
</div><!-- /#demos -->
<div class="skew-item" id="latest-announcement">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p class="lead"><strong>Latest:</strong> We’ve released Terraform 0.8!</p>
<p>
<a class="outline-btn" href="https://www.hashicorp.com/blog/terraform-0-8.html">Read more</a>
</p>
</div>
</div>
</div><!-- /.container -->
<div class="feature-skew" id="latest-announcement-bg"></div>
</div><!-- /#latest-announcement -->
<div class="skew-item" id="enterprise-intro">
<div class="container">
<div class="row">
@ -276,4 +302,4 @@
</div>
</div><!-- / .container -->
<div class="feature-skew" id="enterprise-intro-bg"></div>
</div><!-- / #latest-announcement -->
</div><!-- / #enterprise-intro -->