assets/sass/main.scss

   1 // HTML5UP
   2 @import 'libs/vars';
   3 @import 'libs/functions';
   4 @import 'libs/mixins';
   5 @import 'libs/my-mixins';
   6 @import 'libs/vendor';
   7 @import 'libs/breakpoints';
   8 @import 'libs/html-grid';
   9 // GOOGLE FONTS
  10 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,400;1,600&family=Red+Hat+Mono&display=swap');
  11
  12 // Breakpoints.
  13
  14         @include breakpoints((
  15                 xlarge:    (1281px,   1680px   ),
  16                 large:     (981px,    1280px   ),
  17                 medium:    (737px,    980px    ),
  18                 small:     (481px,    736px    ),
  19                 xsmall:    (361px,    480px    ),
  20                 xxsmall:   (null,     360px    )
  21         ));
  22
  23 // Mixins.
  24
  25         @mixin inner {
  26                 > .inner {
  27                         @include padding(4em, 0);
  28                         margin: 0 auto;
  29                         max-width: _size(inner);
  30                         width: calc(100% - 6em);
  31
  32                         @include breakpoint('<=small') {
  33                                 @include padding(3em, 0);
  34                                 width: calc(100% - 3em);
  35                         }
  36                 }
  37         }
  38
  39 // Base.
  40
  41         @import 'base/reset';
  42         @import 'base/page';
  43         @import 'base/typography';
  44
  45 // Component.
  46
  47         @import 'components/row';
  48         @import 'components/section';
  49         @import 'components/form';
  50         @import 'components/box';
  51         @import 'components/icon';
  52         @import 'components/image';
  53         @import 'components/list';
  54         @import 'components/actions';
  55         @import 'components/icons';
  56         @import 'components/pagination';
  57         @import 'components/breadcrumbs';
  58         @import 'components/table';
  59         @import 'components/button';
  60         @import 'components/tiles';
  61         @import 'components/contact-method';
  62         @import 'components/spotlights';
  63         @import 'components/search';
  64         @import 'components/gallery';
  65
  66 // Layout.
  67
  68         @import 'layout/header';
  69         @import 'layout/banner';
  70         @import 'layout/main';
  71         @import 'layout/contact';
  72         @import 'layout/footer';
  73         @import 'layout/wrapper';
  74         @import 'layout/menu';
  75
  76 // darken images in dark mode
  77 @media screen and (prefers-color-scheme: dark) {
  78         $image-filter: grayscale(50%);
  79
  80         img:not([src*='.svg']) {
  81           filter: $image-filter;
  82         }
  83 }