Split custom CSS into another file

iBug · Nov 12, 2019 · 0279ce4 · 0279ce4
1 parent f6b4926
commit 0279ce4
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 64 deletions.
diff --git a/_sass/_custom.scss b/_sass/_custom.scss
@@ -0,0 +1,58 @@
+@import "landing"; // Special layout for landing page
+//@import "masthead"; // Colored masthead
+
+blockquote {
+	font-style: normal;
+	font-family: $serif;
+}
+
+.card {
+	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+	margin: 0.2rem 0.2rem 0.4rem;
+}
+
+.page__content a:not(.btn):not(#goog-wm-sb):hover img.card {
+	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3), 0 6px 30px 0 rgba(0, 0, 0, 0.19);
+}
+
+html {
+	box-sizing: border-box;
+	font-size: 14px;
+	@include breakpoint($medium) { font-size: 16px; }
+	@include breakpoint($large) { font-size: 18px; }
+	@include breakpoint($x-large) { font-size: 20px; }
+}
+
+#main {
+	background: $background-color !important;
+	padding-bottom: 3em;
+	@include breakpoint($x-large) { max-width: 1440px; }
+}
+
+.page__content li p {
+  margin-bottom: 0;
+}
+
+div.page__hero--overlay {
+	text-align: center;
+	margin-bottom: 0;
+}
+
+a.site-logo > img, div.author__avatar:hover > img {
+	animation: spin-periodically 5000ms infinite ease-in-out;
+}
+
+section.page__content {
+	a {
+		word-break: break-word;
+	}
+}
+
+p img.block {
+	display: block;
+	margin-left: auto;
+}
+
+.page__footer {
+	margin-top: 0;
+}
diff --git a/_sass/landing.scss b/_sass/landing.scss
@@ -2,14 +2,12 @@ body.landing {
 	//background-color: #EEE;
 	//background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('/image/mm/splash.jpg');
 	div.masthead {
-		border-bottom: none;
-		background: none;
-
 		@media screen and (min-width: $large) {
 			background-image: url('/image/mm/splash.jpg');
 			background-attachment: fixed;
 			background-size: cover;
 			background-position: center;
+			border-bottom: none !important;
 
 			nav#site-nav {
 				background: transparent;

diff --git a/_sass/masthead.scss b/_sass/masthead.scss
@@ -0,0 +1,17 @@
+div.masthead {
+	border-bottom: none;
+  background: url("/image/header/thin/whimsical.png") center/cover no-repeat;
+	//background: #0078d4;
+
+	nav#site-nav {
+		background: transparent;
+	}
+
+	.greedy-nav a, .search__toggle {
+		color: white !important;
+	}
+
+	.greedy-nav .visible-links a:before {
+		background: white;
+	}
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -13,64 +13,4 @@ $x-large: 1440px;
 @import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
 @import "minimal-mistakes"; // main partials
 
-@import "landing"; // Special layout for landing page
-
-blockquote {
-	font-style: normal;
-	font-family: $serif;
-}
-
-.card {
-	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-	margin: 0.2rem 0.2rem 0.4rem;
-}
-
-.page__content a:not(.btn):not(#goog-wm-sb):hover img.card {
-	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3), 0 6px 30px 0 rgba(0, 0, 0, 0.19);
-}
-
-html {
-	box-sizing: border-box;
-	font-size: 14px;
-	@include breakpoint($medium) { font-size: 16px; }
-	@include breakpoint($large) { font-size: 18px; }
-	@include breakpoint($x-large) { font-size: 20px; }
-}
-
-#main {
-	@include breakpoint($x-large) { max-width: 1440px; }
-}
-
-.page__content li p {
-  margin-bottom: 0;
-}
-
-div.page__hero--overlay {
-	text-align: center;
-	margin-bottom: 0;
-}
-
-a.site-logo > img, div.author__avatar:hover > img {
-	animation: spin-periodically 5000ms infinite ease-in-out;
-}
-
-section.page__content {
-	a {
-		word-break: break-word;
-	}
-}
-
-p img.block {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-/********** Animations **********/
-
-@import "loading-animation";
-
-@keyframes spin-periodically {
-    80% { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-}
+@import "_custom"; // iBug's customization