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="Alexito's World" property="og:site_name">6 <meta content="" name="twitter:url">7 <meta content="" property="og:url">8 <title>9 Poor man's hot reloading for Swift scripts | Alexito's World10 </title>11 <meta content="Poor man's hot reloading for Swift scripts | Alexito's World" name="twitter:title">12 <meta content="Poor man's hot reloading for Swift scripts | Alexito's World" property="og:title">13 <meta content="The other day, while I was writing a Swift script, I added an option to make it run continuosly so it could be on a server doing its job without..." name="description">14 <meta content="The other day, while I was writing a Swift script, I added an option to make it run continuosly so it could be on a server doing its job without..." name="twitter:description">15 <meta content="The other day, while I was writing a Swift script, I added an option to make it run continuosly so it could be on a server doing its job without..." property="og:description">16 <meta content="summary" name="twitter:card">17 <meta content="alexito4" name="twitter:creator">18 <meta content="width=device-width, initial-scale=1.0" name="viewport">19 </head>20 <body class="item-page">21 <header class="main-border-bottom">22 <div class="wrapper">23 <a class="site-name">24 Alexito's World25 </a>26 <p class="description">27 A world of coding 💻, by Alejandro Martinez28 </p>29 <nav>30 <ul>31 <li>32 <a>33 <span class="icon">34 </span>35 </a>36 </li>37 <li>38 |39 </li>40 <li>41 <a>42 Swift43 </a>44 </li>45 <li>46 <a>47 Development48 </a>49 </li>50 </ul>51 </nav>52 </div>53 </header>54 <div class="wrapper">55 <article>56 <div class="metadata">57 <span id="metadata-date">58 June 5, 201659 </span>60 <span id="metadata-readtime">61 🕐 162 <sup>63 min64 </sup>65 read66 </span>67 </div>68 <div id="item-tag-list">69 <ul class="tags">70 <li>71 <a class="tag">72 Scripting73 </a>74 </li>75 <li>76 <a class="tag">77 Swift78 </a>79 </li>80 <li>81 <a class="tag">82 Tips and Tricks83 </a>84 </li>85 </ul>86 </div>87 <h1>88 Poor man's hot reloading for Swift scripts89 </h1>90 <div class="content">91 <p>92 The other day, while I was writing a93 <a>94 Swift script95 </a>96 , I added an option to make it run continuosly so it could be on a server doing its job without stoping.97 <em>98 for eva.99 </em>100 </p>101 <p>102 To implement that I just used a103 <code>104 repeat105 </code>106 loop creating107 <code>108 NSTask109 </code>110 s that called the same script.111 <em>112 Scripts recursion.113 </em>114 </p>115 <p>116 The funny part is that with this simple thing I found a quick way to writing the script, almost as a hot reloading tool.117 </p>118 <p>119 let reload = "reload" if Process.arguments.contains(reload) { repeat { let task = NSTask() task.launchPath = Process.arguments.first! task.arguments = Array(Process.arguments.suffixFrom(1).filter({$0 != reload})) task.launch() task.waitUntilExit() } while true } Just drop this snippet at the top of the script, and when you call it with the120 <code>121 reload122 </code>123 argument it will start looping indefinitely.124 </p>125 <p>126 Then you can just call it from the command line like:127 </p>128 <p>129 main.swift reload other params When that is done you can just modify the script and save the file, in the next execution your changes will be visible. If it fails to compile is not a big deal, the main script is still in memory without those changes so it will just loop and try to run it again.130 </p>131 <p>132 Obviously is not a big deal, is a bit annoying seeing all the console spammed, but I found it quite useful while I'm developing short scripts that I want to iterate on.133 </p>134 <p>135 Remember that you can use136 <a>137 OS signals138 </a>139 to stop the task when the main script is killed.140 </p>141 </div>142 <ul class="twitter-share">143 <li>144 <span class="icon i-tint">145 </span>146 <a rel="nofollow">147 Share this article on Twitter148 </a>149 </li>150 </ul>151 <div class="card" style="margin-bottom: 1em;">152 <div class="centered-content">153 <p>154 If you liked this article please consider supporting me155 </p>156 <style>157 /**158* Publish AMPTheme theme159* Copyright (c) Alejandro Martinez 2020160* MIT license, see LICENSE file for details161*/162/* https://github.com/KyleAMathews/typography.js/blob/master/packages/typography-theme-irving/src/index.js */163@keyframes spinAround {164 from {165 transform: rotate(0deg);166 }167 to {168 transform: rotate(359deg);169 }170}171.is-unselectable {172 -webkit-touch-callout: none;173 -webkit-user-select: none;174 -moz-user-select: none;175 -ms-user-select: none;176 user-select: none;177}178 179.content:not(:last-child) {180 margin-bottom: 1.5rem;181}182 183.is-overlay {184 bottom: 0;185 left: 0;186 position: absolute;187 right: 0;188 top: 0;189}190 191/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */192html,193body,194p,195ol,196ul,197li,198dl,199dt,200dd,201blockquote,202figure,203fieldset,204legend,205textarea,206pre,207iframe,208hr,209h1,210h2,211h3,212h4,213h5,214h6 {215 margin: 0;216 padding: 0;217}218 219h1,220h2,221h3,222h4,223h5,224h6 {225 font-size: 100%;226 font-weight: normal;227}228 229ul {230 list-style: none;231}232 233button,234input,235select,236textarea {237 margin: 0;238}239 240html {241 box-sizing: border-box;242}243 244*, *::before, *::after {245 box-sizing: inherit;246}247 248img,249video {250 height: auto;251 max-width: 100%;252}253 254iframe {255 border: 0;256}257 258table {259 border-collapse: collapse;260 border-spacing: 0;261}262 263td,264th {265 padding: 0;266}267td:not([align]),268th:not([align]) {269 text-align: left;270}271 272html {273 background-color: white;274 font-size: 16px;275 -moz-osx-font-smoothing: grayscale;276 -webkit-font-smoothing: antialiased;277 min-width: 300px;278 overflow-x: hidden;279 overflow-y: scroll;280 text-rendering: optimizeLegibility;281 text-size-adjust: 100%;282}283 284article,285aside,286figure,287footer,288header,289hgroup,290section {291 display: block;292}293 294body,295button,296input,297select,298textarea {299 font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;300}301 302code,303pre {304 -moz-osx-font-smoothing: auto;305 -webkit-font-smoothing: auto;306 font-family: monospace;307}308 309body {310 color: #4a4a4a;311 font-size: 1em;312 font-weight: 400;313 line-height: 1.5;314}315 316a {317 color: #3273dc;318 cursor: pointer;319 text-decoration: none;320}321a strong {322 color: currentColor;323}324a:hover {325 color: #363636;326}327 328code {329 background-color: whitesmoke;330 color: #f14668;331 font-size: 0.875em;332 font-weight: normal;333 padding: 0.25em 0.5em 0.25em;334}335 336hr {337 background-color: whitesmoke;338 border: none;339 display: block;340 height: 2px;341 margin: 1.5rem 0;342}343 344img {345 height: auto;346 max-width: 100%;347}348 349input[type=checkbox],350input[type=radio] {351 vertical-align: baseline;352}353 354small {355 font-size: 0.875em;356}357 358span {359 font-style: inherit;360 font-weight: inherit;361}362 363strong {364 color: #363636;365 font-weight: 700;366}367 368fieldset {369 border: none;370}371 372pre {373 -webkit-overflow-scrolling: touch;374 background-color: whitesmoke;375 color: #4a4a4a;376 font-size: 0.875em;377 overflow-x: auto;378 padding: 1.25rem 1.5rem;379 white-space: pre;380 word-wrap: normal;381}382pre code {383 background-color: transparent;384 color: currentColor;385 font-size: 1em;386 padding: 0;387}388 389table td,390table th {391 vertical-align: top;392}393table td:not([align]),394table th:not([align]) {395 text-align: left;396}397table th {398 color: #363636;399}400 401.is-clearfix::after {402 clear: both;403 content: " ";404 display: table;405}406 407.is-pulled-left {408 float: left !important;409}410 411.is-pulled-right {412 float: right !important;413}414 415.is-clipped {416 overflow: hidden !important;417}418 419.is-size-1 {420 font-size: 3rem !important;421}422 423.is-size-2 {424 font-size: 2.5rem !important;425}426 427.is-size-3 {428 font-size: 2rem !important;429}430 431.is-size-4 {432 font-size: 1.5rem !important;433}434 435.is-size-5 {436 font-size: 1.25rem !important;437}438 439.is-size-6 {440 font-size: 1rem !important;441}442 443.is-size-7 {444 font-size: 0.75rem !important;445}446 447@media screen and (max-width: 768px) {448 .is-size-1-mobile {449 font-size: 3rem !important;450 }451 452 .is-size-2-mobile {453 font-size: 2.5rem !important;454 }455 456 .is-size-3-mobile {457 font-size: 2rem !important;458 }459 460 .is-size-4-mobile {461 font-size: 1.5rem !important;462 }463 464 .is-size-5-mobile {465 font-size: 1.25rem !important;466 }467 468 .is-size-6-mobile {469 font-size: 1rem !important;470 }471 472 .is-size-7-mobile {473 font-size: 0.75rem !important;474 }475}476@media screen and (min-width: 769px), print {477 .is-size-1-tablet {478 font-size: 3rem !important;479 }480 481 .is-size-2-tablet {482 font-size: 2.5rem !important;483 }484 485 .is-size-3-tablet {486 font-size: 2rem !important;487 }488 489 .is-size-4-tablet {490 font-size: 1.5rem !important;491 }492 493 .is-size-5-tablet {494 font-size: 1.25rem !important;495 }496 497 .is-size-6-tablet {498 font-size: 1rem !important;499 }500 501 .is-size-7-tablet {502 font-size: 0.75rem !important;503 }504}505@media screen and (max-width: 1023px) {506 .is-size-1-touch {507 font-size: 3rem !important;508 }509 510 .is-size-2-touch {511 font-size: 2.5rem !important;512 }513 514 .is-size-3-touch {515 font-size: 2rem !important;516 }517 518 .is-size-4-touch {519 font-size: 1.5rem !important;520 }521 522 .is-size-5-touch {523 font-size: 1.25rem !important;524 }525 526 .is-size-6-touch {527 font-size: 1rem !important;528 }529 530 .is-size-7-touch {531 font-size: 0.75rem !important;532 }533}534@media screen and (min-width: 1024px) {535 .is-size-1-desktop {536 font-size: 3rem !important;537 }538 539 .is-size-2-desktop {540 font-size: 2.5rem !important;541 }542 543 .is-size-3-desktop {544 font-size: 2rem !important;545 }546 547 .is-size-4-desktop {548 font-size: 1.5rem !important;549 }550 551 .is-size-5-desktop {552 font-size: 1.25rem !important;553 }554 555 .is-size-6-desktop {556 font-size: 1rem !important;557 }558 559 .is-size-7-desktop {560 font-size: 0.75rem !important;561 }562}563@media screen and (min-width: 1216px) {564 .is-size-1-widescreen {565 font-size: 3rem !important;566 }567 568 .is-size-2-widescreen {569 font-size: 2.5rem !important;570 }571 572 .is-size-3-widescreen {573 font-size: 2rem !important;574 }575 576 .is-size-4-widescreen {577 font-size: 1.5rem !important;578 }579 580 .is-size-5-widescreen {581 font-size: 1.25rem !important;582 }583 584 .is-size-6-widescreen {585 font-size: 1rem !important;586 }587 588 .is-size-7-widescreen {589 font-size: 0.75rem !important;590 }591}592@media screen and (min-width: 1408px) {593 .is-size-1-fullhd {594 font-size: 3rem !important;595 }596 597 .is-size-2-fullhd {598 font-size: 2.5rem !important;599 }600 601 .is-size-3-fullhd {602 font-size: 2rem !important;603 }604 605 .is-size-4-fullhd {606 font-size: 1.5rem !important;607 }608 609 .is-size-5-fullhd {610 font-size: 1.25rem !important;611 }612 613 .is-size-6-fullhd {614 font-size: 1rem !important;615 }616 617 .is-size-7-fullhd {618 font-size: 0.75rem !important;619 }620}621.has-text-centered {622 text-align: center !important;623}624 625.has-text-justified {626 text-align: justify !important;627}628 629.has-text-left {630 text-align: left !important;631}632 633.has-text-right {634 text-align: right !important;635}636 637@media screen and (max-width: 768px) {638 .has-text-centered-mobile {639 text-align: center !important;640 }641}642@media screen and (min-width: 769px), print {643 .has-text-centered-tablet {644 text-align: center !important;645 }646}647@media screen and (min-width: 769px) and (max-width: 1023px) {648 .has-text-centered-tablet-only {649 text-align: center !important;650 }651}652@media screen and (max-width: 1023px) {653 .has-text-centered-touch {654 text-align: center !important;655 }656}657@media screen and (min-width: 1024px) {658 .has-text-centered-desktop {659 text-align: center !important;660 }661}662@media screen and (min-width: 1024px) and (max-width: 1215px) {663 .has-text-centered-desktop-only {664 text-align: center !important;665 }666}667@media screen and (min-width: 1216px) {668 .has-text-centered-widescreen {669 text-align: center !important;670 }671}672@media screen and (min-width: 1216px) and (max-width: 1407px) {673 .has-text-centered-widescreen-only {674 text-align: center !important;675 }676}677@media screen and (min-width: 1408px) {678 .has-text-centered-fullhd {679 text-align: center !important;680 }681}682@media screen and (max-width: 768px) {683 .has-text-justified-mobile {684 text-align: justify !important;685 }686}687@media screen and (min-width: 769px), print {688 .has-text-justified-tablet {689 text-align: justify !important;690 }691}692@media screen and (min-width: 769px) and (max-width: 1023px) {693 .has-text-justified-tablet-only {694 text-align: justify !important;695 }696}697@media screen and (max-width: 1023px) {698 .has-text-justified-touch {699 text-align: justify !important;700 }701}702@media screen and (min-width: 1024px) {703 .has-text-justified-desktop {704 text-align: justify !important;705 }706}707@media screen and (min-width: 1024px) and (max-width: 1215px) {708 .has-text-justified-desktop-only {709 text-align: justify !important;710 }711}712@media screen and (min-width: 1216px) {713 .has-text-justified-widescreen {714 text-align: justify !important;715 }716}717@media screen and (min-width: 1216px) and (max-width: 1407px) {718 .has-text-justified-widescreen-only {719 text-align: justify !important;720 }721}722@media screen and (min-width: 1408px) {723 .has-text-justified-fullhd {724 text-align: justify !important;725 }726}727@media screen and (max-width: 768px) {728 .has-text-left-mobile {729 text-align: left !important;730 }731}732@media screen and (min-width: 769px), print {733 .has-text-left-tablet {734 text-align: left !important;735 }736}737@media screen and (min-width: 769px) and (max-width: 1023px) {738 .has-text-left-tablet-only {739 text-align: left !important;740 }741}742@media screen and (max-width: 1023px) {743 .has-text-left-touch {744 text-align: left !important;745 }746}747@media screen and (min-width: 1024px) {748 .has-text-left-desktop {749 text-align: left !important;750 }751}752@media screen and (min-width: 1024px) and (max-width: 1215px) {753 .has-text-left-desktop-only {754 text-align: left !important;755 }756}757@media screen and (min-width: 1216px) {758 .has-text-left-widescreen {759 text-align: left !important;760 }761}762@media screen and (min-width: 1216px) and (max-width: 1407px) {763 .has-text-left-widescreen-only {764 text-align: left !important;765 }766}767@media screen and (min-width: 1408px) {768 .has-text-left-fullhd {769 text-align: left !important;770 }771}772@media screen and (max-width: 768px) {773 .has-text-right-mobile {774 text-align: right !important;775 }776}777@media screen and (min-width: 769px), print {778 .has-text-right-tablet {779 text-align: right !important;780 }781}782@media screen and (min-width: 769px) and (max-width: 1023px) {783 .has-text-right-tablet-only {784 text-align: right !important;785 }786}787@media screen and (max-width: 1023px) {788 .has-text-right-touch {789 text-align: right !important;790 }791}792@media screen and (min-width: 1024px) {793 .has-text-right-desktop {794 text-align: right !important;795 }796}797@media screen and (min-width: 1024px) and (max-width: 1215px) {798 .has-text-right-desktop-only {799 text-align: right !important;800 }801}802@media screen and (min-width: 1216px) {803 .has-text-right-widescreen {804 text-align: right !important;805 }806}807@media screen and (min-width: 1216px) and (max-width: 1407px) {808 .has-text-right-widescreen-only {809 text-align: right !important;810 }811}812@media screen and (min-width: 1408px) {813 .has-text-right-fullhd {814 text-align: right !important;815 }816}817.is-capitalized {818 text-transform: capitalize !important;819}820 821.is-lowercase {822 text-transform: lowercase !important;823}824 825.is-uppercase {826 text-transform: uppercase !important;827}828 829.is-italic {830 font-style: italic !important;831}832 833.has-text-white {834 color: white !important;835}836 837a.has-text-white:hover, a.has-text-white:focus {838 color: #e6e6e6 !important;839}840 841.has-background-white {842 background-color: white !important;843}844 845.has-text-black {846 color: #0a0a0a !important;847}848 849a.has-text-black:hover, a.has-text-black:focus {850 color: black !important;851}852 853.has-background-black {854 background-color: #0a0a0a !important;855}856 857.has-text-light {858 color: whitesmoke !important;859}860 861a.has-text-light:hover, a.has-text-light:focus {862 color: #dbdbdb !important;863}864 865.has-background-light {866 background-color: whitesmoke !important;867}868 869.has-text-dark {870 color: #363636 !important;871}872 873a.has-text-dark:hover, a.has-text-dark:focus {874 color: #1c1c1c !important;875}876 877.has-background-dark {878 background-color: #363636 !important;879}880 881.has-text-primary {882 color: #00d1b2 !important;883}884 885a.has-text-primary:hover, a.has-text-primary:focus {886 color: #009e86 !important;887}888 889.has-background-primary {890 background-color: #00d1b2 !important;891}892 893.has-text-link {894 color: #3273dc !important;895}896 897a.has-text-link:hover, a.has-text-link:focus {898 color: #205bbc !important;899}900 901.has-background-link {902 background-color: #3273dc !important;903}904 905.has-text-info {906 color: #3298dc !important;907}908 909a.has-text-info:hover, a.has-text-info:focus {910 color: #207dbc !important;911}912 913.has-background-info {914 background-color: #3298dc !important;915}916 917.has-text-success {918 color: #48c774 !important;919}920 921a.has-text-success:hover, a.has-text-success:focus {922 color: #34a85c !important;923}924 925.has-background-success {926 background-color: #48c774 !important;927}928 929.has-text-warning {930 color: #ffdd57 !important;931}932 933a.has-text-warning:hover, a.has-text-warning:focus {934 color: #ffd324 !important;935}936 937.has-background-warning {938 background-color: #ffdd57 !important;939}940 941.has-text-danger {942 color: #f14668 !important;943}944 945a.has-text-danger:hover, a.has-text-danger:focus {946 color: #ee1742 !important;947}948 949.has-background-danger {950 background-color: #f14668 !important;951}952 953.has-text-black-bis {954 color: #121212 !important;955}956 957.has-background-black-bis {958 background-color: #121212 !important;959}960 961.has-text-black-ter {962 color: #242424 !important;963}964 965.has-background-black-ter {966 background-color: #242424 !important;967}968 969.has-text-grey-darker {970 color: #363636 !important;971}972 973.has-background-grey-darker {974 background-color: #363636 !important;975}976 977.has-text-grey-dark {978 color: #4a4a4a !important;979}980 981.has-background-grey-dark {982 background-color: #4a4a4a !important;983}984 985.has-text-grey {986 color: #7a7a7a !important;987}988 989.has-background-grey {990 background-color: #7a7a7a !important;991}992 993.has-text-grey-light {994 color: #b5b5b5 !important;995}996 997.has-background-grey-light {998 background-color: #b5b5b5 !important;999}1000 1001.has-text-grey-lighter {1002 color: #dbdbdb !important;1003}1004 1005.has-background-grey-lighter {1006 background-color: #dbdbdb !important;1007}1008 1009.has-text-white-ter {1010 color: whitesmoke !important;1011}1012 1013.has-background-white-ter {1014 background-color: whitesmoke !important;1015}1016 1017.has-text-white-bis {1018 color: #fafafa !important;1019}1020 1021.has-background-white-bis {1022 background-color: #fafafa !important;1023}1024 1025.has-text-weight-light {1026 font-weight: 300 !important;1027}1028 1029.has-text-weight-normal {1030 font-weight: 400 !important;1031}1032 1033.has-text-weight-medium {1034 font-weight: 500 !important;1035}1036 1037.has-text-weight-semibold {1038 font-weight: 600 !important;1039}1040 1041.has-text-weight-bold {1042 font-weight: 700 !important;1043}1044 1045.is-family-primary {1046 font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;1047}1048 1049.is-family-secondary {1050 font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;1051}1052 1053.is-family-sans-serif {1054 font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;1055}1056 1057.is-family-monospace {1058 font-family: monospace !important;1059}1060 1061.is-family-code {1062 font-family: monospace !important;1063}1064 1065.is-block {1066 display: block !important;1067}1068 1069@media screen and (max-width: 768px) {1070 .is-block-mobile {1071 display: block !important;1072 }1073}1074@media screen and (min-width: 769px), print {1075 .is-block-tablet {1076 display: block !important;1077 }1078}1079@media screen and (min-width: 769px) and (max-width: 1023px) {1080 .is-block-tablet-only {1081 display: block !important;1082 }1083}1084@media screen and (max-width: 1023px) {1085 .is-block-touch {1086 display: block !important;1087 }1088}1089@media screen and (min-width: 1024px) {1090 .is-block-desktop {1091 display: block !important;1092 }1093}1094@media screen and (min-width: 1024px) and (max-width: 1215px) {1095 .is-block-desktop-only {1096 display: block !important;1097 }1098}1099@media screen and (min-width: 1216px) {1100 .is-block-widescreen {1101 display: block !important;1102 }1103}1104@media screen and (min-width: 1216px) and (max-width: 1407px) {1105 .is-block-widescreen-only {1106 display: block !important;1107 }1108}1109@media screen and (min-width: 1408px) {1110 .is-block-fullhd {1111 display: block !important;1112 }1113}1114.is-flex {1115 display: flex !important;1116}1117 1118@media screen and (max-width: 768px) {1119 .is-flex-mobile {1120 display: flex !important;1121 }1122}1123@media screen and (min-width: 769px), print {1124 .is-flex-tablet {1125 display: flex !important;1126 }1127}1128@media screen and (min-width: 769px) and (max-width: 1023px) {1129 .is-flex-tablet-only {1130 display: flex !important;1131 }1132}1133@media screen and (max-width: 1023px) {1134 .is-flex-touch {1135 display: flex !important;1136 }1137}1138@media screen and (min-width: 1024px) {1139 .is-flex-desktop {1140 display: flex !important;1141 }1142}1143@media screen and (min-width: 1024px) and (max-width: 1215px) {1144 .is-flex-desktop-only {1145 display: flex !important;1146 }1147}1148@media screen and (min-width: 1216px) {1149 .is-flex-widescreen {1150 display: flex !important;1151 }1152}1153@media screen and (min-width: 1216px) and (max-width: 1407px) {1154 .is-flex-widescreen-only {1155 display: flex !important;1156 }1157}1158@media screen and (min-width: 1408px) {1159 .is-flex-fullhd {1160 display: flex !important;1161 }1162}1163.is-inline {1164 display: inline !important;1165}1166 1167@media screen and (max-width: 768px) {1168 .is-inline-mobile {1169 display: inline !important;1170 }1171}1172@media screen and (min-width: 769px), print {1173 .is-inline-tablet {1174 display: inline !important;1175 }1176}1177@media screen and (min-width: 769px) and (max-width: 1023px) {1178 .is-inline-tablet-only {1179 display: inline !important;1180 }1181}1182@media screen and (max-width: 1023px) {1183 .is-inline-touch {1184 display: inline !important;1185 }1186}1187@media screen and (min-width: 1024px) {1188 .is-inline-desktop {1189 display: inline !important;1190 }1191}1192@media screen and (min-width: 1024px) and (max-width: 1215px) {1193 .is-inline-desktop-only {1194 display: inline !important;1195 }1196}1197@media screen and (min-width: 1216px) {1198 .is-inline-widescreen {1199 display: inline !important;1200 }