Parcourir la source

Add center column, footer, transitions.

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
Severyn Kozak il y a 10 ans
Parent
révision
edf3082cd7
4 fichiers modifiés avec 65 ajouts et 10 suppressions
  1. +0
    -4
      static/css/main.css
  2. +8
    -2
      static/sass/_mixins.sass
  3. +26
    -3
      static/sass/main.sass
  4. +31
    -1
      templates/index.html

+ 0
- 4
static/css/main.css Voir le fichier

@@ -1,4 +0,0 @@
/* Global project stylesheet.
*/
p {
font-size: 1.5em; }

+ 8
- 2
static/sass/_mixins.sass Voir le fichier

@@ -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)
-webkit-#{$property}: $value
-moz-#{$property}: $value
-ms-#{$property}: $value
-o-#{$property}: $value
#{$property}: $value

.t1
@include vendor(transition, all 0.1s ease-out)

.t3
@include vendor(transition, all 0.3s ease-out)

+ 26
- 3
static/sass/main.sass Voir le fichier

@@ -2,6 +2,29 @@
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

+ 31
- 1
templates/index.html Voir le fichier

@@ -5,5 +5,35 @@
= endblock

= 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

Chargement…
Annuler
Enregistrer