src/newslash_web/css/newslash/article.less

   1 /* article related styles */
   2
   3 article {
   4     &:extend(.bordered-box);
   5
   6     header {
   7         margin-bottom: 10px;
   8         h1 {
   9             &:extend(.rectangle-header);
  10             &:extend(.large-text);
  11             img {
  12                 float: left;
  13                 padding-right: 6px;
  14                 margin-top: -5px;
  15             }
  16
  17             a { color: @foreground-color; }
  18             a:hover { color: @anchor-color-hover; }
  19             a:visited {color: inherit; }
  20             margin-bottom: 0;
  21         }
  22         .property {
  23             &:extend(.smaller-text);
  24             color: @color-weak;
  25             margin-left: 4px;
  26             margin-right: 4px;
  27         }
  28     }
  29
  30     .contents-text {
  31         margin-left: 10px;
  32         margin-right: 10px;
  33     }
  34
  35     footer {
  36         margin-left: 4px;
  37         margin-right: 4px;
  38
  39         .comment-counter {
  40             font-weight: bold;
  41             a { color: @foreground-color; }
  42             a:hover { color: inherit; }
  43             .counter {
  44                 &:extend(.largest-text);
  45                 font-weight: bold;
  46             }
  47         }
  48
  49         .link-to-story {
  50             text-align: center;
  51             margin-bottom: 6px;
  52             a { &:extend(.button); }
  53         }
  54
  55         .tag-bar {
  56             min-height: 1em;
  57             &:extend(.smaller-text);
  58             border-top: 1px solid @component-border-color;
  59             color: @color-weak;
  60
  61             /* .tags { &:extend(.flatten-list); } */
  62             .tags li { display: inline-block };
  63
  64         }
  65     }
  66 }
  67
  68 @media(max-width:480px) {
  69     article {
  70         header h1 img {
  71             display: none;
  72         }
  73         header .property .dept {
  74             display: block;
  75         }
  76     }
  77 }
  78