Skip to content

Instantly share code, notes, and snippets.

@danhere

danhere/main.sass

Created March 14, 2012 16:44
Show Gist options
  • Save danhere/2037786 to your computer and use it in GitHub Desktop.
Save danhere/2037786 to your computer and use it in GitHub Desktop.
Download ZIP
Oasis Sass
Raw
main.sass
//Live
$images: "../../img/oasis";
//Local
//$images: "../img";
//===================//
// Standard styles //
//===================//
$body: #333;
$fonts: "Merriweather, Georgia, Times New Roman, serif";
$shadow: #fbf9de;
h2, h3, h4{
color:$body;
font-family: #{$fonts};
text-shadow: 0 2px $shadow;
}
a:hover{
color: #fff;
}
h2{
font-size: 36px;
font-weight: 900;
}
h3{
font-weight:800;
font-size:22px;
}
h4{
font-size:20px;
}
p{padding-top:15px;}
p, div{
color: $body;
font-family: #{$fonts};
font-weight: 400;
font-size: 18px;
line-height: 26px;
//text-shadow: 0 1px 0px #fcfae0;
}
hr{
margin: 0 auto;
width:95%;
height:1px;
border-left:none;
border-right: none;
border-top: 1px solid $body;
border-bottom:1px solid $body;
}
//=========================//
// End Basic Styles //
// Begin Page Styles //
//=========================//
#sunrise{
width:100%;
float:left;
background:url("#{$images}/sunrise.jpg") repeat-x 0% 100%;
position:absolute;
top:0;
left:0;
height:160px;
}
body{
background: url('#{$images}/back.jpg') repeat;
-webkit-font-smoothing: subpixel-antialiased;
}
header{
}
#logo{
background: url('#{$images}/logo.png') no-repeat top center;
height:240px;
text-indent: -9991px;
margin-top:30px;
}
#banner{
background: url('#{$images}/banner.png') no-repeat center center;
height: 70px;
font-weight: 900;
font-size: 34px;
text-align:center;
padding-top: 18px;
text-shadow: 0 1px #f0f0f0;
position: relative;
top:165px;
}
.intro{
padding-top:25px;
}
.calltoday{
margin-top:20px;
width:100%;
text-align:center;
float: left;
font-weight:900;
font-size: 20px;
background: rgb(255, 255, 255);
background: rgba(255 ,255 ,255, 0.5);
border-radius: 5px;
padding: 10px 0;
}
#letter{
background: url("#{$images}/letter.png") no-repeat top left;
height: 300px;
margin-top:15px;
p{
font: 18px "Handlee";
padding: 15px 25px 0px 20px;
}
#sue{
line-height:50px;
font-size:24px;
}
}
#clipped{
background: url("#{$images}/clipped.png") no-repeat;
width:165px;
height:170px;
float:right;
position: relative;
bottom:75px;
}
#learnmore h2{
position:relative;
top:15px;
}
//
//Form Stuff
//
form input.input-text{
width:200px;
margin-left:10px;
margin-bottom:17px;
float:left;
border-radius: 5px;
border: 1px solid #e5ddaa;
font-size:16px;
height:24px;
background-color: #f0f0f0;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(240, 240, 240)), to(rgb(250, 250, 250)));
background-image: -webkit-linear-gradient(top, rgb(240, 240, 240), rgb(250, 250, 250));
background-image: -moz-linear-gradient(top, rgb(240, 240, 240), rgb(250, 250, 250));
background-image: -o-linear-gradient(top, rgb(240, 240, 240), rgb(250, 250, 250));
background-image: -ms-linear-gradient(top, rgb(240, 240, 240), rgb(250, 250, 250));
background-image: linear-gradient(top, rgb(240, 240, 240), rgb(250, 250, 250));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f0f0f0', EndColorStr='#fafafa');
}
form textarea{
@extend input.input-text;
width:418px;
height:80px;
color:#999;
&:focus{
color:#000;
}
}
form label{
display:none;
}
.lt-ie9 {
form label{
width:90px;
display:block;
float:left;
margin-left:10px;
}
form input{
width:100%;
float:left;
}
}
button{
@extend .learnbutton;
padding: 10px 10px;
width:200px;
font: 700 18px #{$fonts};
color:white;
text-shadow: 0 1px 0 #111;
&:active{
background-color: #519c1a;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(81, 156, 26)), to(rgb(106, 203, 37)));
background-image: -webkit-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
background-image: -moz-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
background-image: -o-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
background-image: -ms-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
background-image: linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#519c1a', EndColorStr='#6acb25');
}
&:hover{
cursor: pointer;
}
}
#whyoasis{
position:relative;
bottom:40px;
}
#whyoasis ul li{
background: url("#{$images}/check.jpg") no-repeat center left;
padding-left: 55px;
}
.custombutton{
text-align:center;
a{
padding: 7px 0;
display: block;
font-weight:600;
color:white;
font-size:14px;
text-shadow: 0 1px 0px #111;
}
}
.bluebutton{
@extend .custombutton;
border:1px solid #1174bf;
box-shadow: 0 0 0px 1px #47aff9 inset;
background-color: #1997fa;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(25, 151, 250)), to(rgb(17, 116, 190)));
background-image: -webkit-linear-gradient(top, rgb(25, 151, 250), rgb(17, 116, 190));
background-image: -moz-linear-gradient(top, rgb(25, 151, 250), rgb(17, 116, 190));
background-image: -o-linear-gradient(top, rgb(25, 151, 250), rgb(17, 116, 190));
background-image: -ms-linear-gradient(top, rgb(25, 151, 250), rgb(17, 116, 190));
background-image: linear-gradient(top, rgb(25, 151, 250), rgb(17, 116, 190));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#1997fa', EndColorStr='#1174be');
&:active{
background-color: #1275c0;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(18, 117, 192)), to(rgb(25, 150, 248)));
background-image: -webkit-linear-gradient(top, rgb(18, 117, 192), rgb(25, 150, 248));
background-image: -moz-linear-gradient(top, rgb(18, 117, 192), rgb(25, 150, 248));
background-image: -o-linear-gradient(top, rgb(18, 117, 192), rgb(25, 150, 248));
background-image: -ms-linear-gradient(top, rgb(18, 117, 192), rgb(25, 150, 248));
background-image: linear-gradient(top, rgb(18, 117, 192), rgb(25, 150, 248));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#1275c0', EndColorStr='#1996f8');
}
}
#ragged{
margin-top:20px;
padding: 40px 0 20px 0;
height:420px;
p{
font-size: 16px;
line-height:22px;
}
.icon{
width:110px;
height:90px;
margin:0 auto;
}
.half.icon{
background: url("#{$images}/half.jpg") no-repeat center center;
}
.moon.icon{
background: url("#{$images}/moon.jpg") no-repeat center center;
}
.sun.icon{
background: url("#{$images}/sun.jpg") no-repeat center center;
}
h3{
text-shadow:none;
}
h2{
text-shadow: 0 1px #fff;
text-align:center;
margin-bottom:20px;
}
}
.breakout{
background: url("#{$images}/jagged.png") repeat-x top left;
width:100%;
margin-bottom:10px;
}
#threecol article p{
font-size:16px;
line-height:23px;
font-weight:400;
}
#about{
margin-top:20px;
div p{
font-size:14px;
}
}
.learnbutton{
@extend .custombutton;
width:295px;
margin-left:140px;
border:1px solid #315e0b;
box-shadow: 0 0 0 1px #8fda4c inset;
background-color: #6bcd25;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(107, 205, 37)), to(rgb(81, 155, 26)));
background-image: -webkit-linear-gradient(top, rgb(107, 205, 37), rgb(81, 155, 26));
background-image: -moz-linear-gradient(top, rgb(107, 205, 37), rgb(81, 155, 26));
background-image: -o-linear-gradient(top, rgb(107, 205, 37), rgb(81, 155, 26));
background-image: -ms-linear-gradient(top, rgb(107, 205, 37), rgb(81, 155, 26));
background-image: linear-gradient(top, rgb(107, 205, 37), rgb(81, 155, 26));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#6bcd25', EndColorStr='#519b1a');
a{
font-weight:900;
font-size:18px;
}
&:active{
background-color: #519c1a;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(81, 156, 26)), to(rgb(106, 203, 37)));
background-image: -webkit-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
background-image: -moz-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
background-image: -o-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
background-image: -ms-linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
background-image: linear-gradient(top, rgb(81, 156, 26), rgb(106, 203, 37));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#519c1a', EndColorStr='#6acb25');
}
}
#polaroids{
background:url("#{$images}/pictures.jpg") no-repeat;
height:300px;
}
footer {
width: 100%;
float: left;
background: rgb(1, 1, 1);
background: rgba(1, 1, 1, 0.7);
ul {
padding: 10px 0;
width: 940px;
margin: 0 auto;
li{
color: #fff;
font: 12px Merriweather, Georgia, Times New Roman, serif;
display: inline;
a{
float:right;
padding-right:20px;
color:#ccc;
text-decoration:underline;
}
}
}
}
Raw
oasis.css
h2,h3,h4 {
color: #333;
font-family: Merriweather, Georgia, Times New Roman, serif;
text-shadow: 0 2px #fbf9de
}
a:hover {
color: #fff
}
h2 {
font-size: 36px;
font-weight: 900
}
h3 {
font-weight: 800;
font-size: 22px
}
h4 {
font-size: 20px
}
p {
padding-top: 15px
}
p,div {
color: #333;
font-family: Merriweather, Georgia, Times New Roman, serif;
font-weight: 400;
font-size: 18px;
line-height: 26px
}
hr {
margin: 0 auto;
width: 95%;
height: 1px;
border-left: none;
border-right: none;
border-top: 1px solid #333;
border-bottom: 1px solid #333
}
#sunrise {
width: 100%;
float: left;
background: url("../../img/oasis/sunrise.jpg") repeat-x 0% 100%;
position: absolute;
top: 0;
left: 0;
height: 160px
}
body {
background: url("../../img/oasis/back.jpg") repeat;
-webkit-font-smoothing: subpixel-antialiased
}
#logo {
background: url("../../img/oasis/logo.png") no-repeat top center;
height: 240px;
text-indent: -9991px;
margin-top: 30px
}
#banner {
background: url("../../img/oasis/banner.png") no-repeat center center;
height: 70px;
font-weight: 900;
font-size: 34px;
text-align: center;
padding-top: 18px;
text-shadow: 0 1px #f0f0f0;
position: relative;
top: 165px
}
.intro {
padding-top: 25px
}
.calltoday {
margin-top: 20px;
width: 100%;
text-align: center;
float: left;
font-weight: 900;
font-size: 20px;
background: #fff;
background: rgba(255,255,255,0.5);
border-radius: 5px;
padding: 10px 0
}
#letter {
background: url("../../img/oasis/letter.png") no-repeat top left;
height: 300px;
margin-top: 15px
}
#letter p {
font: 18px "Handlee";
padding: 15px 25px 0px 20px
}
#letter #sue {
line-height: 50px;
font-size: 24px
}
#clipped {
background: url("../../img/oasis/clipped.png") no-repeat;
width: 165px;
height: 170px;
float: right;
position: relative;
bottom: 75px
}
#learnmore h2 {
position: relative;
top: 15px
}
form input.input-text,form textarea {
width: 200px;
margin-left: 10px;
margin-bottom: 17px;
float: left;
border-radius: 5px;
border: 1px solid #e5ddaa;
font-size: 16px;
height: 24px;
background-color: #f0f0f0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#fafafa));
background-image: -webkit-linear-gradient(top, #f0f0f0, #fafafa);
background-image: -moz-linear-gradient(top, #f0f0f0, #fafafa);
background-image: -o-linear-gradient(top, #f0f0f0, #fafafa);
background-image: -ms-linear-gradient(top, #f0f0f0, #fafafa);
background-image: linear-gradient(top, #f0f0f0, #fafafa);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f0f0f0', EndColorStr='#fafafa')
}
form textarea {
width: 418px;
height: 80px;
color: #999
}
form textarea:focus {
color: #000
}
form label {
display: none
}
.lt-ie9 form label {
width: 90px;
display: block;
float: left;
margin-left: 10px
}
.lt-ie9 form input {
width: 100%;
float: left
}
button {
padding: 10px 10px;
width: 200px;
font: 700 18px Merriweather, Georgia, Times New Roman, serif;
color: white;
text-shadow: 0 1px 0 #111
}
button:active {
background-color: #519c1a;
background-image: -webkit-gradient(linear, left top, left bottom, from(#519c1a), to(#6acb25));
background-image: -webkit-linear-gradient(top, #519c1a, #6acb25);
background-image: -moz-linear-gradient(top, #519c1a, #6acb25);
background-image: -o-linear-gradient(top, #519c1a, #6acb25);
background-image: -ms-linear-gradient(top, #519c1a, #6acb25);
background-image: linear-gradient(top, #519c1a, #6acb25);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#519c1a', EndColorStr='#6acb25')
}
button:hover {
cursor: pointer
}
#whyoasis {
position: relative;
bottom: 40px
}
#whyoasis ul li {
background: url("../../img/oasis/check.jpg") no-repeat center left;
padding-left: 55px
}
.custombutton,.bluebutton,.learnbutton,button {
text-align: center
}
.custombutton a,.bluebutton a,.learnbutton a,button a {
padding: 7px 0;
display: block;
font-weight: 600;
color: white;
font-size: 14px;
text-shadow: 0 1px 0px #111
}
.bluebutton {
border: 1px solid #1174bf;
box-shadow: 0 0 0px 1px #47aff9 inset;
background-color: #1997fa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1997fa), to(#1174be));
background-image: -webkit-linear-gradient(top, #1997fa, #1174be);
background-image: -moz-linear-gradient(top, #1997fa, #1174be);
background-image: -o-linear-gradient(top, #1997fa, #1174be);
background-image: -ms-linear-gradient(top, #1997fa, #1174be);
background-image: linear-gradient(top, #1997fa, #1174be);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#1997fa', EndColorStr='#1174be')
}
.bluebutton:active {
background-color: #1275c0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#1275c0), to(#1996f8));
background-image: -webkit-linear-gradient(top, #1275c0, #1996f8);
background-image: -moz-linear-gradient(top, #1275c0, #1996f8);
background-image: -o-linear-gradient(top, #1275c0, #1996f8);
background-image: -ms-linear-gradient(top, #1275c0, #1996f8);
background-image: linear-gradient(top, #1275c0, #1996f8);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#1275c0', EndColorStr='#1996f8')
}
#ragged {
margin-top: 20px;
padding: 40px 0 20px 0;
height: 420px
}
#ragged p {
font-size: 16px;
line-height: 22px
}
#ragged .icon {
width: 110px;
height: 90px;
margin: 0 auto
}
#ragged .half.icon {
background: url("../../img/oasis/half.jpg") no-repeat center center
}
#ragged .moon.icon {
background: url("../../img/oasis/moon.jpg") no-repeat center center
}
#ragged .sun.icon {
background: url("../../img/oasis/sun.jpg") no-repeat center center
}
#ragged h3 {
text-shadow: none
}
#ragged h2 {
text-shadow: 0 1px #fff;
text-align: center;
margin-bottom: 20px
}
.breakout {
background: url("../../img/oasis/jagged.png") repeat-x top left;
width: 100%;
margin-bottom: 10px
}
#threecol article p {
font-size: 16px;
line-height: 23px;
font-weight: 400
}
#about {
margin-top: 20px
}
#about div p {
font-size: 14px
}
.learnbutton,button {
width: 295px;
margin-left: 140px;
border: 1px solid #315e0b;
box-shadow: 0 0 0 1px #8fda4c inset;
background-color: #6bcd25;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6bcd25), to(#519b1a));
background-image: -webkit-linear-gradient(top, #6bcd25, #519b1a);
background-image: -moz-linear-gradient(top, #6bcd25, #519b1a);
background-image: -o-linear-gradient(top, #6bcd25, #519b1a);
background-image: -ms-linear-gradient(top, #6bcd25, #519b1a);
background-image: linear-gradient(top, #6bcd25, #519b1a);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#6bcd25', EndColorStr='#519b1a')
}
.learnbutton a,button a {
font-weight: 900;
font-size: 18px
}
.learnbutton:active,button:active {
background-color: #519c1a;
background-image: -webkit-gradient(linear, left top, left bottom, from(#519c1a), to(#6acb25));
background-image: -webkit-linear-gradient(top, #519c1a, #6acb25);
background-image: -moz-linear-gradient(top, #519c1a, #6acb25);
background-image: -o-linear-gradient(top, #519c1a, #6acb25);
background-image: -ms-linear-gradient(top, #519c1a, #6acb25);
background-image: linear-gradient(top, #519c1a, #6acb25);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#519c1a', EndColorStr='#6acb25')
}
#polaroids {
background: url("../../img/oasis/pictures.jpg") no-repeat;
height: 300px
}
footer {
width: 100%;
float: left;
background: #010101;
background: rgba(1,1,1,0.7)
}
footer ul {
padding: 10px 0;
width: 940px;
margin: 0 auto
}
footer ul li {
color: #fff;
font: 12px Merriweather, Georgia, Times New Roman, serif;
display: inline
}
footer ul li a {
float: right;
padding-right: 20px;
color: #ccc;
text-decoration: underline
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment