Extract variables to separate file

RyanRoberts · Aug 17, 2017 · 8559f49 · 8559f49
1 parent b2e677d
commit 8559f49
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 24 deletions.
diff --git a/build/sitemap.css b/build/sitemap.css
@@ -52,8 +52,9 @@ body {
     /* Define colors */
     --link-color: #35331d;
     --line-color: #dcdddf;
-    --card-color: #4494ce;
     --card-bgcolor: #fff;
+    /* Initial Card color */
+    --card-color: #4494ce;
     /* Distance between the cards */
     --gutter-size: 24;
     /* Calculate other distances needed */
@@ -125,7 +126,6 @@ body {
           transform: translate(calc(var(--gutter) * var(--offset) - var(--halfGut)), var(--negativeGut));
   border: solid var(--line-color);
   border-width: 0 0 0 1px;
-  background: -webkit-linear-gradient(left, var(--line-color) 0, var(--line-color) 100%) left 60% no-repeat;
   background: linear-gradient(90deg, var(--line-color) 0, var(--line-color) 100%) left 60% no-repeat;
   background-size: 100% 1px;
   z-index: 0;
@@ -231,7 +231,6 @@ body {
   margin-top: 0;
 }
 .collection ul li:last-child a {
-  background: -webkit-repeating-linear-gradient(330deg, var(--card-bgcolor), var(--card-bgcolor) 10px, #eee 10px, #eee 14px);
   background: repeating-linear-gradient(120deg, var(--card-bgcolor), var(--card-bgcolor) 10px, #eee 10px, #eee 14px);
   background-clip: padding-box;
   border-right: 1px dashed var(--line-color);

diff --git a/config.codekit3 b/config.codekit3
@@ -7,7 +7,7 @@
 		"uuidString": "9D760F38-E9C4-4DD8-8560-BC65D3803522"
 		}
 	],
-"creatorBuild": "25813",
+"creatorBuild": "25849",
 "files": {
 	"\/.gitignore": {
 		"ft": 8192,
@@ -103,6 +103,23 @@
 		"sM": 1,
 		"sU": 0
 		},
+	"\/src\/invariably.less": {
+		"aP": 1,
+		"bl": 1,
+		"dJ": 0,
+		"ft": 1,
+		"ie": 1,
+		"iI": 0,
+		"ma": 0,
+		"oA": 1,
+		"oAP": "\/build\/invariably.css",
+		"oF": 0,
+		"oS": 0,
+		"rU": 0,
+		"sI": 0,
+		"sM": 1,
+		"sU": 0
+		},
 	"\/src\/sitemap.less": {
 		"aP": 1,
 		"bl": 1,
@@ -2084,6 +2101,7 @@
 			"fileExtension": "xslt"
 			}
 		],
+	"overrideExternalServerCSS": 0,
 	"previewPathAddition": "",
 	"skippedFoldersString": "log, _logs, logs, _cache, cache, \/storage\/framework\/sessions, node_modules",
 	"sourceFolderName": "src",

diff --git a/src/invariably.less b/src/invariably.less
@@ -0,0 +1,25 @@
+//
+// Everything variable goes in here
+//
+
+.sitenav {
+	/* Define colors */
+	--link-color:   #35331d;
+	--line-color:   #dcdddf;
+	--card-bgcolor: #fff;
+
+	/* Initial Card color */ 
+	--card-color:   #4494ce;
+
+	/* Distance between the cards */
+	--gutter-size:  24;
+
+	/* Calculate other distances needed */
+	--gutter:       calc(var(--gutter-size) * 1px);
+	--doubleGut:    calc(var(--gutter-size) * 2px);
+	--halfGut:      calc(var(--gutter-size) * 0.5px);
+	--negativeGut:  calc(var(--gutter-size) * -1px);
+
+	/* Initial offset */
+	--offset:       1;
+}
diff --git a/src/sitemap.less b/src/sitemap.less
@@ -6,32 +6,16 @@
 @import "infobox";
 @import "debug";
 
+
 body {
 	background: #f9fafc;
 	font-family: Helvetica, Arial, sans-serif;
 }
 
 @supports (display: grid) and (--css: variables) {
-	.sitenav {
-		/* Define colors */
-		--link-color: #35331d;
-		--line-color: #dcdddf;
-		--card-color: #4494ce;
-		--card-bgcolor: #fff;
-
-		/* Distance between the cards */
-		--gutter-size: 24;
-
-		/* Calculate other distances needed */
-		--gutter:      calc(var(--gutter-size) * 1px);
-		--doubleGut:   calc(var(--gutter-size) * 2px);
-		--halfGut:     calc(var(--gutter-size) * 0.5px);
-		--negativeGut: calc(var(--gutter-size) * -1px);
-
-		/* Initial offset */
-		--offset: 1;
-	}
 
+	@import "invariably";
+
 	.sitenav ul { list-style: none; padding: 0; margin: 0; }
 
 	// The "Home" card
@@ -162,7 +146,7 @@ body {
 
 .sitenav li ul { padding-top: var(--gutter); }
 
-.sitenav > ul ul ul li a           { margin-left: ~"calc(var(--gutter) * var(--offset))";}
+.sitenav > ul ul ul li a           { margin-left: calc(var(--gutter) * var(--offset));}
 
 .sitenav > ul ul ul ul li          { --offset: 2; }
 .sitenav > ul ul ul ul ul li       { --offset: 3; }