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 dir="ltr" lang="en-US" xmlns="">3 <head profile="">4 <title>5 Evolving A Learning Analytics Platform - Ari Bader-Natal6 </title>7 <meta charset="utf-8">8 <meta content="Evolving A Learning Analytics Platform" name="title">9 <meta content="Evolving A Learning Analytics Platform" property="og:title">10 <meta content="Evolving A Learning Analytics Platform" name="twitter:title">11 <meta content="Ari Bader-Natal" name="application-name">12 <meta content="Ari Bader-Natal" name="author">13 <meta content="" property="article:author">14 <meta content="width=device-width, initial-scale=1.0, maximum-scale=5" name="viewport">15 <meta content="summary_large_image" name="twitter:card">16 <meta content="@aribadernatal" name="twitter:site">17 <meta content="@aribadernatal" name="twitter:creator">18 <meta content="Ari Bader-Natal" property="og:site_name">19 <meta content="en_US" property="og:locale">20 <style data-tippy-stylesheet>21 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}22 </style>23 <meta content="" property="og:url">24 <meta content="" name="twitter:url">25 <meta content="article" property="og:type">26 <meta content="2011-02-28T20:00:00+00:00" property="article:published_time">27 <meta content="Publication" property="article:section">28 <meta content="Proceedings of the 1st International Conference on Learning Analytics and Knowledge. ACM Press, 2011." name="description">29 <meta content="Proceedings of the 1st International Conference on Learning Analytics and Knowledge. ACM Press, 2011." property="og:description">30 <meta content="Proceedings of the 1st International Conference on Learning Analytics and Knowledge. ACM Press, 2011." name="twitter:description">31 <meta content="" name="image">32 <meta content="" property="og:image">33 <meta content="" name="twitter:image">34 <style>35 @font-face {36 font-family: "CallunaRegular";37 font-display: swap;38 src: url('/fonts/webFonts/CallunaRegular/font.woff2') format('woff2'),39 url('/fonts/webFonts/CallunaRegular/font.woff2') format('woff');40 }41 @font-face {42 font-family: "CallunaBoldItalic";43 font-display: swap;44 src: url('/fonts/webFonts/CallunaBoldItalic/font.woff2') format('woff2'),45 url('/fonts/webFonts/CallunaBoldItalic/font.woff2') format('woff');46 }47 @font-face {48 font-family: "CallunaBold";49 font-display: swap;50 src: url('/fonts/webFonts/CallunaBold/font.woff2') format('woff2'),51 url('/fonts/webFonts/CallunaBold/font.woff2') format('woff');52 }53 @font-face {54 font-family: "CallunaSansRegular";55 font-display: swap;56 src: url('/fonts/webFonts/CallunaSansRegular/font.woff2') format('woff2'),57 url('/fonts/webFonts/CallunaSansRegular/font.woff2') format('woff');58 }59 @font-face {60 font-family: "CallunaItalic";61 font-display: swap;62 src: url('/fonts/webFonts/CallunaItalic/font.woff2') format('woff2'),63 url('/fonts/webFonts/CallunaItalic/font.woff2') format('woff');64 }65 </style>66 <style type="text/css">67 .highlight .c {68 color: #c2b680;69 background-color: #272822;70}71/* Comment */72.highlight .err {73 color: #dcdccc;74 background-color: #272822;75}76/* Error */77.highlight .g {78 color: #dcdccc;79 background-color: #272822;80}81/* Generic */82.highlight .k {83 color: #ff6651;84 font-weight: bold;85}86/* Keyword */87.highlight .l {88 color: #dcdccc;89 background-color: #272822;90}91/* Literal */92.highlight .n {93 color: #dcdccc;94 background-color: #272822;95}96/* Name */97.highlight .o {98 color: #dcdccc;99 background-color: #272822;100}101/* Operator */102.highlight .x {103 color: #dcdccc;104 background-color: #272822;105}106/* Other */107.highlight .p {108 color: #dcdccc;109 background-color: #272822;110}111/* Punctuation */112.highlight .cm {113 color: #c2b680;114 background-color: #272822;115}116/* Comment.Multiline */117.highlight .cp {118 color: #c2aed0;119 background-color: #272822;120}121/* Comment.Preproc */122.highlight .c1 {123 color: #75715e;124 background-color: #272822;125}126/* Comment.Single */127.highlight .cs {128 color: #c2b680;129 background-color: #272822;130}131/* Comment.Special */132.highlight .gd {133 color: #dcdccc;134 background-color: #8b0000;135}136/* Generic.Deleted */137.highlight .ge {138 color: #d4b064;139 text-decoration: underline;140 background-color: #272822;141}142/* Generic.Emph */143.highlight .gr {144 color: #f07070;145 background-color: #272822;146}147/* Generic.Error */148.highlight .gh {149 color: #f7f7f1;150 font-weight: bold;151 background-color: #000;152}153/* Generic.Heading */154.highlight .gi {155 color: #dcdccc;156 background-color: #008b00;157}158/* Generic.Inserted */159.highlight .go {160 color: #9f8f80;161 font-weight: bold;162 background-color: #272822;163}164/* Generic.Output */165.highlight .gp {166 color: #dcdccc;167 background-color: #272822;168}169/* Generic.Prompt */170.highlight .gs {171 color: #dcdccc;172 background-color: #272822;173}174/* Generic.Strong */175.highlight .gu {176 color: #f7f7f1;177 font-weight: bold;178 background-color: #000;179}180/* Generic.Subheading */181.highlight .gt {182 color: #f07070;183 font-weight: bold;184 background-color: #272822;185}186/* Generic.Traceback */187.highlight .kc {188 color: #e0af91;189 font-weight: bold;190 background-color: #272822;191}192/* Keyword.Constant */193.highlight .kd {194 color: #77d8eb;195 font-weight: bold;196 background-color: #272822;197}198/* Keyword.Declaration */199.highlight .kn {200 color: #e0af91;201 font-weight: bold;202 background-color: #272822;203}204/* Keyword.Namespace */205.highlight .kp {206 color: #e0af91;207 font-weight: bold;208 background-color: #272822;209}210/* Keyword.Pseudo */211.highlight .kr {212 color: #e0af91;213 font-weight: bold;214 background-color: #272822;215}216/* Keyword.Reserved */217.highlight .kt {218 color: #dabfa5;219 font-weight: bold;220 background-color: #272822;221}222/* Keyword.Type */223.highlight .ld {224 color: #dcdccc;225 background-color: #272822;226}227/* Literal.Date */228.highlight .m {229 color: #dcdccc;230 background-color: #272822;231}232/* Literal.Number */233.highlight .s {234 color: #e6db6f;235}236/* Literal.String */237.highlight .na {238 color: #b5df5e;239}240/* Name.Attribute */241.highlight .nb {242 color: #dcdccc;243}244/* Name.Builtin */245.highlight .nc {246 color: #dcdccc;247 background-color: #272822;248}249/* Name.Class */250.highlight .no {251 color: #afe091;252 background-color: #272822;253}254/* Name.Constant */255.highlight .nd {256 color: #dcdccc;257 background-color: #272822;258}259/* Name.Decorator */260.highlight .ni {261 color: #d4b064;262 background-color: #272822;263}264/* Name.Entity */265.highlight .ne {266 color: #dcdccc;267 background-color: #272822;268}269/* Name.Exception */270.highlight .nf {271 color: #dcdccc;272 background-color: #272822;273}274/* Name.Function */275.highlight .nl {276 color: #dcdccc;277 background-color: #272822;278}279/* Name.Label */280.highlight .nn {281 color: #dcdccc;282 background-color: #272822;283}284/* Name.Namespace */285.highlight .nx {286 color: #ff6651;287 background-color: #272822;288}289/* Name.Other */290.highlight .py {291 color: #dcdccc;292 background-color: #272822;293}294/* Name.Property */295.highlight .nt {296 color: #ff6651;297 font-weight: bold;298}299/* Name.Tag */300.highlight .nv {301 color: #ff6651;302 background-color: #272822;303}304/* Name.Variable */305.highlight .ow {306 color: #dcdccc;307 background-color: #272822;308}309/* Operator.Word */310.highlight .w {311 color: #dcdccc;312 background-color: #272822;313}314/* Text.Whitespace */315.highlight .mf {316 color: #c2a4f8;317 background-color: #272822;318}319/* Literal.Number.Float */320.highlight .mh {321 color: #dcdccc;322 background-color: #272822;323}324/* Literal.Number.Hex */325.highlight .mi {326 color: #c2a4f8;327 background-color: #272822;328}329/* Literal.Number.Integer */330.highlight .mo {331 color: #dcdccc;332 background-color: #272822;333}334/* Literal.Number.Oct */335.highlight .sb {336 color: #dcdccc;337 background-color: #272822;338}339/* Literal.String.Backtick */340.highlight .sc {341 color: #dcdccc;342 background-color: #272822;343}344/* Literal.String.Char */345.highlight .sd {346 color: #dcdccc;347 background-color: #272822;348}349/* Literal.String.Doc */350.highlight .s2 {351 color: #e6db6f;352 background-color: #272822;353}354/* Literal.String.Double */355.highlight .se {356 color: #dcdccc;357 background-color: #272822;358}359/* Literal.String.Escape */360.highlight .sh {361 color: #dcdccc;362 background-color: #272822;363}364/* Literal.String.Heredoc */365.highlight .si {366 color: #dcdccc;367 background-color: #272822;368}369/* Literal.String.Interpol */370.highlight .sx {371 color: #dcdccc;372 background-color: #272822;373}374/* Literal.String.Other */375.highlight .sr {376 color: #e6db6f;377 background-color: #272822;378}379/* Literal.String.Regex */380.highlight .s1 {381 color: #dcdccc;382 background-color: #272822;383}384/* Literal.String.Single */385.highlight .ss {386 color: #e6db6f;387 background-color: #272822;388}389/* Literal.String.Symbol */390.highlight .bp {391 color: #dcdccc;392 background-color: #272822;393}394/* Name.Builtin.Pseudo */395.highlight .vc {396 color: #dabfa5;397 background-color: #272822;398}399/* Name.Variable.Class */400.highlight .vg {401 color: #dabfa5;402 background-color: #272822;403}404/* Name.Variable.Global */405.highlight .vi {406 color: #dabfa5;407 background-color: #272822;408}409/* Name.Variable.Instance */410.highlight .il {411 color: #dcdccc;412 background-color: #272822;413}414/* Literal.Number.Integer.Long */415 416 417/* 12 COLUMN : RESPONSIVE GRID SYSTEM DEVELOPER : DENIS LEBLANC URL : http://responsive.gs VERSION : 3.0 LICENSE : GPL & MIT */418/* SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */419 * {420 -webkit-box-sizing: border-box;421 -moz-box-sizing: border-box;422 box-sizing: border-box;423}424/* MAIN CONTAINER Set the width to whatever you want the width of your site to be. */425 .container {426 max-width: 800px;427 margin: 0 auto;428}429/* SELF CLEARING FLOATS - CLEARFIX METHOD */430 .container:after, .row:after, .col:after, .clr:after, .group:after {431 content: "";432 display: table;433 clear: both;434}435 .row {436 padding-bottom: 0em;437}438 .col {439 display: block;440 float: left;441 width: 100%;442}443 @media (min-width: 768px) {444 .gutters .col {445 margin-left: 2%;446 }447 .gutters .col:first-child {448 margin-left: 0;449 }450}451/* COLUMN WIDTH ON DISPLAYS +768px You might need to play with media queries here to suite your design. */452 @media (min-width: 768px) {453 .span_1 {454 width: 8.[PHONE REDACTED]%;455 }456 .span_2 {457 width: 16.[PHONE REDACTED]%;458 }459 .span_3 {460 width: 25%;461 }462 .span_4 {463 width: 33.[PHONE REDACTED]%;464 }465 .span_5 {466 width: 41.[PHONE REDACTED]%;467 }468 .span_6 {469 width: 50%;470 }471 .span_7 {472 width: 58.[PHONE REDACTED]%;473 }474 .span_8 {475 width: 66.[PHONE REDACTED]%;476 }477 .span_9 {478 width: 75%;479 }480 .span_10 {481 width: 83.[PHONE REDACTED]%;482 }483 .span_11 {484 width: 91.[PHONE REDACTED]%;485 }486 .span_12 {487 width: 100%;488 }489 .gutters .span_1 {490 width: 6.5%;491 }492 .gutters .span_2 {493 width: 15%;494 }495 .gutters .span_3 {496 width: 23.5%;497 }498 .gutters .span_4 {499 width: 32%;500 }501 .gutters .span_5 {502 width: 40.5%;503 }504 .gutters .span_6 {505 width: 49%;506 }507 .gutters .span_7 {508 width: 57.5%;509 }510 .gutters .span_8 {511 width: 66%;512 }513 .gutters .span_9 {514 width: 74.5%;515 }516 .gutters .span_10 {517 width: 83%;518 }519 .gutters .span_11 {520 width: 91.5%;521 }522 .gutters .span_12 {523 width: 100%;524 }525}526/* rgba(218, 221, 229, 0.25) */527/* #0070bb */528/*============================================================================*/529 * {530 margin: 0;531 padding: 0;532 box-sizing: border-box;533}534 .small-caps {535 font-kerning: normal;536 font-variant-ligatures: no-common-ligatures contextual;537 font-variant-numeric: oldstyle-nums proportional-nums;538 font-variant-caps: small-caps;539 -moz-font-feature-settings: "kern", "liga" 0, "clig" 0, "calt", "onum", "pnum", "smcp";540 -ms-font-feature-settings: "kern", "liga" 0, "clig" 0, "calt", "onum", "pnum", "smcp";541 -webkit-font-feature-settings: "kern", "liga" 0, "clig" 0, "calt", "onum", "pnum", "smcp";542 font-feature-settings: "kern", "liga" 0, "clig" 0, "calt", "onum", "pnum", "smcp";543}544 section.entry-content {545 font-family: CallunaRegular, charter, Georgia, Cambria, "Times New Roman", Times, serif;546 font-size: 1.2rem;547 margin-top: 10px;548}549 section.entry-content b, section.entry-content strong {550 font-family: CallunaBold, charter, Georgia, Cambria, "Times New Roman", Times, serif;551 font-weight: normal;552}553 section.entry-content i, section.entry-content em {554 font-family: CallunaItalic, charter, Georgia, Cambria, "Times New Roman", Times, serif;555 font-style: normal;556}557 section.entry-content b i, section.entry-content b em, section.entry-content strong i, section.entry-content strong em, section.entry-content i b {558 font-family: CallunaBoldItalic, charter, Georgia, Cambria, "Times New Roman", Times, serif;559 font-weight: normal;560 font-style: normal;561}562 .intro-paragraph {563 font-family: CallunaItalic, charter, Georgia, Cambria, "Times New Roman", Times, serif;564 margin: 0px 0px 25px;565 padding: 5px 0px 5px 15px !important;566 font-size: 26px;567 line-height: 1.4;568 text-align: left;569 border-left: 3px solid #999;570}571 .intro-paragraph.homepage-entry {572 font-family: CallunaRegular, charter, Georgia, Cambria, "Times New Roman", Times, serif;573}574 .intro-paragraph.homepage-entry img {575 width: 100px;576 height: 100px;577 margin-right: 17px;578 margin-bottom: 0px;579 -webkit-border-radius: 10px;580 border-radius: 10px;581 -webkit-box-shadow: 1px 1px 3px 0px #9f9f98;582}583 article.row.gutters {584 max-width: 600px !important;585 margin: auto !important;586}587 body.Projects article.row.gutters, body.Blogs article.row.gutters {588 max-width: 800px !important;589 margin: auto !important;590}591 body.Projects .project-entry {592 display: inline-block;593 background-color: #fff;594 padding: 0px 20px;595 margin: 0px 0px 20px 0px !important;596 border-radius: 10px;597 -webkit-box-shadow: 1px 1px 3px 0px #9f9f98;598 transition: all 0.2s ease-in-out;599}600 body.Projects .project-entry:hover {601 transform: scale(1.02);602 cursor: pointer;603}604 body.Projects header h2, body.Projects article h2, body.Blogs header h2, body.Blogs .archive h2, body.Blogs article h2 {605 font-size: 28px;606}607/* .intro-paragraph > * {608 box-shadow: 0 0.2rem 0.25rem rgba(0, 0, 0, 0.2);609}610 @supports (filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2))) {611 .intro-paragraph {612 filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));613 }614 .intro-paragraph > * {615 box-shadow: none;616 }617}618 */619 body#main-body {620 background-color: #e5e1dd;621 background: #e5e1dd;622 border-top: 5px solid #e5e1dd;623 font-family: CallunaRegular, charter, Georgia, Cambria, "Times New Roman", Times, serif;624 color: #161925;625 /* font-size:14px;626 */627 line-height: 1.5;628 padding-top: 0px;629 -webkit-font-smoothing: auto;630 -moz-osx-font-smoothing: auto;631}632 body#main-body b, body#main-body strong {633 font-family: CallunaBold, charter, Georgia, Cambria, "Times New Roman", Times, serif;634 font-weight: normal;635}636 body#main-body i, body#main-body em {637 font-family: CallunaItalic, charter, Georgia, Cambria, "Times New Roman", Times, serif;638 font-style: normal;639}640 body#main-body b i, body#main-body b em, body#main-body strong i, body#main-body strong em, body#main-body i b {641 font-family: CallunaBoldItalic, charter, Georgia, Cambria, "Times New Roman", Times, serif;642 font-weight: normal;643 font-style: normal;644}645 h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, table, img, hr, .fluid-width-video-wrapper, .highlight {646 margin-bottom: 20px;647}648 hr {649 margin-top: 20px;650}651 h1 {652 font-size: 36px;653 line-height: 1.3;654}655 h1, h2, h3 {656 font-family: CallunaBold, charter, Georgia, Cambria, "Times New Roman", Times, serif;657 font-weight: normal;658}659 header h2, article h2 {660 font-size: 42px;661 line-height: 1.2;662}663 blockquote {664 border-left: 2px solid #c4bbb2;665 padding: 0px 20px 0px;666 margin: 22px 0px;667}668 ul, ol {669 margin-left: 40px;670}671 img {672 max-width: 100%;673 height: auto;674 border: none;675 outline: none;676}677 a {678 text-decoration: none;679}680 hr {681 border: 0;682 height: 25px;683 background: url(/public/images/eagle.png) center center no-repeat;684}685 code {686 font-family: Consolas, Courier, monospace;687 font-size: 0.8rem;688}689 p code {690 padding: 0px 5px;691 border: 1px solid #ddd;692 background-color: #f8f8f8;693 border-radius: 3px;694 white-space: nowrap;695}696 table {697 border-collapse: collapse;698 /* border: 1px solid $contrast-color;699 */700}701 table td, table th {702 /* border: 1px solid $contrast-color;703 */704 padding: 5px 10px;705}706 table thead {707 background-color: #cfc8c0;708}709 dt {710 float: left;711 width: 30%;712 font-family: CallunaBold, charter, Georgia, Cambria, "Times New Roman", Times, serif;713 font-weight: normal;714}715 dd {716 float: right;717 width: 70%;718}719 footer {720 font-size: 0.8rem;721 text-align: center;722 /* border-top: 1px solid #ccc;723 */724 padding-top: 20px;725 margin-top: 20px;726 clear: both;727}728/*============================================================================*/729 .azul a {730 color: #2957c9;731}732 .azul a:hover {733 color: #183274;734}735 .ruby a {736 color: #e0115f;737}738 .ruby a:hover {739 color: #810a37;740}741 .amber a {742 color: #ff7e00;743}744 .amber a:hover {745 color: #994c00;746}747 .avocado a {748 color: #568203;749}750 .avocado a:hover {751 color: #141e01;752}753/*----------------------------------------------------------------------------*/754 pre.highlight {755 padding: 30px;756 border-radius: 6px;757 background-color: #000;758 color: #f8f8f2;759 line-height: 1;760 overflow-x: scroll;761}762 pre.highlight code {763 font-size: 0.7rem;764}765 .container {766 max-width: 1000px;767 padding: 0 40px;768 background: #f3efec;769 /* border-left: 1px dashed #ccc;770 */771 /* box-shadow: 0px 2px 5px 2px #ccc;772 */773}774 .container #name {775 display: none;776}777 .center {778 text-align: center;779}780 .right {781 float: right;782 margin: 0 0 20px 20px;783}784 .left {785 float: left;786 margin: 0 20px 20px 0;787}788 .top-navbar {789 margin-bottom: 35px;790 height: 100px;791}792 .top-navbar #nav-links-1 {793 display: inline-block;794}795 .top-navbar #nav-links-1 a {796 font-family: CallunaBold, charter, Georgia, Cambria, "Times New Roman", Times, serif;797}798 .top-navbar #nav-links-2 {799 display: inline-block;800}801 .top-navbar a {802 display: inline-block;803 color: #161925;804 padding: 60px 8px 25px;805 margin-right: 10px;806 margin-top: -15px;807 text-transform: uppercase;808 border-radius: 0 0 5px 5px;809 transition: all ease-in-out 0.3s;810 font-size: 18px;811 font-family: CallunaRegular, charter, Georgia, Cambria, "Times New Roman", Times, serif;812 vertical-align: middle;813}814 .top-navbar a:hover, .top-navbar a.current-page {815 color: #e5e1dd;816 border-bottom: none;817 text-decoration: none !important;818}819 .top-navbar a:hover {820 background-color: #2957c9;821 transform: translateY(5px);822}823 .top-navbar a.current-page {824 background-color: #161925;825}826 .top-navbar a svg, .top-navbar a i, .top-navbar a img {827 width: 24px;828 height: 24px;829 margin-bottom: 0px;830}831 .archive, .single {832 /* margin-bottom: 100px;833 */834 padding-bottom: 10px;835 margin-bottom: 20px;836}837 .single {838 font-size: 1.1rem;839}840 .single time, span.filed-under, span.filed-under a, .p-author, .permalink {841 color: #333;842 font-size: 0.9rem;843}844 .bundle {845 border-top: 1px solid #848eb6;846 padding-top: 10px;847 margin-bottom: 10px;848}849 .post-date {850 text-align: right;851}852 .not-found {853 margin-top: 150px;854 text-align: center;855 font-size: 2rem;856}857 .not-found h1 {858 font-size: 8rem;859}860 dl, .clearfix:before, .clearfix:after {861 content: " ";862 display: table;863}864 dl, .clearfix:after {865 clear: both;866}867/*============================================================================*/868 #logo {869 display: inline-block;870 /* height: 110px;871 width: 110px;872 background-size: 90px 90px;873 background-position: left center;874 background-repeat: no-repeat;875 */876 margin-top: 13px;877 height: 75px;878 /* background-image: url(/public/images/aribadernatal.jpg);879 background-size: 100px 100px;880 background-position: center;881 background-repeat: no-repeat;882 */883 width: 75px !important;884 /* display: inline-block;885 */886 /* box-shadow: 1px 1px 3px 0px #999;887 */888}889 #logo img {890 width: 90px;891 height: 90px;892 -webkit-border-radius: 10px;893 border-radius: 10px;894 -webkit-box-shadow: 1px 1px 3px 0px #999;895}896 div.posts-by-year article div.col {897 margin-bottom: 8px;898 font-size: 18px;899}900/*============================================================================*/901 @media screen and (max-width: 767px) {902 .hide-if-small {903 display: none;904 }905 .container {906 padding: 0 20px;907 }908 #homepage-entries {909 padding-right: 0px !important;910 }911 div[data-tippy-root] {912 display: none;913 }914 h1 {915 font-size: 1.8em;916 }917 #nav-links-2 a svg {918 opacity: 0.4;919 }920 #feed-control-container {921 padding-right: 10px;922 border-top: none;923 margin-top: 20px;924 }925 #feed-control-container.loaded {926 border-right: none;927 }928 .top-navbar {929 text-align: center;930 margin-top: 0px;931 margin-bottom: 25px !important;932 border-top: 1px dotted #ccc;933 border-bottom: 1px dotted #ccc;934 padding-top: 10px;935 height: inherit !important;936 }937 .top-navbar a {938 padding: 2px 5px;939 margin: 2px 2px 8px 2px;940 border-radius: 0;941 border: none;942 /* 1px solid $contrast-color;943 */944 transition: none;945 font-size: 18px;946 }947 .top-navbar a:hover {948 transform: none;949 }950 .top-navbar a.link-to-home {951 display: none;952 }953 .bundle, .post-date {954 /* text-align: center;955 */956 }957 .bundle article {958 /* margin-bottom: 30px;959 */960 }961 #logo {962 background-position: center center;963 }964 .homepage-entry img.large-icon {965 width: 64px;966 height: 64px;967 }968 div.posts-by-year article.row.gutters {969 /* a {970 margin-left:25px;971 margin-top:-7px;972 }973 */974 }975 div.posts-by-year article.row.gutters .post-icon {976 display: none !important;977 position: absolute;978 top: 0;979 left: 0px !important;980 color: #999;981 }982 div.posts-by-year article.row.gutters::before {983 content: none !important;984 }985 body.Projects div.project-entry div.project-icon-container {986 text-align: center;987 }988 body.Projects div.project-entry div.project-icon-container img.project-icon {989 width: 64px;990 height: 64px;991 }992}993/*=========================================*/994 div.posts-by-year article.row.gutters {995 /* margin-bottom: -17px !important;996 */997 position: relative;998}999 div.posts-by-year article.row.gutters .post-icon {1000 display: none;1001 position: absolute;1002 top: 0;1003 left: -17px;1004 color: #999;1005}1006 div.posts-by-year article.row.gutters::before {1007 content: "•";1008 position: absolute;1009 color: #0070bb;1010 opacity: 0.5;1011}1012 div.posts-by-year article.row.gutters:hover .post-icon {1013 color: #000;1014}1015 div.posts-by-year article.row.gutters a {1016 font-family: CallunaRegular, charter, Georgia, Cambria, "Times New Roman", Times, serif;1017}1018 div.posts-by-year article.row.gutters .post-date {1019 color: #666;1020}1021 cite {1022 font-family: CallunaBold, charter, Georgia, Cambria, "Times New Roman", Times, serif;1023 font-weight: normal;1024 font-style: normal;1025}1026 #feed-control-container {1027 float: left;1028 padding-right: 10px;1029 background-color: rgba(0, 0, 0, 0.05);1030}1031 #feed-control-container.loaded {1032 border: 1px dotted #ccc;1033}1034 #feed-control {1035 padding-top: 10px;1036 font-family: CallunaRegular, charter, Georgia, Cambria, "Times New Roman", Times, serif;1037 font-weight: 300;1038 line-height: 1.2;1039}1040 #feed-control ul {1041 margin-left: 0px;1042 list-style-type: none;1043}1044 #feed-control ul .favelog-link {1045 font-size: 13px;1046 padding-bottom: 9px;1047 list-style-position: outside;1048 margin-left: 32px;1049 padding-left: 3px;1050}1051 #feed-control ul .favelog-link.get-pocket {1052 list-style-image: url('/img/icons/get-pocket.svg');1053}1054 #feed-control ul .favelog-link.github {1055 list-style-image: url('/img/icons/github.svg');1056}1057 #feed-control ul .favelog-link.twitter {1058 list-style-image: url('/img/icons/twitter.svg');1059}1060 #feed-control ul .favelog-link.youtube {1061 list-style-image: url('/img/icons/youtube.svg');1062}1063 #feed-control ul .favelog-link.medium {1064 list-style-image: url('/img/icons/medium.svg');1065}1066 #feed-control ul .favelog-link.vimeo {1067 list-style-image: url('/img/icons/vimeo.svg');1068}1069 #feed-control ul .favelog-link.bookmark {1070 list-style-image: url('/img/icons/bookmark.svg');1071}1072 #feed-control ul .favelog-link::marker {1073 font-size: 30px;1074 line-height: 13px;1075}1076 #feed-control ul .favelog-link a {1077 color: #333;1078 border-bottom: 1px dotted transparent;1079}1080 #feed-control ul .favelog-link a:hover {1081 border-bottom: 1px dotted #0070bb;1082}1083 #feed-control ul .favelog-link i {1084 margin-right: 5px;1085 margin-left: -20px;1086}1087 .favelog-header {1088 font-family: CallunaRegular, charter, Georgia, Cambria, "Times New Roman", Times, serif;1089 font-size: 16px;1090 padding-top: 10px;1091 padding-bottom: 10px;1092 margin-left: 15px;1093}1094 .favelog-header a {1095 color: #333;1096}1097 body#main-body #homepage-entries {1098 padding-right: 25px;1099 font-family: CallunaRegular, charter, Georgia, Cambria, "Times New Roman", Times, serif;1100 font-weight: 300;1101 font-size: 18px;1102}1103 body#main-body #homepage-entries b, body#main-body #homepage-entries strong {1104 font-family: CallunaBold, charter, Georgia, Cambria, "Times New Roman", Times, serif;1105 font-weight: inherit;1106}1107 body#main-body #homepage-entries i, body#main-body #homepage-entries em {1108 font-family: CallunaItalic, charter, Georgia, Cambria, "Times New Roman", Times, serif;1109 font-style: italic;1110 font-style: normal;1111}1112 body#main-body #homepage-entries b i, body#main-body #homepage-entries b em, body#main-body #homepage-entries strong i, body#main-body #homepage-entries strong em, body#main-body #homepage-entries i b {1113 font-family: CallunaBoldItalic, charter, Georgia, Cambria, "Times New Roman", Times, serif;1114 font-weight: inherit;1115 font-style: normal;1116}1117 body#main-body #homepage-entries .homepage-entry {1118 padding-bottom: 10px;1119}1120 body#main-body #homepage-entries .homepage-entry img.large-icon {1121 width: 150px;1122 height: 150px;1123 margin: 0 10px 0 0;1124}1125 body#main-body #homepage-entries .homepage-entry img.medium-icon {1126 width: 80px;1127 height: 80px;1128 border: none;1129 margin: 10px 0px 10px 10px;1130}1131 body#main-body #homepage-entries .homepage-entry img.small-icon {1132 width: 64px;1133 height: 64px;1134 border: none;1135 margin: 10px 0px 10px 10px;1136}1137 .view-full-post, .external-post-excerpt {1138 margin-top: 15px;1139 font-family: CallunaRegular, charter, Georgia, Cambria, "Times New Roman", Times, serif;1140 font-size: 24px;1141}1142 .view-full-post .fa, .external-post-excerpt .fa {1143 font-size: 15px;1144 vertical-align: top;1145}1146 .external-post-header {1147 font-family: CallunaBold, charter, Georgia, Cambria, "Times New Roman", Times, serif;1148 margin-top: 15px;1149 font-size: 18px;1150}1151 div.sidebar {1152 margin-top: -35px;1153}1154 form.navbar-search {1155 margin-bottom: 20px;1156}1157 .tweets {1158 margin-top: 15px !important;1159}1160 .tweets-header-container {1161 position: inherit !important;1162}1163 .tweets-header-container .tweets-header {1164 padding: 0px 0 5px !important;1165 width: inherit !important;1166}1167 #dissertation {1168 font-size: 17px;1169 background-color: #ccc;1170}1171 .comments {1172 font-size: 15px;1173 line-height: 1.4;1174 color: #333;1175}1176 .bundle.row.gutters.callout {1177 /* background-color:#ccc;1178 */1179}1180 .ss {1181 font-family: CallunaBold, charter, Georgia, Cambria, "Times New Roman", Times, serif;1182 font-weight: normal;1183}1184 #extra-button {1185 padding-top: 15px;1186 font-size: 18px;1187}1188 #loading {1189 color: #676767;1190 font-size: 11px;1191 margin: 10px;1192 padding: 4px;1193}1194 .publication, .patent {1195 font-size: 18px;1196 line-height: 1.5;1197 text-align: left;1198 margin-bottom: 25px;1199}1200 .publication .abstract, .patent .abstract {