SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html>3 <head>4 <style>5 @charset "UTF-8";6/*!7* Pixyll - A simple, beautiful Jekyll theme that's mobile first.8* @author John Otander <[EMAIL REDACTED]> (http://johnotander.com/)9* @link https://github.com/johnotander/pixyll10* @license MIT11*/12/*!13 14 BASSCSS15 16 Next-level CSS toolkit - basscss.com17 18 Made with love by Jxnblk - ©2014 Brent Jackson19 MIT License http://opensource.org/licenses/MIT20 21*/22/* Basscss Base Buttons */23button,24.button {25 font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif;26 font-size: inherit;27 font-weight: normal;28 text-decoration: none;29 cursor: pointer;30 display: inline-block;31 box-sizing: border-box;32 line-height: 1.125rem;33 padding: 0.5rem 1rem;34 margin: 0;35 height: auto;36 border: 1px solid transparent;37 vertical-align: middle;38 -webkit-appearance: none; }39 40::-moz-focus-inner {41 border: 0;42 padding: 0; }43 44.button:hover {45 text-decoration: none; }46 47/* Basscss Base Forms */48input,49select,50textarea,51fieldset {52 font-size: 1rem;53 margin-top: 0;54 margin-bottom: 0.5rem; }55 56input[type=text],57input[type=datetime],58input[type=datetime-local],59input[type=email],60input[type=month],61input[type=number],62input[type=password],63input[type=search],64input[type=tel],65input[type=time],66input[type=url],67input[type=week] {68 box-sizing: border-box;69 height: 2.25rem;70 padding: 0.5rem 0.5rem;71 vertical-align: middle;72 -webkit-appearance: none; }73 74select {75 box-sizing: border-box;76 line-height: 1.75;77 padding: 0.5rem 0.5rem; }78 79select:not([multiple]) {80 height: 2.25rem;81 vertical-align: middle; }82 83textarea {84 box-sizing: border-box;85 line-height: 1.75;86 padding: 0.5rem 0.5rem; }87 88.fieldset-reset {89 padding: 0;90 margin-left: 0;91 margin-right: 0;92 border: 0; }93 94.fieldset-reset legend {95 padding: 0; }96 97body,98button {99 margin: 0; }100 101button,102input,103select,104textarea {105 font-family: inherit;106 font-size: 100%; }107 108img {109 max-width: 100%; }110 111svg {112 max-height: 100%; }113 114/* Basscss Base Typography */115body {116 font-family: "Merriweather", "PT Serif", Georgia, "Times New Roman", serif;117 line-height: 1.5;118 font-size: 100%; }119 120h1,121h2,122h3,123h4,124h5,125h6 {126 font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif;127 font-weight: 900;128 line-height: 1.25;129 margin-top: 1em;130 margin-bottom: .5em; }131 132p,133dl,134ol,135ul {136 font-size: 1rem;137 margin-top: 0;138 margin-bottom: 1rem; }139 140ol,141ul {142 padding-left: 2rem; }143 144pre,145code,146samp {147 font-family: "Source Code Pro", Consolas, monospace;148 font-size: inherit; }149 150pre {151 margin-top: 0;152 margin-bottom: 1rem;153 overflow-x: scroll; }154 155hr {156 margin-top: 2rem;157 margin-bottom: 2rem; }158 159blockquote {160 margin-top: 2rem;161 margin-bottom: 2rem;162 margin-left: 0;163 padding-left: 1rem;164 padding-right: 1rem; }165 166blockquote,167blockquote p {168 font-size: 1.25rem;169 font-style: italic; }170 171h1,172.h1 {173 font-size: 2.998rem; }174 175h2,176.h2 {177 font-size: 1.5rem; }178 179h3,180.h3 {181 font-size: 1.25rem; }182 183h4,184.h4 {185 font-size: 1rem; }186 187h5,188.h5 {189 font-size: 0.875rem; }190 191h6,192.h6 {193 font-size: 0.75rem; }194 195.list-reset {196 list-style: none;197 padding-left: 0; }198 199.button-blue {200 color: white;201 background-color: #0076df;202 border-radius: 3px;203 transition-duration: .1s;204 transition-timing-function: ease-out;205 transition-property: box-shadow, background-color; }206 207.button-blue:hover {208 opacity: .875; }209 210.button-blue:active,211.button-blue.is-active {212 box-shadow: inset 0 0 0 32px rgba(0, 0, 0, 0.125), inset 0 2px 3px 0 rgba(0, 0, 0, 0.25); }213 214.button-blue:focus {215 outline: none;216 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 1px 4px rgba(0, 118, 223, 0.5); }217 218.button-blue:disabled,219.button-blue.is-disabled {220 opacity: .5; }221 222.highlight {223 -webkit-text-size-adjust: none; }224 225.highlight .c,226.highlight .cs,227.highlight .cm,228.highlight .cp,229.highlight .c1 {230 color: #777;231 font-style: italic; }232 233.highlight .k,234.highlight .kc,235.highlight .kd,236.highlight .kn,237.highlight .kr,238.highlight .kt,239.highlight .kp {240 color: #00369f; }241 242.highlight .na,243.highlight .nb,244.highlight .nc,245.highlight .no,246.highlight .nd,247.highlight .ni,248.highlight .ne,249.highlight .nf,250.highlight .nl,251.highlight .nn,252.highlight .nx {253 color: #333; }254 255.highlight .mi,256.highlight .il {257 color: #009f06; }258 259.highlight .s,260.highlight .sb,261.highlight .sc,262.highlight .sd,263.highlight .s2,264.highlight .s3,265.highlight .sh,266.highlight .si,267.highlight .sx,268.highlight .sr,269.highlight .ss,270.highlight .s1 {271 color: #f95020; }272 273.hljs-title,274.hljs-id,275.scss .hljs-preprocessor {276 color: #f95020;277 font-weight: bold; }278 279.highlight .k {280 font-weight: normal; }281 282.highlight .nc,283.highlight .no {284 color: #00369f; }285 286.highlight .o {287 color: #00369f;288 font-weight: normal; }289 290.highlight .nb {291 color: #009f06; }292 293.highlight .sr {294 color: #009f06; }295 296.highlight .ss {297 color: #f92080; }298 299.hljs-built_in {300 color: #00369f; }301 302.hljs-preprocessor,303.hljs-pragma,304.hljs-pi,305.hljs-doctype,306.hljs-shebang,307.hljs-cdata {308 color: #777;309 font-weight: bold; }310 311.hljs-deletion {312 background: #ffdddd; }313 314.hljs-addition {315 background: #ddffdd; }316 317.diff .hljs-change {318 background: #00369f; }319 320.hljs-chunk {321 color: #ccc; }322 323/* Basscss Color Base */324body {325 color: #333;326 background-color: white; }327 328a {329 color: #0076df;330 text-decoration: none; }331 332a:hover {333 text-decoration: underline; }334 335pre,336code {337 background-color: #eee;338 border-radius: 3px; }339 340hr {341 border: 0;342 border-bottom-style: solid;343 border-bottom-width: 1px;344 border-bottom-color: #ccc; }345 346/* Basscss Colors */347.dark-gray {348 color: #333; }349 350.white {351 color: white; }352 353.blue {354 color: #0076df; }355 356.mid-gray {357 color: #777; }358 359.light-gray {360 color: #ccc; }361 362.lighter-gray {363 color: #eee; }364 365.red {366 color: #f95020; }367 368.green {369 color: #00cf26; }370 371.yellow {372 color: #efcc00; }373 374.orange {375 color: #ffcc22; }376 377.bg-dark-gray {378 background-color: #333; }379 380.bg-white {381 background-color: white; }382 383.bg-blue {384 background-color: #0076df; }385 386.bg-mid-gray {387 background-color: #777; }388 389.bg-light-gray {390 background-color: #ccc; }391 392.bg-lighter-gray {393 background-color: #eee; }394 395.bg-red {396 background-color: #f95020; }397 398.bg-green {399 background-color: #00cf26; }400 401.bg-yellow {402 background-color: #efcc00; }403 404.bg-orange {405 background-color: #ffcc22; }406 407.bg-darken-1 {408 background-color: rgba(0, 0, 0, 0.0625); }409 410.bg-darken-2 {411 background-color: rgba(0, 0, 0, 0.125); }412 413.bg-darken-3 {414 background-color: rgba(0, 0, 0, 0.25); }415 416.bg-darken-4 {417 background-color: rgba(0, 0, 0, 0.5); }418 419/* Basscss Utility Headings */420.h00 {421 font-size: 4rem; }422 423.h0 {424 font-size: 3rem; }425 426@media (min-width: 52em) {427 .h00-responsive {428 font-size: 8vw; }429 430 .h0-responsive {431 font-size: 6vw; }432 433 .h1-responsive {434 font-size: 4vw; } }435@media (min-width: 96em) {436 .h00-responsive {437 font-size: 7.68rem; }438 439 .h0-responsive {440 font-size: 5.76rem; }441 442 .h1-responsive {443 font-size: 3.84rem; } }444/* Basscss Utility Typography */445.bold {446 font-weight: bold; }447 448.regular {449 font-weight: normal; }450 451.italic, .post-footer {452 font-style: italic; }453 454.caps {455 text-transform: uppercase;456 letter-spacing: .2em; }457 458.left-align {459 text-align: left; }460 461.center {462 text-align: center; }463 464.right-align {465 text-align: right; }466 467.justify {468 text-align: justify; }469 470.nowrap {471 white-space: nowrap; }472 473/* Basscss Utility White Space */474.m0 {475 margin: 0; }476 477.mt0 {478 margin-top: 0; }479 480.mr0 {481 margin-right: 0; }482 483.mb0 {484 margin-bottom: 0; }485 486.ml0 {487 margin-left: 0; }488 489.m1 {490 margin: 0.5rem; }491 492.mt1 {493 margin-top: 0.5rem; }494 495.mr1 {496 margin-right: 0.5rem; }497 498.mb1 {499 margin-bottom: 0.5rem; }500 501.ml1 {502 margin-left: 0.5rem; }503 504.m2 {505 margin: 1rem; }506 507.mt2 {508 margin-top: 1rem; }509 510.mr2 {511 margin-right: 1rem; }512 513.mb2 {514 margin-bottom: 1rem; }515 516.ml2 {517 margin-left: 1rem; }518 519.m3 {520 margin: 2rem; }521 522.mt3 {523 margin-top: 2rem; }524 525.mr3 {526 margin-right: 2rem; }527 528.mb3 {529 margin-bottom: 2rem; }530 531.ml3 {532 margin-left: 2rem; }533 534.m4 {535 margin: 4rem; }536 537.mt4 {538 margin-top: 4rem; }539 540.mr4 {541 margin-right: 4rem; }542 543.mb4 {544 margin-bottom: 4rem; }545 546.ml4 {547 margin-left: 4rem; }548 549.mxn1 {550 margin-left: -0.5rem;551 margin-right: -0.5rem; }552 553.mxn2 {554 margin-left: -1rem;555 margin-right: -1rem; }556 557.mxn3 {558 margin-left: -2rem;559 margin-right: -2rem; }560 561.mxn4 {562 margin-left: -4rem;563 margin-right: -4rem; }564 565.mx-auto {566 margin-left: auto;567 margin-right: auto; }568 569.p1 {570 padding: 0.5rem; }571 572.py1 {573 padding-top: 0.5rem;574 padding-bottom: 0.5rem; }575 576.px1 {577 padding-left: 0.5rem;578 padding-right: 0.5rem; }579 580.p2 {581 padding: 1rem; }582 583.py2 {584 padding-top: 1rem;585 padding-bottom: 1rem; }586 587.px2 {588 padding-left: 1rem;589 padding-right: 1rem; }590 591.p3 {592 padding: 2rem; }593 594.py3 {595 padding-top: 2rem;596 padding-bottom: 2rem; }597 598.px3 {599 padding-left: 2rem;600 padding-right: 2rem; }601 602.p4 {603 padding: 4rem; }604 605.py4 {606 padding-top: 4rem;607 padding-bottom: 4rem; }608 609.px4 {610 padding-left: 4rem;611 padding-right: 4rem; }612 613/*!614 615Pixyll616 617A simple, beautiful theme for Jekyll that emphasizes content rather than618aesthetic fluff.619 620Built upon BASSCSS (http://jxnblk.github.io/basscss).621 622Crafted with <3 by John Otander (@4lpine) - ©2015 John Otander623MIT License http://opensource.org/licenses/MIT624 625*/626html, body {627 height: auto;628 min-height: 100%; }629 630img {631 max-width: 100%; }632 633em img {634 max-width: 100%;635 margin-left: 0; }636 637body {638 box-sizing: border-box;639 -moz-box-sizing: border-box;640 -webkit-box-sizing: border-box; }641 642a {643 color: #0076df;644 background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 13%, rgba(0, 118, 223, 0.8) 13%, rgba(0, 118, 223, 0.8) 18%, rgba(0, 0, 0, 0) 17%);645 text-shadow: white 1px 0px 0px, white -1px 0px 0px; }646 647a:hover,648a:focus,649a:active {650 border: 0;651 color: #000a13;652 text-decoration: none;653 background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 13%, rgba(0, 10, 19, 0.8) 13%, rgba(0, 10, 19, 0.8) 17%, rgba(0, 0, 0, 0) 17%);654 text-shadow: white 1px 0px 0px, white -1px 0px 0px; }655 656button,657.button {658 text-shadow: none;659 background-image: none; }660 661.button:hover,662.button:focus,663.button:active {664 color: white;665 text-shadow: none;666 background-image: none; }667 668.anchorjs-link {669 text-shadow: none;670 background-image: none; }671 672.anchorjs-link:hover,673.anchorjs-link:focus,674.anchorjs-link:active {675 border: 0;676 color: #000a13;677 text-shadow: none;678 background-image: none; }679 680.left {681 float: left; }682 683.right {684 float: right; }685 686.clearfix:before, .clearfix:after {687 content: ' ';688 display: table; }689 690.clearfix:after {691 clear: both; }692 693pre,694pre code {695 background-color: transparent;696 border-radius: 0; }697 698pre,699code {700 font-family: "Source Code Pro", Consolas, monospace; }701 702code {703 color: #7a7a7a; }704 705pre {706 padding: 1.125em;707 line-height: 1.11;708 overflow-x: scroll;709 margin-bottom: 0.88em;710 background-color: #fafafa; }711 712.highlight .p {713 font-size: 1.125rem;714 line-height: 1; }715 716pre {717 counter-reset: line-numbering;718 white-space: pre;719 overflow-x: auto;720 word-break: inherit;721 word-wrap: inherit; }722 723pre a {724 background-image: none; }725 726pre a::before {727 content: counter(line-numbering);728 counter-increment: line-numbering;729 padding-right: 1em;730 /* space after numbers */731 width: 25px;732 text-align: right;733 opacity: 0.7;734 display: inline-block;735 color: #ccc;736 margin-right: 16px;737 font-size: 13px;738 -webkit-touch-callout: none;739 -webkit-user-select: none;740 -khtml-user-select: none;741 -moz-user-select: none;742 -ms-user-select: none;743 user-select: none; }744 745pre a:first-of-type::before {746 padding-top: 10px; }747 748pre a:last-of-type::before {749 padding-bottom: 10px; }750 751pre a:only-of-type::before {752 padding: 10px; }753 754input,755select,756textarea,757fieldset {758 font-size: 1rem;759 margin-top: 0;760 margin-bottom: 0.5rem; }761 762input[type=text],763input[type=datetime],764input[type=datetime-local],765input[type=email],766input[type=month],767input[type=number],768input[type=password],769input[type=search],770input[type=tel],771input[type=time],772input[type=url],773input[type=week] {774 box-sizing: border-box;775 height: 2.25rem;776 padding: 0.5rem 0.5rem;777 vertical-align: middle;778 -webkit-appearance: none; }779 780select {781 box-sizing: border-box;782 line-height: 1.75;783 padding: 0.5rem 0.5rem; }784 785select:not([multiple]) {786 height: 2.25rem;787 vertical-align: middle; }788 789textarea {790 box-sizing: border-box;791 line-height: 1.75;792 padding: 0.5rem 0.5rem; }793 794.form-stacked input,795.form-stacked textarea,796.form-stacked select {797 width: 100%; }798 799.field-light {800 background-color: white;801 transition: box-shadow .2s ease;802 border-style: solid;803 border-width: 1px;804 border-color: #ccc;805 border-radius: 3px; }806 807.field-light:focus {808 outline: none;809 border-color: #0076df;810 box-shadow: 0 0 2px rgba(0, 118, 223, 0.5); }811 812.field-light:disabled {813 color: #777;814 background-color: rgba(0, 0, 0, 0.125); }815 816.field-light:read-only:not(select) {817 background-color: rgba(0, 0, 0, 0.125); }818 819.field-light:invalid {820 border-color: #f95020; }821 822.field-light.is-success {823 border-color: #00cf26; }824 825.field-light.is-warning {826 border-color: #efcc00; }827 828.field-light.is-error {829 border-color: #f95020; }830 831.radio-light,832.checkbox-light {833 transition: box-shadow .2s ease; }834 835.radio-light {836 border-radius: 50%; }837 838.radio-light:focus,839.checkbox-light:focus {840 outline: none;841 box-shadow: 0 0 2px rgba(0, 118, 223, 0.5); }842 843html {844 font-size: 14px; }845 846abbr {847 border-bottom: 1px black dotted;848 cursor: help; }849 850p {851 color: #333;852 line-height: 1.5; }853 854small,855.small {856 font-size: 0.707rem; }857 858sup {859 position: relative;860 vertical-align: middle;861 top: -0.9ex; }862 863.site-header {864 padding-top: 0.5rem;865 padding-bottom: 1rem; }866 867.site-header a {868 color: #333;869 font-size: 1.25rem;870 font-weight: 300;871 background-image: none; }872 873.site-header .site-title {874 font-size: 1.5rem; }875 876.site-nav {877 margin-top: 1rem; }878 879.site-header nav a {880 color: #666; }881 882.site-header nav a:hover,883.site-header nav a:focus,884.site-header nav a:active {885 color: #444;886 opacity: 1;887 border-bottom: 2px solid #444; }888 889.site-nav a + a {890 margin-left: 1em; }891 892.site-header a:hover,893.posts .post a:hover .post-meta,894.posts .post a:hover .post-title,895.posts .post a:hover .post-summary {896 opacity: 0.88; }897 898.site-header {899 text-align: center; }900 901.site-header .site-nav {902 text-align: center; }903 904/*905 Table styles copied from Bootstrap906 Copyright (c) 2013 Twitter, Inc907*/908table {909 width: 100%;910 max-width: 100%;911 margin-bottom: 1.5;912 font-size: 1.125rem; }913 table > thead > tr > th,914 table > thead > tr > td,915 table > tbody > tr > th,916 table > tbody > tr > td,917 table > tfoot > tr > th,918 table > tfoot > tr > td {919 padding: 12px;920 line-height: 1.2;921 vertical-align: top;922 border-top: 1px solid #333; }923 table > thead > tr > th {924 vertical-align: bottom;925 border-bottom: 2px solid #333; }926 table > caption + thead > tr:first-child > th,927 table > caption + thead > tr:first-child > td,928 table > colgroup + thead > tr:first-child > th,929 table > colgroup + thead > tr:first-child > td,930 table > thead:first-child > tr:first-child > th,931 table > thead:first-child > tr:first-child > td {932 border-top: 0; }933 table > tbody + tbody {934 border-top: 2px solid #333; }935 936/*!937Animate.css - http://daneden.me/animate938Licensed under the MIT license - http://opensource.org/licenses/MIT939 940Copyright (c) 2014 Daniel Eden941*/942.animated {943 -webkit-animation-duration: 1s;944 animation-duration: 1s;945 -webkit-animation-fill-mode: both;946 animation-fill-mode: both; }947 948.animated.infinite {949 -webkit-animation-iteration-count: infinite;950 animation-iteration-count: infinite; }951 952.animated.hinge {953 -webkit-animation-duration: 2s;954 animation-duration: 2s; }955 956@-webkit-keyframes fadeInDown {957 0% {958 opacity: 0;959 -webkit-transform: translateY(-20px);960 transform: translateY(-20px); }961 100% {962 opacity: 1;963 -webkit-transform: translateY(0);964 transform: translateY(0); } }965@keyframes fadeInDown {966 0% {967 opacity: 0;968 -webkit-transform: translateY(-20px) translate3d(0, 0, 0);969 -ms-transform: translateY(-20px) translate3d(0, 0, 0);970 transform: translateY(-20px) translate3d(0, 0, 0); }971 100% {972 opacity: 1;973 -webkit-transform: translateY(0) translate3d(0, 0, 0);974 -ms-transform: translateY(0) translate3d(0, 0, 0);975 transform: translateY(0) translate3d(0, 0, 0); } }976.fade-in-down {977 -webkit-animation-name: fadeInDown;978 animation-name: fadeInDown; }979 980.site {981 display: -webkit-box;982 display: -webkit-flex;983 display: -ms-flexbox;984 display: flex;985 -webkit-box-orient: vertical;986 -webkit-box-direction: normal;987 -webkit-flex-direction: column;988 -ms-flex-direction: column;989 flex-direction: column;990 min-height: 100vh; }991 992.site-wrap {993 -webkit-box-flex: 1;994 -webkit-flex: 1;995 -ms-flex: 1 0 auto;996 flex: 1 0 auto; }997 998footer {999 background-color: #fafafa;1000 border-top: thin solid #f3f3f3;1001 color: #7a7a7a;1002 font-size: 0.75rem;1003 font-weight: 300;1004 padding: 2rem;1005 text-align: center; }1006 1007.social-icons-left, .social-icons-right {1008 text-align: center;1009 float: none; }1010 1011.social-icons {1012 font-size: 1.25rem;1013 padding: 0.5em 0 0 0;1014 width: 100%; }1015 1016.social-icons a.fa {1017 cursor: pointer;1018 opacity: 0.8;1019 padding: 0.2em; }1020 1021.social-icons a.fa:hover {1022 opacity: 1; }1023 1024.social-icons iframe[title=Flattr] {1025 position: relative;1026 top: 0.1em; }1027 1028blockquote {1029 border-left: 5px solid #7a7a7a;1030 font-style: italic;1031 margin-left: 0.5rem;1032 padding: 0.5rem; }1033 1034blockquote footer {1035 background-color: #fff;1036 border-color: transparent;1037 color: #7a7a7a;1038 font-size: .85rem;1039 font-style: normal;1040 text-align: left;1041 padding: 0; }1042 1043.posts {1044 margin: 0; }1045 1046.posts .post {1047 margin-bottom: 0.75em;1048 border-bottom: thin solid #f3f3f3; }1049 1050.posts .post:last-child {1051 border-bottom: none;1052 margin-bottom: .375em;1053 padding-bottom: 0; }1054 1055.post-link .post-title {1056 margin-top: 0;1057 font-weight: 600;1058 color: #333; }1059 1060.post-footer {1061 margin-top: .75rem;1062 text-align: center; }1063 1064.post-footer .avatar {1065 margin: 2rem 0;1066 width: 100px;1067 border-radius: 50%; }1068 1069.meta,1070.post-meta {1071 width: auto;1072 font-weight: 300;1073 margin: 0;1074 padding: .25em 0;1075 color: #7a7a7a;1076 font-style: italic; }1077 1078.related-post-title {1079 border-bottom: thin solid #f3f3f3; }1080 1081@media screen and (min-width: 32em) {1082 html {1083 font-size: 16px; }1084 1085 h1,1086 .h1 {1087 font-size: 2.998rem; }1088 1089 .site-header {1090 text-align: left; }1091 1092 .site-nav {1093 margin-top: 0; }1094 1095 .site-header a {1096 font-size: 1rem; }1097 1098 .site-header .site-title {1099 font-size: 1.25rem;1100 float: left; }1101 1102 .site-header .site-nav {1103 float: right;1104 margin-top: .25rem; }1105 1106 blockquote {1107 margin-left: 2rem;1108 padding: 2rem; }1109 1110 .social-icons-left {1111 text-align: left; }1112 1113 .social-icons-right {1114 text-align: right; } }1115@media screen and (min-width: 48em) {1116 html {1117 font-size: 18px; } }1118@media screen and (min-width: 64em) {1119 html {1120 font-size: 20px; } }1121@media screen and (min-width: 78em) {1122 em img {1123 max-width: 56rem;1124 margin-left: -7em; } }1125.gist,1126.gist .highlight .p {1127 font-size: .75rem; }1128 1129.gist .lines {1130 width: 100%; }1131 1132.measure {1133 margin: 0 auto;1134 max-width: 42rem; }1135 1136.pagination {1137 font-size: 1rem;1138 font-family: 'Lato', 'Helvetica Neue', Helvetica, sans-serif;1139 font-weight: 300;1140 text-align: center; }1141 1142.pagination a, .pagination .disabled {1143 -webkit-transition: all 0.2s ease-in-out;1144 -moz-transition: all 0.2s ease-in-out;1145 transition: all 0.2s ease-in-out;1146 background: #fafafa;1147 border-radius: 0.1875em;1148 border: 1px solid #f3f3f3;1149 color: #333333;1150 padding: 1em 1.5em; }1151 1152.pagination .disabled {1153 opacity: 0.5; }1154 1155.pagination a:hover, .pagination a:focus {1156 background: white;1157 color: #477dca; }1158 1159.pagination a:active {1160 background: #f7f7f7; }1161 1162.pagination .button {1163 font-size: 1rem;1164 font-weight: 300;1165 letter-spacing: 1px; }1166 1167.button-disabled {1168 opacity: 0.55;1169 background-color: #999; }1170 1171.button-disabled:hover,1172.button-disabled:active,1173.button-disabled:focus {1174 cursor: not-allowed;1175 background-color: #999; }1176 1177 1178 1179@font-face {1180 font-family: 'Merriweather';1181 font-style: italic;1182 font-weight: 300;1183 src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4l0qyriQwlOrhSvowK_l5-eR7lXff4jvk.ttf) format('truetype');1184}1185@font-face {1186 font-family: 'Merriweather';1187 font-style: italic;1188 font-weight: 900;1189 src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4l0qyriQwlOrhSvowK_l5-eR7NWPf4jvk.ttf) format('truetype');1190}1191@font-face {1192 font-family: 'Merriweather';1193 font-style: normal;1194 font-weight: 300;1195 src: url(https://fonts.gstatic.com/s/merriweather/v30/u-4n0qyriQwlOrhSvowK_l521wRZWMf_.ttf) format('truetype');1196}1197@font-face {1198 font-family: 'Merriweather';1199 font-style: normal;1200 font-weight: 900;