SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA 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 "easy" version of the Design2Code testset 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.
6622
1<!DOCTYPE html>2<html class="js" lang="en-US">3 <head>4 <style>5 @charset "UTF-8";6/* ==========================================================================7 Steel theme skin8 ========================================================================== */9/* Colors */10/* Syntax highlighting (base16) colors */11/*!12 * Basically Basic Jekyll Theme 1.4.513 * Copyright 2017-2018 Michael Rose - mademistakes | @mmistakes14 * Free for personal and commercial use under the MIT license15 * https://github.com/mmistakes/jekyll-theme-basically-basic/blob/master/LICENSE16*/17/* ==========================================================================18 Color Functions19 ========================================================================== */20/* ==========================================================================21 Fluid Type22 as seen on https://madebymike.com.au/writing/fluid-type-calc-examples/23 ========================================================================== */24/* ==========================================================================25 Variables26 ========================================================================== */27/* Breakpoint widths */28/* Fluid type */29/* Calculate Modular Scale */30/* small */31/* large */32/* Heading 1 */33/* Heading 2 */34/* Heading 3 */35/* Heading 4 */36/* Heading 5 */37/* Heading 6 */38/* Base font family */39/* Other font families */40/* Colors */41/* Syntax highlighting (base16) colors */42/* Max-width of the main content */43/* Width of the sidebar */44/* Background color of the sidebar */45/* Intro image color overlay */46/* Border radius */47/* Global transition */48/* Navicon */49/* Site image */50/* ==========================================================================51 Clearfix Mixin52 ========================================================================== */53/* ==========================================================================54 Float Mixins55 ========================================================================== */56/* ==========================================================================57 Image Mixins58 - Responsive image59 - Retina image60 ========================================================================== */61/*62 Responsive image63 Keep images from scaling beyond the width of their parents.64 ========================================================================== */65/*66 Retina image67 Short retina mixin for setting background-image and -size.68 ========================================================================== */69/* ==========================================================================70 List Mixins71 ========================================================================== */72/* ==========================================================================73 Text Truncate Mixin74 Requires inline-block or block for proper styling75 ========================================================================== */76/* Core CSS */77/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */78/**79 * 1. Change the default font family in all browsers (opinionated).80 * 2. Prevent adjustments of font size after orientation changes in81 * IE on Windows Phone and in iOS.82 */83/* Document84 ========================================================================== */85html {86 font-family: "Fira Sans", sans-serif; /* 1 */87 box-sizing: border-box;88 -ms-text-size-adjust: 100%; /* 2 */89 -webkit-text-size-adjust: 100%; /* 2 */90}91 92*,93*::before,94*::after {95 box-sizing: inherit;96}97 98/* Sections99 ========================================================================== */100/**101 * Remove the margin in all browsers (opinionated).102 */103body {104 margin: 0;105 line-height: 1.5;106}107 108/**109 * Add the correct display in IE 9-.110 */111article,112aside,113footer,114header,115nav,116section {117 display: block;118}119 120/**121 * Remove margin padding.122 *123 */124h1,125h2,126h3,127h4,128h5,129h6,130p,131pre,132blockquote,133dl,134table,135address {136 margin-top: 0;137 margin-bottom: 1.5rem;138}139 140/**141 * Correct the font size and margin on `h1` elements within `section` and142 * `article` contexts in Chrome, Firefox, and Safari.143 */144h1 {145 font-size: 2em;146}147 148/**149 * Adjust heading line-height150 *151 */152h1,153h2,154h3,155h4 {156 line-height: 1.2;157}158 159/* Grouping content160 ========================================================================== */161/**162 * Add the correct display in IE 9-.163 * 1. Add the correct display in IE.164 */165figcaption,166figure,167main { /* 1 */168 display: block;169}170 171/**172 * Reset the margins.173 */174figure {175 margin: 1rem 0 1.5rem;176}177 178/**179 * 1. Add the correct box sizing in Firefox.180 * 2. Show the overflow in Edge and IE.181 */182hr {183 height: 0; /* 1 */184 overflow: visible; /* 2 */185 box-sizing: content-box; /* 1 */186}187 188/**189 * 1. Correct the inheritance and scaling of font size in all browsers.190 * 2. Correct the odd `em` font sizing in all browsers.191 * 3. Add scrollbars to wide code blocks.192 */193pre {194 font-family: monospace, monospace; /* 1 */195 font-size: 1em; /* 2 */196 overflow-x: auto; /* 3 */197}198 199/* Text-level semantics200 ========================================================================== */201/**202 * 1. Remove the gray background on active links in IE 10.203 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.204 */205a {206 background-color: transparent; /* 1 */207 -webkit-text-decoration-skip: objects; /* 2 */208}209 210/**211 * Remove the outline on focused links when they are also active or hovered212 * in all browsers (opinionated).213 */214a:active,215a:hover {216 outline-width: 0;217}218 219/**220 * 1. Remove the bottom border in Firefox 39-.221 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.222 */223abbr[title] {224 border-bottom: none; /* 1 */225 text-decoration: underline; /* 2 */226 text-decoration: underline dotted; /* 2 */227}228 229/**230 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.231 */232b,233strong {234 font-weight: inherit;235 font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari. */236}237 238/**239 * 1. Correct the inheritance and scaling of font size in all browsers.240 * 2. Correct the odd `em` font sizing in all browsers.241 */242code,243kbd,244samp {245 font-family: monospace, monospace; /* 1 */246 font-size: 1em; /* 2 */247}248 249/**250 * Add the correct font style in Android 4.3-.251 */252dfn {253 font-style: italic;254}255 256/**257 * Add the correct background and color in IE 9-.258 */259mark {260 background-color: #ff0;261 color: #000;262}263 264/**265 * Add the correct font size in all browsers.266 */267small {268 font-size: 80%;269}270 271/**272 * Change the margin and padding and add a line rule on the left-side in all273 * browsers (opinionated).274 */275blockquote {276 margin-right: 0;277 margin-left: 0;278 padding: 0 1rem;279 border-left: solid 0.25rem;280}281blockquote *:last-child {282 margin-bottom: 0;283}284 285/**286 * Prevent `sub` and `sup` elements from affecting the line height in287 * all browsers.288 */289sub,290sup {291 position: relative;292 font-size: 75%;293 line-height: 0;294 vertical-align: baseline;295}296 297sub {298 bottom: -0.25em;299}300 301sup {302 top: -0.5em;303}304 305/**306 * Remove margin307 */308ul,309ol {310 margin-top: 0;311}312 313/* Embedded content314 ========================================================================== */315/**316 * Add the correct display in IE 9-.317 */318audio,319video {320 display: inline-block;321}322 323/**324 * Add the correct display in iOS 4-7.325 */326audio:not([controls]) {327 display: none;328 height: 0;329}330 331img {332 /* Responsive images (ensure images don't scale beyond their parents) */333 max-width: 100%; /* part 1: Set a maximum relative to the parent*/334 width: auto\9 ; /* IE7-8 need help adjusting responsive images*/335 height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching*/336 border-style: none; /* Remove the border on images inside links in IE 10-.*/337 vertical-align: middle;338 -ms-interpolation-mode: bicubic;339}340 341/**342 * Hide the overflow in IE.343 */344svg:not(:root) {345 overflow: hidden;346}347 348/* Forms349 ========================================================================== */350/**351 * 1. Change the font styles in all browsers (opinionated).352 * 2. Remove the margin in Firefox and Safari.353 */354button,355input,356optgroup,357select,358textarea {359 margin: 0; /* 2 */360 font-family: "Fira Sans", sans-serif; /* 1 */361 font-size: 100%; /* 1 */362 line-height: 1.15; /* 1 */363}364 365/**366 * Show the overflow in IE.367 * 1. Show the overflow in Edge.368 */369button,370input { /* 1 */371 overflow: visible;372}373 374/**375 * Remove the inheritance of text transform in Edge, Firefox, and IE.376 * 1. Remove the inheritance of text transform in Firefox.377 */378button,379select { /* 1 */380 text-transform: none;381}382 383/**384 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`385 * controls in Android 4.386 * 2. Correct the inability to style clickable types in iOS and Safari.387 */388button,389html [type=button],390[type=reset],391[type=submit] {392 -webkit-appearance: button; /* 2 */393}394 395/**396 * Remove the inner border and padding in Firefox.397 */398button::-moz-focus-inner,399[type=button]::-moz-focus-inner,400[type=reset]::-moz-focus-inner,401[type=submit]::-moz-focus-inner {402 padding: 0;403 border-style: none;404}405 406/**407 * Restore the focus styles unset by the previous rule.408 */409button:-moz-focusring,410[type=button]:-moz-focusring,411[type=reset]:-moz-focusring,412[type=submit]:-moz-focusring {413 outline: 1px dotted ButtonText;414}415 416/**417 * Change the border, margin, and padding in all browsers (opinionated).418 */419fieldset {420 margin: 0 2px;421 padding: 0.35em 0.625em 0.75em;422 border: 1px solid #c0c0c0;423}424 425/**426 * 1. Correct the text wrapping in Edge and IE.427 * 2. Correct the color inheritance from `fieldset` elements in IE.428 * 3. Remove the padding so developers are not caught out when they zero out429 * `fieldset` elements in all browsers.430 */431legend {432 display: table; /* 1 */433 max-width: 100%; /* 1 */434 padding: 0; /* 3 */435 color: inherit; /* 2 */436 white-space: normal; /* 1 */437 box-sizing: border-box; /* 1 */438}439 440/**441 * 1. Add the correct display in IE 9-.442 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.443 */444progress {445 display: inline-block; /* 1 */446 vertical-align: baseline; /* 2 */447}448 449/**450 * Remove the default vertical scrollbar in IE.451 */452textarea {453 overflow: auto;454}455 456/**457 * 1. Add the correct box sizing in IE 10-.458 * 2. Remove the padding in IE 10-.459 */460[type=checkbox],461[type=radio] {462 padding: 0; /* 2 */463 box-sizing: border-box; /* 1 */464}465 466/**467 * Correct the cursor style of increment and decrement buttons in Chrome.468 */469[type=number]::-webkit-inner-spin-button,470[type=number]::-webkit-outer-spin-button {471 height: auto;472}473 474/**475 * 1. Correct the odd appearance in Chrome and Safari.476 * 2. Correct the outline style in Safari.477 */478[type=search] {479 outline-offset: -2px; /* 2 */480 -webkit-appearance: textfield; /* 1 */481}482 483/**484 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.485 */486[type=search]::-webkit-search-cancel-button,487[type=search]::-webkit-search-decoration {488 -webkit-appearance: none;489}490 491/**492 * 1. Correct the inability to style clickable types in iOS and Safari.493 * 2. Change font properties to `inherit` in Safari.494 */495::-webkit-file-upload-button {496 font: inherit; /* 2 */497 -webkit-appearance: button; /* 1 */498}499 500/* Interactive501 ========================================================================== */502/*503 * Add the correct display in IE 9-.504 * 1. Add the correct display in Edge, IE, and Firefox.505 */506details,507menu {508 display: block;509}510 511/*512 * Add the correct display in all browsers.513 */514summary {515 display: list-item;516}517 518/* Scripting519 ========================================================================== */520/**521 * Add the correct display in IE 9-.522 */523canvas {524 display: inline-block;525}526 527/**528 * Add the correct display in IE.529 */530template {531 display: none;532}533 534/* Hidden535 ========================================================================== */536/**537 * Add the correct display in IE 10-.538 */539[hidden] {540 display: none;541}542 543/* ==========================================================================544 Base elements545 ========================================================================== */546html {547 font-size: 14px;548}549@media screen and (min-width: 320px) {550 html {551 font-size: calc(14px + 4 * (100vw - 320px) / 960);552 }553}554@media screen and (min-width: 1280px) {555 html {556 font-size: 18px;557 }558}559 560body {561 background: #eee;562 color: #303841;563}564 565blockquote,566q {567 color: rgb(130.8, 135.6, 141);568 font-style: italic;569}570blockquote cite,571q cite {572 font-size: 80%;573 font-style: normal;574 font-weight: bold;575}576blockquote cite::before,577q cite::before {578 padding-right: 0.25rem;579 content: "—";580}581 582code,583kbd,584samp,585pre {586 font-family: Menlo, Consolas, Monaco, "Courier New", Courier, monospace;587}588 589kbd {590 display: inline-block;591 margin: 0 0.125em;592 padding: 0.125em 0.5em;593 border: 1px solid rgb(204, 204, 204);594 border-radius: 3px;595 background-color: rgb(247, 247, 247);596 text-shadow: 0 1px 0 #fff;597 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 2px #fff;598}599 600h1,601h2,602h3,603h4,604h5,605h6 {606 font-family: "Fira Sans", sans-serif;607 text-rendering: optimizeLegibility; /* enable common ligatures and kerning */608}609 610h1 {611 font-size: 20.7385152499px;612}613@media screen and (min-width: 320px) {614 h1 {615 font-size: calc(20.7385152499px + 24.3992432694 * (100vw - 320px) / 960);616 }617}618@media screen and (min-width: 1280px) {619 h1 {620 font-size: 45.1377585193px;621 }622}623 624h2 {625 font-size: 19.436284208px;626}627@media screen and (min-width: 320px) {628 h2 {629 font-size: calc(19.436284208px + 15.392233168 * (100vw - 320px) / 960);630 }631}632@media screen and (min-width: 1280px) {633 h2 {634 font-size: 34.828517376px;635 }636}637 638h3 {639 font-size: 18.215824px;640}641@media screen and (min-width: 320px) {642 h3 {643 font-size: calc(18.215824px + 8.658032 * (100vw - 320px) / 960);644 }645}646@media screen and (min-width: 1280px) {647 h3 {648 font-size: 26.873856px;649 }650}651 652h4 {653 font-size: 17.072px;654}655@media screen and (min-width: 320px) {656 h4 {657 font-size: calc(17.072px + 3.664 * (100vw - 320px) / 960);658 }659}660@media screen and (min-width: 1280px) {661 h4 {662 font-size: 20.736px;663 }664}665 666h5 {667 font-size: 16px;668}669@media screen and (min-width: 320px) {670 h5 {671 font-size: calc(16px + 0 * (100vw - 320px) / 960);672 }673}674@media screen and (min-width: 1280px) {675 h5 {676 font-size: 16px;677 }678}679 680h6 {681 font-size: 14.9953139644px;682}683@media screen and (min-width: 320px) {684 h6 {685 font-size: calc(14.9953139644px + -2.649634952 * (100vw - 320px) / 960);686 }687}688@media screen and (min-width: 1280px) {689 h6 {690 font-size: 12.3456790123px;691 }692}693 694dt {695 font-weight: bold;696}697dt:not(:first-child) {698 margin-top: 1rem;699}700 701dd {702 margin: 0;703}704 705pre {706 font-size: 12px;707}708@media screen and (min-width: 320px) {709 pre {710 font-size: calc(12px + 2 * (100vw - 320px) / 960);711 }712}713@media screen and (min-width: 1280px) {714 pre {715 font-size: 14px;716 }717}718 719figcaption {720 margin: 0.5rem 0;721 font-size: 80%;722}723 724.figcaption {725 margin: 0.5rem 0;726 font-size: 80%;727 text-align: center;728}729 730a {731 color: #861115;732}733a:hover {734 color: rgb(100.5, 12.75, 15.75);735}736 737/* ==========================================================================738 Layout739 ========================================================================== */740.canvas {741 position: relative;742 width: 100%;743 overflow: hidden;744}745 746.wrapper {747 position: relative;748 width: 100%;749 height: 100%;750 min-height: 100vh;751 transform: translateX(0);752 transition: all 0.4s ease;753 background-color: #eee;754 z-index: 100;755 -webkit-backface-visibility: hidden;756 backface-visibility: hidden;757}758 759.intro > .inner,760main > .inner {761 padding: 0 0.5rem;762}763@media (min-width: 20em) {764 .intro > .inner,765 main > .inner {766 padding-right: 1rem;767 padding-left: 1rem;768 }769}770@media (min-width: 48em) {771 .intro > .inner,772 main > .inner {773 padding-right: 2rem;774 padding-left: 2rem;775 }776}777@media (min-width: 64em) {778 .intro > .inner,779 main > .inner {780 padding-right: 3rem;781 padding-left: 3rem;782 }783}784@media (min-width: 80em) {785 .intro > .inner,786 main > .inner {787 padding-right: 4rem;788 padding-left: 4rem;789 }790}791 792main section {793 margin-left: auto;794 margin-right: auto;795 max-width: 100%;796}797 798.inner {799 max-width: 1024px;800}801 802/*803 Layout specific adjustments804 ========================================================================== */805@media (min-width: 64em) {806 .layout--post .entry-content,807 .layout--page .entry-content {808 width: 87.3417721519%;809 }810}811 812.layout--about .entry-wrap {813 display: -ms-flexbox;814 display: flex;815 -ms-flex-wrap: wrap;816 flex-wrap: wrap;817}818@media (min-width: 48em) {819 .layout--about .entry-wrap {820 -ms-flex-wrap: nowrap;821 flex-wrap: nowrap;822 }823}824@media (min-width: 48em) {825 .layout--about .entry-content {826 -ms-flex: 1;827 flex: 1;828 }829}830.layout--about .entry-sidebar {831 order: -1;832 -ms-flex-order: -1;833}834@media (min-width: 48em) {835 .layout--about .entry-sidebar {836 order: initial;837 -ms-flex-order: initial;838 }839}840.layout--about .entry-sidebar .author-picture {841 margin: 0 0 2rem;842 border-radius: 0.5em;843}844@media (min-width: 48em) {845 .layout--about .entry-sidebar .author-picture {846 margin: 0 0 0 2rem;847 }848}849 850@media (min-width: 48em) {851 .layout--cv .entries .entry-header {852 width: 30.3797468354%;853 padding-right: 1.2658227848%;854 /* remove space after last child element */855 }856 .layout--cv .entries .entry-header > *:last-child {857 margin-bottom: 0;858 }859}860@media (min-width: 48em) {861 .layout--cv .entries .entry-content {862 float: right;863 width: 68.3544303797%;864 }865}866.layout--cv .entry a {867 color: #861115;868}869.layout--cv .entry address {870 font-style: normal;871}872.layout--cv .entry .title,873.layout--cv .entry .position,874.layout--cv .entry .institution,875.layout--cv .entry .language {876 margin-bottom: 0;877}878.layout--cv .entry .date {879 margin-bottom: 1rem;880 color: rgb(130.8, 135.6, 141);881 font-family: Menlo, Consolas, Monaco, "Courier New", Courier, monospace;882 font-size: 80%;883}884.layout--cv .entry .courses-title,885.layout--cv .entry .awarder,886.layout--cv .entry .publisher,887.layout--cv .entry .level {888 margin: 1rem 0 0;889}890.layout--cv .entry .courses,891.layout--cv .entry .keywords {892 padding-left: 0;893 list-style: none;894}895.layout--cv .taxonomy + .taxonomy {896 margin-top: 0.5rem;897}898.layout--cv .taxonomy .title {899 display: inline-block;900 margin-right: 1rem;901}902.layout--cv .taxonomy .keywords {903 display: inline-block;904}905 906/* ==========================================================================907 Tables908 ========================================================================== */909table {910 width: 100%;911 border-collapse: collapse;912 /* For Firefox to horizontally scroll wider tables */913 word-break: normal;914 word-break: keep-all;915}916table {917 font-size: 12px;918}919@media screen and (min-width: 320px) {920 table {921 font-size: calc(12px + 6 * (100vw - 320px) / 960);922 }923}924@media screen and (min-width: 1280px) {925 table {926 font-size: 18px;927 }928}929 930th,931td {932 border-bottom: 1px solid rgba(48, 56, 65, 0.25);933}934 935th {936 padding: 0.5em;937 font-weight: bold;938 text-align: left;939}940 941td {942 padding: 0.5em;943}944 945tr,946td,947th {948 vertical-align: middle;949}950 951/* Components */952/* ==========================================================================953 Site-wide954 ========================================================================== */955.site-title {956 margin: 0;957 padding: 1.8125rem 1rem;958 padding-right: calc(8vw + 2 * 1.75em); /* make room for sidebar toggle */959 font-family: "Fira Sans", sans-serif;960 font-weight: bold;961 line-height: 1;962}963.site-title {964 font-size: 20px;965}966@media screen and (min-width: 320px) {967 .site-title {968 font-size: calc(20px + 4 * (100vw - 320px) / 960);969 }970}971@media screen and (min-width: 1280px) {972 .site-title {973 font-size: 24px;974 }975}976@media (min-width: 48em) {977 .site-title {978 padding-left: 2rem;979 }980}981@media (min-width: 64em) {982 .site-title {983 padding-left: 5vw;984 }985}986.site-title a {987 display: -ms-flexbox;988 display: -webkit-box;989 display: flex;990 -ms-flex-align: center;991 -webkit-box-align: center;992 align-items: center;993 min-height: 75px;994 color: #303841;995 text-decoration: none;996}997 998.site-logo {999 width: 75px;1000 height: 75px;1001 margin-right: 0.5rem;1002 border-radius: 50%;1003}1004 1005.more-link {1006 font-weight: bold;1007 text-decoration: none;1008}1009 1010.back-to-top {1011 display: block;1012 color: rgb(173.3185840708, 183.3716814159, 194.6814159292);1013 font-size: 0.75em;1014 text-transform: uppercase;1015 text-align: right;1016 text-decoration: none;1017}1018 1019.taxonomy-section {1020 margin-bottom: 2em;1021 padding-bottom: 1em;1022}1023.taxonomy-section:not(:last-child) {1024 border-bottom: solid 1px rgba(48, 56, 65, 0.25);1025}1026.taxonomy-section + .taxonomy-section {1027 margin-top: 2em;1028}1029 1030.taxonomy-title {1031 margin-bottom: 0.5em;1032 color: rgb(202.6548672566, 209.0973451327, 216.3451327434);1033 font-family: "Fira Sans", sans-serif;1034}1035.taxonomy-title {1036 font-size: 28px;1037}1038@media screen and (min-width: 320px) {1039 .taxonomy-title {1040 font-size: calc(28px + 4 * (100vw - 320px) / 960);1041 }1042}1043@media screen and (min-width: 1280px) {1044 .taxonomy-title {1045 font-size: 32px;1046 }1047}1048 1049.taxonomy-count {1050 color: rgb(173.3185840708, 183.3716814159, 194.6814159292);1051}1052 1053.taxonomy-index {1054 display: grid;1055 grid-column-gap: 2em;1056 grid-template-columns: repeat(2, 1fr);1057 margin: 0;1058 padding: 0;1059 font-family: "Fira Sans", sans-serif;1060 font-size: 0.9em;1061 list-style: none;1062}1063@media (min-width: 64em) {1064 .taxonomy-index {1065 grid-template-columns: repeat(3, 1fr);1066 }1067}1068.taxonomy-index a {1069 display: -webkit-box;1070 display: -ms-flexbox;1071 display: flex;1072 padding: 0.25em 0;1073 -webkit-box-pack: justify;1074 -ms-flex-pack: justify;1075 justify-content: space-between;1076 color: inherit;1077 text-decoration: none;1078 border-bottom: 1px solid rgba(48, 56, 65, 0.25);1079}1080.taxonomy-index a:hover {1081 color: #861115;1082}1083.taxonomy-index + .taxonomy-section {1084 margin-top: 3em;1085}1086 1087/* ==========================================================================1088 Sidebar1089 ========================================================================== */1090.sidebar {1091 position: fixed;1092 top: 0;1093 left: 0;1094 width: 100%;1095 max-width: 320px;1096 height: 100%;1097 z-index: 50;1098 visibility: hidden;1099 -webkit-transition: visibility 0s 0.3s;1100 transition: visibility 0s 0.3s;1101}1102@media (min-width: 64em) {1103 .sidebar {1104 max-width: 480px;1105 }1106}1107.sidebar.is--visible {1108 visibility: visible;1109 -webkit-transition: visibility 0s 0s;1110 transition: visibility 0s 0s;1111}1112.sidebar li {1113 -webkit-transform: translateX(-1rem);1114 -ms-transform: translateX(-1rem);1115 transform: translateX(-1rem);1116 -webkit-transition: all 0.5s;1117 transition: all 0.5s;1118 opacity: 0;1119 /* line hover effect */1120}1121.sidebar li.is--moved {1122 -webkit-transform: translateX(0);1123 -ms-transform: translateX(0);1124 transform: translateX(0);1125 opacity: 1;1126}1127.sidebar li a {1128 position: relative;1129 color: #3a4750;1130}1131.sidebar li a::before {1132 display: block;1133 position: absolute;1134 top: 50%;1135 left: -3rem;1136 width: 0;1137 height: 1px;1138 -webkit-transition: width 0.3s cubic-bezier(0, 0, 0.3, 1);1139 transition: width 0.3s cubic-bezier(0, 0, 0.3, 1);1140 background-color: #3a4750;1141 content: "";1142}1143.sidebar li a:hover {1144 color: #861115;1145}1146.sidebar li a:hover::before {1147 width: 2.5rem;1148}1149.sidebar > .inner {1150 width: 100%;1151 height: 100%;1152 padding: 1.5em;1153 background-color: #fff;1154 overflow-x: hidden;1155 -webkit-box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);1156 box-shadow: inset -1em 0 5em 0 rgba(0, 0, 0, 0.125);1157}1158@media (min-width: 48em) {1159 .sidebar > .inner {1160 padding: 3rem;1161 }1162}1163.sidebar .menu {1164 position: relative;1165 margin-bottom: 1.5rem;1166 padding-bottom: 0.5rem;1167 font-weight: bold;1168 line-height: 1;1169 /* divider line */1170}1171.sidebar .menu {1172 font-size: 20px;1173}1174@media screen and (min-width: 320px) {1175 .sidebar .menu {1176 font-size: calc(20px + 10 * (100vw - 320px) / 960);1177 }1178}1179@media screen and (min-width: 1280px) {1180 .sidebar .menu {1181 font-size: 30px;1182 }1183}1184.sidebar .menu a {1185 display: block;1186}1187.sidebar .menu::after {1188 position: absolute;1189 bottom: 0;1190 width: 1.5em;1191 height: 1px;1192 background-color: #3a4750;1193 content: "";1194}1195.sidebar .menu li {1196 margin-bottom: 1.5rem;1197}1198.sidebar .contact-list {1199 margin-top: 0.5rem;1200 padding-top: 0.5rem;