Adding webfonts; improved styling; separation of noncritical CSS; too…

…ling improvements & minification
njmcode · Jul 6, 2016 · 1ae3d63 · 1ae3d63
1 parent a033b7c
commit 1ae3d63
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 105 deletions.
diff --git a/assets/fonts/4Mini.ttf.eot b/assets/fonts/4Mini.ttf.eot
diff --git a/assets/fonts/4Mini.ttf.svg b/assets/fonts/4Mini.ttf.svg
diff --git a/assets/fonts/4Mini.ttf.woff b/assets/fonts/4Mini.ttf.woff
diff --git a/dist/css/main.css b/dist/css/main.css
diff --git a/dist/css/noncrit.css b/dist/css/noncrit.css
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 <body>
 <div id="wrap">
 	<header>
-		<h1><span role="presentation">.:.</span> njmcode <span role="presentation">.:.</span></h1>
+		<h1><span role="presentation">.:.</span> <span class="sitename">njmcode</span> <span role="presentation">.:.</span></h1>
 		<div class="overview">
 			<p><strong>Neil McCallion</strong> - web developer, technical lead and platform evangelist.</p>
 			<p>Currently Head of Frontend Development at the mighty <a href="https://rehabstudio.com/" target="_blank">+rehabstudio</a>.</p>
@@ -39,7 +39,7 @@ <h2>Contact</h2>
 				<li><a href="https://twitter.com/njmcode" target="_blank">@njmcode on Twitter</a> </li>
 				<li><a href="https://codepen.io/njmcode" target="_blank">njmcode on CodePen</a></li>
 				<li><a href="https://github.com/njmcode" target="_blank">njmcode on GitHub</a></li>
-				<li>email: neil at rehabstudio dot com</li>
+				<li>neil at rehabstudio dot com</li>
 			</ul>
 		</section>
 		<section id="work">
@@ -118,6 +118,6 @@ <h2>Other info</h2>
 		<p>&copy;2016 njmcode.</p>
 	</footer>
 </div>
-
+<link rel="stylesheet" href="dist/css/noncrit.css">
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,8 +4,8 @@
   "description": "Simple folio one-pager",
   "main": "src/js/index.js",
   "scripts": {
-    "styles": "node-sass --include-path src/scss src/scss/main.scss dist/css/main.css",
-    "watch": "node-sass -w src/scss -o dist/css",
+    "styles": "node-sass src/scss --output=dist/css/ --output-style=compressed",
+    "watch": "npm run styles && node-sass src/scss --watch --output=dist/css/ --output-style=compressed",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss
@@ -0,0 +1,11 @@
+$font-path:'../../assets/fonts/';
+
+@font-face {
+    font-family: '4Mini';
+    src:url('#{$font-path}4Mini.ttf.woff') format('woff'),
+        url('#{$font-path}4Mini.ttf.svg#4Mini') format('svg'),
+        url('#{$font-path}4Mini.ttf.eot'),
+        url('#{$font-path}4Mini.ttf.eot?#iefix') format('embedded-opentype'); 
+    font-weight: normal;
+    font-style: normal;
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -1,5 +1,14 @@
 @import '_consts.scss';
 
+@mixin pixel-font {
+	font-family: '4Mini', monospace;
+}
+
+@mixin pixel-font-caps {
+	@include pixel-font;
+	text-transform: uppercase;
+}
+
 * {
 	box-sizing: border-box;
 }
@@ -24,17 +33,23 @@ small {
 }
 
 h1, h2 {
+	@include pixel-font;
 	color: $c-title;
 }
 
-h3, h4 {
+h1 .sitename {
+	text-shadow: 5px 5px 0 $c-bg;
+}
+
+h3 {
+	@include pixel-font-caps;
 	color: $c-heading;
 }
 
 h2 {
+	@include pixel-font-caps;
 	border-bottom: 3px solid $c-base;
 	text-shadow: 3px 3px 0 $c-base;
-	text-transform: uppercase;
 }
 
 ul {
@@ -78,10 +93,11 @@ nav {
 			margin: 0;
 
 			a {
+				@include pixel-font-caps;
 				display: block;
 				text-align: center;
-				text-transform: uppercase;
 				background-color: transparent;
+				text-shadow: 2px 2px 0 $c-text;
 				padding: 0.3em;
 
 				&:hover {

diff --git a/src/scss/noncrit.scss b/src/scss/noncrit.scss
@@ -0,0 +1,3 @@
+@import '_fonts.scss';
+
+// meh