Created
September 13, 2014 03:29
-
-
Save alindgren/7c7cbdb836d7eb8afc48 to your computer and use it in GitHub Desktop.
Simple Umbraco demo for "Site Building with Umbraco 7" at Code Camp NYC 2014
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
| @inherits Umbraco.Web.Mvc.UmbracoTemplatePage | |
| @{ | |
| Layout = null; | |
| }<!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <title></title> | |
| <link rel="stylesheet" href="/css/style.css" /> | |
| </head> | |
| <body> | |
| <header id="header"> | |
| <h1><a href="/">Home</a></h1> | |
| <nav id="nav"> | |
| @Html.Partial("Menu", Model) | |
| </nav> | |
| </header> | |
| <!-- Main --> | |
| <section id="main" class="container"> | |
| <header> | |
| <h2>@Umbraco.Field("title")</h2> | |
| </header> | |
| <div class="box"> | |
| <span class="image featured"><img src="@Umbraco.Media(CurrentPage.leadImage).Url" alt="" /></span> | |
| <p>@CurrentPage.body</p> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
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
| @inherits Umbraco.Web.Mvc.UmbracoTemplatePage | |
| @{ | |
| Layout = null; | |
| }<!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <title></title> | |
| <link rel="stylesheet" href="/css/style.css" /> | |
| </head> | |
| <body> | |
| <header id="header"> | |
| <h1><a href="/">Home</a></h1> | |
| <nav id="nav"> | |
| <ul> | |
| <li> | |
| <a href="#">Page One</a> | |
| </li> | |
| <li> | |
| <a href="#">Page Two</a> | |
| </li> | |
| <li> | |
| <a href="#">Page Three</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <!-- Main --> | |
| <section id="main" class="container"> | |
| <header> | |
| <h2>Title</h2> | |
| </header> | |
| <div class="box"> | |
| <span class="image featured"><img src="images/pic01.jpg" alt="" /></span> | |
| <p>body</p> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |
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
| /* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */ | |
| html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none} | |
| /* Box Model */ | |
| *, *:before, *:after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /* Container */ | |
| body { | |
| /* min-width: (containers) */ | |
| min-width: 60em; | |
| } | |
| .container { | |
| margin-left: auto; | |
| margin-right: auto; | |
| /* width: (containers) */ | |
| width: 60em; | |
| } | |
| /* Modifiers */ | |
| .container.small { | |
| /* width: (containers) * 0.75; */ | |
| width: 45em; | |
| } | |
| .container.big { | |
| width: 100%; | |
| /* max-width: (containers) * 1.25; */ | |
| max-width: 75em; | |
| /* min-width: (containers); */ | |
| min-width: 60em; | |
| } | |
| /* Grid */ | |
| .\31 2u { width: 100% } | |
| .\31 1u { width: 91.6666666667% } | |
| .\31 0u { width: 83.3333333333% } | |
| .\39 u { width: 75% } | |
| .\38 u { width: 66.6666666667% } | |
| .\37 u { width: 58.3333333333% } | |
| .\36 u { width: 50% } | |
| .\35 u { width: 41.6666666667% } | |
| .\34 u { width: 33.3333333333% } | |
| .\33 u { width: 25% } | |
| .\32 u { width: 16.6666666667% } | |
| .\31 u { width: 8.3333333333% } | |
| .\-11u { margin-left: 91.6666666667% } | |
| .\-10u { margin-left: 83.3333333333% } | |
| .\-9u { margin-left: 75% } | |
| .\-8u { margin-left: 66.6666666667% } | |
| .\-7u { margin-left: 58.3333333333% } | |
| .\-6u { margin-left: 50% } | |
| .\-5u { margin-left: 41.6666666667% } | |
| .\-4u { margin-left: 33.3333333333% } | |
| .\-3u { margin-left: 25% } | |
| .\-2u { margin-left: 16.6666666667% } | |
| .\-1u { margin-left: 8.3333333333% } | |
| /* Rows */ | |
| .row > * { | |
| float: left; | |
| } | |
| .row:after { | |
| content: ''; | |
| display: block; | |
| clear: both; | |
| height: 0; | |
| } | |
| .row:first-child > * { | |
| padding-top: 0 !important; | |
| } | |
| /* Normal */ | |
| .row > * { | |
| /* padding-left: (gutters.vertical) */ | |
| padding-left: 2em; | |
| } | |
| .row + .row > * { | |
| /* padding: (gutters.horizontal) 0 0 (gutters.vertical) */ | |
| padding: 0 0 0 2em; | |
| } | |
| .row { | |
| /* margin-left: -(gutters.vertical) */ | |
| margin-left: -2em; | |
| } | |
| .row + .row.uniform > * { | |
| /* padding: (gutters.vertical) 0 0 (gutters.vertical) */ | |
| padding: 0 0 0 2em; | |
| } | |
| /* Flush */ | |
| .row.flush > * { | |
| padding-left: 0; | |
| } | |
| .row + .row.flush > * { | |
| padding: 0; | |
| } | |
| .row.flush { | |
| margin-left: 0; | |
| } | |
| .row + .row.uniform.flush > * { | |
| padding: 0; | |
| } | |
| /* Quarter */ | |
| .row.quarter > * { | |
| /* padding-left: (gutters.vertical * 0.25) */ | |
| padding-left: 0.5em; | |
| } | |
| .row + .row.quarter > * { | |
| /* padding: (gutters.horizontal * 0.25) 0 0 (gutters.vertical * 0.25) */ | |
| padding: 0 0 0 0.5em; | |
| } | |
| .row.quarter { | |
| /* margin-left: -(gutters.vertical * 0.25) */ | |
| margin-left: -0.5em; | |
| } | |
| .row + .row.uniform.quarter > * { | |
| /* padding: (gutters.vertical * 0.25) 0 0 (gutters.vertical * 0.25) */ | |
| padding: 0 0 0 0.5em; | |
| } | |
| /* Half */ | |
| .row.half > * { | |
| /* padding-left: (gutters.vertical * 0.5) */ | |
| padding-left: 1em; | |
| } | |
| .row + .row.half > * { | |
| /* padding: (gutters.horizontal * 0.5) 0 0 (gutters.vertical * 0.5) */ | |
| padding: 0 0 0 1em; | |
| } | |
| .row.half { | |
| /* margin-left: -(gutters.vertical * 0.5) */ | |
| margin-left: -1em; | |
| } | |
| .row + .row.uniform.half > * { | |
| /* padding: (gutters.vertical * 0.5) 0 0 (gutters.vertical * 0.5) */ | |
| padding: 0 0 0 1em; | |
| } | |
| /* One and (a) Half */ | |
| .row.oneandhalf > * { | |
| /* padding-left: (gutters.vertical * 1.5) */ | |
| padding-left: 3em; | |
| } | |
| .row + .row.oneandhalf > * { | |
| /* padding: (gutters.horizontal * 1.5) 0 0 (gutters.vertical * 1.5) */ | |
| padding: 0 0 0 3em; | |
| } | |
| .row.oneandhalf { | |
| /* margin-left: -(gutters.vertical * 1.5) */ | |
| margin-left: -3em; | |
| } | |
| .row + .row.uniform.oneandhalf > * { | |
| /* padding: (gutters.vertical * 1.5) 0 0 (gutters.vertical * 1.5) */ | |
| padding: 0 0 0 3em; | |
| } | |
| /* Double */ | |
| .row.double > * { | |
| /* padding-left: (gutters.vertical * 2) */ | |
| padding-left: 4em; | |
| } | |
| .row + .row.double > * { | |
| /* padding: (gutters.horizontal * 2) 0 0 (gutters.vertical * 2) */ | |
| padding: 0 0 0 4em; | |
| } | |
| .row.double { | |
| /* margin-left: -(gutters.vertical * 2) */ | |
| margin-left: -4em; | |
| } | |
| .row + .row.uniform.double > * { | |
| /* padding: (gutters.vertical * 2) 0 0 (gutters.vertical * 2) */ | |
| padding: 0 0 0 4em; | |
| } | |
| @import url(font-awesome.min.css); | |
| @import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic"); | |
| /* | |
| Alpha by HTML5 UP | |
| html5up.net | @n33co | |
| Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) | |
| */ | |
| /* Basic */ | |
| body { | |
| background: #f5f5f5; | |
| } | |
| body, input, select, textarea { | |
| color: #777; | |
| font-family: "Source Sans Pro", sans-serif; | |
| font-size: 16pt; | |
| font-weight: 300; | |
| line-height: 1.65em; | |
| letter-spacing: -0.015em; | |
| } | |
| a { | |
| -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; | |
| -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; | |
| -o-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; | |
| -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; | |
| transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; | |
| border-bottom: dotted 1px; | |
| color: #e89980; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| border-bottom-color: transparent; | |
| } | |
| strong, b { | |
| color: #646464; | |
| font-weight: 400; | |
| } | |
| em, i { | |
| font-style: italic; | |
| } | |
| p { | |
| margin: 0 0 2em 0; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| color: #646464; | |
| font-weight: 300; | |
| line-height: 1em; | |
| margin: 0 0 0.5em 0; | |
| } | |
| h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| h2 { | |
| font-size: 2.25em; | |
| line-height: 1.5em; | |
| letter-spacing: -0.035em; | |
| } | |
| h3 { | |
| font-size: 1.75em; | |
| line-height: 1.5em; | |
| letter-spacing: -0.025em; | |
| } | |
| h4 { | |
| font-size: 1.1em; | |
| line-height: 1.5em; | |
| letter-spacing: 0; | |
| } | |
| h5 { | |
| font-size: 0.9em; | |
| line-height: 1.5em; | |
| letter-spacing: 0; | |
| } | |
| h6 { | |
| font-size: 0.7em; | |
| line-height: 1.5em; | |
| letter-spacing: 0; | |
| } | |
| sub { | |
| font-size: 0.8em; | |
| position: relative; | |
| top: 0.5em; | |
| } | |
| sup { | |
| font-size: 0.8em; | |
| position: relative; | |
| top: -0.5em; | |
| } | |
| hr { | |
| border: 0; | |
| border-bottom: solid 2px #e5e5e5; | |
| margin: 2em 0; | |
| } | |
| hr.major { | |
| margin: 3em 0; | |
| } | |
| blockquote { | |
| border-left: solid 4px #e5e5e5; | |
| font-style: italic; | |
| margin: 0 0 2em 0; | |
| padding: 0.5em 0 0.5em 2em; | |
| } | |
| pre { | |
| -webkit-overflow-scrolling: touch; | |
| background: #f8f8f8; | |
| border-radius: 6px; | |
| border: solid 1px #e5e5e5; | |
| font-family: monospace; | |
| font-size: 0.9em; | |
| line-height: 1.75em; | |
| margin: 0 0 2em 0; | |
| overflow-x: auto; | |
| padding: 1em 1.5em; | |
| } | |
| code { | |
| background: #f8f8f8; | |
| border-radius: 6px; | |
| border: solid 1px #e5e5e5; | |
| font-family: monospace; | |
| font-size: 0.9em; | |
| margin: 0 0.25em; | |
| padding: 0.25em 0.65em; | |
| } | |
| .align-left { | |
| text-align: left; | |
| } | |
| .align-center { | |
| text-align: center; | |
| } | |
| .align-right { | |
| text-align: right; | |
| } | |
| /* Section/Article */ | |
| section.special, article.special { | |
| text-align: center; | |
| } | |
| header p { | |
| color: #999; | |
| position: relative; | |
| margin: 0 0 1.5em 0; | |
| font-style: italic; | |
| } | |
| header h2 + p { | |
| font-size: 1.25em; | |
| margin-top: -1em; | |
| line-height: 1.5em; | |
| } | |
| header h3 + p { | |
| font-size: 1.1em; | |
| margin-top: -0.85em; | |
| line-height: 1.5em; | |
| } | |
| header h4 + p, | |
| header h5 + p, | |
| header h6 + p { | |
| font-size: 0.8em; | |
| margin-top: -0.5em; | |
| line-height: 1.5em; | |
| } | |
| header.major { | |
| padding: 1em 0; | |
| text-align: center; | |
| } | |
| header.major h2 { | |
| margin: 0; | |
| } | |
| header.major p { | |
| display: inline-block; | |
| border-top: solid 2px #e5e5e5; | |
| color: #777; | |
| margin: 1.5em 0 0 0; | |
| padding: 1.5em 0 0 0; | |
| font-style: normal; | |
| } | |
| /* Form */ | |
| form { | |
| margin: 0 0 2em 0; | |
| } | |
| label { | |
| color: #646464; | |
| display: block; | |
| font-size: 0.9em; | |
| font-weight: 300; | |
| margin: 0 0 1em 0; | |
| } | |
| input[type="text"], | |
| input[type="password"], | |
| input[type="email"], | |
| select, | |
| textarea { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| -o-appearance: none; | |
| -ms-appearance: none; | |
| appearance: none; | |
| background: #f8f8f8; | |
| border-radius: 6px; | |
| border: solid 1px #e5e5e5; | |
| color: inherit; | |
| display: block; | |
| outline: 0; | |
| padding: 0 1em; | |
| text-decoration: none; | |
| width: 100%; | |
| } | |
| input[type="text"]:invalid, | |
| input[type="password"]:invalid, | |
| input[type="email"]:invalid, | |
| select:invalid, | |
| textarea:invalid { | |
| box-shadow: none; | |
| } | |
| input[type="text"]:focus, | |
| input[type="password"]:focus, | |
| input[type="email"]:focus, | |
| select:focus, | |
| textarea:focus { | |
| border-color: #e89980; | |
| box-shadow: 0 0 0 2px #e89980; | |
| } | |
| .select-wrapper { | |
| text-decoration: none; | |
| display: block; | |
| position: relative; | |
| } | |
| .select-wrapper:before { | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: FontAwesome; | |
| font-style: normal; | |
| font-weight: normal; | |
| text-transform: none !important; | |
| } | |
| .select-wrapper:before { | |
| color: #e5e5e5; | |
| content: '\f078'; | |
| display: block; | |
| height: 3em; | |
| line-height: 3em; | |
| pointer-events: none; | |
| position: absolute; | |
| right: 0; | |
| text-align: center; | |
| top: 0; | |
| width: 3em; | |
| } | |
| .select-wrapper select::-ms-expand { | |
| display: none; | |
| } | |
| input[type="text"], | |
| input[type="password"], | |
| input[type="email"], | |
| select { | |
| height: 3em; | |
| } | |
| textarea { | |
| padding: 0.75em 1em; | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| -o-appearance: none; | |
| -ms-appearance: none; | |
| appearance: none; | |
| display: block; | |
| float: left; | |
| margin-right: -2em; | |
| opacity: 0; | |
| width: 1em; | |
| z-index: -1; | |
| } | |
| input[type="checkbox"] + label, | |
| input[type="radio"] + label { | |
| text-decoration: none; | |
| color: #777; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-size: 1em; | |
| font-weight: 300; | |
| padding-left: 2.55em; | |
| padding-right: 0.75em; | |
| position: relative; | |
| } | |
| input[type="checkbox"] + label:before, | |
| input[type="radio"] + label:before { | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: FontAwesome; | |
| font-style: normal; | |
| font-weight: normal; | |
| text-transform: none !important; | |
| } | |
| input[type="checkbox"] + label:before, | |
| input[type="radio"] + label:before { | |
| background: #f8f8f8; | |
| border-radius: 6px; | |
| border: solid 1px #e5e5e5; | |
| content: ''; | |
| display: inline-block; | |
| height: 1.8em; | |
| left: 0; | |
| line-height: 1.725em; | |
| position: absolute; | |
| text-align: center; | |
| top: 0; | |
| width: 1.8em; | |
| } | |
| input[type="checkbox"]:checked + label:before, | |
| input[type="radio"]:checked + label:before { | |
| background: #666; | |
| border-color: #666; | |
| color: #ffffff; | |
| content: '\f00c'; | |
| } | |
| input[type="checkbox"]:focus + label:before, | |
| input[type="radio"]:focus + label:before { | |
| border-color: #e89980; | |
| box-shadow: 0 0 0 1px #e89980; | |
| } | |
| input[type="checkbox"] + label:before { | |
| border-radius: 6px; | |
| } | |
| input[type="radio"] + label:before { | |
| border-radius: 100%; | |
| } | |
| ::-webkit-input-placeholder { | |
| color: #999 !important; | |
| opacity: 1.0; | |
| } | |
| :-moz-placeholder { | |
| color: #999 !important; | |
| opacity: 1.0; | |
| } | |
| ::-moz-placeholder { | |
| color: #999 !important; | |
| opacity: 1.0; | |
| } | |
| :-ms-input-placeholder { | |
| color: #999 !important; | |
| opacity: 1.0; | |
| } | |
| .formerize-placeholder { | |
| color: #999 !important; | |
| opacity: 1.0; | |
| } | |
| /* Box */ | |
| .box { | |
| background: #fff; | |
| border-radius: 6px; | |
| box-shadow: 0 2px 0 0 #e5e5e5; | |
| margin: 0 0 2em 0; | |
| padding: 3em; | |
| } | |
| .box > :last-child { | |
| margin-bottom: 0; | |
| } | |
| .box.alt { | |
| background: none !important; | |
| border-radius: 0 !important; | |
| box-shadow: none !important; | |
| margin: 0 0 2em 0; | |
| padding: 0 !important; | |
| } | |
| .box.features .features-row { | |
| border-top: solid 2px #e5e5e5; | |
| position: relative; | |
| } | |
| .box.features .features-row:after { | |
| clear: both; | |
| content: ''; | |
| display: block; | |
| } | |
| .box.features .features-row section { | |
| float: left; | |
| padding: 3em; | |
| width: 50%; | |
| } | |
| .box.features .features-row section :last-child { | |
| margin-bottom: 0; | |
| } | |
| .box.features .features-row section:nth-child(2n) { | |
| padding-right: 0; | |
| } | |
| .box.features .features-row section:nth-child(2n):before { | |
| background: #e5e5e5; | |
| content: ''; | |
| display: block; | |
| height: 100%; | |
| margin-left: -3em; | |
| position: absolute; | |
| top: 0; | |
| width: 2px; | |
| } | |
| .box.features .features-row section:nth-child(2n-1) { | |
| padding-left: 0; | |
| } | |
| .box.features .features-row:first-child { | |
| border-top: 0; | |
| } | |
| .box.features .features-row:first-child section { | |
| padding-top: 0; | |
| } | |
| .box.features .features-row:last-child { | |
| padding-bottom: 0; | |
| } | |
| .box.features .features-row:last-child section { | |
| padding-bottom: 0; | |
| } | |
| .box.special { | |
| text-align: center; | |
| } | |
| .box .image.featured { | |
| border-radius: 0; | |
| display: block; | |
| margin: 3em 0 3em -3em; | |
| position: relative; | |
| width: calc(100% + 6em); | |
| } | |
| .box .image.featured img { | |
| border-radius: 0; | |
| display: block; | |
| width: 100%; | |
| } | |
| .box .image.featured:first-child { | |
| border-radius: 6px 6px 0 0; | |
| margin-bottom: 3em; | |
| margin-top: -3em; | |
| } | |
| .box .image.featured:first-child img { | |
| border-radius: 6px 6px 0 0; | |
| } | |
| .box .image.featured:last-child { | |
| border-radius: 0 0 6px 6px; | |
| margin-bottom: -3em; | |
| margin-top: 3em; | |
| } | |
| .box .image.featured:last-child img { | |
| border-radius: 0 0 6px 6px; | |
| } | |
| /* Icon */ | |
| .icon { | |
| text-decoration: none; | |
| border-bottom: none; | |
| position: relative; | |
| } | |
| .icon:before { | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: FontAwesome; | |
| font-style: normal; | |
| font-weight: normal; | |
| text-transform: none !important; | |
| } | |
| .icon > .label { | |
| display: none; | |
| } | |
| .icon.major { | |
| background: #666; | |
| border-radius: 100%; | |
| color: #ffffff; | |
| cursor: default; | |
| display: inline-block; | |
| height: 5.5em; | |
| line-height: 5.5em; | |
| margin: 0 0 2em 0; | |
| width: 5.5em; | |
| } | |
| .icon.major:before { | |
| font-size: 2.5em; | |
| } | |
| .icon.major.accent1 { | |
| background: #666; | |
| color: #ffffff; | |
| } | |
| .icon.major.accent2 { | |
| background: #e89980; | |
| color: #ffffff; | |
| } | |
| .icon.major.accent3 { | |
| background: #7fcdb8; | |
| color: #ffffff; | |
| } | |
| .icon.major.accent4 { | |
| background: #90b0ba; | |
| color: #ffffff; | |
| } | |
| .icon.major.accent5 { | |
| background: #e5cb95; | |
| color: #ffffff; | |
| } | |
| /* Image */ | |
| .image { | |
| border-radius: 6px; | |
| border: 0; | |
| display: inline-block; | |
| position: relative; | |
| } | |
| .image img { | |
| border-radius: 6px; | |
| display: block; | |
| } | |
| .image.left { | |
| float: left; | |
| padding: 0 1.5em 1em 0; | |
| top: 0.25em; | |
| } | |
| .image.right { | |
| float: right; | |
| padding: 0 0 1em 1.5em; | |
| top: 0.25em; | |
| } | |
| .image.fit { | |
| display: block; | |
| margin: 0 0 2em 0; | |
| width: 100%; | |
| } | |
| .image.fit img { | |
| display: block; | |
| width: 100%; | |
| } | |
| /* List */ | |
| ol { | |
| list-style: decimal; | |
| margin: 0 0 2em 0; | |
| padding-left: 1.25em; | |
| } | |
| ol li { | |
| padding-left: 0.25em; | |
| } | |
| ul { | |
| list-style: disc; | |
| margin: 0 0 2em 0; | |
| padding-left: 1em; | |
| } | |
| ul li { | |
| padding-left: 0.5em; | |
| } | |
| ul.alt { | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| ul.alt li { | |
| border-top: solid 1px #e5e5e5; | |
| padding: 0.5em 0; | |
| } | |
| ul.alt li:first-child { | |
| border-top: 0; | |
| padding-top: 0; | |
| } | |
| ul.icons { | |
| cursor: default; | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| ul.icons li { | |
| display: inline-block; | |
| padding: 0 1.25em 0 0; | |
| } | |
| ul.icons li:last-child { | |
| padding-right: 0; | |
| } | |
| ul.icons li .icon { | |
| color: inherit; | |
| } | |
| ul.icons li .icon:before { | |
| font-size: 1.75em; | |
| } | |
| ul.actions { | |
| cursor: default; | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| ul.actions li { | |
| display: inline-block; | |
| padding: 0 1em 0 0; | |
| vertical-align: middle; | |
| } | |
| ul.actions li:last-child { | |
| padding-right: 0; | |
| } | |
| ul.actions.small li { | |
| padding: 0 0.5em 0 0; | |
| } | |
| ul.actions.vertical li { | |
| display: block; | |
| padding: 1em 0 0 0; | |
| } | |
| ul.actions.vertical li:first-child { | |
| padding-top: 0; | |
| } | |
| ul.actions.vertical li > * { | |
| margin-bottom: 0; | |
| } | |
| ul.actions.vertical.small li { | |
| padding: 0.5em 0 0 0; | |
| } | |
| ul.actions.vertical.small li:first-child { | |
| padding-top: 0; | |
| } | |
| ul.actions.fit { | |
| display: table; | |
| margin-left: -1em; | |
| padding: 0; | |
| table-layout: fixed; | |
| width: calc(100% + 1em); | |
| } | |
| ul.actions.fit li { | |
| display: table-cell; | |
| padding: 0 0 0 1em; | |
| } | |
| ul.actions.fit li > * { | |
| margin-bottom: 0; | |
| } | |
| ul.actions.fit.small { | |
| margin-left: -0.5em; | |
| width: calc(100% + 0.5em); | |
| } | |
| ul.actions.fit.small li { | |
| padding: 0 0 0 0.5em; | |
| } | |
| dl { | |
| margin: 0 0 2em 0; | |
| } | |
| /* Table */ | |
| .table-wrapper { | |
| -webkit-overflow-scrolling: touch; | |
| overflow-x: auto; | |
| } | |
| table { | |
| margin: 0 0 2em 0; | |
| width: 100%; | |
| } | |
| table tbody tr { | |
| border: solid 1px #e5e5e5; | |
| border-left: 0; | |
| border-right: 0; | |
| } | |
| table tbody tr:nth-child(2n + 1) { | |
| background-color: #f8f8f8; | |
| } | |
| table td { | |
| padding: 0.75em 0.75em; | |
| } | |
| table th { | |
| color: #646464; | |
| font-size: 0.9em; | |
| font-weight: 300; | |
| padding: 0 0.75em 0.75em 0.75em; | |
| text-align: left; | |
| } | |
| table thead { | |
| border-bottom: solid 2px #e5e5e5; | |
| } | |
| table tfoot { | |
| border-top: solid 2px #e5e5e5; | |
| } | |
| table.alt { | |
| border-collapse: separate; | |
| } | |
| table.alt tbody tr td { | |
| border: solid 1px #e5e5e5; | |
| border-left-width: 0; | |
| border-top-width: 0; | |
| } | |
| table.alt tbody tr td:first-child { | |
| border-left-width: 1px; | |
| } | |
| table.alt tbody tr:first-child td { | |
| border-top-width: 1px; | |
| } | |
| table.alt thead { | |
| border-bottom: 0; | |
| } | |
| table.alt tfoot { | |
| border-top: 0; | |
| } | |
| /* Button */ | |
| input[type="submit"], | |
| input[type="reset"], | |
| input[type="button"], | |
| .button { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| -o-appearance: none; | |
| -ms-appearance: none; | |
| appearance: none; | |
| -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; | |
| -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; | |
| -o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; | |
| -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; | |
| transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; | |
| background-color: #666; | |
| border-radius: 6px; | |
| border: 0; | |
| color: #ffffff; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-weight: 400; | |
| height: 3em; | |
| line-height: 3em; | |
| padding: 0 2em; | |
| text-align: center; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| } | |
| input[type="submit"]:hover, | |
| input[type="reset"]:hover, | |
| input[type="button"]:hover, | |
| .button:hover { | |
| background-color: #737373; | |
| } | |
| input[type="submit"]:active, | |
| input[type="reset"]:active, | |
| input[type="button"]:active, | |
| .button:active { | |
| background-color: #595959; | |
| } | |
| input[type="submit"].icon, | |
| input[type="reset"].icon, | |
| input[type="button"].icon, | |
| .button.icon { | |
| padding-left: 1.35em; | |
| } | |
| input[type="submit"].icon:before, | |
| input[type="reset"].icon:before, | |
| input[type="button"].icon:before, | |
| .button.icon:before { | |
| margin-right: 0.5em; | |
| } | |
| input[type="submit"].fit, | |
| input[type="reset"].fit, | |
| input[type="button"].fit, | |
| .button.fit { | |
| display: block; | |
| margin: 0 0 1em 0; | |
| width: 100%; | |
| } | |
| input[type="submit"].small, | |
| input[type="reset"].small, | |
| input[type="button"].small, | |
| .button.small { | |
| font-size: 0.8em; | |
| height: 2.7em; | |
| line-height: 2.7em; | |
| } | |
| input[type="submit"].big, | |
| input[type="reset"].big, | |
| input[type="button"].big, | |
| .button.big { | |
| font-size: 1.25em; | |
| height: 2.7em; | |
| line-height: 2.7em; | |
| } | |
| input[type="submit"].alt, | |
| input[type="reset"].alt, | |
| input[type="button"].alt, | |
| .button.alt { | |
| background-color: transparent; | |
| box-shadow: inset 0 0 0 2px #e5e5e5; | |
| color: #777; | |
| } | |
| input[type="submit"].alt:hover, | |
| input[type="reset"].alt:hover, | |
| input[type="button"].alt:hover, | |
| .button.alt:hover { | |
| background-color: #f8f8f8; | |
| } | |
| input[type="submit"].alt:active, | |
| input[type="reset"].alt:active, | |
| input[type="button"].alt:active, | |
| .button.alt:active { | |
| background-color: #f0f0f0; | |
| } | |
| input[type="submit"].alt.icon:before, | |
| input[type="reset"].alt.icon:before, | |
| input[type="button"].alt.icon:before, | |
| .button.alt.icon:before { | |
| color: #999; | |
| } | |
| input[type="submit"].special, | |
| input[type="reset"].special, | |
| input[type="button"].special, | |
| .button.special { | |
| background-color: #e89980; | |
| color: #ffffff !important; | |
| } | |
| input[type="submit"].special:hover, | |
| input[type="reset"].special:hover, | |
| input[type="button"].special:hover, | |
| .button.special:hover { | |
| background-color: #ecaa96; | |
| } | |
| input[type="submit"].special:active, | |
| input[type="reset"].special:active, | |
| input[type="button"].special:active, | |
| .button.special:active { | |
| background-color: #e4886a; | |
| } | |
| input[type="submit"].disabled, input[type="submit"]:disabled, | |
| input[type="reset"].disabled, | |
| input[type="reset"]:disabled, | |
| input[type="button"].disabled, | |
| input[type="button"]:disabled, | |
| .button.disabled, | |
| .button:disabled { | |
| background-color: #777 !important; | |
| box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15); | |
| color: #f5f5f5 !important; | |
| cursor: default; | |
| opacity: 0.25; | |
| } | |
| /* Header */ | |
| #skel-layers-wrapper { | |
| padding-top: 3em; | |
| } | |
| body.landing #skel-layers-wrapper { | |
| padding-top: 0; | |
| } | |
| @-moz-keyframes reveal-header { 0% { top: -5em; } 100% { top: 0; } } | |
| @-webkit-keyframes reveal-header { 0% { top: -5em; } 100% { top: 0; } } | |
| @-o-keyframes reveal-header { 0% { top: -5em; } 100% { top: 0; } } | |
| @-ms-keyframes reveal-header { 0% { top: -5em; } 100% { top: 0; } } | |
| @keyframes reveal-header { 0% { top: -5em; } 100% { top: 0; } } | |
| #header { | |
| background: #444; | |
| color: #bbb; | |
| cursor: default; | |
| height: 3.25em; | |
| left: 0; | |
| line-height: 3.25em; | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 10000; | |
| } | |
| #header h1 { | |
| color: inherit; | |
| height: inherit; | |
| left: 1.25em; | |
| line-height: inherit; | |
| margin: 0; | |
| padding: 0; | |
| position: absolute; | |
| top: 0; | |
| } | |
| #header h1 a { | |
| color: #fff; | |
| font-weight: 400; | |
| border: 0; | |
| } | |
| #header nav { | |
| height: inherit; | |
| line-height: inherit; | |
| position: absolute; | |
| right: 0.75em; | |
| top: 0; | |
| vertical-align: middle; | |
| } | |
| #header nav > ul { | |
| list-style: none; | |
| margin: 0; | |
| padding-left: 0; | |
| } | |
| #header nav > ul > li { | |
| display: inline-block; | |
| padding-left: 0; | |
| } | |
| #header nav > ul > li > ul { | |
| display: none; | |
| } | |
| #header nav > ul > li a { | |
| display: inline-block; | |
| height: 2em; | |
| line-height: 1.95em; | |
| padding: 0 1em; | |
| border-radius: 6px; | |
| } | |
| #header nav > ul > li a:not(.button) { | |
| color: #fff; | |
| display: inline-block; | |
| text-decoration: none; | |
| border: 0; | |
| } | |
| #header nav > ul > li a:not(.button).icon:before { | |
| color: #999; | |
| margin-right: 0.5em; | |
| } | |
| #header nav > ul > li:first-child { | |
| margin-left: 0; | |
| } | |
| #header nav > ul > li.active a:not(.button) { | |
| background-color: rgba(153, 153, 153, 0.25); | |
| } | |
| #header nav > ul > li .button { | |
| margin: 0 0 0 0.5em; | |
| position: relative; | |
| } | |
| #header input[type="submit"], | |
| #header input[type="reset"], | |
| #header input[type="button"], | |
| #header .button { | |
| background-color: transparent; | |
| box-shadow: inset 0 0 0 2px #999; | |
| color: #fff; | |
| } | |
| #header input[type="submit"]:hover, | |
| #header input[type="reset"]:hover, | |
| #header input[type="button"]:hover, | |
| #header .button:hover { | |
| background-color: rgba(153, 153, 153, 0.25); | |
| } | |
| #header input[type="submit"]:active, | |
| #header input[type="reset"]:active, | |
| #header input[type="button"]:active, | |
| #header .button:active { | |
| background-color: rgba(153, 153, 153, 0.5); | |
| } | |
| #header .container { | |
| position: relative; | |
| } | |
| #header .container h1 { | |
| left: 0; | |
| } | |
| #header .container nav { | |
| right: 0; | |
| } | |
| #header.reveal { | |
| -moz-animation: reveal-header 0.5s; | |
| -webkit-animation: reveal-header 0.5s; | |
| -o-animation: reveal-header 0.5s; | |
| -ms-animation: reveal-header 0.5s; | |
| animation: reveal-header 0.5s; | |
| } | |
| #header.alt { | |
| -moz-animation: none; | |
| -webkit-animation: none; | |
| -o-animation: none; | |
| -ms-animation: none; | |
| animation: none; | |
| background: none; | |
| color: rgba(255, 255, 255, 0.75); | |
| position: absolute; | |
| } | |
| #header.alt nav > ul > li a:not(.button).icon:before { | |
| color: rgba(255, 255, 255, 0.75); | |
| } | |
| #header.alt nav > ul > li.active a:not(.button) { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| #header.alt input[type="submit"], | |
| #header.alt input[type="reset"], | |
| #header.alt input[type="button"], | |
| #header.alt .button { | |
| box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); | |
| } | |
| #header.alt input[type="submit"]:hover, | |
| #header.alt input[type="reset"]:hover, | |
| #header.alt input[type="button"]:hover, | |
| #header.alt .button:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| #header.alt input[type="submit"]:active, | |
| #header.alt input[type="reset"]:active, | |
| #header.alt input[type="button"]:active, | |
| #header.alt .button:active { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .dropotron { | |
| background: #fff; | |
| border-radius: 6px; | |
| box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.065), inset 0 -1px 0 0 #fff, inset 0 0 0 1px rgba(229, 229, 229, 0.5); | |
| list-style: none; | |
| margin: calc(-0.5em + 1px) 0 0 1px; | |
| padding: 0.5em 0; | |
| width: 11em; | |
| } | |
| .dropotron li { | |
| padding: 0; | |
| } | |
| .dropotron li a, .dropotron li span { | |
| -moz-transition: none; | |
| -webkit-transition: none; | |
| -o-transition: none; | |
| -ms-transition: none; | |
| transition: none; | |
| border: 0; | |
| border-top: solid 1px #f2f2f2; | |
| color: inherit; | |
| display: block; | |
| padding: 0.15em 1em; | |
| } | |
| .dropotron li:first-child > a, .dropotron li:first-child > span { | |
| border-top: 0; | |
| } | |
| .dropotron li.active > a, .dropotron li.active > span, .dropotron li:hover > a, .dropotron li:hover > span { | |
| background: #e89980; | |
| color: #ffffff; | |
| } | |
| .dropotron.level-0 { | |
| font-size: 0.9em; | |
| margin: 1em 0 0 0; | |
| } | |
| .dropotron.level-0:before { | |
| -moz-transform: rotate(45deg); | |
| -webkit-transform: rotate(45deg); | |
| -o-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| background: #fff; | |
| border: solid 1px rgba(229, 229, 229, 0.5); | |
| border-bottom: 0; | |
| border-right: 0; | |
| box-shadow: -0.25em -0.125em 0.125em 0 rgba(0, 0, 0, 0.015); | |
| content: ''; | |
| display: block; | |
| height: 0.75em; | |
| position: absolute; | |
| right: 1.25em; | |
| top: -0.375em; | |
| width: 0.75em; | |
| z-index: 0; | |
| } | |
| /* Banner */ | |
| #banner { | |
| background-attachment: scroll, fixed; | |
| background-color: #666; | |
| background-image: url("images/overlay.png"), url("../images/banner.jpg"); | |
| background-position: top left, center center; | |
| background-repeat: repeat, no-repeat; | |
| background-size: auto, cover; | |
| color: #fff; | |
| padding: 12em 0 20em 0; | |
| text-align: center; | |
| } | |
| #banner :last-child { | |
| margin-bottom: 0; | |
| } | |
| #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 { | |
| color: #fff; | |
| } | |
| #banner h2 { | |
| font-size: 3.5em; | |
| line-height: 1em; | |
| margin: 0 0 0.5em 0; | |
| padding: 0; | |
| } | |
| #banner p { | |
| font-size: 1.25em; | |
| margin-bottom: 1.75em; | |
| } | |
| #banner input[type="submit"], | |
| #banner input[type="reset"], | |
| #banner input[type="button"], | |
| #banner .button { | |
| background-color: transparent; | |
| box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); | |
| color: #fff; | |
| min-width: 12em; | |
| } | |
| #banner input[type="submit"]:hover, | |
| #banner input[type="reset"]:hover, | |
| #banner input[type="button"]:hover, | |
| #banner .button:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| #banner input[type="submit"]:active, | |
| #banner input[type="reset"]:active, | |
| #banner input[type="button"]:active, | |
| #banner .button:active { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| #banner input[type="submit"].special, | |
| #banner input[type="reset"].special, | |
| #banner input[type="button"].special, | |
| #banner .button.special { | |
| background: #fff; | |
| color: #666 !important; | |
| } | |
| /* Main */ | |
| #main { | |
| padding: 4em 0; | |
| } | |
| #main > header { | |
| text-align: center; | |
| margin: 0 0 3em 0; | |
| } | |
| #main > header h2 { | |
| font-size: 2.75em; | |
| margin: 0; | |
| } | |
| #main > header p { | |
| border-top: solid 2px #e5e5e5; | |
| color: #777; | |
| display: inline-block; | |
| font-style: normal; | |
| margin: 1em 0 0 0; | |
| padding: 1em 0 1.25em 0; | |
| } | |
| body.landing #main { | |
| margin-top: -14em; | |
| } | |
| /* Footer */ | |
| #footer { | |
| background: #f0f0f0; | |
| padding: 4em 0 6em 0; | |
| text-align: center; | |
| } | |
| #footer .icons a { | |
| -moz-transition: opacity 0.2s ease-in-out; | |
| -webkit-transition: opacity 0.2s ease-in-out; | |
| -o-transition: opacity 0.2s ease-in-out; | |
| -ms-transition: opacity 0.2s ease-in-out; | |
| transition: opacity 0.2s ease-in-out; | |
| opacity: 0.35; | |
| } | |
| #footer .icons a:hover { | |
| opacity: 0.75; | |
| } | |
| #footer .copyright { | |
| color: #999; | |
| font-size: 0.9em; | |
| line-height: 1em; | |
| margin: 2em 0 0 0; | |
| padding: 0; | |
| text-align: center; | |
| } | |
| #footer .copyright a { | |
| color: inherit; | |
| } | |
| #footer .copyright li { | |
| border-left: solid 1px #dddddd; | |
| display: inline-block; | |
| list-style: none; | |
| margin-left: 1em; | |
| padding-left: 1em; | |
| } | |
| #footer .copyright li:first-child { | |
| border-left: 0; | |
| margin-left: 0; | |
| padding-left: 0; | |
| } | |
| /* CTA */ | |
| #cta { | |
| background: #e89980; | |
| color: #f9e5df; | |
| padding: 3.5em 0 4em 0; | |
| text-align: center; | |
| } | |
| #cta h2, #cta h3, #cta h4, #cta h5, #cta h6 { | |
| color: inherit; | |
| } | |
| #cta form { | |
| margin: 0 auto; | |
| max-width: 100%; | |
| width: 25em; | |
| } | |
| #cta input[type="submit"], | |
| #cta input[type="reset"], | |
| #cta input[type="button"], | |
| #cta .button { | |
| box-shadow: none; | |
| background: #fff; | |
| color: #e89980; | |
| } | |
| #cta input[type="text"], | |
| #cta input[type="password"], | |
| #cta input[type="email"], | |
| #cta select, | |
| #cta textarea { | |
| color: #ffffff; | |
| background: rgba(255, 255, 255, 0.15); | |
| border: 0; | |
| } | |
| #cta input[type="text"]:focus, | |
| #cta input[type="password"]:focus, | |
| #cta input[type="email"]:focus, | |
| #cta select:focus, | |
| #cta textarea:focus { | |
| box-shadow: inset 0 0 0 2px #fff; | |
| } | |
| #cta ::-webkit-input-placeholder { | |
| color: rgba(255, 255, 255, 0.75) !important; | |
| } | |
| #cta :-moz-placeholder { | |
| color: rgba(255, 255, 255, 0.75) !important; | |
| } | |
| #cta ::-moz-placeholder { | |
| color: rgba(255, 255, 255, 0.75) !important; | |
| } | |
| #cta :-ms-input-placeholder { | |
| color: rgba(255, 255, 255, 0.75) !important; | |
| } | |
| #cta .formerize-placeholder { | |
| color: rgba(255, 255, 255, 0.75) !important; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment