experiENS/avisstage/sass/screen.scss

@import "compass/reset";

@import url('https://fonts.googleapis.com/css?family=Dosis:300,500,700|Podkova:700');

$fond: #E80051;
$barre: $fond * 0.7;

body {
    background: $fond;
    font-family: 'Dosis', sans-serif;
    line-height: 1.4;
    font-size: 19px;
    font-weight: 300;
}

h1, h2, h3, h4 {
    font-family: Podkova;
}

h1 {
    font-size: 2em;
}

.beta {
    opacity: 0.5;
    font-size: 0.7em;
    display: inline-block;
    transform: translate(-1em, 0.6em) rotate(-15deg);
}

a {
    font-weight: bold;
}

header {
    background: $barre;
    display: flex;
    justify-content: space-between;
    align-items: center;

    nav ul {
        display: inline-flex;
        
        li {
            display: inline-table;
            
            a {
                text-align: center;
                display: table-cell;
                padding: 0 20px;
                height: 90px;
                vertical-align: middle;
                
                &:hover {
                    background: $barre * 0.6;
                }
            }
        }
    }
    
    a {
        color: #fff;
        text-decoration: none;
    }

    h1 {
        padding: 15px;
    }
}

p {
    
}

.content {
    background: #efefef;
    max-width: 900px;
    padding: 30px;
    margin: 15px auto;

    p {
        margin: 0.5em 0;
    }
}


// Index

.homeh1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2em;
    padding-bottom: 10px;
    border-bottom: 3px solid #000;
    margin-bottom: 15px;
    
    & > * {
        display: inline-block;
    }
    
}