X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Fmain.scss;h=4f838e9964158c8d3d2a22e320cf41d3ba2f3ba6;hb=c2ea6701260eeb131887220ed5fe04831f22dd4e;hp=8a037a9be49a7025c7f12a04a8a666b9e98b9d24;hpb=92f65567cbc73296fcec0368ead5a635e2805a59;p=theme-danix.xyz.git

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 8a037a9..4f838e9 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,106 +1,73 @@
-// various imports for our styling
-
-// BOURBON 
-@import "bourbon/bourbon";
-// FONT-AWESOME v6.2.1
-@import "fa-v6/fontawesome";
-@import "fa-v6/brands";
-// MY COLOR DEFINITIONS
-@import "colors";
+// 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');
-html {
-	margin: 0;
-	padding: 0;
-	font-family: 'Montserrat', sans-serif;
-	color: $dark-grey;
-	a {
-		color: $dark-accent;
-		text-decoration: none;
-		&:visited {
-			color: $light-accent;
-		}
-		&:hover {
-			color: $dark-orange;
-		}
-	}
+@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');
 
-	body {
-		background-color: $base-bg;
-		margin: 0;
-		padding: 0;
+// Breakpoints.
 
-		div#page {
-			header#masthead,
-			footer#colophon {
-				color: $base-bg;
-				background-color: $dark-grey;
-				margin: 0;
-				padding: 1em;
-			}
-			header#masthead {
-				h1.site-title {
-					font-size: 5em;
-					font-weight: 200;
-					margin: 0;
-					padding: 0;
-					a {
-						color: $dark-orange;
-					}
-				}
-			}
-			footer#colophon {
-				div#social-menu {
-					ul.social-links {
-						margin: 0;
-						padding: 0;
-					}
-				}
-			}
-			div#content {
-				line-height: 1.5;
-				font-weight: 400;
-				padding: 1em 3em;
-				div#secondary {
-					div#home-social-links {
-						margin: 1em auto;
-						ul.social-links-list {
-							list-style: none;
-							li {
-								display: inline-block;
-								float: none;
-								font-size: 4em;
-								width: 2em;
-								text-align: center;
-								a {
-									color: $dark-orange;
-									&:hover {
-										color: shade($dark-orange, 40%);
-									}
-								}
-							}
-						}
-					}
-				}
+	@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);
 			}
 		}
 	}
-}
-.screen-reader-text,
-.hidden {
-	@include hide-visually;
-}
-pre {
-	margin: 1em;
-	padding: 0.7em;
-	max-width: 90vw;
-	background-color: $light-grey;
-	color: $light-orange;
-	font-size: 1.4em;
-	font-family: 'Red Hat Mono', monospace;
-}
-div#backtotop {
-	a {
-		color: $light-orange;
-	}
-}
\ No newline at end of file
+
+// 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';
+
+// Layout.
+
+	@import 'layout/header';
+	@import 'layout/banner';
+	@import 'layout/main';
+	@import 'layout/contact';
+	@import 'layout/footer';
+	@import 'layout/wrapper';
+	@import 'layout/menu';