<main>
<section id="menu" class="close">
<nav role='navigation'>
<ul>
<li id="btn-menu"><a><i class="fa fa-bars fa-lg"></i></a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</section>
<section id="content">
<section id="article-cover">
<div class="hero-photo"></div>
<div id="article-details">
<div class="article-details-wrapper responsive">
<div class="article-category"><a href="#">Kategoria</a></div>
<h1 class="article-title">Kahden Rivin Title</h1>
<div class="article-abstract">Tämä on ingressi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea veniam aperiam, molestiae earum cumque ad maiores facilis. Fuga ab odio, reiciendis obcaecati dolor, accusantium eos similique quis quasi officia, ipsum.</div>
<div class="article-byline">Text: <strong>Kirjoittajan Nimi</strong></div>
<div id="read-more" class="responsive">
<a href="#article-body">Lue Lisää<i class="fa fa-angle-double-down fa-2x"></i></a>
</div>
</div>
</div>
</section>
<section id="article-body" class="responsive">
<div class="article-copy dropcap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet quam id metus interdum congue quis eget sapien. Maecenas non viverra urna. Aliquam ante felis, mattis eu purus at, scelerisque consectetur turpis. Fusce nec mollis purus. Aenean viverra, odio eget tempus lobortis, nulla odio aliquam mauris, ornare rutrum turpis mauris a sem. Integer in magna sed nisi varius fringilla pellentesque quis neque. Etiam ac placerat purus, quis suscipit nisl. Mauris dolor ipsum, volutpat at placerat in, lacinia non velit. Ut at nisl nec ipsum pharetra luctus.
</p>
<p>
Proin imperdiet luctus quam, vitae pellentesque mauris tincidunt nec. Sed vestibulum nulla sed lacinia porttitor. In convallis sodales erat sit amet cursus. Morbi suscipit, metus sed luctus sollicitudin, tellus eros rhoncus orci, sed molestie tellus quam at metus. Nullam blandit enim velit, a rutrum nulla fermentum at. Donec feugiat commodo purus ut efficitur. Cras urna dolor, luctus nec velit non, maximus aliquet tellus.
</p>
<aside class="article-sidebar">
<h3>Sidebar Title</h3>
<h4>Sidebar Subtitle</h4>
<ol>
<li>
<div class="sidebar-list-item">
<h5>Ensimmäisen pointin otsikko</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</li>
<li>
<div class="sidebar-list-item">
<h5>Otsikko</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</li>
<li>
<div class="sidebar-list-item">
<h5>Otsikko</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</li>
</ol>
</aside>
<p>Integer quis elit bibendum, placerat lorem non, fermentum velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at imperdiet elit, quis commodo odio. Nunc ultrices nulla vitae tincidunt congue. Praesent ut varius felis. Vivamus mollis, tellus nec tempus lacinia, ante risus convallis tellus, ac vestibulum lectus lorem quis neque. Etiam mauris mauris, malesuada vitae odio quis, pulvinar accumsan nisl. Aenean erat nisi, condimentum sit amet porttitor a, ultrices ut neque.</p>
<p>
Vestibulum condimentum ullamcorper hendrerit. Donec vel lacinia tellus. Proin et justo feugiat, ornare nibh et, ullamcorper turpis. Morbi a lacus vulputate, aliquam justo id, rutrum dui. Suspendisse sodales, nulla eu egestas ultrices, turpis magna mattis sapien, id ornare arcu nulla vitae metus. <span class="pullquote">Ut cursus augue in arcu fermentum, ut facilisis est fermentum.</span> Vestibulum volutpat, ante sagittis feugiat elementum, metus massa vestibulum nulla, at lacinia quam tortor nec augue.
</p>
<p>
Aenean id consectetur magna, in volutpat odio. Nunc vulputate, nisi vitae facilisis ultrices, ligula urna laoreet elit, eu fermentum diam neque et purus. Nullam vel nibh turpis. Nulla facilisi. Proin a pretium arcu. Nullam gravida non lectus non venenatis. Aenean quis luctus elit, ut tempus leo.
</p>
<p>
Morbi semper orci velit, ut fringilla mi ultrices quis. Sed at venenatis risus. Quisque ligula nunc, auctor tempor dolor a, pellentesque ornare risus. Suspendisse iaculis condimentum ipsum a scelerisque. Nam ut laoreet nisl. Maecenas ornare eros vel mauris fringilla convallis. Integer scelerisque erat arcu, quis pellentesque augue venenatis quis. Etiam non facilisis libero. Fusce a tincidunt massa. Pellentesque vitae nibh dictum, congue purus vel, feugiat nisi.
</p>
<p>
Donec congue finibus tellus et consequat. Nam sed nisl accumsan, congue tortor sed, dapibus mi. Cras at eros volutpat, ultricies mi sed, maximus leo. Aliquam erat volutpat. Phasellus faucibus ex eget mi cursus, ut placerat mauris luctus. Vestibulum et tempor nisi, id ultricies dolor. Praesent mollis tristique nisi nec vestibulum. In eu imperdiet felis. Nunc ultricies ultricies odio id vehicula. Integer ut placerat orci, quis finibus enim. Curabitur eleifend, nulla vitae fringilla blandit, felis tortor molestie erat, sit amet laoreet dolor purus sit amet ipsum. Nulla a fringilla lacus. Donec faucibus nisi ipsum, at efficitur leo accumsan at. Nam pharetra, odio id euismod venenatis, felis felis tristique neque, ut sodales purus est eu arcu.
</p>
<p>
Donec orci urna, volutpat auctor sagittis sed, tincidunt eget urna. Vestibulum efficitur sem magna, quis consectetur dui mattis eget. Aliquam arcu nulla, rhoncus rutrum suscipit sed, tempor in lorem. Pellentesque auctor magna ac malesuada aliquet. Sed auctor lorem maximus facilisis vulputate. Nullam eu tempor nisl. Maecenas porta gravida dictum. Nullam efficitur augue in libero elementum, eget gravida velit fermentum.
</p>
<p>
Morbi posuere at dui in tempor. Aliquam pulvinar auctor lobortis. Nullam posuere suscipit consectetur. Donec sed finibus nulla, sed finibus dui. Phasellus gravida est nulla, quis rhoncus arcu gravida quis. Mauris ultrices congue velit, vel tincidunt nibh sollicitudin in. Duis pulvinar eget dolor sed dapibus. Curabitur in luctus augue.
</p>
<p>
Nulla facilisi. Nunc ac eros augue. Fusce finibus sapien nisi, id pretium erat venenatis sed. Donec elementum egestas volutpat. Donec ullamcorper vitae nulla eu posuere. Aenean euismod justo et placerat feugiat. Praesent sit amet ante purus. <span class="pullquote">Nunc imperdiet mollis interdum.</span> Fusce gravida, libero lacinia faucibus pellentesque, nibh leo varius velit, quis tristique neque justo nec justo. Etiam sagittis ex ac mi dapibus dapibus. Donec et arcu blandit, aliquet sem eu, commodo mi.
</p>
</div>
</section>
<section id="article-images">
<figure>
<img src="http://placehold.it/1400x675"/>
<figcaption>Kuvateksti ensimmäiselle kuvalle.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/1400x675"/>
<figcaption>Kuvateksti toiselle kuvalle.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/1400x675"/>
<figcaption>Kuvateksti kolmannelle kuvalle.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/1400x675"/>
<figcaption>Kuvateksti neljännelle kuvalle.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/1400x675"/>
<figcaption>Kuvateksti viidennelle kuvalle.</figcaption>
</figure>
</section>
</section>
</main>
@import url(https://fonts.googleapis.com/css?family=Halant:400,500,300,600,700|Josefin+Sans:400,100italic,100,300,300italic,400italic,600,600italic,700|Playfair+Display:400,400italic,700,700italic,900,900italic)
$font-title: 'Josefin Sans', sans-serif
$font-sans: 'Josefin Sans', sans-serif
$font-serif: 'Playfair Display', serif
$font-paragraph: 'Halant', serif
$font-drop-cap: 'Playfair Display', serif
$color-very-dark: #000000
$color-dark: #808080
$color-medium: #cccccc
$color-light: #f5f5f5
$color-very-light: #ffffff
$tablet-width: 768px
$desktop-width: 1024px
@mixin tablet
@media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px})
@content
@mixin desktop
@media (min-width: #{$desktop-width})
@content
figure
margin: 0
body
font-size: 26px
@include tablet
font-size: 18px
@include desktop
font-size: 10px
.responsive
margin: 0 auto
width: 95%
@include tablet
width: 90%
@include desktop
width: 1024px
main
#menu
height: 100vh
position: fixed
z-index: 2000
overflow: hidden
&.close
li
width: 60px
transition: width 500ms ease-in-out
&:nth-of-type(2)
width: 0
transition: width 420ms ease-in-out
&:nth-of-type(3)
width: 0
transition: width 360ms ease-in-out
&:nth-of-type(4)
width: 0
transition: width 320ms ease-in-out
&:nth-of-type(5)
width: 0
transition: width 300ms ease-in-out
a
margin-right: 10em
nav
ul, li
list-style: none
margin: 0
padding: 0
li
width: 150px
border-bottom: 1px solid $color-dark
text-align: right
height: 50px
background: $color-very-light
transition: width 500ms ease-in-out
&#btn-menu a
margin-right: 1em
&:nth-of-type(2)
transition: width 420ms ease-in-out
&:nth-of-type(3)
transition: width 360ms ease-in-out
&:nth-of-type(4)
transition: width 320ms ease-in-out
&:nth-of-type(5)
transition: width 300ms ease-in-out
a
position: absolute
right: 0
font-size: 2em
font-family: $font-sans
text-transform: uppercase
text-decoration: none
color: $color-very-dark
line-height: 2.4em
margin-right: 1em
&:hover
li
border-bottom: 1px solid $color-dark
a
color: $color-medium
#content
#article-cover
width: 100%
.hero-photo
height: 100vh
overflow: hidden
background: url(https://40.media.tumblr.com/0ffc52f37ac317fcd870e7a2c6b06fbf/tumblr_nbpb0sdTpR1rlusy7o1_1280.jpg) no-repeat center center fixed
background-size: cover
.article-details-wrapper
background: rgba(0,0,0,0.5)
#article-details
width: 100%
position: fixed
top: 0
margin: 3em 0 3em 0
text-align: center
&.stuck
position: relative
.article-category
a
font-family: $font-sans
font-weight: 200
font-style: normal
font-size: 2.5em
text-transform: lowercase
text-decoration: none
color: $color-medium
display: inline-block
margin: 1.45em 0 1.5em
h1.article-title
font-family: $font-title
font-weight: 100
font-style: italic
font-size: 6.2em
line-height: 0.9em
text-transform: uppercase
letter-spacing: 0.05em
color: $color-very-light
margin: 0px
margin-bottom: 0.4em
& > span:last-child
font-family: $font-title
font-weight: 700
font-style: normal
font-size: 3em
line-height: 1em
text-transform: uppercase
display: block
letter-spacing: 0.05em
word-spacing: 0.05em
.article-abstract
font-family: $font-sans
font-weight: 300
font-style: normal
font-size: 2.8em
line-height: 1.45em
color: $color-light
display: block
text-transform: uppercase
letter-spacing: 0.05em
margin-bottom: 1em
padding: 0 10%
.article-byline
font-family: $font-sans
font-weight: 300
font-style: normal
font-size: 2.0em
color: $color-medium
display: block
padding-bottom: 0.8em
& strong
font-style: italic
font-weight: 400
#read-more
padding: 2em 0
height: 100%
text-align: center
&.stuck
display: none
a
font-family: $font-sans
font-weight: 300
font-style: normal
font-size: 2em
text-transform: uppercase
text-decoration: none
display: inline-block
a, i
display: block
color: $color-medium
#article-body
text-align: justify
font-family: $font-paragraph
font-weight: 400
font-size: 1.6em
line-height: 1.571em
.article-copy
p
margin: 0 0 1.571em 0
&.dropcap:first-letter
font-family: $font-drop-cap
font-weight: 500
font-style: normal
font-size: 15.3em
color: $color-very-dark
float: left
line-height: 0.7em
margin: 0 0.09em 0.1em 0
.article-sidebar
float: right
height: 100%
width: 50%
padding: 2em
margin: 0 0 1em 2.6em
text-align: left
background: $color-light
@include desktop
width: 30%
h3
margin: 0 0.8em
font-family: $font-serif
font-weight: 500
font-style: normal
font-size: 2.3em
line-height: 1em
text-transform: uppercase
color: $color-very-dark
text-align: center
padding: 0.4em 0 0.3em
border-top: 2px solid $color-very-dark
border-bottom: 2px solid $color-very-dark
h4
font-family: $font-sans
font-weight: 400
font-style: normal
font-size: 1.09em
line-height: 1.2em
text-transform: uppercase
color: $color-dark
margin: 1.2em 1.65em
display: block
text-align: center
ol
padding: 0px
margin: 1.2em
li
list-style-type: none
counter-increment: step-counter
overflow: hidden
margin: 0px 0px 2.5em
ol li:before
content: counter(step-counter)
font-family: $font-serif
font-size: 4.47em
line-height: 1em
color: $color-very-dark
margin: -0.06em 6px 0.05em 0px
display: inline-block
.sidebar-list-item
width: 80%
float: right
&:after
content: " "
width: 10em
display: block
position: absolute
border-bottom: 1px solid $color-medium
h5
margin: 0 0 0.2em
font-family: $font-serif
font-weight: 500
font-style: normal
font-size: 1.27em
text-transform: uppercase
p
font-family: $font-sans
font-style: normal
margin-bottom: 0.4em
.pulledquote
display: block
font-family: $font-sans
color: $color-dark
font-weight: 500
font-style: normal
text-transform: uppercase
text-align: center
margin: 0 0 2em 0
&:before
width: 100%
content: "\201C"
font-family: $font-serif
font-size: 8em
position: relative
top: 0.48em
left: 20%
color: $color-light
z-index: -1
#article-images
img
width: 100%
height: auto
overflow: hidden
figcaption
font-family: $font-serif
font-weight: 400
font-style: normal
font-size: 1.2em
line-height: 1.4em
text-align: center
margin: 0px auto
border-bottom: 1px solid #000
padding: 1.5em 0px 2.5em
#article-images ul
list-style: none
position: absolute
width: 100%
text-align: center
bottom: 0
.slick-dots
position: absolute
bottom: 7em
display: block
width: 100%
padding: 0
list-style: none
text-align: center
.slick-dots li
position: relative
display: inline-block
width: 20px
margin: 0 5px
padding: 0
cursor: pointer
.slick-dots li button
font-size: 0
line-height: 0
display: block
width: 20px
height: 20px
padding: 5px
cursor: pointer
color: transparent
border: 0
outline: none
background: transparent
&:before
font-family: FontAwesome
font-size: 6px
line-height: 20px
position: absolute
top: 0
left: 0
width: 20px
height: 20px
content: "\f111"
text-align: center
opacity: .25
color: black
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
.slick-prev, .slick-next
font-family: FontAwesome
position: absolute
top: 30%
z-index: 2
color: transparent
background: transparent
border: none
outline: none
.slick-prev:before, .slick-next:before
font-size: 200px
line-height: 1
opacity: .25
color: white
-webkit-font-smoothing: antialiased
.slick-prev
left: -5px
&:before
content: "\f104"
.slick-next
right: -25px
&:before
content: "\f105"
li.slick-active button:before
opacity: .75
color: black
View Compiled
(function() {
'use strict'
var $ = window.jQuery
var Waypoint = window.Waypoint
function Sticky(options) {
this.options = $.extend({}, Waypoint.defaults, Sticky.defaults, options)
this.element = this.options.element
this.$element = $(this.element)
this.createWrapper()
this.createWaypoint()
}
Sticky.prototype.createWaypoint = function() {
var originalHandler = this.options.handler
this.waypoint = new Waypoint($.extend({}, this.options, {
element: this.wrapper,
handler: $.proxy(function(direction) {
var shouldBeStuck = this.options.direction.indexOf(direction) > -1
var wrapperHeight = shouldBeStuck ? this.$element.outerHeight(true) : ''
this.$wrapper.height(wrapperHeight)
this.$element.toggleClass(this.options.stuckClass, shouldBeStuck)
if (originalHandler) {
originalHandler.call(this, direction)
}
}, this)
}))
}
Sticky.prototype.createWrapper = function() {
if (this.options.wrapper) {
this.$element.wrap(this.options.wrapper)
}
this.$wrapper = this.$element.parent()
this.wrapper = this.$wrapper[0]
}
Sticky.prototype.destroy = function() {
if (this.$element.parent()[0] === this.wrapper) {
this.waypoint.destroy()
this.$element.removeClass(this.options.stuckClass)
if (this.options.wrapper) {
this.$element.unwrap()
}
}
}
Sticky.defaults = {
wrapper: '<div class="sticky-wrapper" />',
stuckClass: 'stuck',
direction: 'down right'
}
Waypoint.Sticky = Sticky
}())
;
$(function() {
$('span.pullquote').each(function() {
var $parentParagraph = $(this).parent('p');
$(this).clone()
.addClass('pulledquote')
.appendTo($parentParagraph);
});
$(".article-details-wrapper").fitText(10, { minFontSize: '7px' });
$("span.pulledquote").fitText(4.2, { minFontSize: '13px' });
$(".article-sidebar").fitText(2, { minFontSize: '9.5px' });
$('h1.article-title').lettering('words')
$( "#article-cover" ).css( "height", function () {
return (this.bottom = $('.hero-photo').outerHeight(true)+$('#article-details').outerHeight(true))
}
);
});
var sticky = new Waypoint.Sticky({
element: $('#article-details')[0]
})
var sticky = new Waypoint.Sticky({
element: $('#read-more')[0]
})
$('#article-images').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
$('#read-more').localScroll();
$( "#btn-menu" ).click(function() {
$( "#menu" ).toggleClass( "close" );
});
