Skip to content

Commit

Permalink
new styles and images for intro and hero
Browse files Browse the repository at this point in the history
  • Loading branch information
@thisisdano
thisisdano committed Dec 7, 2015
1 parent ba1c435 commit 79403f0
Show file tree
Hide file tree
Showing 5 changed files with 924 additions and 44 deletions.
97 changes: 57 additions & 40 deletions perma_web/perma/templates/landing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,18 @@
<section id="landing-introduction" class="container-fluid">
<div class="container cont-fixed">
<div class="row">
<div class="col-xs-12 col-sm-9 col-lg-8">
<h1 class="section-title">Perma.cc prevents link rot.</h1>
<div class="col-xs-12 col-sm-7 col-lg-8">
<h1 class="section-title">Websites change. <span class="_noWrap">Perma Links don’t.</span></h1>
<p class="primary-intro"><strong>Perma.cc</strong> helps <a href="#">journals</a>, <a href="#">lawyers</a>, <a href="#">courts</a>, and <a href="#">others</a> preserve web citations by creating <a href="#">permanent archives</a> of their cited links.</p>
<p class="primary-intro">Perma.cc is simple, <a href="#">free to use</a>, and is built and <a href="#">supported by libraries</a>.</p>
<p class="primary-intro _showDesktop">Perma.cc is simple, <a href="#">free to use</a>, and is built and <a href="#">supported by libraries</a>.</p>
</div>
<div class="col-xs-12 col-sm-3 col-lg-4">
<div class="col-xs-12 col-sm-5 col-lg-4">
<img src="{{ STATIC_URL }}img/websites-change-square.svg"
height="400"
width="400"
class="img-responsive primary-img"
alt="Websites change. Perma Links don’t." />
<!--
<div class="container">
<div class="row row-halfgutter">
<div class="col-xs-6 col-sm-12 col-lg-6">
Expand All @@ -29,9 +35,10 @@ <h1 class="section-title">Perma.cc prevents link rot.</h1>
</div>
</div>
</div>
-->
</div>
</div>
<div class="row">
<div class="row row-modules">
<div class="col-xs-12 _isCentered">
{% if request.user.is_authenticated %}
<a href="{% url 'create_link' %}" class="btn btn-large">Create and manage your Perma Links</a>
Expand All @@ -42,42 +49,53 @@ <h1 class="section-title">Perma.cc prevents link rot.</h1>
</div>
</div>
</div>
<div class="container-hero">

<div class="container-hero cont-bg">
<h6 class="image-hed">Perma.cc is a simple way to preserve your links</h6>
<div class="row">
<div class="col-xs-6 col-md-3">
<p class="caption-hero"><span class="num">1</span> Find any active URL.</p>
<img src="{{ STATIC_URL }}img/create-step-1.png"
height="400"
width="400"
class="img-responsive"
alt="Perma Step 2" />
<a href="#" class="link-block hero-module">
<p class="caption-hero">Find any URL.</p>
<img src="{{ STATIC_URL }}img/create-step-1.png"
height="400"
width="400"
class="img-responsive"
alt="Perma Step 2" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<p class="caption-hero"><span class="num">2</span> Add it to Perma.cc.</p>
<img src="{{ STATIC_URL }}img/create-step-2.png"
height="400"
width="400"
class="img-responsive"
alt="Perma Step 2" />
<a href="#" class="link-block hero-module">
<p class="caption-hero">Add it to Perma.cc.</p>
<img src="{{ STATIC_URL }}img/create-step-2.png"
height="400"
width="400"
class="img-responsive"
alt="Perma Step 2" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<p class="caption-hero"><span class="num">3</span> Make a permanent Perma Link archive.</p>
<img src="{{ STATIC_URL }}img/create-step-3.png"
height="400"
width="400"
class="img-responsive"
alt="Perma Step 3" />
<a href="#" class="link-block hero-module">
<p class="caption-hero">Create a Perma Link.</p>
<img src="{{ STATIC_URL }}img/create-step-3.png"
height="400"
width="400"
class="img-responsive"
alt="Perma Step 3" />
</a>
</div>
<div class="col-xs-6 col-md-3">
<p class="caption-hero"><span class="num">4</span> Cite using your Perma Link.</p>
<img src="{{ STATIC_URL }}img/create-step-4.png"
height="400"
width="400"
class="img-responsive"
alt="Perma Step 4" />
<a href="#" class="link-block hero-module">
<p class="caption-hero">Cite safely.</p>
<img src="{{ STATIC_URL }}img/create-step-4.png"
height="400"
width="400"
class="img-responsive"
alt="Perma Step 4" />
</a>
</div>
</div>
</div>

</section>

<section id="landing-problem" class="container-fluid cont-bg">
Expand Down Expand Up @@ -159,20 +177,19 @@ <h2 class="section-title">Meet the Perma Link.</h2>
<div class="col-xs-12 col-sm-6">
<h3 class="section-ah">We’re committed to preservation</h3>
<p class="section-body">Websites change, go away, and get taken down. When they do, linked citations can lead to broken, blank, unintentional, or even malicious pages. This decay is called “link rot.” Perma.cc helps scholars, journals and courts prevent link rot by creating permanent, reliable, unalterable links to the online sources cited in their work.</p>
<ul class="section-list">
<li class="section-list-item"><a class="outside" href="#"><strong>What is a Perma archive?</strong></a></li>
<li class="section-list-item"><a class="outside" href="#"><strong>How long do Perma Links last?</strong></a></li>
<li class="section-list-item"><a class="outside" href="#"><strong>What about protected content?</strong></a></li>
<li class="section-list-item"><a class="outside" href="#"><strong>What are Perma.cc’s long-term plans for these links?</strong></a></li>
<li class="section-list-item"><a class="outside" href="#"><strong>What’s you privacy policy?</strong></a></li>
</ul>
<a href="{% url 'docs_perma_link_creation' %}" class="btn btn-small">All about Perma Links</a>
<a href="{% url 'docs_faq' %}" class="btn btn-small">Frequently asked questions</a>
</div>
<div class="col-xs-12 col-sm-6">
<h3 class="section-ah">Websites change. Perma Links don’t.</h3>
<h3 class="section-ah">Frequently asked questions</h3>
<p class="section-body">Once you capture a Perma Link, neither its content nor its address will change, no matter what happens to the original link.</p>
<img src="{{ STATIC_URL }}img/websites-change.svg" height="400" width="400" class="img-responsive" alt="Websites change." />
<ul class="section-list">
<li class="section-list-item"><a class="outside" href="#"><strong>What is a Perma archive?</strong></a></li>
<li class="section-list-item"><a class="outside" href="#"><strong>How long do Perma Links last?</strong></a></li>
<li class="section-list-item"><a class="outside" href="#"><strong>What about protected content?</strong></a></li>
<li class="section-list-item"><a class="outside" href="#"><strong>What are Perma.cc’s long-term plans for these links?</strong></a></li>
<li class="section-list-item"><a class="outside" href="#"><strong>What’s your privacy policy?</strong></a></li>
</ul>
<a href="{% url 'docs_faq' %}" class="btn btn-small">More questions? Get more answers.</a>
</div>
</div>
</div>
Expand Down
73 changes: 69 additions & 4 deletions perma_web/static/css/style-responsive.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -388,6 +388,14 @@ p {
}
}

._showDesktop {
display: none;
@include respond-desktop {
display: block;
}
}


._soleContent {
margin-bottom: $double;
}
Expand Down Expand Up @@ -4196,8 +4204,37 @@ section {
#landing-introduction {
@include respond-desktop {
padding-top: $grid * 4;
//padding-bottom: $grid * 10;
padding-bottom: 0;
}
padding-bottom: $grid * 5;
.row-modules {
@include respond-desktop {
margin-top: $grid * 7;
}
}
}

h6.image-hed {
padding-bottom: $half;
font-size: 24px;
display: inline-block;
border-bottom: 2px solid $color-blue;
margin-bottom: $grid * 5;
padding-top: 0;
color: $color-blue;
font-weight: 900;
font-family: $font-hed-alt;
}

.primary-img {
@include respond-tablet {
padding-top: $half;
padding-right: $double;
}
@include respond-tablet {
padding-top: 0;
}
padding-bottom: 0;
}

.cont-subsection {
Expand All @@ -4213,17 +4250,22 @@ section {
@extend .style-container;
max-width: 1800px;
margin: 0 auto;
padding: $grid * 8 $grid * 8 0;
padding: $grid * 4 $grid * 8 0;
border-top: 1px solid $color-blue;
margin-top: $grid * 8;
border-bottom: 1px solid $color-blue;
text-align: center;
}

p.caption-hero {
font-family: $font-hed-alt;
color: $color-blue;
font-weight: 700;
font-size: 13px;
font-weight: 300;
font-size: 21px;
padding-bottom: $grid;
margin-bottom: 0;
position: relative;
text-align: center;
span.num {
display: inline-block;
padding: 0;
Expand All @@ -4240,6 +4282,13 @@ p.caption-hero {
}
}

a:hover {
p.caption-hero {
//color: $color-black;
//font-weight: 700;
}
}

.primary-intro {
font-family: $font-hed-alt;
font-size: 18px;
Expand All @@ -4262,10 +4311,14 @@ p.caption-hero {
}
@include respond-tablet {
font-size: 28px;
line-height: 1.6;
&:last-child {
padding-bottom: $grid * 4;
}
}
@include respond-desktop {
line-height: 1.5;
}
@include respond-wide {
font-size: 32px;
}
Expand All @@ -4275,6 +4328,18 @@ p.caption-hero {
overflow: auto;
}

h1.section-title {
@include respond-tablet {
line-height: 1.2;
font-size: 40px;
padding-bottom: 12px;
}
@include respond-desktop {
font-size: 36px;
padding-bottom: 0;
}
}

.section-title {
color: $color-black;
font-size: 20px;
Expand Down
Loading

0 comments on commit 79403f0

Please sign in to comment.