src/newslash_web/css/newslash/layout.less

   1 /* main page layout for newslash */
   2
   3 @sidebar-width: 300px;
   4
   5 .main-contents {
   6     margin: 0 @component-horizontal-margin;
   7     @media @mobile { margin: 0 @mobile-horizontal-margin; }
   8 }
   9
  10 .content-item {
  11     &:extend(.bordered-box);
  12 }
  13
  14 .sidebar {
  15     width: @sidebar-width;
  16     margin: 0 @component-horizontal-margin;
  17     @media @mobile {
  18         width: 100%;
  19         margin: 0 @mobile-horizontal-margin;
  20     }
  21 }
  22
  23 .sidebar-wrapper {
  24     display: flex;
  25     @media @mobile { display: block; }
  26
  27     .main-contents {
  28         flex: 1 1 auto;
  29         order: 0;
  30         @media @mobile { flex: none; }
  31     }
  32     .sidebar {
  33         flex: 0 0 auto;
  34         order: 1;
  35         @media @mobile { flex: none; }
  36     }
  37 }
  38
  39 /*
  40   Google's content match ads doesn't display properly in flex,
  41   so now use old-style margin layout
  42 */
  43 .article-wrapper {
  44     margin: 0 @component-horizontal-margin;
  45     @media @mobile { margin: 0 @mobile-horizontal-margin }
  46     .content-wrapper {
  47         float: left;
  48         width: 100%;
  49         margin-right: -(@sidebar-width + @component-horizontal-margin * 2);
  50         @media @mobile {
  51             float: none;
  52             margin-right: inherit;
  53         }
  54
  55         .main-contents {
  56             margin-right: (300px + @component-horizontal-margin * 3) ;
  57             paddding: 0;
  58             @media @mobile { margin-right: inherit; }
  59         }
  60     }
  61     .sidebar {
  62         float: left;
  63         @media @mobile { float: none; }
  64     }
  65     .related {
  66         @media @mobile { display: none; }
  67     }
  68 }
  69
  70 #comments {
  71     clear: both;
  72 }
  73
  74 .pager {
  75     &:extend(.bordered-box);
  76     &:extend(.small-text);
  77     display: flex;
  78     .prev {
  79         margin-right: 10px;
  80         text-align: left;
  81         flex: 1 1 auto;
  82         order: 0;
  83         a::before {
  84             content: '\226a';
  85         }
  86     }
  87     .next {
  88         margin-left: 10px;
  89         text-align: right;
  90         flex: 1 1 auto;
  91         order: 1;
  92         a::after {
  93             content: '\226b';
  94         }
  95     }
  96 }