Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
638 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,4 +2,5 @@ app/_cache/ | |
| app/cache/ | ||
| .DS_Store | ||
| config/settings.php | ||
| .sass-cache/ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,332 @@ | ||
| /*- variables | ||
| ----------------------------------------------------------------------*/ | ||
| $green: #2dbc24; | ||
| $default_text_shadow: 1px 1px rgba(0, 0, 0, 0.2); | ||
|
|
||
| /*- mix-ins | ||
| ----------------------------------------------------------------------*/ | ||
| @mixin rounded($radius: 3px) { | ||
| -webkit-border-radius: $radius; | ||
| -moz-border-radius: $radius; | ||
| border-radius: $radius; | ||
| } | ||
|
|
||
| @mixin background-transition { | ||
| -webkit-transition-duration: .30s; | ||
| -webkit-transition-property: background-color, color; | ||
| } | ||
|
|
||
| @mixin box-shadow($attributes: 1px 1px 2px rgba(0,0,0,0.2)) { | ||
| -webkit-box-shadow: $attributes; | ||
| -moz-box-shadow: $attributes; | ||
| box-shadow: $attributes; | ||
| } | ||
|
|
||
| @mixin clearfix { | ||
| *display: inline-block; | ||
| &:after { | ||
| content: " "; | ||
| display: block; | ||
| height: 0; | ||
| clear: both; | ||
| visibility: hidden; | ||
| } | ||
| } | ||
|
|
||
| /*- structural | ||
| ----------------------------------------------------------------------*/ | ||
| body { | ||
| font-family: "ronnia-1","ronnia-2",helvetica,arial,sans-serif; | ||
| background-color: #0f0705; | ||
| color: #fff; | ||
| font-size: 16px; | ||
| line-height: 1.4em; | ||
| text-shadow: $default_text_shadow; | ||
| } | ||
| a { | ||
| color: $green; | ||
| text-decoration: none; | ||
| } | ||
| img#bg { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| z-index: 1; | ||
| } | ||
| #wrapper { | ||
| overflow: hidden; | ||
| width: 100%; | ||
| } | ||
| #content { | ||
| width: 900px; | ||
| margin: 0 auto; | ||
| padding-bottom: 3em; | ||
| position: relative; | ||
| z-index: 2; | ||
| opacity: 0; | ||
| } | ||
| h1, h2, h3 { | ||
| font-weight: normal; | ||
| } | ||
| h3 { | ||
| display: inline-block; | ||
| background-color: $green; | ||
| padding: 2px 8px; | ||
| margin-bottom: 0.4em; | ||
| text-shadow: none; | ||
| } | ||
| p { | ||
| margin-bottom: 1em; | ||
| } | ||
|
|
||
| /*- header | ||
| ----------------------------------------------------------------------*/ | ||
| header { | ||
| h1 { | ||
| font-size: 47px; | ||
| line-height: 1.1em; | ||
| margin-top: 1.4em; | ||
| margin-bottom: 0.3em; | ||
| text-shadow: 0 0 30px rgba(0, 0, 0, 0.2), $default_text_shadow; | ||
| } | ||
| h1 em { | ||
| font-style: normal; | ||
| opacity: 0.5; | ||
| } | ||
| h1 + p { | ||
| opacity: 0.93; | ||
| font-weight: normal; | ||
| font-size: 19px; | ||
| line-height: 1.4em; | ||
| text-shadow: 0 0 30px rgba(0, 0, 0, 0.3), $default_text_shadow; | ||
| display: inline; | ||
| } | ||
| h1 + p em { | ||
| font-style: normal; | ||
| text-shadow: none; | ||
| background-color: #fff; | ||
| color: $green; | ||
| padding: 2px 6px; | ||
| } | ||
| img#logo { | ||
| position: relative; | ||
| top: 26px; | ||
| } | ||
| /* nav */ | ||
| nav { | ||
| position: absolute; | ||
| right: 0; | ||
| top: 42px; | ||
| text-align: right; | ||
| line-height: 1em; | ||
|
|
||
| li { | ||
| display: inline; | ||
| margin-left: 1.6em; | ||
| } | ||
| a { | ||
| font-size: 20px; | ||
| color: #fff; | ||
| text-decoration: none; | ||
| @include background-transition; | ||
| } | ||
| a:hover { | ||
| color: $green; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /*- sections | ||
| ----------------------------------------------------------------------*/ | ||
| section { | ||
| margin-top: 2em; | ||
| @include clearfix; | ||
|
|
||
| h2 { | ||
| color: #f9f9f8; | ||
| font-size: 28px; | ||
| line-height: 42px; | ||
| margin-bottom: 0.5em; | ||
| position: relative; | ||
| left: -50px; | ||
| padding-left: 50px; | ||
| } | ||
| } | ||
|
|
||
| section#work h2 { | ||
| background: transparent url(/images/icon-work.png) 0 0 no-repeat; | ||
| } | ||
| section#play h2 { | ||
| background: transparent url(/images/icon-play.png) 0 0 no-repeat; | ||
| } | ||
| section#about h2 { | ||
| background: transparent url(/images/icon-about.png) 0 0 no-repeat; | ||
| } | ||
| section#contact h2 { | ||
| background: transparent url(/images/icon-contact.png) 0 0 no-repeat; | ||
| } | ||
| section#colophon h2 { | ||
| background: transparent url(/images/icon-colophon.png) 0 0 no-repeat; | ||
| } | ||
|
|
||
| /*- portfolio | ||
| ----------------------------------------------------------------------*/ | ||
| ol#portfolio { | ||
| list-style: none; | ||
| } | ||
|
|
||
| ol#portfolio li { | ||
| width: 272px; | ||
| height: 120px; | ||
| border: solid 4px #fff; | ||
| opacity: 0.2; | ||
| float: left; | ||
| margin-right: 20px; | ||
| margin-bottom: 20px; | ||
| text-indent: -9999px; | ||
| } | ||
|
|
||
| /*- mugshot | ||
| ----------------------------------------------------------------------*/ | ||
| section#about img { | ||
| float: right; | ||
| margin: -2em 1em 1em 1em; | ||
| border: solid 5px #fff; | ||
| -webkit-transform : rotate(3deg); | ||
| -moz-transform : rotate(3deg); | ||
| transform : rotate(3deg); | ||
| } | ||
|
|
||
| /*- contact form | ||
| ----------------------------------------------------------------------*/ | ||
| section#contact { | ||
| position: relative; | ||
| } | ||
| form { | ||
| margin-top: 8px; | ||
| padding: 15px; | ||
| @include rounded(3px); | ||
| background-color: #2e2727; | ||
| border: solid 1px #211c1c; | ||
| @include box-shadow(inset 0 0px 30px rgba(0,0,0,0.3)); | ||
| @include clearfix; | ||
|
|
||
| label { | ||
| font-size: 0.9em; | ||
| width: 120px; | ||
| text-align: right; | ||
| float: left; | ||
| line-height: 1.8em; | ||
| color: #c4c0c0; | ||
| } | ||
| sup { | ||
| color: $green; | ||
| } | ||
| p { | ||
| margin-bottom: 0.8em; | ||
| @include clearfix; | ||
| } | ||
| input { | ||
| float: right; | ||
| width: 390px; | ||
| font-size: 14px; | ||
| padding: 0.4em 0.3em; | ||
| background-color: #282222; | ||
| color: #fff; | ||
| @include rounded(3px); | ||
| font-family: helvetica,arial; | ||
| border: solid 1px #211c1c; | ||
| @include box-shadow(0 1px 0 rgba(69, 69, 69, 1)); | ||
| } | ||
| textarea { | ||
| width: 390px; | ||
| height: 108px; | ||
| float: right; | ||
| font-size: 14px; | ||
| padding: 0.4em 0.3em; | ||
| color: #fff; | ||
| background-color: #282222; | ||
| @include rounded(3px); | ||
| font-family: helvetica,arial; | ||
| border: solid 1px #211c1c; | ||
| @include box-shadow(0 1px 0 rgba(69, 69, 69, 1)); | ||
| } | ||
| input:focus, textarea:focus { | ||
| outline: none; | ||
| border-color: $green; | ||
| @include box-shadow(#6ce164 0 0 5px); | ||
| } | ||
| button { | ||
| margin-left: 135px; | ||
| background: #5ECC57; /* old browsers */ | ||
| background: -moz-linear-gradient(top, #5ECC57 0%, #2DBB24 6%, #269E1E 100%); /* firefox */ | ||
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ECC57), color-stop(6%,#2DBB24), color-stop(100%,#269E1E)); /* webkit */ | ||
| @include rounded(4px); | ||
| color: #fff; | ||
| border: solid 1px #1f8319; | ||
| font-size: 13px; | ||
| line-height: 26px; | ||
| height: 28px; | ||
| padding: 0 1em; | ||
| text-shadow: 0 -1px rgba(0, 0, 0, 0.2); | ||
| @include box-shadow(); | ||
| } | ||
| button:hover { | ||
| background: #5ECC57; /* old browsers */ | ||
| background: -moz-linear-gradient(top, #5ECC57 0%, #2DBB24 6%, #29aa21 100%); /* firefox */ | ||
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ECC57), color-stop(6%,#2DBB24), color-stop(100%,#29aa21)); /* webkit */ | ||
| } | ||
| } | ||
|
|
||
| .validation-advice { | ||
| float: right; | ||
| width: 400px; | ||
| font-size: 12px; | ||
| color: yellow; | ||
| } | ||
|
|
||
| #mail-slot { | ||
| width: 624px; | ||
| height: 11px; | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: -17px; | ||
| background: transparent url(/images/mail-slot.png) 0 0 no-repeat; | ||
| display: none; | ||
| } | ||
|
|
||
| #thanks, #error { | ||
| font-family: "skippy-sharp-1","skippy-sharp-2", Georgia, helvetica,sans-serif; | ||
| color: #fff; | ||
| text-align: center; | ||
| padding-top: 70px; | ||
| -webkit-transform : rotate(-3deg); | ||
| -moz-transform : rotate(-3deg); | ||
| transform : rotate(-3deg); | ||
| display: none; | ||
|
|
||
| h5 { | ||
| font-size: 50px; | ||
| margin-bottom: 0.5em; | ||
| } | ||
| p { | ||
| font-size: 35px; | ||
| margin-bottom: 1em; | ||
| } | ||
| a#send-another { | ||
| font-size: 22px; | ||
| } | ||
| } | ||
|
|
||
| .vcard { | ||
| float: right; | ||
| width: 285px; | ||
|
|
||
| .email, .tel, .street-address { | ||
| display: block; | ||
| } | ||
| .email, .tel { | ||
| margin-bottom: 1.4em; | ||
| } | ||
| } |
Oops, something went wrong.