1body { 2 background: $secondary-bg; 3 color: $text; 4 font: normal #{$base-font-size}/#{$base-line-height} $base-font-family; 5 height: 100vh; 6 text-align: left; 7 text-rendering: optimizeLegibility; 8} 9 10img { 11 max-width: 100%; 12} 13 14article { 15 p { 16 img { 17 max-width: 100%; 18 display:block; 19 margin-left: auto; 20 margin-right: auto; 21 } 22 } 23} 24 25a { 26 border-bottom: 1px dotted $primary-bg; 27 color: $text; 28 text-decoration: none; 29 -webkit-transition: background 0.3s, color 0.3s; 30 transition: background 0.3s, color 0.3s; 31} 32 33blockquote { 34 padding: 15px 30px 15px 15px; 35 margin: 20px 0 0 10px; 36 background-color: rgba(204, 122, 111, 0.1); 37 border-left: 10px solid rgba(191, 87, 73, 0.2); 38} 39 40#fb_oss a { 41 border: 0; 42} 43 44h1, h2, h3, h4 { 45 font-family: $header-font-family; 46 font-weight: 900; 47} 48 49.navPusher { 50 border-top: $header-height + $header-ptop + $header-pbot solid $primary-bg; 51 height: 100%; 52 left: 0; 53 position: relative; 54 z-index: 99; 55} 56 57.homeContainer { 58 background: $primary-bg; 59 color: $primary-overlay; 60 61 a { 62 color: $primary-overlay; 63 } 64 65 .homeSplashFade { 66 color: white; 67 } 68 69 .homeWrapper { 70 padding: 2em 10px; 71 text-align: left; 72 73 .wrapper { 74 margin: 0px auto; 75 max-width: $content-width; 76 padding: 0 20px; 77 } 78 79 .projectLogo { 80 img { 81 height: 100px; 82 margin-bottom: 0px; 83 } 84 } 85 86 h1#project_title { 87 font-family: $header-font-family; 88 font-size: 300%; 89 letter-spacing: -0.08em; 90 line-height: 1em; 91 margin-bottom: 80px; 92 } 93 94 h2#project_tagline { 95 font-family: $header-font-family; 96 font-size: 200%; 97 letter-spacing: -0.04em; 98 line-height: 1em; 99 } 100 } 101} 102 103.wrapper { 104 margin: 0px auto; 105 max-width: $content-width; 106 padding: 0 10px; 107} 108 109.projectLogo { 110 display: none; 111 112 img { 113 height: 100px; 114 margin-bottom: 0px; 115 } 116} 117 118section#intro { 119 margin: 40px 0; 120} 121 122.fbossFontLight { 123 font-family: $base-font-family; 124 font-weight: 300; 125 font-style: normal; 126} 127 128.fb-like { 129 display: block; 130 margin-bottom: 20px; 131 width: 100%; 132} 133 134.center { 135 display: block; 136 text-align: center; 137} 138 139.mainContainer { 140 background: $secondary-bg; 141 overflow: auto; 142 143 .mainWrapper { 144 padding: 4vh 10px; 145 text-align: left; 146 147 .allShareBlock { 148 padding: 10px 0; 149 150 .pluginBlock { 151 margin: 12px 0; 152 padding: 0; 153 } 154 } 155 156 a { 157 &:hover, 158 &:focus { 159 background: $primary-bg; 160 color: $primary-overlay; 161 } 162 } 163 164 em, i { 165 font-style: italic; 166 } 167 168 strong, b { 169 font-weight: bold; 170 } 171 172 h1 { 173 font-size: 300%; 174 line-height: 1em; 175 padding: 1.4em 0 1em; 176 text-align: left; 177 } 178 179 h2 { 180 font-size: 250%; 181 line-height: 1em; 182 margin-bottom: 20px; 183 padding: 1.4em 0 20px; 184 text-align: left; 185 186 & { 187 border-bottom: 1px solid darken($primary-bg, 10%); 188 color: darken($primary-bg, 10%); 189 font-size: 22px; 190 padding: 10px 0; 191 } 192 193 &.blockHeader { 194 border-bottom: 1px solid white; 195 color: white; 196 font-size: 22px; 197 margin-bottom: 20px; 198 padding: 10px 0; 199 } 200 } 201 202 h3 { 203 font-size: 150%; 204 line-height: 1.2em; 205 padding: 1em 0 0.8em; 206 } 207 208 h4 { 209 font-size: 130%; 210 line-height: 1.2em; 211 padding: 1em 0 0.8em; 212 } 213 214 p { 215 padding: 0.8em 0; 216 } 217 218 ul { 219 list-style: disc; 220 } 221 222 ol, ul { 223 padding-left: 24px; 224 li { 225 padding-bottom: 4px; 226 padding-left: 6px; 227 } 228 } 229 230 strong { 231 font-weight: bold; 232 } 233 234 .post { 235 position: relative; 236 237 .katex { 238 font-weight: 700; 239 } 240 241 &.basicPost { 242 margin-top: 30px; 243 } 244 245 a { 246 color: $primary-bg; 247 248 &:hover, 249 &:focus { 250 color: #fff; 251 } 252 } 253 254 h2 { 255 border-bottom: 4px solid $primary-bg; 256 font-size: 130%; 257 } 258 259 h3 { 260 border-bottom: 1px solid $primary-bg; 261 font-size: 110%; 262 } 263 264 ol { 265 list-style: decimal outside none; 266 } 267 268 .post-header { 269 padding: 1em 0; 270 271 h1 { 272 font-size: 150%; 273 line-height: 1em; 274 padding: 0.4em 0 0; 275 276 a { 277 border: none; 278 } 279 } 280 281 .post-meta { 282 color: $primary-bg; 283 font-family: $header-font-family; 284 text-align: center; 285 } 286 } 287 288 .postSocialPlugins { 289 padding-top: 1em; 290 } 291 292 .docPagination { 293 background: $primary-bg; 294 bottom: 0px; 295 left: 0px; 296 position: absolute; 297 right: 0px; 298 299 .pager { 300 display: inline-block; 301 width: 50%; 302 } 303 304 .pagingNext { 305 float: right; 306 text-align: right; 307 } 308 309 a { 310 border: none; 311 color: $primary-overlay; 312 display: block; 313 padding: 4px 12px; 314 315 &:hover { 316 background-color: $secondary-bg; 317 color: $text; 318 } 319 320 .pagerLabel { 321 display: inline; 322 } 323 324 .pagerTitle { 325 display: none; 326 } 327 } 328 } 329 } 330 331 .posts { 332 .post { 333 margin-bottom: 6vh; 334 } 335 } 336 } 337} 338 339#integrations_title { 340 font-size: 250%; 341 margin: 80px 0; 342} 343 344.ytVideo { 345 height: 0; 346 overflow: hidden; 347 padding-bottom: 53.4%; /* 16:9 */ 348 padding-top: 25px; 349 position: relative; 350} 351 352.ytVideo iframe, 353.ytVideo object, 354.ytVideo embed { 355 height: 100%; 356 left: 0; 357 position: absolute; 358 top: 0; 359 width: 100%; 360} 361 362@media only screen and (min-width: 480px) { 363 h1#project_title { 364 font-size: 500%; 365 } 366 367 h2#project_tagline { 368 font-size: 250%; 369 } 370 371 .projectLogo { 372 img { 373 margin-bottom: 10px; 374 height: 200px; 375 } 376 } 377 378 .homeContainer .homeWrapper { 379 padding-left: 10px; 380 padding-right: 10px; 381 } 382 383 .mainContainer { 384 .mainWrapper { 385 .post { 386 h2 { 387 font-size: 180%; 388 } 389 390 h3 { 391 font-size: 120%; 392 } 393 394 .docPagination { 395 a { 396 .pagerLabel { 397 display: none; 398 } 399 .pagerTitle { 400 display: inline; 401 } 402 } 403 } 404 } 405 } 406 } 407} 408 409@media only screen and (min-width: 900px) { 410 .homeContainer { 411 .homeWrapper { 412 position: relative; 413 414 #inner { 415 box-sizing: border-box; 416 max-width: 600px; 417 padding-right: 40px; 418 } 419 420 .projectLogo { 421 align-items: center; 422 bottom: 0; 423 display: flex; 424 justify-content: flex-end; 425 left: 0; 426 padding: 2em 20px 4em; 427 position: absolute; 428 right: 20px; 429 top: 0; 430 431 img { 432 height: 100%; 433 max-height: 250px; 434 } 435 } 436 } 437 } 438} 439 440@media only screen and (min-width: 1024px) { 441 .mainContainer { 442 .mainWrapper { 443 .post { 444 box-sizing: border-box; 445 display: block; 446 447 .post-header { 448 h1 { 449 font-size: 250%; 450 } 451 } 452 } 453 454 .posts { 455 .post { 456 margin-bottom: 4vh; 457 width: 100%; 458 } 459 } 460 } 461 } 462} 463 464@media only screen and (min-width: 1200px) { 465 .homeContainer { 466 .homeWrapper { 467 #inner { 468 max-width: 750px; 469 } 470 } 471 } 472 473 .wrapper { 474 max-width: 1100px; 475 } 476} 477 478@media only screen and (min-width: 1500px) { 479 .homeContainer { 480 .homeWrapper { 481 #inner { 482 max-width: 1100px; 483 padding-bottom: 40px; 484 padding-top: 40px; 485 } 486 } 487 } 488 489 .wrapper { 490 max-width: 1400px; 491 } 492} 493