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 lang="en">3 <head>4 <meta charset="utf-8">5 <meta content="width=device-width,initial-scale=1.0" name="viewport">6 <title>7 Respecting Users - foobartel.com8 </title>9 <meta content="foobartel Ltd. - Web Design & Development" name="description">10 <meta content="web design, consulting, design, development, front end, web performance, accessibility, hong kong, asia" name="keywords">11 <meta content="#2e4459" name="theme-color">12 <meta content="" property="og:url">13 <meta content="Respecting Users - foobartel.com" property="og:title">14 <meta content="foobartel Ltd. - Web Design & Development" property="og:description">15 <meta content="foobartel.com" property="og:site_name">16 <meta content="en_GB" property="og:locale">17 <meta content="article" property="og:type">18 <meta content="Holger Bartel" property="article:author">19 <meta content property="article:published_time">20 <meta content property="article:modified_time">21 <style>22 :root {23 --primary: #2e4459;24 --secondary: #d61925;25 --accent: #79c9d4;26 --headline: #2e4459;27 --text: #2e4459;28 --text-negative: #f5f7f8;29 --background: #f3eeed;30 --primary-trans: #2e44591a;31 --secondary-trans: rgba(214, 25, 37, 0.75);32 --accent-trans: rgba(121, 201, 212, 0.8);33 34 35 --light-grey: rgba(101, 139, 160, 0.3);36 --white: #fff;37 38 /*39--primary: #dbe1c8;40 --secondary: #f2e463;41 --accent: #cddc39;42 --headline: #cddc39;43 --text: #dbe1c8;44 --text-negative: #2e4459;45 --background: #2b3d36;46 --primary-trans: rgba(214, 25, 37, 0.75);47 --secondary-trans: rgba(214, 25, 37, 0.75);48 --accent-trans: rgba(121, 201, 212, 0.8);49 */50 51}52 53html {54 box-sizing: border-box;55 height: 100%;56 font-size: 1rem;57 font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;58 line-height: 1.5;59 color: var(--text);60}61 62body {63 margin: 0;64 padding: 0;65 overflow-x: hidden;66}67 68main {69 margin: 1rem;70 font-size: 1.25em;71 background-color: var(--background);72 background-image: url(images/background-tile-dark.svg);73 background-size: 18px;74}75 76@media(max-width: 37.5em) {77 .mistral main {78 margin: 0;79 }80}81 82.tetris main {83 background-image: url(images/background-tile-tetris.svg);84 background-size: 80px;85}86 87.linedots main {88 background-image: url(images/background-tile-linedots-dark.svg);89 background-size: 21px;90}91 92.circles main {93 background-image: url(images/background-tile-dark-circles.svg);94 background-size: 24px;95}96 97* {98 box-sizing: border-box;99}100 101:not(.home)>main {102 min-height: calc(100vh - 7.125rem);103}104 105img {106 max-width: 100%;107}108 109h1, h2, h3, h4, h5, h6 {110 font-family: Georgia;111 font-weight: lighter;112 line-height: 1.2;113}114 115h1,116h2.entry-title {117 margin-bottom: 0.25em;118 color: var(--headline);119 font-size: 1.626em;120}121 122h2 {123 font-size: 1.35em;124}125 126@media(min-width: 37.5em) {127 h1,128 h2.entry-title {129 font-size: 2em;130 margin-bottom: 0.25em;131 }132 133 h2 {134 font-size: 1.75em;135 }136}137 138article.h-entry {139 margin-top: 3.5rem;140}141 142@media (min-width: 37.5em) {143 article.h-entry {144 margin-top: 5rem;145 }146}147 148.entry-title img {149 max-width: 1.5rem;150}151 152h3 {153 font-size: 1.5em;154 margin-bottom: 0.75em;155}156 157body:not(.mistral) figure img {158 border-radius: 0.3rem;159}160 161figure {162 margin: 0;163}164 165@media (min-width: 37.5em) {166 figure {167 margin: 2rem;168 }169}170 171@media (min-width: 42.5em) {172 figure {173 margin: 3rem;174 }175}176 177figure.centered {178 text-align: center;179}180 181figure.narrow {182 width: 75%;183 margin: 0 auto;184}185 186figure.overflow {187 margin: 0;188 max-width: 55rem;189}190 191@media (min-width: 65rem) {192 figure.overflow {193 margin-left: -2.5rem;194 margin-right: -2.5rem;195 max-width: 60rem;196 }197}198 199@media (min-width: 75rem) {200 figure.overflow {201 margin-left: -5rem;202 margin-right: -5rem;203 max-width: 65rem;204 }205}206 207figcaption {208 font-size: 0.75rem;209}210 211figure.centered + figcaption {212 text-align: center;213}214 215.post-info {216 font-size: 0.75rem;217 font-weight: 400;218 color: var(--primary);219 margin-top: -0.25rem;220}221 222.pagination {223 margin: 5rem auto;224 display: block;225 text-align: center;226}227 228blockquote {229 margin-right: 0.5em;230 margin-left: 0;231 padding-left: 1em;232 color: rgba(46, 68, 89, 0.75);233 border-left: 0.25em solid var(--primary);234}235 236@media (min-width: 30em) {237 blockquote {238 margin-right: 1.5em;239 margin-left: 1em;240 }241}242 243@media (min-width: 37.5em) {244 blockquote {245 margin-right: 2.5em;246 margin-left: 2em;247 }248}249 250blockquote ul {251 margin-left: 1rem;252}253 254pre {255 padding: 1em;256 background: var(--white);257 border-radius: 0.2em;258 border: thin solid var(--light-grey);259 overflow: scroll;260}261 262code {263 background: var(--white);264 padding: 0.25rem;265 border-radius: 0.2rem;266 word-break: break-word;267}268 269pre {270 padding: 1em;271 background: var(--white);272 border-radius: 0.2em;273 border: thin solid var(--light-grey);274 overflow: scroll;275}276 277pre > code {278 background: transparent;279 padding: 0;280 border-radius: 0;281}282 283sup {284 font-size: 0.75rem;285}286 287abbr {288 border-bottom: thin dashed var(--secondary);289 text-decoration: none;290 cursor: help;291}292 293 294 295.grid {296 display: grid;297 grid-gap: 1rem;298}299 300.flex {301 display: flex;302}303 304 305.grid.talks {306 margin-left: 0;307 grid-template-columns: 1fr;308}309 310@media(min-width: 30em) {311 .grid.talks {312 grid-template-columns: 1fr 1fr;313 }314}315 316.talks li footer {317 margin-top: auto;318 margin-right: 1rem;319 padding-top: 1em;320 border-top: thin solid var(--light-grey);321}322 323.talks .is-upcoming footer {324 border-top-color: var(--primary);325}326 327.talks footer a {328 margin-right: 0.5rem;329}330 331/* =============================== */332/* Alternative article layout grid */333 334.grid-alt {335 display: grid;336 max-width: 70em;337 margin: 0 auto;338 grid-template-columns: 1fr 1fr;339 grid-gap: 0.5rem;340}341 342.one {343 grid-column: 1 / span 2;344 text-align: left;345}346 347.two {348 grid-column: 1 / span 2;349}350 351.three {352 grid-column: 1;353 grid-row: 2;354}355 356.four {357 grid-row: 2;358}359 360.five {361 grid-column: 1 / span 2;362 grid-row: 4;363}364 365@media (min-width: 37.5em) {366 .grid-alt .e-content p:first-of-type {367 margin-top: 2rem;368 }369 370 .grid-alt {371 display: grid;372 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;373 grid-auto-rows: minmax(max-content, auto) minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);374 grid-gap: 0.5rem;375 }376 377 .grid-alt .e-content p:first-of-type {378 margin-top: 2.5rem;379 }380 381 .one {382 grid-row: 1;383 grid-column: 1 / span 2;384 padding-right: 1rem;385 text-align: right;386 }387 388 .two {389 grid-column: 3 / span 3;390 grid-row: 1 / span 2;391 }392 393 .three {394 grid-column: 3 / span 3;395 grid-row: 3;396 }397 398 .four {399 padding-right: 1rem;400 grid-column: 1 / span 2;401 grid-row: 2;402 text-align: right;403 }404 405 .five {406 grid-column: 3 / span 3;407 grid-row: 4;408 }409}410 411@media (min-width: 56.25em) {412 .grid-alt {413 display: grid;414 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;415 grid-auto-rows: minmax(100px, auto) minmax(max-content, 1fr);416 grid-gap: 0.5rem;417 }418 419 .one {420 grid-row: 1;421 grid-column: 1 / span 2;422 }423 424 .two {425 grid-column: 3 / span 2;426 grid-row: 1 / span 2;427 }428 429 .three {430 padding-top: 2.5rem;431 padding-left: 1rem;432 grid-column: 5;433 grid-row: 1;434 }435 436 .four {437 grid-column: 1 / span 2;438 grid-row: 2;439 }440 441 .five {442 padding-left: 1rem;443 grid-column: 5;444 grid-row: 2;445 }446}447 448@media(min-width: 80em) {449 .four {450 margin-top: -4rem;451 }452}453 454 455 456.section {457 margin: 0 auto;458 padding: 1rem;459}460 461.section-default {462 max-width: 55rem;463 margin: 0 auto;464 padding: 1rem;465}466 467.section-default.home {468 max-width: 100%;469 padding-right: 1rem;470 padding-left: 1rem;471}472 473@media(min-width: 37.5em) {474 .section-default.home {475 padding-right: 2rem;476 padding-left: 1rem;477 }478}479 480.section-fullwidth {481 width: 100%;482 margin: 0 auto;483 padding: 0;484}485 486.section-highlight {487 width: 100%;488 margin: 0 auto;489 padding: 2rem;490 background-color: var(--light-grey);491}492 493.page-intro {494 text-align: center;495 margin: 0 auto;496 margin-top: 3rem;497 margin-bottom: 4rem;498 color: var(--primary);499}500 501.page-intro p:last-child {502 margin-bottom: 0.75rem;503}504 505@media (min-width: 33.75em) {506 .page-intro {507 width: 70%;508 }509}510 511.page-intro::after {512 content: '';513 display: block;514 margin: 0 auto;515 border-bottom: 0.1em solid var(--accent);516 width: 3em;517 height: 0.4em;518}519 520.page-intro h1 {521 text-transform: uppercase;522 font-size: 1rem;523 margin-bottom: 0.25rem;524 font-weight: bold;525}526 527.page-intro p {528 margin-top: 0;529 font-family: Georgia;530}531 532.notes-wrapper {533 margin-top: 3rem;534}535 536.section-bg-light {537 background-image: url(images/background-tile-light.svg);538 background-size: 18px;539}540 541.topic-wrapper::after {542 content: '';543 display: block;544 margin: 3rem auto;545 border-bottom: .1em solid var(--accent);546 width: 8rem;547 height: .4rem;548}549 550 551 552.header {553 position: relative;554 background-color: var(--primary);555 border-top: 0.25em solid var(--accent);556 background-image: url(images/background-tile-light.svg);557 background-size: 18px;558 z-index: 2;559}560 561.header .grid {562 grid-template-columns: 100px minmax(200px, 1fr);563}564 565.menu {566 margin: 0;567 display: flex;568 flex-flow: row;569 flex-wrap: wrap;570 align-items: center;571 justify-content: flex-start;572}573 574.menu li:first-child {575 flex: 0 0 100%;576 padding-left: 0.75rem;577}578 579@media(min-width: 39.6875em) {580 .menu li:first-child {581 flex: 0 0 auto;582 padding-left: 0;583 }584}585 586.menu li {587 display: inline;588 line-height: 1.8;589}590 591.brand {592 margin-left: 0;593 margin-right: auto;594 font-weight: bold;595}596 597.menu .logo {598 display: block;599 padding-bottom: 0;600 border-bottom: 0.15em solid transparent;601}602 603.menu a.logo:hover {604 border-bottom: 0.15em solid transparent;605}606 607.logo img {608 max-width: 8em;609}610 611.nav-item {612 margin-left: 0.75rem;613}614 615 616 617.site-footer {618 position: relative;619 color: var(--text-negative);620 background-color: var(--secondary);621 background-image: url(images/background-tile-extra-dark.svg);622 background-size: 18px;623 z-index: 2;624}625 626.footer-navigation ul {627 display: flex;628 list-style: none;629}630 631.footer-navigation ul li {632 margin-right: 1rem;633}634 635 636 637ul {638 margin: 0;639 padding: 0;640}641 642main ul {643 margin-left: 1em;644}645 646.section-intro-content ul {647 margin-left: 0.5em;648}649 650.grid li {651 list-style: none;652}653 654.talks li {655 display: flex;656 flex-direction: column;657 padding: 1em;658 border: thin solid var(--primary);659 border-radius: 0.2em;660 background-color: var(--white);661}662 663.talks li h3 {664 margin-top: 0;665 margin-bottom: 0.25em;666 font-size: 1em;667}668 669.talks li h3 .post-info {670 display: block;671 margin-top: 0;672 margin-bottom: 0.25rem;673 color: var(--accent);674 font-size: 0.625rem;675 font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;676}677 678.talks li p {679 font-size: 0.8rem;680}681 682.talks li footer {683 font-size: 0.8rem;684}685 686.talks footer .date {687 display: block;688}689 690.talks .is-upcoming {691 color: var(--secondary);692 background-color: var(--white);693}694 695.talks .is-upcoming h3 {696 color: var(--primary);697}698 699.talks .is-upcoming p {700 color: var(--primary);701}702 703 704 705 706 707.section-intro-home {708 grid-area: intro;709}710 711.section-intro-content-posts {712 grid-area: posts;713}714 715.section-intro-info {716 grid-area: info;717}718 719.section-intro-feature {720 grid-area: feature;721 padding: 1rem;722}723 724.intro-wrapper {725 display: grid;726 grid-template-columns: 1fr;727 grid-template-areas:728 "intro"729 "posts"730 "info"731 "feature";732 grid-gap: 1rem;733 max-width: 85em;734 margin: 0 auto;735}736 737@media(min-width: 35em) {738 .intro-wrapper {739 grid-template-columns: 1fr 1fr;740 grid-template-rows: minmax(min-content,40vh) minmax(min-content, max-content) minmax(min-content,max-content);741 grid-template-areas:742 "intro posts"743 "info posts"744 "feature posts"745 "... posts";746 }747}748 749@media(min-width: 62.5em) {750 .intro-wrapper {751 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;752 grid-template-rows: minmax(min-content, 60vh) minmax(min-content, max-content) minmax(min-content,max-content);753 grid-template-areas:754 "intro intro intro posts posts"755 "... info info posts posts"756 "... feature feature posts posts"757 "... ... ... posts posts";758 }759}760 761@media(min-width: 71.25em) {762 .intro-wrapper {763 grid-template-columns: repeat(7, 1fr);764 grid-template-rows: minmax(min-content, 60vh) minmax(min-content, max-content) minmax(min-content,max-content);765 grid-template-areas:766 "intro intro intro intro posts posts posts"767 "... info info info posts posts posts"768 "... feature feature ... posts posts posts"769 "... ... ... ... posts posts posts";770 }771}772 773.section-intro-home {774 position: relative;775 display: flex;776 padding: 1rem;777 min-height: 35vh;778 align-content: center;779 align-items: center;780 position: relative;781 color: var(--white);782 background-size: cover;783 background-position: center;784}785 786@media (min-width: 36.25em) {787 .section-intro-home {788 min-height: auto;789 }790}791 792.section-intro-info {793 padding: 1rem;794}795 796@media (min-width: 68.75em) {797 .section-intro-home {798 background-position: initial;799 }800}801 802.intro-caption {803 position: absolute;804 bottom: 0.5rem;805 left: 1rem;806 margin-right: 1rem;807 text-align: left;808}809 810.intro-caption p {811 margin: 0;812 padding: 0.125rem 0.5rem;813 font-size: 0.625rem;814 background-color: var(--primary);815 border-radius: 0.15rem;816}817 818.intro-caption a {819 color: var(--white);820 text-decoration: underline;821}822 823.intro-caption a:hover,824.intro-caption a:focus,825.intro-caption a:visited,826.intro-caption a:active {827 color: var(--white);828}829 830.section-intro-home h1 {831 display: inline;832 font-size: 3rem;833 line-height: 1.175;834 color: var(--primary);835 background-color: var(--accent-trans);836 font-weight: bold;837 font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;838}839 840.section-intro-home h2 {841 display: inline;842 line-height: 1.4;843 color: var(--white);844 background-color: var(--secondary-trans);845 font-size: 1.25em;846 font-weight: normal;847 font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,sans-serif;848}849 850@media(min-width: 35em) {851 .section-intro-home h1 {852 font-size: 2.3rem;853 }854 855 .section-intro-home h2 {856 font-size: 1.25rem;857 }858}859 860@media(min-width: 55em) {861 .section-intro-home h1 {862 font-size: 3rem;863 }864 865 .section-intro-home h2 {866 font-size: 1.5rem;867 }868}869 870@media(min-width: 65em) {871 .section-intro-home h2::before {872 content: '';873 display: block;874 }875}876 877.section-intro-content-posts h2 {878 font-size: 1em;879 font-weight: bold;880}881 882.section-intro-content-posts h3 {883 margin-top: 0;884 margin-bottom: 0.25em;885 font-size: 1.5em;886}887 888.section-intro-content-posts h3 + p {889 margin-top: 0;890}891 892.section-intro-content-posts ul {893 margin: 0;894}895 896 897 898a,899a:visited {900 text-decoration: none;901 color: var(--secondary);902 border-bottom: 0.1em solid var(--secondary);903 word-break: break-word;904}905 906a:hover {907 color: var(--primary);908 border-bottom: 0.1em solid var(--accent);909 background-color: var(--white);910}911 912a:active {913 color: var(--secondary);914}915 916a:focus {917 border-bottom: 0.1em solid var(--accent);918 background-color: var(--white);919}920 921h1 a,922h2 a,923h3 a {924 line-height: 1.24;925 border-bottom-color: transparent;926}927 928h1 span a:hover,929h2 span a:hover,930h3 span a:hover {931 border-bottom-color: transparent;932 background-color: transparent;933}934 935.menu a {936 padding: 0.25rem;937 color: var(--text-negative);938 text-decoration: none;939 border-bottom-color: transparent;940}941 942.menu a:hover {943 border-bottom: 0.15em solid var(--text-negative);944 background-color: transparent;945}946 947.menu a:active,948.menu a:visited {949 color: var(--text-negative);950}951 952.menu a:focus {953 outline: -webkit-focus-ring-color auto 5px;954 outline-color: var(--white);955 outline-style: auto;956 outline-width: 5px;957 background-color: transparent;958}959 960.menu a.active {961 border-bottom: 0.15em solid var(--text-negative);962}963 964.intro-caption a {965 text-decoration: none;966}967 968.intro-caption a:hover,969.intro-caption a:focus {970 background-color: transparent;971}972 973.link-back {974 margin-top: 2rem;975 text-align: center;976}977 978.link-back a {979 text-decoration: none;980}981 982.link-back a:hover {983 text-decoration: none;984}985 986.nextprev {987 text-align: center;988}989 990.nextprev a {991 margin: 0 0.5rem;992 text-decoration: none;993}994 995a.next {996 display: table-cell;997 margin: 0 1rem;998 color: var(--white);999 background-color: var(--secondary);1000 padding: 1rem;1001 clip-path: polygon(3% 100%, 90% 90%, 100% 16%, 8% 0%);1002}1003 1004a.prev {1005 display: table-cell;1006 margin: 0 1rem;1007 color: var(--white);1008 background-color: var(--secondary);1009 padding: 1rem;1010 clip-path: polygon(3% 80%, 90% 100%, 120% 10%, 0% 0%);1011}1012 1013a.next:hover,1014a.prev:hover {1015 color: var(--primary);1016 background-color: var(--accent);1017}1018 1019a.next:focus,1020a.prev:focus {1021 outline: 0;1022 color: var(--primary);1023 border-bottom-color: transparent;1024 background-color: var(--accent);1025}1026 1027.site-footer a {1028 padding: 0.25rem;1029 color: var(--text-negative);1030 text-decoration: none;1031}1032 1033.site-footer a:visited {1034 color: var(--text-negative);1035}1036 1037.site-footer a:hover {1038 border-bottom: 0.125rem solid var(--text-negative);1039}1040 1041.site-footer a:focus {1042 outline: -webkit-focus-ring-color auto 5px;1043 outline-color: var(--white);1044 outline-style: auto;1045 outline-width: 5px;1046 background-color: transparent;1047}1048 1049.talks li a:focus {1050 outline: -webkit-focus-ring-color auto 3px;1051 outline-color: var(--primary);1052 outline-style: auto;1053 outline-width: 3px;1054}1055 1056.talks .is-upcoming a {1057 color: var(--secondary);1058}1059 1060.talks .is-upcoming a:hover {1061 border-bottom: 0.125rem solid var(--secondary);1062}1063 1064.talks .is-upcoming a:focus {1065 outline: -webkit-focus-ring-color auto 3px;1066 outline-color: var(--secondary);1067 outline-style: auto;1068 outline-width: 3px;1069}1070 1071 1072 1073button,1074.button {1075 display: inline-block;1076 padding: 0.5em 1.5em;1077 background-color: var(--primary);1078 font-size: 0.825rem;1079 border-radius: 0.2em;1080 color: var(--white);1081 text-decoration: none;1082 cursor: pointer;1083}1084 1085.commentions-form .button--primary {1086 display: inline-block;1087 width: auto;1088 padding: 0.5em 1.5em;1089 color: var(--white);1090 font-size: 0.825rem;1091 background-color: var(--primary);1092 border: thin solid var(--primary);1093}1094 1095.commentions-form .button--primary:hover {1096 color: var(--primary);1097 border: thin solid var(--primary);1098 background-color: var(--text-negative);1099}1100 1101 1102 1103.post-callout {1104 display: grid;1105 grid-template-columns: 1fr;1106 width: 100%;1107 margin-right: auto;1108 margin-left: auto;1109 margin-top: 5rem;1110 margin-bottom: 3rem;1111 padding: 1rem;1112 border-radius: 0.2em;1113 background-color: var(--white);1114 box-shadow: 0px 0px 5px 0px var(--primary);1115 transition: width 500ms ease-in;1116}1117 1118@media (min-width: 30em) {1119 .post-callout {1120 width: 85%;1121 padding: 0.5rem 1rem;1122 padding-left: 0.5rem;1123 grid-template-columns: auto 1fr;1124 grid-gap: 0.5rem;1125 }1126}1127 1128@media (min-width: 37.5em) {1129 .post-callout {1130 width: 70%;1131 }1132}1133 1134.post-callout {1135 font-size: 0.875rem;1136}1137 1138.post-callout .media {1139 max-width: 8em;1140 align-self: center;1141 justify-self: center;1142}1143 1144@media (min-width: 30em) {1145 .post-callout .media {1146 max-width: 6em;1147 }1148}1149 1150@media (min-width: 37.5em) {1151 .post-callout .media {1152 max-width: 8em;1153 }1154}1155 1156.post-callout .media img {1157 display: block;1158 clip-path: url(#postCalloutClip);1159}1160 1161.post-callout .content a {1162 text-decoration: underline;1163 text-underline-offset: 0.125em;1164 text-decoration-thickness: 0.125em;1165 text-decoration-skip-ink: auto;1166 border-bottom: none;1167}1168 1169.post-callout .content {1170 align-items: center;1171}1172 1173@media (max-width: 30em) {1174 .post-callout .content p:last-child {1175 margin-bottom: 0;1176 }1177}1178 1179.post-callout .content:before {1180 margin: 0 auto;1181 margin-top: 1rem;1182 content: "";1183 display: block;1184 width: 8rem;1185 border-bottom: thin solid var(--primary);1186}1187 1188@media (min-width: 30em) {1189 .post-callout .content:before {1190 margin-top: 0;1191 content: "";1192 display: none;1193 width: 6rem;1194 border-bottom: none;1195 }1196}1197 1198 1199 1200[hidden="true"],