Advertisement
Guest User

yet

a guest
Oct 19th, 2019
125
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.50 KB | None | 0 0
  1. div.story-container {
  2.     position: relative;
  3.     margin-top: 0;
  4.     width: 83.2%;
  5.     margin: 0 auto 0 auto;
  6.     border: 1px solid var(--site-borders);
  7.     background-color: var(--site-accent);
  8.     box-shadow: var(--site-dropshadow);
  9.  
  10.     div.story-coverart {
  11.         display: inline-block;
  12.         padding: 3rem 0 3rem 3rem;
  13.         img {
  14.             max-width: 400px;
  15.             max-height: 300px;
  16.             border: 1px solid var(--site-borders);
  17.             box-shadow: var(--site-dropshadow);
  18.         }
  19.     }
  20.  
  21.     div.story-info {
  22.         display: inline-block;
  23.         padding: 3rem 3rem 3rem calc(3rem);
  24.         max-width: 100%;
  25.         div.story-header {
  26.             h1 {
  27.                 display: inline-block;
  28.                 font-weight: 700;
  29.                 color: whitesmoke;
  30.                 margin-bottom: 0;
  31.  
  32.                 a {
  33.                     color: whitesmoke;
  34.                     padding: 10px 5px 0 5px;
  35.  
  36.                     &:hover {
  37.                         background-color: var(--site-accent-hover);
  38.                     }
  39.                 }
  40.             }
  41.  
  42.             h2 {
  43.                 display: inline-block;
  44.                 margin: 0 0 0 1rem;
  45.                 font-size: 20px;
  46.                 font-style: italic;
  47.                 color: whitesmoke;
  48.  
  49.                 a {
  50.                     color: whitesmoke;
  51.                     padding: 5px 5px 2px 2px;
  52.  
  53.                     &:hover {
  54.                         background-color: var(--site-accent-hover);
  55.                     }
  56.                 }
  57.  
  58.                 span {
  59.                     margin: 0 0.5rem 0 0.5rem;
  60.                 }
  61.             }
  62.  
  63.             span.like-dislike {
  64.                 font-size: 20px;
  65.                 color: whitesmoke;
  66.                 float: right;
  67.  
  68.                 a.story-meta {
  69.                     color: whitesmoke;
  70.                     text-decoration: none;
  71.  
  72.                     &:hover {
  73.                         color: var(--site-accent-hover);
  74.                     }
  75.                 }
  76.             }
  77.  
  78.             div.category-genre {
  79.                 padding:5px 0 5px 5px;
  80.                 border-top: 1px solid whitesmoke;
  81.                 border-bottom: 1px solid whitesmoke;
  82.                 color: whitesmoke;
  83.  
  84.                 span {
  85.                     margin: 0 0.75rem 0 0.75rem;
  86.                 }
  87.             }
  88.         }
  89.  
  90.         div.story-info-body {
  91.             width: 90%;
  92.             margin: 0 auto 0 auto;
  93.             text-align: justify;
  94.             padding: 0 3rem 3rem 3rem;
  95.             color: whitesmoke;
  96.  
  97.             a {
  98.                 color: whitesmoke;
  99.                 text-decoration: underline;
  100.  
  101.                 &:hover {
  102.                     text-decoration: none;
  103.                 }
  104.             }
  105.         }
  106.         div.chapter-list {
  107.             width: 90%;
  108.             margin: 0 auto 0 auto;
  109.             color: whitesmoke;
  110.             box-shadow: var(--site-dropshadow);
  111.  
  112.             ul {
  113.                 list-style: none;
  114.                 border: 1px solid whitesmoke;
  115.  
  116.                 li {
  117.                     padding: 5px 5px 5px 8px;
  118.                     margin: 0;
  119.  
  120.                     span.chapter-name {
  121.                         a {
  122.                             color: whitesmoke;
  123.  
  124.                             &:hover {
  125.                                 text-decoration: underline;
  126.                             }
  127.                         }
  128.                     }
  129.                     span.chapter-stats {
  130.                         float: right;
  131.                         padding-right: 8px;
  132.                     }
  133.  
  134.                     &:nth-child(odd) {
  135.                         background-color: var(--site-accent-hover);
  136.                     }
  137.  
  138.                     &:nth-child(even) {
  139.                         background-color: var(--site-accent);
  140.                     }
  141.                 }
  142.             }
  143.         }
  144.         div.story-stats {
  145.             width: 90%;
  146.             margin: 0 auto 0 auto;
  147.             padding: 10px;
  148.             border-top: 1px solid whitesmoke;
  149.             text-align: right;
  150.             font-size: 14px;
  151.             color: whitesmoke;
  152.  
  153.             a.story-stat-button {
  154.                 color: whitesmoke;
  155.                 text-decoration: none;
  156.                 padding: 2px;
  157.  
  158.                 &:hover {
  159.                     background-color: var(--site-accent-hover);
  160.                 }
  161.             }
  162.  
  163.             span {
  164.                 margin: 0 0.5rem 0 0.5rem;
  165.             }
  166.         }
  167.     }
  168. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement