| Line | |
|---|
| 1 | /* Typographie */ |
|---|
| 2 | // base // |
|---|
| 3 | body { |
|---|
| 4 | font-size: 1em; |
|---|
| 5 | line-height: 1.5; |
|---|
| 6 | font-family: $sans-serif; |
|---|
| 7 | } |
|---|
| 8 | // titres // |
|---|
| 9 | h1 { |
|---|
| 10 | font-size: scut-em(48); |
|---|
| 11 | line-height: 1.2; |
|---|
| 12 | } |
|---|
| 13 | h2 { |
|---|
| 14 | font-size: scut-em(64); |
|---|
| 15 | line-height: 1.2; |
|---|
| 16 | margin-bottom: scut-em(32,64); |
|---|
| 17 | } |
|---|
| 18 | h3 { |
|---|
| 19 | font-size: scut-em(28); |
|---|
| 20 | line-height: 1.33; |
|---|
| 21 | margin-top: scut-em(16,28); |
|---|
| 22 | margin-bottom: scut-em(12, 28); |
|---|
| 23 | } |
|---|
| 24 | h4 { |
|---|
| 25 | font-size: scut-em(21); |
|---|
| 26 | margin-top: scut-em(24, 21); |
|---|
| 27 | margin-bottom: scut-em(16, 21); |
|---|
| 28 | } |
|---|
| 29 | h5 { |
|---|
| 30 | font-size: scut-em(18); |
|---|
| 31 | margin-top: scut-em(28,18); |
|---|
| 32 | } |
|---|
| 33 | h6 { |
|---|
| 34 | font-size: 1em; |
|---|
| 35 | margin-bottom: 0; |
|---|
| 36 | } |
|---|
| 37 | h2, h3, h4, h5, h6 { |
|---|
| 38 | color: $secondary-color; |
|---|
| 39 | } |
|---|
| 40 | // liens |
|---|
| 41 | a { |
|---|
| 42 | color: $link; |
|---|
| 43 | text-decoration: none; |
|---|
| 44 | transition: .3s; |
|---|
| 45 | &:link, &:visited { |
|---|
| 46 | border-bottom: 1px solid $gray-medium; |
|---|
| 47 | } |
|---|
| 48 | &:visited { |
|---|
| 49 | border-bottom-style: dotted; |
|---|
| 50 | } |
|---|
| 51 | &:hover, &:active { |
|---|
| 52 | border-color: $link; |
|---|
| 53 | } |
|---|
| 54 | &:focus { |
|---|
| 55 | background-color: $link; |
|---|
| 56 | color: $gray-very-light; |
|---|
| 57 | } |
|---|
| 58 | } |
|---|
| 59 | // autres balises |
|---|
| 60 | hr { |
|---|
| 61 | border: 0; |
|---|
| 62 | height: 1px; |
|---|
| 63 | background: #333; |
|---|
| 64 | @include background-image(linear-gradient(left, $gray-medium, $gray-dark, $gray-medium)); |
|---|
| 65 | } |
|---|
| 66 | blockquote, q { |
|---|
| 67 | font-family: $serif; |
|---|
| 68 | color: $gray-dark; |
|---|
| 69 | font-style: italic; |
|---|
| 70 | } |
|---|
| 71 | blockquote { |
|---|
| 72 | font-size: scut-em(18); |
|---|
| 73 | line-height: 1.33; |
|---|
| 74 | quotes: '\201C' '\201D'; |
|---|
| 75 | margin-top: scut-em(32,18); |
|---|
| 76 | } |
|---|
| 77 | blockquote:before, |
|---|
| 78 | blockquote:after { |
|---|
| 79 | margin-top: 0; |
|---|
| 80 | font-size: 3em; |
|---|
| 81 | display: block; |
|---|
| 82 | line-height: .25; |
|---|
| 83 | color: $gray-medium; |
|---|
| 84 | margin-bottom: 0; |
|---|
| 85 | } |
|---|
| 86 | blockquote:before { |
|---|
| 87 | content: open-quote; |
|---|
| 88 | float: left; |
|---|
| 89 | margin-right: .25em; |
|---|
| 90 | } |
|---|
| 91 | blockquote:after { |
|---|
| 92 | content: close-quote; |
|---|
| 93 | text-align: right; |
|---|
| 94 | } |
|---|
| 95 | blockquote p:first-child { |
|---|
| 96 | margin-top: 0; |
|---|
| 97 | } |
|---|
| 98 | kbd { |
|---|
| 99 | padding: 0.1em 0.5em; |
|---|
| 100 | } |
|---|
| 101 | code, pre, kbd { |
|---|
| 102 | background-color: #555; |
|---|
| 103 | color: #EFD540; |
|---|
| 104 | font-family: $monospace; |
|---|
| 105 | font-size: scut-em(14); |
|---|
| 106 | padding: .1em .2em; |
|---|
| 107 | } |
|---|
| 108 | pre { |
|---|
| 109 | padding: .5em 1em; |
|---|
| 110 | } |
|---|
| 111 | img { |
|---|
| 112 | max-width: 97%; |
|---|
| 113 | } |
|---|
| 114 | p, ul, ol { |
|---|
| 115 | margin-top: 1em; |
|---|
| 116 | margin-bottom: .5em; |
|---|
| 117 | } |
|---|
| 118 | ul ul, ul ol, ol ol, ol ul { margin-top: .5em; } |
|---|
| 119 | /* a11y */ |
|---|
| 120 | .sr { |
|---|
| 121 | border: 0; |
|---|
| 122 | clip: rect(0 0 0 0); |
|---|
| 123 | height: 1px; |
|---|
| 124 | margin: -1px; |
|---|
| 125 | overflow: hidden; |
|---|
| 126 | padding: 0; |
|---|
| 127 | position: absolute; |
|---|
| 128 | width: 1px; |
|---|
| 129 | } |
|---|
Note: See
TracBrowser
for help on using the repository browser.
