SALT-NLP/Design2Code

1<!DOCTYPE html>2<html>3 <head>4  <style>5   /*6  Place all the styles related to the matching controller here.7  They will automatically be included in application.css.8*/9/* line 8, app/assets/stylesheets/authors.css.scss */10body#ficlets aside.author-meta {11  max-width: 100%;12  display: flex;13  align-items: flex-start;14  padding: 10px 0 10px;15  margin: 10px 0 10px;16  border-bottom: 1px dotted #b8b8b8;17  font-size: 15px;18}19 20/* line 17, app/assets/stylesheets/authors.css.scss */21body#ficlets aside.author-meta .icon-container {22  flex: 0 0 80px;23}24 25/* line 20, app/assets/stylesheets/authors.css.scss */26body#ficlets aside.author-meta .author-mini-bio {27  flex: 1 1 auto;28}29 30/* line 22, app/assets/stylesheets/authors.css.scss */31body#ficlets aside.author-meta .author-mini-bio p {32  margin: 0 0 5px;33  padding: 0;34}35 36/* line 25, app/assets/stylesheets/authors.css.scss */37body#ficlets aside.author-meta .author-mini-bio p:last-child {38  margin-bottom: 0;39}40/*41  Place all the styles related to the matching controller here.42  They will automatically be included in application.css.43*/44/*45  Place all the styles related to the matching controller here.46  They will automatically be included in application.css.47*/48/* line 3, app/assets/stylesheets/comments.css.scss */49body#ficlets #comments ul {50  margin: 10px 0;51  padding: 0;52  list-style: none;53}54 55/* line 8, app/assets/stylesheets/comments.css.scss */56body#ficlets #comments ul li.hreview {57  margin: 0 0 15px;58}59 60/* line 11, app/assets/stylesheets/comments.css.scss */61body#ficlets #comments ul li.hreview h3.reviewer {62  display: flex;63  margin: 0 0 5px;64  padding: 0;65}66 67/* line 16, app/assets/stylesheets/comments.css.scss */68body#ficlets #comments ul li.hreview h3.reviewer a.url {69  flex: 0 0 25px;70  margin-right: 10px;71}72 73/* line 19, app/assets/stylesheets/comments.css.scss */74body#ficlets #comments ul li.hreview h3.reviewer a.url img {75  max-width: 25px;76  max-height: 25px;77}78 79/* line 24, app/assets/stylesheets/comments.css.scss */80body#ficlets #comments ul li.hreview h3.reviewer a.fn {81  flex: 1 1 auto;82}83 84/* line 29, app/assets/stylesheets/comments.css.scss */85body#ficlets #comments ul li.hreview blockquote {86  margin: 0;87  padding: 0;88}89 90/* line 34, app/assets/stylesheets/comments.css.scss */91body#ficlets #comments ul li.hreview:last-child {92  margin-bottom: 0;93}94 95/* line 38, app/assets/stylesheets/comments.css.scss */96body#ficlets #comments ul li.hreview ul.meta {97  margin: 5px 0 0;98  font-size: 11px;99}100/*101  Place all the styles related to the matching controller here.102  They will automatically be included in application.css.103*/104/*105  Place all the styles related to the matching controller here.106  They will automatically be included in application.css.107*/108/* line 8, app/assets/stylesheets/stories.css.scss */109body#ficlets aside.story-meta {110  float: right;111  max-width: 200px;112  padding: 10px;113  margin: 10px 0 10px 10px;114  background: #f6f5f0;115  font-size: 13px;116}117 118@media (max-width: 400px) {119  /* line 8, app/assets/stylesheets/stories.css.scss */120  body#ficlets aside.story-meta {121    float: none;122    max-width: 100%;123    margin-left: 0;124  }125}126 127/* line 24, app/assets/stylesheets/stories.css.scss */128body#ficlets div.story-body {129  font-size: 18px;130  border-bottom: 1px dotted #b8b8b8;131}132 133/* line 29, app/assets/stylesheets/stories.css.scss */134body#ficlets section.prequels-and-sequels {135  clear: both;136  display: flex;137  align-items: flex-start;138  padding: 0 0 10px;139  margin-bottom: 10px;140  border-bottom: 1px dotted #b8b8b8;141}142 143/* line 36, app/assets/stylesheets/stories.css.scss */144body#ficlets section.prequels-and-sequels nav.prequels, body#ficlets section.prequels-and-sequels nav.sequels {145  flex: 0 0 50%;146}147/*148  Place all the styles related to the matching controller here.149  They will automatically be included in application.css.150*/151/* line 8, app/assets/stylesheets/tags.css.scss */152body#ficlets ul.object-list.tags-list, body#ficlets ol.object-list.tags-list {153  display: flex;154  flex-wrap: wrap;155  column-gap: 10px;156}157 158/* line 13, app/assets/stylesheets/tags.css.scss */159body#ficlets ul.object-list.tags-list li, body#ficlets ol.object-list.tags-list li {160  flex: 0 1 auto;161  margin: 5px;162  padding: 10px;163  background: #f6f5f0;164}165 166/* line 19, app/assets/stylesheets/tags.css.scss */167body#ficlets ul.object-list.tags-list li span.tag, body#ficlets ol.object-list.tags-list li span.tag {168  margin: 0 3px 0 0;169  padding: 0;170  font-weight: bold;171}172/* line 1, app/assets/stylesheets/theme.css.scss */173body#ficlets {174  margin: 0;175  padding: 0;176  background: #fff;177  color: #000;178  font: 16px "Georgia", "Times New Roman", "Times", serif;179}180 181/* line 8, app/assets/stylesheets/theme.css.scss */182body#ficlets a {183  color: #3ba4e0;184  text-decoration: none;185}186 187/* line 11, app/assets/stylesheets/theme.css.scss */188body#ficlets a:hover, body#ficlets a:active {189  color: #f26522;190}191 192/* line 16, app/assets/stylesheets/theme.css.scss */193body#ficlets > header {194  display: flex;195  align-items: center;196  max-width: 1024px;197  margin: 20px auto 0;198  padding: 0 20px;199}200 201/* line 23, app/assets/stylesheets/theme.css.scss */202body#ficlets > header h1 {203  flex: 0 0 339px;204  margin: 0;205  padding: 0;206}207 208/* line 28, app/assets/stylesheets/theme.css.scss */209body#ficlets > header h1 a {210  display: block;211  color: #f26522;212}213 214/* line 40, app/assets/stylesheets/theme.css.scss */215body#ficlets > header nav {216  flex: 1 1 auto;217}218 219/* line 43, app/assets/stylesheets/theme.css.scss */220body#ficlets > header nav ul {221  display: flex;222  margin: 0 0 0 20px;223  padding: 0;224  list-style: none;225  align-items: center;226}227 228/* line 50, app/assets/stylesheets/theme.css.scss */229body#ficlets > header nav ul li {230  flex: 1 1 auto;231  margin: 0;232  padding: 0;233}234 235/* line 54, app/assets/stylesheets/theme.css.scss */236body#ficlets > header nav ul li a {237  display: block;238  padding: 10px;239  background: #000;240  color: #fff;241  text-align: center;242  text-decoration: none;243}244 245/* line 61, app/assets/stylesheets/theme.css.scss */246body#ficlets > header nav ul li a:hover, body#ficlets > header nav ul li a:active {247  background: #f26522;248  color: #fff;249}250 251/* line 68, app/assets/stylesheets/theme.css.scss */252body#ficlets > header nav ul li:first-child a {253  border-top-left-radius: 2px;254  border-bottom-left-radius: 2px;255}256 257/* line 74, app/assets/stylesheets/theme.css.scss */258body#ficlets > header nav ul li:last-child a {259  border-top-right-radius: 2px;260  border-bottom-right-radius: 2px;261}262 263@media (max-width: 700px) {264  /* line 85, app/assets/stylesheets/theme.css.scss */265  body#ficlets > header h1 {266    flex: 0 0 60px;267  }268  /* line 89, app/assets/stylesheets/theme.css.scss */269  body#ficlets > header nav ul {270    margin: 0 0 0 10px;271  }272  /* line 93, app/assets/stylesheets/theme.css.scss */273  body#ficlets > header nav ul li a {274    padding: 10px 5px;275    font-size: 11px;276  }277}278 279/* line 104, app/assets/stylesheets/theme.css.scss */280body#ficlets > main {281  max-width: 1024px;282  margin: 50px auto 0;283  padding: 0 20px;284}285 286/* line 109, app/assets/stylesheets/theme.css.scss */287body#ficlets > main ul.object-list, body#ficlets > main ol.object-list {288  margin: 0;289  padding: 0;290}291 292/* line 113, app/assets/stylesheets/theme.css.scss */293body#ficlets > main ul.object-list > li, body#ficlets > main ol.object-list > li {294  display: flex;295  margin: 0 0 25px;296  padding: 0;297}298 299/* line 118, app/assets/stylesheets/theme.css.scss */300body#ficlets > main ul.object-list > li aside.avatar-container, body#ficlets > main ol.object-list > li aside.avatar-container {301  flex: 0 0 73px;302  margin-right: 10px;303}304 305/* line 122, app/assets/stylesheets/theme.css.scss */306body#ficlets > main ul.object-list > li aside.avatar-container img.avatar, body#ficlets > main ol.object-list > li aside.avatar-container img.avatar {307  max-width: 73px;308}309 310/* line 127, app/assets/stylesheets/theme.css.scss */311body#ficlets > main ul.object-list > li .item-meta h3, body#ficlets > main ol.object-list > li .item-meta h3 {312  margin: 0 0 5px;313  font-size: 17px;314}315 316/* line 131, app/assets/stylesheets/theme.css.scss */317body#ficlets > main ul.object-list > li .item-meta p, body#ficlets > main ol.object-list > li .item-meta p {318  margin: 0 0 5px;319  padding: 0;320  font-size: 13px;321}322 323/* line 136, app/assets/stylesheets/theme.css.scss */324body#ficlets > main ul.object-list > li .item-meta p:last-child, body#ficlets > main ol.object-list > li .item-meta p:last-child {325  margin: 0;326}327 328/* line 144, app/assets/stylesheets/theme.css.scss */329body#ficlets > main div.pagination {330  margin: 50px auto;331  padding: 0;332  display: flex;333  align-items: center;334}335 336/* line 150, app/assets/stylesheets/theme.css.scss */337body#ficlets > main div.pagination span, body#ficlets > main div.pagination a, body#ficlets > main div.pagination em {338  flex: 1 1 auto;339}340 341/* line 152, app/assets/stylesheets/theme.css.scss */342body#ficlets > main div.pagination span.current, body#ficlets > main div.pagination a.current, body#ficlets > main div.pagination em.current {343  font-size: 30px;344}345 346/* line 160, app/assets/stylesheets/theme.css.scss */347body#ficlets > footer {348  display: flex;349  align-items: flex-start;350  max-width: 1024px;351  margin: 50px auto 0;352  padding: 0 20px;353  font-size: 13px;354}355 356/* line 168, app/assets/stylesheets/theme.css.scss */357body#ficlets > footer > aside {358  flex: 0 0 98px;359}360 361/* line 171, app/assets/stylesheets/theme.css.scss */362body#ficlets > footer > section {363  flex: 1 1 auto;364}365 366/* line 173, app/assets/stylesheets/theme.css.scss */367body#ficlets > footer > section p {368  margin-top: 0;369}370 371/* line 176, app/assets/stylesheets/theme.css.scss */372body#ficlets > footer > section nav {373  margin: 5px 0 0;374}375 376/* line 179, app/assets/stylesheets/theme.css.scss */377body#ficlets > footer > section nav ul {378  display: flex;379  margin: 0;380  padding: 0;381  list-style: none;382}383 384/* line 185, app/assets/stylesheets/theme.css.scss */385body#ficlets > footer > section nav ul li {386  flex: 1 1 auto;387  margin: 0;388  padding: 0;389}390 391/* line 189, app/assets/stylesheets/theme.css.scss */392body#ficlets > footer > section nav ul li a {393  display: block;394  padding: 5px;395  text-align: center;396}397 398@media (max-width: 400px) {399  /* line 160, app/assets/stylesheets/theme.css.scss */400  body#ficlets > footer {401    max-width: 100%;402    align-items: flex-start;403  }404  /* line 203, app/assets/stylesheets/theme.css.scss */405  body#ficlets > footer > aside {406    flex: 0 0 47px;407    height: 28.5px;408    margin-right: 5px;409    background-size: 47px 28.5px;410  }411  /* line 211, app/assets/stylesheets/theme.css.scss */412  body#ficlets > footer > section p {413    margin: 0 0 5px;414  }415}416/*417 * This is a manifest file that'll be compiled into application.css, which will include all the files418 * listed below.419 *420 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,421 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.422 *423 * You're free to add application-wide styles to this file and they'll appear at the bottom of the424 * compiled file so the styles you add here take precedence over styles defined in any styles425 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new426 * file per style scope.427 *428 429 430 */431  </style>432  <title>433   JLaughter - Ficlets Archive434  </title>435  <meta content="ie=edge" http-equiv="x-ua-compatible">436  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" name="viewport">437  <meta content="yes" name="apple-mobile-web-app-capable">438  <meta content="global" name="distribution">439  <meta content="general" name="rating">440  <meta content="ALL" name="robots">441  <meta content="authenticity_token" name="csrf-param">442  <meta content="g9O8KZ6ccTa++zrHBofTRlWC/ByupF9ilh9uW8nhDIvuJqL3g2ksB0IN4ydiMlcKE1oOjDLwOnQ1D5EcrMQv/w==" name="csrf-token">443 </head>444 <body id="ficlets">445  <header>446   <h1>447    <a>448     Ficlets449    </a>450   </h1>451   <nav>452    <ul>453     <li>454      <a>455       Authors456      </a>457     </li>458     <li>459      <a>460       Stories461      </a>462     </li>463     <li>464      <a>465       Tags466      </a>467     </li>468    </ul>469   </nav>470  </header>471  <main>472   <h1>473    JLaughter474   </h1>475   <div class="author-meta">476    <div class="bio">477     <p>478      I&rsquo;ve always been an avid (dare I say:479      <span class="caps">480       OBSESSED481      </span>482      ) reader, and started writing fiction somewhere around 5th or 6th grade. I read approximately 3 or 4 books a month, so new material is always a must!483     </p>484     <p>485      I&rsquo;ve written for a long time now, although the novel I started in high school has never gotten past the first draft stage. Over the last four years, I&rsquo;ve fallen out of the habit of writing and I&rsquo;m looking to ramp that up again.486     </p>487     <p>488      I&rsquo;m going to insert a shameless plug for my father. Jim Laughter and Victor J. Bretthauer recently published489      <strong>490       Escape to Destiny491      </strong>492      , and his book (and oncoming series) is available on493      <strong>494       tatepublishing.com495      </strong>496      !497     </p>498     <p>499      Music You Should Try:500      <br>501      <strong>502       The Dears503      </strong>504      ,505      <em>506       No Cities Left507      </em>508      <br>509      <strong>510       Sia511      </strong>512      , lots of albums&hellip;great voice.513     </p>514     <p>515      <em>516       Ficlet Series&rsquo; in Progress517      </em>518      :519     </p>520     <p>521      <strong>522       Bagman523      </strong>524      : a Cyberpunk series in the first-person narrative from different points of views. This series is rated525      <strong>526       <em>527        Mature528       </em>529      </strong>530      for drug-use, language, violence and strong sexual references.531      <strong>532       30471533      </strong>534      (in progress)535     </p>536     <p>537      <strong>538       The Gerideon Chronicles539      </strong>540      : An experiment in writing in a classical style reminiscent of Sir Thomas Malory&rsquo;s541      <em>542       Le Morte D&rsquo;Arthur.543      </em>544      <strong>545       30988546      </strong>547      (in progress)548     </p>549     <p>550      <em>551       Completed Ficlets552      </em>553     </p>554     <p>555      <strong>556       The Fog557      </strong>558      : My response to Ana Cristina&rsquo;s559      <em>560       Out of Order Challenge561      </em>562      .563      <strong>564       33175565      </strong>566     </p>567     <p>568      Also check out my bro&rsquo;s ficlets!569      <strong>570       Browncoatben571      </strong>572      ! He&rsquo;s not as good as me, but he wishes he was.573     </p>574    </div>575   </div>576   <section id="stories">577    <h2>578     Stories (79)579    </h2>580    <ul class="object-list stories-list">581     <li class="story-list-item">582      <div class="item-meta">583       <h3>584        <a>585         Bagman: A Clear Blue Spike586        </a>587       </h3>588       <p>589        <strong>590         Author:591        </strong>592        <a>593         JLaughter594        </a>595       </p>596       <p>597        Published598        <abbr title="2008-05-14 01:46:07 UTC">599         May 14th, 2008600        </abbr>601       </p>602      </div>603     </li>604     <li class="story-list-item">605      <div class="item-meta">606       <h3>607        <a>608         Bagman: Fashionably Late609        </a>610       </h3>611       <p>612        <strong>613         Author:614        </strong>615        <a>616         JLaughter617        </a>618       </p>619       <p>620        Published621        <abbr title="2008-05-17 00:16:51 UTC">622         May 17th, 2008623        </abbr>624       </p>625      </div>626     </li>627     <li class="story-list-item">628      <div class="item-meta">629       <h3>630        <a>631         Bagman: First Rule: Never Ask632        </a>633       </h3>634       <p>635        <strong>636         Author:637        </strong>638        <a>639         JLaughter640        </a>641       </p>642       <p>643        Published644        <abbr title="2008-05-17 02:29:05 UTC">645         May 17th, 2008646        </abbr>647       </p>648      </div>649     </li>650     <li class="story-list-item">651      <div class="item-meta">652       <h3>653        <a>654         Bagman: Shots Fired655        </a>656       </h3>657       <p>658        <strong>659         Author:660        </strong>661        <a>662         JLaughter663        </a>664       </p>665       <p>666        Published667        <abbr title="2008-05-17 12:37:40 UTC">668         May 17th, 2008669        </abbr>670       </p>671      </div>672     </li>673    </ul>674   </section>675  </main>676  <footer>677   <aside>678    <a>679     Ficlets680    </a>681   </aside>682   <section>683    <p>684     All stories are licensed under a Creative Commons Attribution-Share Alike 3.0 License.685    </p>686    <nav>687     <ul>688      <li>689       <a>690        Authors691       </a>692      </li>693      <li>694       <a>695        Stories696       </a>697      </li>698      <li>699       <a>700        Tags701       </a>702      </li>703     </ul>704    </nav>705   </section>706  </footer>707 </body>708</html>709