assets/sass/main.scss

   1 @import 'libs/vars';
   2 @import 'libs/functions';
   3 @import 'libs/mixins';
   4 @import 'libs/my-mixins';
   5 @import 'libs/vendor';
   6 @import 'libs/breakpoints';
   7 @import 'libs/html-grid';
   8 // MY COLOR DEFINITIONS
   9 @import "colors";
  10 // GOOGLE FONTS
  11 @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');
  12
  13 // Breakpoints.
  14
  15         @include breakpoints((
  16                 xlarge:    (1281px,   1680px   ),
  17                 large:     (981px,    1280px   ),
  18                 medium:    (737px,    980px    ),
  19                 small:     (481px,    736px    ),
  20                 xsmall:    (361px,    480px    ),
  21                 xxsmall:   (null,     360px    )
  22         ));
  23
  24
  25 // Mixins.
  26
  27         @mixin inner {
  28                 > .inner {
  29                         @include padding(4em, 0);
  30                         margin: 0 auto;
  31                         max-width: _size(inner);
  32                         width: calc(100% - 6em);
  33
  34                         @include breakpoint('<=small') {
  35                                 @include padding(3em, 0);
  36                                 width: calc(100% - 3em);
  37                         }
  38                 }
  39         }
  40
  41 // Base.
  42
  43         @import 'base/reset';
  44         @import 'base/page';
  45         @import 'base/typography';
  46
  47 // Component.
  48
  49         @import 'components/row';
  50         @import 'components/section';
  51         @import 'components/form';
  52         @import 'components/box';
  53         @import 'components/icon';
  54         @import 'components/image';
  55         @import 'components/list';
  56         @import 'components/actions';
  57         @import 'components/icons';
  58         @import 'components/pagination';
  59         @import 'components/table';
  60         @import 'components/button';
  61         @import 'components/tiles';
  62         @import 'components/contact-method';
  63         @import 'components/spotlights';
  64
  65 // Layout.
  66
  67         @import 'layout/header';
  68         @import 'layout/banner';
  69         @import 'layout/main';
  70         @import 'layout/contact';
  71         @import 'layout/footer';
  72         @import 'layout/wrapper';
  73         @import 'layout/menu';