assets/sass/components/_tiles.scss

   1 ///
   2 /// Forty 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 /* Tiles */
   8
   9         .tiles {
  10                 @include vendor('display', 'flex');
  11                 @include vendor('flex-wrap', 'wrap');
  12                 border-top: 0 !important;
  13
  14                 & + * {
  15                         border-top: 0 !important;
  16                 }
  17
  18                 article {
  19                         @include vendor('align-items', 'center');
  20                         @include vendor('display', 'flex');
  21                         @include vendor('transition', (
  22                                 'transform 0.25s ease',
  23                                 'opacity 0.25s ease',
  24                                 'filter 1s ease',
  25                                 '-webkit-filter 1s ease'
  26                         ));
  27                         @include padding(4em, 4em);
  28                         background-position: center;
  29                         background-repeat: no-repeat;
  30                         background-size: cover;
  31                         cursor: default;
  32                         height: 40vh;
  33                         max-height: 40em;
  34                         min-height: 23em;
  35                         overflow: hidden;
  36                         position: relative;
  37                         width: 40%;
  38
  39                         .image {
  40                                 display: none;
  41                         }
  42
  43                         header {
  44                                 position: relative;
  45                                 z-index: 3;
  46                         }
  47
  48                         h3 {
  49                                 font-size: 1.75em;
  50
  51                                 a {
  52                                         &:hover {
  53                                                 color: inherit !important;
  54                                         }
  55                                 }
  56                         }
  57
  58                         .link.primary {
  59                                 border: 0;
  60                                 height: 100%;
  61                                 left: 0;
  62                                 position: absolute;
  63                                 top: 0;
  64                                 width: 100%;
  65                                 z-index: 4;
  66                         }
  67
  68                         &:before {
  69                                 @include vendor('transition', 'opacity 0.5s ease');
  70                                 bottom: 0;
  71                                 content: '';
  72                                 display: block;
  73                                 height: 100%;
  74                                 left: 0;
  75                                 opacity: 0.85;
  76                                 position: absolute;
  77                                 width: 100%;
  78                                 z-index: 2;
  79                         }
  80
  81                         &:after {
  82                                 background-color: transparentize(_palette(bg), 0.75);
  83                                 content: '';
  84                                 display: block;
  85                                 height: 100%;
  86                                 left: 0;
  87                                 position: absolute;
  88                                 top: 0;
  89                                 width: 100%;
  90                                 z-index: 1;
  91                         }
  92
  93                         &:hover {
  94                                 &:before {
  95                                         opacity: 0;
  96                                 }
  97                         }
  98
  99                         &.is-transitioning {
 100                                 @include vendor('transform', 'scale(0.95)');
 101                                 @include vendor('filter', 'blur(0.5em)');
 102                                 opacity: 0;
 103                         }
 104
 105                         &:nth-child(4n - 1),
 106                         &:nth-child(4n - 2) {
 107                                 width: 60%;
 108                         }
 109
 110                         &:nth-child(6n - 5) {
 111                                 &:before {
 112                                         background-color: _palette(accent1);
 113                                 }
 114                         }
 115
 116                         &:nth-child(6n - 4) {
 117                                 &:before {
 118                                         background-color: _palette(accent2);
 119                                 }
 120                         }
 121
 122                         &:nth-child(6n - 3) {
 123                                 &:before {
 124                                         background-color: _palette(accent3);
 125                                 }
 126                         }
 127
 128                         &:nth-child(6n - 2) {
 129                                 &:before {
 130                                         background-color: _palette(accent4);
 131                                 }
 132                         }
 133
 134                         &:nth-child(6n - 1) {
 135                                 &:before {
 136                                         background-color: _palette(accent5);
 137                                 }
 138                         }
 139
 140                         &:nth-child(6n) {
 141                                 &:before {
 142                                         background-color: _palette(accent6);
 143                                 }
 144                         }
 145                 }
 146
 147                 @include breakpoint('<=large') {
 148                         article {
 149                                 @include padding(4em, 3em);
 150                                 height: 30vh;
 151                                 max-height: 30em;
 152                                 min-height: 20em;
 153                         }
 154                 }
 155
 156                 @include breakpoint('<=medium') {
 157                         article {
 158                                 width: 50% !important;
 159                         }
 160                 }
 161
 162                 @include breakpoint('<=small') {
 163                         article {
 164                                 @include padding(3em, 1.5em);
 165                                 height: 16em;
 166                                 max-height: none;
 167                                 min-height: 0;
 168
 169                                 h3 {
 170                                         font-size: 1.5em;
 171                                 }
 172                         }
 173                 }
 174
 175                 @include breakpoint('<=xsmall') {
 176                         display: block;
 177
 178                         article {
 179                                 height: 20em;
 180                                 width: 100% !important;
 181                         }
 182                 }
 183         }