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_light(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                                 @media screen and (prefers-color-scheme: dark) {
  92                                         background-color: transparentize(_palette_dark(bg), 0.75);
  93                                 }
  94                         }
  95
  96                         &:hover {
  97                                 &:before {
  98                                         opacity: 0;
  99                                 }
 100                         }
 101
 102                         &.is-transitioning {
 103                                 @include vendor('transform', 'scale(0.95)');
 104                                 @include vendor('filter', 'blur(0.5em)');
 105                                 opacity: 0;
 106                         }
 107
 108                         &:nth-child(4n - 1),
 109                         &:nth-child(4n - 2) {
 110                                 width: 60%;
 111                         }
 112
 113                         &:nth-child(6n - 5) {
 114                                 &:before {
 115                                         background-color: _palette_light(accent1);
 116                                         @media screen and (prefers-color-scheme: dark) {
 117                                                 background-color: _palette_dark(accent1);
 118                                         }
 119                                 }
 120                         }
 121
 122                         &:nth-child(6n - 4) {
 123                                 &:before {
 124                                         background-color: _palette_light(accent2);
 125                                         @media screen and (prefers-color-scheme: dark) {
 126                                                 background-color: _palette_dark(accent2);
 127                                         }
 128                                 }
 129                         }
 130
 131                         &:nth-child(6n - 3) {
 132                                 &:before {
 133                                         background-color: _palette_light(accent3);
 134                                         @media screen and (prefers-color-scheme: dark) {
 135                                                 background-color: _palette_dark(accent3);
 136                                         }
 137                                 }
 138                         }
 139
 140                         &:nth-child(6n - 2) {
 141                                 &:before {
 142                                         background-color: _palette_light(accent4);
 143                                         @media screen and (prefers-color-scheme: dark) {
 144                                                 background-color: _palette_dark(accent4);
 145                                         }
 146                                 }
 147                         }
 148
 149                         &:nth-child(6n - 1) {
 150                                 &:before {
 151                                         background-color: _palette_light(accent5);
 152                                         @media screen and (prefers-color-scheme: dark) {
 153                                                 background-color: _palette_dark(accent5);
 154                                         }
 155                                 }
 156                         }
 157
 158                         &:nth-child(6n) {
 159                                 &:before {
 160                                         background-color: _palette_light(accent6);
 161                                         @media screen and (prefers-color-scheme: dark) {
 162                                                 background-color: _palette_dark(accent6);
 163                                         }
 164                                 }
 165                         }
 166                 }
 167
 168                 @include breakpoint('<=large') {
 169                         article {
 170                                 @include padding(4em, 3em);
 171                                 height: 30vh;
 172                                 max-height: 30em;
 173                                 min-height: 20em;
 174                         }
 175                 }
 176
 177                 @include breakpoint('<=medium') {
 178                         article {
 179                                 width: 50% !important;
 180                         }
 181                 }
 182
 183                 @include breakpoint('<=small') {
 184                         article {
 185                                 @include padding(3em, 1.5em);
 186                                 height: 16em;
 187                                 max-height: none;
 188                                 min-height: 0;
 189
 190                                 h3 {
 191                                         font-size: 1.5em;
 192                                 }
 193                         }
 194                 }
 195
 196                 @include breakpoint('<=xsmall') {
 197                         display: block;
 198
 199                         article {
 200                                 height: 20em;
 201                                 width: 100% !important;
 202                         }
 203                 }
 204         }