added gallery shortcodes. added formatting shortcodes. Minor works on styling.
[theme-danix.xyz.git] / assets / sass / main.scss
index 3ea3c2d..b66bb1c 100644 (file)
@@ -1,3 +1,83 @@
-body {
-       background-color: #303030;;
-}
\ No newline at end of file
+// HTML5UP
+@import 'libs/vars';
+@import 'libs/functions';
+@import 'libs/mixins';
+@import 'libs/my-mixins';
+@import 'libs/vendor';
+@import 'libs/breakpoints';
+@import 'libs/html-grid';
+// GOOGLE FONTS
+@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');
+
+// Breakpoints.
+
+       @include breakpoints((
+               xlarge:    (1281px,   1680px   ),
+               large:     (981px,    1280px   ),
+               medium:    (737px,    980px    ),
+               small:     (481px,    736px    ),
+               xsmall:    (361px,    480px    ),
+               xxsmall:   (null,     360px    )
+       ));
+
+// Mixins.
+
+       @mixin inner {
+               > .inner {
+                       @include padding(4em, 0);
+                       margin: 0 auto;
+                       max-width: _size(inner);
+                       width: calc(100% - 6em);
+
+                       @include breakpoint('<=small') {
+                               @include padding(3em, 0);
+                               width: calc(100% - 3em);
+                       }
+               }
+       }
+
+// Base.
+
+       @import 'base/reset';
+       @import 'base/page';
+       @import 'base/typography';
+
+// Component.
+
+       @import 'components/row';
+       @import 'components/section';
+       @import 'components/form';
+       @import 'components/box';
+       @import 'components/icon';
+       @import 'components/image';
+       @import 'components/list';
+       @import 'components/actions';
+       @import 'components/icons';
+       @import 'components/pagination';
+       @import 'components/breadcrumbs';
+       @import 'components/table';
+       @import 'components/button';
+       @import 'components/tiles';
+       @import 'components/contact-method';
+       @import 'components/spotlights';
+       @import 'components/search';
+       @import 'components/gallery';
+
+// Layout.
+
+       @import 'layout/header';
+       @import 'layout/banner';
+       @import 'layout/main';
+       @import 'layout/contact';
+       @import 'layout/footer';
+       @import 'layout/wrapper';
+       @import 'layout/menu';
+
+// darken images in dark mode
+@media screen and (prefers-color-scheme: dark) {
+       $image-filter: grayscale(50%);
+
+       img:not([src*='.svg']) {
+         filter: $image-filter;
+       }
+}