baz_april/squelettes/scss/base/_main.scss

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

html {
    font-size:                100.01%;
    -ms-text-size-adjust:     100%;
    -webkit-text-size-adjust: 100%;
}

body {
    line-height: $typo-line-height;
    background:  white;
}

/* Titraille / Intertitres */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-size:   100%;
    font-style:  normal;
    font-weight: 400;
    line-height: 1.2;
    padding:     0;
    margin:      0 0 0.8em 0;
}

/* Hyperlinks
[fr] Signaletique des hyperliens : http://letrainde13h37.fr/43/signaletique-hyperliens/ */
a {
    background: transparent;
    color:      inherit;
    &:link {
        transition: .3s;
    }
    &:focus {
        outline:     thin dotted;
        text-shadow: none;
    }
    &:hover {
        outline: 0;
        cursor:  pointer;
    }
    &:active {
        outline: 0;
    }
    &:after,
    &:before {
        font-size: 90%;
        opacity:   .9;
    }
    &[hreflang]:after {
        content:     "\0000a0[" attr(hreflang) "]";
        font-weight: normal;
    }
    /* Linked images */
    & img {
        border: 0;
    }
    &:focus img,
    &:active img {
        transform: translateY(1px);
    }
}


ul, ol {
    list-style: none;
    margin:     0;
    padding:    0;
}

ul, ol {
    margin-left: 1em;
}

ul {
    list-style-type: square;
}

ol {
    list-style-type: decimal;
}

ul ul, ol ol {
/*     margin-bottom: 0; */
}

dt {
    font-weight: bold;
}

em, i {
    font-style: italic;
}

strong, b {
    font-weight: bold;
}

small,
.small {
    font-size: 85%;
}

p,
ul,
ol,
dl,
dd,
blockquote,
address,
pre,
table,
fieldset,
.pagination {
    @include text-block;
}

p:last-child {
    margin-bottom: 0;
}

img {
    max-width:              100% !important;
    height:                 auto !important;
    width:                  auto \9
    !important; /* IE7-8 need help adjusting responsive images */
    vertical-align:         middle;
    border:                 0;
    -ms-interpolation-mode: bicubic;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    cursor: pointer;
    border:0;
}

button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
input[type="reset"][disabled] {
    cursor: default;
}

/* évite un resize potentiellement foireux */
textarea {
    resize: vertical;
}

/* 
 * évite dimensionnement des radios, checkboxes et images
 * et un affichage différent sous IE 
 */
input[type="radio"],
input[type="checkbox"],
input[type="image"] {
    background-color: transparent;
    border:           0;
    width:            auto;
}

/* supprime un bug Firefox sur button */
button::-moz-focus-inner { border: 0; padding: 0; }

abbr[title],
acronym[title] {
    text-decoration: none;
    border-bottom:   .1em dotted;
    cursor:          help;
}

@media print {
    abbr[title] {
        border-bottom: 0;
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
}

dfn {
    font-weight: bold;
    font-style:  italic;
}

s,
strike,
del {
    opacity:         .5;
    text-decoration: line-through;
}

ins {
    background-color: rgba(255, 255, 204, 0.5);
    text-decoration:  none;
}

u {
    text-decoration: underline;
}

sup,
.sup,
sub,
.sub {
    position:       relative;
    font-size:      80%;
    font-variant:   normal;
    line-height:    0;
    vertical-align: baseline;
}

sup,
.sup {
    top: -0.5em;
}

sub,
.sub {
    bottom: -0.25em;
}

pre {
    white-space: pre-wrap;
    word-break:  break-all;
    word-wrap:   break-word;
}

kbd {
    white-space:      nowrap;
    padding:          .1em .3em;
    background-color: #EEE;
    border:           1px solid #AAA;
    border-radius:    4px;
    box-shadow:       0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #FFFFFF inset;
    color:            #333;
}

samp {
    font-weight: bold;
}

var {
    font-style: italic;
}

/* Typography for small screens
[fr] http://www.alsacreations.com/astuce/lire/1177 */
@media (max-width: em(640px)) {
    /* fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100% !important;
    }
    /* gestion des mots longs */
    textarea,
    table,
    td,
    th,
    pre,
    code,
    samp {
        word-wrap: break-word;
        /* cesure forcee */
    }
    pre,
    code,
    samp {
        white-space: pre-line;
        /* passage a la ligne specifique pour les elements a chasse fixe */
    }
}

/* orientation iOS5 font-size fix */
@media (orientation: landscape) and (max-device-width: em(640px)) {
    html,
    body {
        -webkit-text-size-adjust: 100%;
    }
}

/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background:  #B3D4FC;
    text-shadow: none;
}

::selection {
    background:  #B3D4FC;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
hr {
    display:    block;
    height:     1px;
    border:     0;
    border-top: 1px solid #CCC;
    margin:     1em 0;
    padding:    0;
    clear:      both;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset, figure {
    border:  0;
    margin:  0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
    resize: vertical;
}

input[type="search"] {
    box-sizing: border-box;
}

address {
    font-style: normal;
}


pre,
code,
kbd,
samp,
var,
tt {
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}