| 1 | body, main, aside, article, ul, ol, li, h1, h2, h3, hr, p {
|
| 2 | display: block;
|
| 3 | margin: 0;
|
| 4 | padding: 0; }
|
| 5 |
|
| 6 | body {
|
| 7 | font: normal 16px/24px 'Helvetica Neue', Helvetica, Arial, freesans, sans-serif;
|
| 8 | background: #F8F9FA; }
|
| 9 |
|
| 10 | aside {
|
| 11 | position: fixed;
|
| 12 | left: 0;
|
| 13 | top: 0;
|
| 14 | width: 360px; }
|
| 15 | aside li {
|
| 16 | display: block;
|
| 17 | z-index: 10; }
|
| 18 | aside li a {
|
| 19 | display: block;
|
| 20 | padding: 10px;
|
| 21 | text-decoration: none;
|
| 22 | color: #666;
|
| 23 | border: 1px solid #D9E0E2;
|
| 24 | background: #fff;
|
| 25 | width: 280px;
|
| 26 | position: relative; }
|
| 27 | aside > ol > li ol {
|
| 28 | margin: 10px 0 10px 20px; }
|
| 29 | aside > ol > li ol a {
|
| 30 | border-bottom: none; }
|
| 31 | aside > ol > li ol li:last-child a {
|
| 32 | border-bottom: 1px solid #D9E0E2; }
|
| 33 | aside > ol {
|
| 34 | padding: 20px; }
|
| 35 | aside > ol > li.active > a, aside > ol > li.active-child > a {
|
| 36 | background: #EF4836;
|
| 37 | color: #fff; }
|
| 38 | aside > ol > li.active > a::after {
|
| 39 | content: '•';
|
| 40 | font-size: 45px;
|
| 41 | line-height: 45px;
|
| 42 | position: absolute;
|
| 43 | right: 10px;
|
| 44 | top: 0;
|
| 45 | color: #fff; }
|
| 46 | aside > ol > li li.active > a::after, aside > ol > li li.active-child > a::after {
|
| 47 | content: '•';
|
| 48 | font-size: 45px;
|
| 49 | line-height: 45px;
|
| 50 | position: absolute;
|
| 51 | right: 10px;
|
| 52 | top: 0;
|
| 53 | color: #EF4836; }
|
| 54 | aside > ol:hover > li.active > a, aside > ol:hover > li.active-child > a {
|
| 55 | background: #666; }
|
| 56 | aside > ol:hover > li li.active > a::after, aside > ol:hover > li li.active-child > a::after {
|
| 57 | color: #666; }
|
| 58 | aside > ol > li:hover > a {
|
| 59 | background: #EF4836 !important;
|
| 60 | color: #fff; }
|
| 61 | aside > ol > li li:hover > a::after {
|
| 62 | content: '•';
|
| 63 | font-size: 45px;
|
| 64 | line-height: 45px;
|
| 65 | position: absolute;
|
| 66 | right: 10px;
|
| 67 | top: 0;
|
| 68 | color: #EF4836 !important; }
|
| 69 | aside > ol li.active ol, aside > ol li.active-child ol, aside > ol li:hover ol {
|
| 70 | opacity: 1; }
|
| 71 | aside > ol ol {
|
| 72 | opacity: 0.5; }
|
| 73 | aside > ol > li {
|
| 74 | counter-reset: drink; }
|
| 75 | aside > ol > li li a::before {
|
| 76 | counter-increment: drink;
|
| 77 | content: counter(drink) '. '; }
|
| 78 |
|
| 79 | main {
|
| 80 | margin: 0 0 0 340px;
|
| 81 | padding: 0 20px; }
|
| 82 | main hr {
|
| 83 | border: none;
|
| 84 | height: 1px; }
|
| 85 |
|
| 86 | article {
|
| 87 | width: 680px;
|
| 88 | min-height: 930px;
|
| 89 | box-sizing: border-box;
|
| 90 | margin: 50px auto;
|
| 91 | background: #fff;
|
| 92 | border: 1px solid #D9E0E2;
|
| 93 | overflow: hidden;
|
| 94 | padding: 60px 100px;
|
| 95 | font: 16px/22px Merriweather, 'times new roman', serif; }
|
| 96 | article h1, article h2 {
|
| 97 | text-align: center; }
|
| 98 | article h1 a, article h2 a {
|
| 99 | color: #FF3C1F;
|
| 100 | text-decoration: none; }
|
| 101 | article h1 {
|
| 102 | margin: 0 0 20px 0;
|
| 103 | font-size: 30px;
|
| 104 | line-height: 40px;
|
| 105 | font-weight: 700;
|
| 106 | counter-reset: drink;
|
| 107 | text-transform: uppercase; }
|
| 108 | article h2 {
|
| 109 | padding: 20px 0 0 0;
|
| 110 | font-size: 20px;
|
| 111 | font-weight: 400;
|
| 112 | line-height: 30px; }
|
| 113 | article h2::before {
|
| 114 | counter-increment: drink;
|
| 115 | content: counter(drink) '.';
|
| 116 | font-size: 25px;
|
| 117 | font-weight: 300; }
|
| 118 | article p {
|
| 119 | margin: 20px 0; }
|
| 120 | article img {
|
| 121 | display: block;
|
| 122 | margin: 40px auto;
|
| 123 | max-width: 100%; }
|
| 124 | article .serving {
|
| 125 | text-align: center;
|
| 126 | font-weight: 300; }
|
| 127 | article .serving::before {
|
| 128 | content: '('; }
|
| 129 | article .serving::after {
|
| 130 | content: ')'; }
|
| 131 | article .ingredients {
|
| 132 | margin: 20px; }
|
| 133 | article .ingredients li {
|
| 134 | list-style: none; }
|
| 135 | article .making {
|
| 136 | text-indent: 20px; }
|
| 137 |
|
| 138 | #source {
|
| 139 | color: #666;
|
| 140 | margin: 20px;
|
| 141 | text-align: center; }
|
| 142 | #source a {
|
| 143 | color: inherit; }
|