b8ef5fe0 |
1 | // HTML5UP |
748286b5 |
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'; |
c7bc4983 |
9 | // GOOGLE FONTS |
cc43b16d |
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 | |
748286b5 |
12 | // Breakpoints. |
c7bc4983 |
13 | |
748286b5 |
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 | )); |
2d3ca553 |
22 | |
748286b5 |
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); |
c7bc4983 |
35 | } |
36 | } |
0605a97a |
37 | } |
748286b5 |
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'; |
c2ea6701 |
57 | @import 'components/breadcrumbs'; |
748286b5 |
58 | @import 'components/table'; |
59 | @import 'components/button'; |
60 | @import 'components/tiles'; |
61 | @import 'components/contact-method'; |
62 | @import 'components/spotlights'; |
1f2ccd6e |
63 | @import 'components/search'; |
2b5a1947 |
64 | @import 'components/gallery'; |
748286b5 |
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'; |
d9849e6a |
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 | } |