ytlibre/templates/sass/frond.sass

$asana: #067ab4
$copyleft: #ccc
$enlace: #2dde98
$fondo: #2d3743
$red: #fc636b
$submit: #3895ea
$submit-text: #fff
$text: #fff
$textbox-focus: #221f1f
$textbox: #a4a4a4
$URLbox: #f5f5f1

body
    background: $fondo
    color: $text

.contenedor
    margin: auto
    width: 70%
    max-width: 700px
    background: $asana
    display: flex
    flex-direction: column
    flex-wrap: wrap
    align-items: center

    .libreyt
        padding-bottom: 60px

a.enlace
    color: $copyleft
    text-decoration: none
    &:hover
        color: $enlace

header
    display: flex
    width: 90%
    padding: 20px 0px
    justify-content: center

    img
        align-items: center
        width: 100%
        vertical-align: top

section
    width: 100%

    h2
        text-align: center

    .formulario
        display: flex
        flex-wrap: wrap
        justify-content: center
        flex-direction: column
        align-items: center

        input[type="text"],
        input[type="search"]
            background: $URLbox
            border: 2px solid
            margin-bottom: 15px
            width: 80%
            border-radius: 5px
            padding: 15px 20px
            font-size: 15px
            color: $textbox
            &:focus
                border: 2px solid $submit
                color: $textbox-focus
        .boton
            margin: auto
            background: $submit
            color: $submit-text
            border: none
            border-radius: 3px
            padding: 15px 40px
            cursor: pointer

footer
    p.copyleft
        font-size: 12px
        text-align: center