| Left: | ||
| Right: |
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 @font-face | |
| 2 { | |
| 3 font-family: "Source Sans Pro"; | |
| 4 font-style: normal; | |
| 5 font-weight: 400; | |
| 6 font-stretch: normal; | |
| 7 src: local ("Ø"), | |
| 8 url(fonts/SourceSansPro-Regular.woff) format("woff"); | |
| 9 } | |
| 10 | |
| 11 @font-face | |
|
juliandoucette
2017/10/30 15:30:10
NIT: I'm guessing my comment about us using 600 se
martin
2017/11/03 10:02:12
Changed to 600.
| |
| 12 { | |
| 13 font-family: "Source Sans Pro"; | |
| 14 font-style: bold; | |
| 15 font-weight: 700; | |
| 16 font-stretch: normal; | |
| 17 src: local ("Ø"), | |
| 18 url(fonts/SourceSansPro-bold.woff) format("woff"); | |
| 19 } | |
| 20 | |
| 21 html | |
| 22 { | |
| 23 font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; | |
| 24 } | |
| 25 | |
| 26 body | |
| 27 { | |
| 28 margin: 0; | |
| 29 padding: 0; | |
| 30 } | |
| 31 | |
| 32 .full-width-container | |
| 33 { | |
| 34 width: 100%; | |
| 35 } | |
| 36 | |
| 37 .graphic-column | |
|
juliandoucette
2017/10/30 15:30:10
This class and the one below have enough in common
martin
2017/11/03 10:02:13
Refactored.
| |
| 38 { | |
| 39 height: 100vh; | |
| 40 width: 50%; | |
| 41 background: #8DC446; | |
| 42 display: flex; | |
| 43 align-items: center; | |
| 44 justify-content: center; | |
| 45 } | |
| 46 | |
| 47 .content-column | |
| 48 { | |
| 49 height: 100vh; | |
| 50 width: 50%; | |
| 51 background: #fff; | |
| 52 display: flex; | |
| 53 justify-content: center; | |
| 54 align-items: center; | |
| 55 } | |
| 56 | |
| 57 .content-column-entries | |
|
juliandoucette
2017/10/30 15:30:10
NIT: We generally use IDs for things that only occ
martin
2017/11/03 10:02:12
Changed to id="column-content"
| |
| 58 { | |
| 59 padding: 0 3em; | |
| 60 max-width: 760px; | |
| 61 } | |
| 62 | |
| 63 .content-column-entries a { | |
|
juliandoucette
2017/10/30 15:30:10
NIT: .content a would work fine here
| |
| 64 color: #C70D2C; | |
| 65 } | |
| 66 | |
| 67 .content-column-entries hgroup | |
| 68 { | |
| 69 margin: 0 0 2em 5em; | |
| 70 } | |
| 71 | |
| 72 .content-column h1 | |
| 73 { | |
| 74 margin: 0; | |
| 75 } | |
| 76 | |
| 77 .content-column h2 | |
| 78 { | |
| 79 margin: 0; | |
| 80 font-weight: normal; | |
| 81 opacity: .5; | |
| 82 } | |
| 83 | |
| 84 .custom-feature-entry | |
| 85 { | |
| 86 margin-top: 2em; | |
| 87 } | |
| 88 | |
| 89 .custom-feature-entry h2 { | |
| 90 margin: 0 0 0 3.4em; | |
| 91 } | |
| 92 | |
| 93 .update-graphic-container | |
| 94 { | |
| 95 width: 560px; | |
| 96 height: 460px; | |
| 97 background: url('/skin/updates-page/base-graphic.svg'); | |
| 98 position: relative; | |
| 99 display: flex; | |
| 100 align-items: center; | |
| 101 background-repeat: no-repeat; | |
| 102 background-size: cover; | |
| 103 } | |
| 104 | |
| 105 .update-graphic-container img | |
| 106 { | |
| 107 display: block; | |
| 108 width: 162px; | |
| 109 height: 162px; | |
| 110 } | |
| 111 | |
| 112 .update-graphic-content | |
| 113 { | |
| 114 position: absolute; | |
| 115 top: 65px; | |
| 116 left: 100px; | |
| 117 display: flex; | |
| 118 align-items: center; | |
| 119 } | |
| 120 | |
| 121 .version-details | |
| 122 { | |
| 123 margin: 0 0 0 1em; | |
| 124 } | |
| 125 | |
| 126 .version-details h2 | |
| 127 { | |
| 128 margin: 0; | |
| 129 } | |
| 130 | |
| 131 .version-details span | |
| 132 { | |
| 133 color: #bebebe; | |
| 134 } | |
| 135 | |
| 136 .feature-entry | |
| 137 { | |
| 138 display: flex; | |
| 139 align-items: center; | |
| 140 padding: 0 1em; | |
| 141 } | |
| 142 | |
| 143 .feature-entry img | |
| 144 { | |
| 145 width: 50px; | |
| 146 height: 50px; | |
| 147 display: block; | |
| 148 margin: 0 1em 0 0; | |
| 149 } | |
| 150 | |
| 151 .store-buttons | |
| 152 { | |
| 153 width: 100%; | |
| 154 hegiht: 58px; | |
| 155 margin-left: 5em; | |
| 156 } | |
| 157 | |
| 158 .store-button | |
| 159 { | |
| 160 display: block; | |
| 161 width: 180px; | |
| 162 height: 58px; | |
| 163 border-radius: 6px; | |
| 164 background: #000; | |
| 165 float: left; | |
| 166 margin-bottom: 1em; | |
| 167 } | |
| 168 | |
| 169 .store-button > img | |
| 170 { | |
| 171 height: 54px; | |
| 172 } | |
| 173 | |
| 174 .applestore-button | |
| 175 { | |
| 176 margin-right: 1em; | |
| 177 } | |
| 178 | |
| 179 [dir="rtl"] .appstore-button | |
| 180 { | |
| 181 margin-right: 0; | |
| 182 margin-left: 1em; | |
| 183 } | |
| OLD | NEW |