assets/main/sass/layout/_main.scss

   1 ///
   2 /// Massively 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 /* Main */
   8
   9         #main {
  10                 background-color: _palette(bg);
  11                 position: relative;
  12                 margin: 0 auto;
  13                 width: calc(100% - #{_size(padding) * 2});
  14                 max-width: _size(wrapper);
  15                 z-index: 2;
  16
  17                 > * {
  18                         @include padding((_size(padding) * 2), (_size(padding) * 2));
  19                         border-top: solid 2px _palette(border);
  20                         margin: 0;
  21
  22                         &:first-child {
  23                                 border-top: 0;
  24                         }
  25                 }
  26
  27                 > footer {
  28                         text-align: center;
  29                 }
  30
  31                 > .post {
  32                         @include padding((_size(padding) * 4), (_size(padding) * 4));
  33
  34                         header {
  35                                 &.major {
  36                                         > .date {
  37                                                 margin-top: -2rem;
  38                                         }
  39
  40                                         > h1, h2 {
  41                                                 font-size: 4rem;
  42                                                 line-height: 1.1;
  43                                                 margin: 0 0 _size(element-margin) 0;
  44                                         }
  45                                 }
  46                         }
  47
  48                         &.featured {
  49                                 text-align: center;
  50                         }
  51
  52                         @include breakpoint('<=large') {
  53                                 @include padding((_size(padding) * 3), (_size(padding) * 2));
  54                         }
  55
  56                         @include breakpoint('<=small') {
  57                                 @include padding((_size(padding) * 2), (_size(padding) * 1));
  58
  59                                 header {
  60                                         &.major {
  61                                                 > .date {
  62                                                         margin-top: -1rem;
  63                                                         margin-bottom: _size(element-margin);
  64                                                 }
  65
  66                                                 > h1, h2 {
  67                                                         font-size: 2.5rem;
  68                                                         line-height: 1.2;
  69                                                         margin: 0 0 (_size(element-margin) * 0.75) 0;
  70                                                 }
  71                                         }
  72                                 }
  73                         }
  74                 }
  75
  76                 > .posts {
  77                         @include fixed-grid((
  78                                 columns:                        2,
  79                                 gutters:                        (_size(padding) * 4),
  80                                 horizontal-align:       center,
  81                                 vertical-align:         flex-start,
  82                                 flush:                          false
  83                         ));
  84                         width: 100%;
  85                         padding: 0;
  86
  87                         > article {
  88                                 border-color: _palette(border);
  89                                 border-left-width: 2px;
  90                                 border-style: solid;
  91                                 border-top-width: 2px;
  92                                 text-align: center;
  93
  94                                 > :last-child {
  95                                         margin-bottom: 0;
  96                                 }
  97
  98                                 &:nth-child(2n - 1) {
  99                                         border-left-width: 0;
 100                                 }
 101
 102                                 &:nth-child(-n + 2) {
 103                                         border-top-width: 0;
 104                                 }
 105                         }
 106
 107                         @include breakpoint('<=medium') {
 108                                 @include fixed-grid-resize((
 109                                         columns:                        2,
 110                                         gutters:                        (_size(padding) * 2.5),
 111                                         flush:                          false
 112                                 ));
 113                         }
 114
 115                         @include breakpoint('<=small') {
 116                                 @include fixed-grid-resize((
 117                                         columns:                        1,
 118                                         gutters:                        (_size(padding) * 2),
 119                                         prev-columns:           2,
 120                                         flush:                          false
 121                                 ));
 122
 123                                 > article {
 124                                         &:nth-child(2n - 1) {
 125                                                 border-left-width: 2px;
 126                                         }
 127
 128                                         &:nth-child(-n + 2) {
 129                                                 border-top-width: 2px;
 130                                         }
 131
 132                                         &:nth-child(n) {
 133                                                 border-left-width: 0;
 134                                         }
 135
 136                                         &:nth-child(-n + 1) {
 137                                                 border-top-width: 0;
 138                                         }
 139
 140                                         .image {
 141                                                 max-width: 25rem;
 142                                                 margin-left: auto;
 143                                                 margin-right: auto;
 144                                         }
 145                                 }
 146                         }
 147                 }
 148
 149                 @include breakpoint('<=small') {
 150                         > * {
 151                                 @include padding((_size(padding) * 1), (_size(padding) * 1));
 152                         }
 153                 }
 154
 155                 @include breakpoint('<=xsmall') {
 156                         width: 100%;
 157                 }
 158         }