assets/main/sass/components/_posts.scss

   1 ///
   2 /// Editorial by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Posts */
   8
   9         .posts {
  10                 $gutter: (_size(gutter) * 2);
  11
  12                 @include vendor('display', 'flex');
  13                 @include vendor('flex-wrap', 'wrap');
  14                 margin: 0 0 _size(element-margin) ($gutter * -1);
  15                 width: calc(100% + #{$gutter});
  16
  17                 article {
  18                         @include vendor('flex-grow', '0');
  19                         @include vendor('flex-shrink', '1');
  20                         margin: 0 0 $gutter $gutter;
  21                         position: relative;
  22                         width: calc(#{(100% / 3)} - #{$gutter});
  23
  24                         &:before {
  25                                 background: _palette(border);
  26                                 content: '';
  27                                 display: block;
  28                                 height: calc(100% + #{$gutter});
  29                                 left: ($gutter * -0.5);
  30                                 position: absolute;
  31                                 top: 0;
  32                                 width: 1px;
  33                         }
  34
  35                         &:after {
  36                                 background: _palette(border);
  37                                 bottom: ($gutter * -0.5);
  38                                 content: '';
  39                                 display: block;
  40                                 height: 1px;
  41                                 position: absolute;
  42                                 right: 0;
  43                                 width: calc(100% + #{$gutter});
  44                         }
  45
  46                         > :last-child {
  47                                 margin-bottom: 0;
  48                         }
  49
  50                         .image {
  51                                 display: block;
  52                                 margin: 0 0 _size(element-margin) 0;
  53
  54                                 img {
  55                                         display: block;
  56                                         width: 100%;
  57                                 }
  58                         }
  59                 }
  60
  61                 @include breakpoint('xlarge-to-max') {
  62                         article {
  63                                 &:nth-child(3n + 1) {
  64                                         &:before {
  65                                                 display: none;
  66                                         }
  67
  68                                         &:after {
  69                                                 width: 100%;
  70                                         }
  71                                 }
  72
  73                                 &:nth-last-child(1),
  74                                 &:nth-last-child(2),
  75                                 &:nth-last-child(3) {
  76                                         margin-bottom: 0;
  77
  78                                         &:before {
  79                                                 height: 100%;
  80                                         }
  81
  82                                         &:after {
  83                                                 display: none;
  84                                         }
  85                                 }
  86                         }
  87                 }
  88
  89                 @include breakpoint('<=xlarge') {
  90                         article {
  91                                 width: calc(50% - #{$gutter});
  92
  93                                 &:nth-last-child(3) {
  94                                         margin-bottom: $gutter;
  95                                 }
  96                         }
  97                 }
  98
  99                 @include breakpoint('small-to-xlarge') {
 100                         article {
 101                                 &:nth-child(2n + 1) {
 102                                         &:before {
 103                                                 display: none;
 104                                         }
 105
 106                                         &:after {
 107                                                 width: 100%;
 108                                         }
 109                                 }
 110
 111                                 &:nth-last-child(1),
 112                                 &:nth-last-child(2) {
 113                                         margin-bottom: 0;
 114
 115                                         &:before {
 116                                                 height: 100%;
 117                                         }
 118
 119                                         &:after {
 120                                                 display: none;
 121                                         }
 122                                 }
 123                         }
 124                 }
 125
 126                 @include breakpoint('<=small') {
 127                         $gutter: _size(gutter) * 1.5;
 128
 129                         margin: 0 0 _size(element-margin) ($gutter * -1);
 130                         width: calc(100% + #{$gutter});
 131
 132                         article {
 133                                 margin: 0 0 $gutter $gutter;
 134                                 width: calc(50% - #{$gutter});
 135
 136                                 &:before {
 137                                         height: calc(100% + #{$gutter});
 138                                         left: ($gutter * -0.5);
 139                                 }
 140
 141                                 &:after {
 142                                         bottom: ($gutter * -0.5);
 143                                         width: calc(100% + #{$gutter});
 144                                 }
 145
 146                                 &:nth-last-child(3) {
 147                                         margin-bottom: $gutter;
 148                                 }
 149                         }
 150                 }
 151
 152                 @include breakpoint('<=xsmall') {
 153                         $gutter: _size(gutter) * 1.5;
 154
 155                         margin: 0 0 _size(element-margin) 0;
 156                         width: 100%;
 157
 158                         article {
 159                                 margin: 0 0 $gutter 0;
 160                                 width: 100%;
 161
 162                                 &:before {
 163                                         display: none;
 164                                 }
 165
 166                                 &:after {
 167                                         width: 100%;
 168                                 }
 169
 170                                 &:last-child {
 171                                         margin-bottom: 0;
 172
 173                                         &:after {
 174                                                 display: none;
 175                                         }
 176                                 }
 177                         }
 178                 }
 179         }