[2640] | 1 | .header a:link, |
---|
| 2 | .header a:visited { |
---|
| 3 | color: $primary-color; |
---|
| 4 | border-bottom-color: $gray-very-light; |
---|
| 5 | } |
---|
| 6 | .header a:hover, |
---|
| 7 | .header a:focus { |
---|
| 8 | color: $link; |
---|
| 9 | border-bottom-color: transparent; |
---|
| 10 | } |
---|
| 11 | .skip-links { |
---|
| 12 | @include inline-block-list-container; |
---|
| 13 | text-align: right; |
---|
| 14 | li { |
---|
| 15 | @include inline-block-list-item(.5em); |
---|
| 16 | font-size: scut-em(12); |
---|
| 17 | line-height: 1; |
---|
| 18 | padding-bottom: .5em; |
---|
| 19 | a:link, a:visited { |
---|
| 20 | color: $gray-dark; |
---|
| 21 | } |
---|
| 22 | a:hover, a:focus { |
---|
| 23 | background-color: $gray-light; |
---|
| 24 | color: $link; |
---|
| 25 | } |
---|
| 26 | } |
---|
| 27 | } |
---|
| 28 | .banner { |
---|
| 29 | padding-bottom: .5em; |
---|
| 30 | margin-right: 3em; |
---|
| 31 | } |
---|
[2643] | 32 | a.site-title__link, |
---|
| 33 | a.site-title__link:link, |
---|
| 34 | a.site-title__link:visited { |
---|
[2640] | 35 | background-color: transparent; |
---|
[2643] | 36 | border-color: transparent; |
---|
[2640] | 37 | } |
---|
| 38 | .site-title__text { |
---|
| 39 | color: $gray-dark; |
---|
| 40 | color: rgba(120, 120, 120, 0.8); |
---|
| 41 | font-weight: bold; |
---|
| 42 | font-weight: 500; |
---|
| 43 | letter-spacing: -1px; |
---|
| 44 | text-shadow: 1px 4px 6px $white, 0 0 0 $black, 1px 4px 6px $white; |
---|
| 45 | } |
---|
| 46 | .site-title__link:hover .site-title__text, |
---|
| 47 | .site-title__link:focus .site-title__text, |
---|
| 48 | .site-title__link:active .site-title__text { |
---|
| 49 | color: rgba(223, 48, 52, 0.8); |
---|
| 50 | } |
---|
| 51 | .site-baseline { |
---|
| 52 | font-family: $serif; |
---|
| 53 | font-style: italic; |
---|
| 54 | margin-top: 0; |
---|
| 55 | margin-bottom: rhythm(.5, 24px); |
---|
| 56 | color: $gray-dark; |
---|
| 57 | } |
---|
| 58 | .header__nav { |
---|
| 59 | @include inline-block-list-container; |
---|
| 60 | clear: left; |
---|
| 61 | text-align: right; |
---|
| 62 | background: $gray-very-dark; |
---|
| 63 | background: $link; |
---|
| 64 | li { |
---|
| 65 | @include inline-block-list-item(1em); |
---|
| 66 | margin-right: .5em; |
---|
| 67 | padding-top: .25em; |
---|
| 68 | padding-bottom: .25em; |
---|
| 69 | text-align: center; |
---|
[3427] | 70 | span:not(.simple-menu-label) { |
---|
[2640] | 71 | @include adjust-font-size-to(14px); |
---|
| 72 | font-family: $serif; |
---|
| 73 | font-style: italic; |
---|
| 74 | display: block; |
---|
| 75 | } |
---|
| 76 | } |
---|
| 77 | li a:link, |
---|
| 78 | li a:visited { |
---|
| 79 | color: $white; |
---|
| 80 | } |
---|
| 81 | li a:hover, |
---|
| 82 | li a:focus { |
---|
| 83 | background-color: $gray-dark; |
---|
| 84 | } |
---|
| 85 | } |
---|
| 86 | /* Si js est actif, un bouton pour afficher/masquer le menu est créé */ |
---|
| 87 | #hamburger { |
---|
| 88 | position: absolute; |
---|
| 89 | top: 3em; |
---|
| 90 | right: .5em; |
---|
| 91 | padding: 0; |
---|
| 92 | background-color: $link; |
---|
| 93 | background-repeat: no-repeat; |
---|
| 94 | background-position: 50% 50%; |
---|
| 95 | @include svg(icon_hamburger); |
---|
| 96 | height: 2.5em; |
---|
| 97 | width: 2.5em; |
---|
| 98 | border: 2px solid $link; |
---|
| 99 | &:visited { |
---|
| 100 | background-color: $link; |
---|
| 101 | } |
---|
| 102 | &:focus, |
---|
| 103 | &:hover { |
---|
| 104 | background-color: shade($link, 20%); |
---|
| 105 | border-color: $link; |
---|
| 106 | } |
---|
| 107 | &.open { |
---|
[2949] | 108 | background-image: inline-image('icon_close.png'); |
---|
| 109 | background-image: inline-image('icon_close.svg'), none; |
---|
[2640] | 110 | } |
---|
| 111 | } |
---|
| 112 | @media screen and(max-width: $large-screen) { |
---|
| 113 | .header { |
---|
| 114 | padding-left: .5em; |
---|
| 115 | padding-right: .5em; |
---|
| 116 | padding-bottom: 0; |
---|
| 117 | } |
---|
| 118 | .header__nav { |
---|
| 119 | margin-left: -.5em; |
---|
| 120 | margin-right: -.5em; |
---|
| 121 | li { |
---|
| 122 | display: block; |
---|
| 123 | margin-right: 0; |
---|
| 124 | border-bottom: 1px solid $white; |
---|
| 125 | } |
---|
| 126 | } |
---|
| 127 | } |
---|
| 128 | @media screen and(max-width: $small-screen) { |
---|
| 129 | .skip-links { |
---|
| 130 | text-align: center; |
---|
| 131 | @include adjust-font-size-to(10px); |
---|
| 132 | } |
---|
| 133 | .site-baseline { |
---|
| 134 | display: none; |
---|
| 135 | } |
---|
| 136 | #hamburger { |
---|
| 137 | top: 1.5em; |
---|
| 138 | right: .5em; |
---|
| 139 | } |
---|
| 140 | } |
---|
| 141 | @media screen and (max-width: $medium-screen) { |
---|
| 142 | .site-title { |
---|
| 143 | font-size: 1.8em |
---|
| 144 | } |
---|
| 145 | } |
---|