Add: static/sass/_mixins.sass -Add transition classes. static/sass/main.sass -Add base styling for footer, center column. templates/index.html -Add foundation `div` tree to `body`, and footer contents.tags/v1.0^2
@@ -1,4 +0,0 @@ | |||||
/* Global project stylesheet. | |||||
*/ | |||||
p { | |||||
font-size: 1.5em; } |
@@ -1,11 +1,17 @@ | |||||
/* | /* | ||||
Partial to contain all globally-applicable mixins | |||||
Partial to contain all globally-applicable mixins. | |||||
*/ | */ | ||||
// add vendor prefixes for the property $property with value $value | |||||
// Add vendor prefixes for the property $property with value $value. | |||||
@mixin vendor($property, $value) | @mixin vendor($property, $value) | ||||
-webkit-#{$property}: $value | -webkit-#{$property}: $value | ||||
-moz-#{$property}: $value | -moz-#{$property}: $value | ||||
-ms-#{$property}: $value | -ms-#{$property}: $value | ||||
-o-#{$property}: $value | -o-#{$property}: $value | ||||
#{$property}: $value | #{$property}: $value | ||||
.t1 | |||||
@include vendor(transition, all 0.1s ease-out) | |||||
.t3 | |||||
@include vendor(transition, all 0.3s ease-out) |
@@ -2,6 +2,29 @@ | |||||
Global project stylesheet. | Global project stylesheet. | ||||
*/ | */ | ||||
// placeholder | |||||
p | |||||
font-size: 1.5em | |||||
@import mixins | |||||
body | |||||
margin: 0px | |||||
div#center | |||||
background-color: red | |||||
margin-left: auto | |||||
margin-right: auto | |||||
margin-top: 0px | |||||
width: 75% | |||||
div#footer | |||||
@extend .t3 | |||||
background-color: yellow | |||||
bottom: -20px | |||||
position: fixed | |||||
width: 100% | |||||
text-align: center | |||||
a | |||||
padding-left: 10% | |||||
&:hover | |||||
bottom: 0px |
@@ -5,5 +5,35 @@ | |||||
= endblock | = endblock | ||||
= block body | = block body | ||||
<p>Hello, world.</p> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
<div>Hello, world.</div> | |||||
= endblock | = endblock |