background image pattern using SCSS mixin
A Pen by digital-doodle on CodePen.
background image pattern using SCSS mixin
A Pen by digital-doodle on CodePen.
$(".fitTxt").fitText(1.15); |
<header> | |
<hgroup> | |
<h1 class="fitTxt">Lorem Ipsum</h1> | |
</hgroup> | |
<nav> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">News</a></li> | |
<li><a href="#">Contact</a></li> | |
</ul> | |
</nav> | |
</header> | |
<section> | |
<article> | |
<div> | |
<h3 class="fitTxt">Lorem ipsum dolor</h3> | |
<figure> | |
<img src="http://placehold.it/300x300/3366cc/fefefe&text=Image"> | |
<figcaption>....</figcaption> | |
</figure> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | |
</div> | |
</article> | |
</section> | |
<footer> | |
<p><a href="http://digital-doodle.me" target="_blank">experimenting</a> with <a href="http://fittextjs.com/" target="_blank">FitTextjs</a> FitText</p> | |
</footer> | |
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700); | |
$base-font:'Droid Sans', sans-serif; | |
$img_url:'http://digital-doodle.me/wp-content/themes/digital-doodle/images/pattern-block.png'; | |
$colour:#60D4AE; | |
%letterpress { | |
text-shadow: 0px 1px 1px shade($colour, 80%); | |
color: adjust-hue($colour, 30%); | |
font:{ | |
size: 5em; | |
family: $base-font; | |
weight: 700; | |
} | |
} | |
@mixin bgimage($image, $colour){ | |
background:{ | |
color:$colour; | |
image:image:url($image); | |
} | |
} | |
body{ | |
@include bgimage($img_url, $colour); | |
font-family:$base-font; | |
} | |
header{ | |
background-color:adjust-hue($colour, 30%); | |
max-width:100%; | |
margin:0 auto; | |
h1{ | |
@extend %letterpress; | |
text-align:center; | |
display:block; | |
text-transform:uppercase; | |
} | |
} | |
footer{ | |
max-width:100%; | |
display:block; | |
padding:2% 5%; | |
margin:0 auto; | |
background-color:adjust-hue($colour, 30%); | |
p{ | |
text-align:center; | |
color:shade($colour, 40%); | |
} | |
a{ | |
@extend p; | |
text-decoration:none; | |
&:hover{ | |
color:tint($colour, 100%); | |
text-decoration:underline; | |
} | |
} | |
} | |
div { | |
max-width:calc(100% / 3); | |
margin:0 auto; | |
display:block; | |
padding:2em; | |
background-color:adjust-hue($colour, 10%); | |
color:tint($colour, 100%); | |
h3{ | |
text-align:center; | |
font-size:2em; | |
text-transform:uppercase; | |
} | |
img{ | |
width:100%; | |
max-width:100%; | |
overflow:hidden; | |
} | |
} | |
/*-----------menu items--------------------------*/ | |
nav{ | |
display:block; | |
padding:0; | |
margin:0; | |
background-color:adjust-hue($colour, 65%); | |
ul{ | |
width:100%; | |
display:block; | |
padding:0; | |
margin:0; | |
li{ | |
float:left; | |
list-style-type:none; | |
width:(100% / 4); | |
background-color:adjust-hue($colour, 65%); | |
padding:3em 0; | |
text-align:center; | |
&:hover{ | |
background-color:tint($colour, 65%); | |
a{color:shade($colour,65%);} | |
} | |
a{ | |
text-decoration:none; | |
color:tint($colour, 80%); | |
text-align:underline; | |
&:hover{ | |
colour:shade($colour, 80%); | |
text-decoration:underline; | |
} | |
} | |
} | |
} | |
} | |
footer{ | |
max-width:100%; | |
display:block; | |
padding:2% 5%; | |
margin:0 auto; | |
background-color:adjust-hue($colour, 30%); | |
p{ | |
text-align:center; | |
color:shade($colour, 40%); | |
} | |
a{ | |
@extend p; | |
text-decoration:none; | |
&:hover{ | |
color:tint($colour, 100%); | |
text-decoration:underline; | |
} | |
} | |
} |