diff --git a/assets/fonts/4Mini.ttf.eot b/assets/fonts/4Mini.ttf.eot new file mode 100644 index 0000000..9eb58a9 Binary files /dev/null and b/assets/fonts/4Mini.ttf.eot differ diff --git a/assets/fonts/4Mini.ttf.svg b/assets/fonts/4Mini.ttf.svg new file mode 100644 index 0000000..6fcb350 --- /dev/null +++ b/assets/fonts/4Mini.ttf.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/fonts/4Mini.ttf.woff b/assets/fonts/4Mini.ttf.woff new file mode 100644 index 0000000..1f83022 Binary files /dev/null and b/assets/fonts/4Mini.ttf.woff differ diff --git a/dist/css/main.css b/dist/css/main.css index fde6ae4..45089d4 100644 --- a/dist/css/main.css +++ b/dist/css/main.css @@ -1,97 +1 @@ -* { - box-sizing: border-box; } - -body { - background-color: #2a0349; - color: #f0f0fc; - font-family: monospace; - font-size: 1.1em; - line-height: 1.4; } - -a { - font-weight: bold; - color: #2a0349; - text-decoration: none; - transition: background-color 0.3s ease; } - -small { - color: #60199a; } - -h1, h2 { - color: #fcfcfc; } - -h3, h4 { - color: #caa7e6; } - -h2 { - border-bottom: 3px solid #60199a; - text-shadow: 3px 3px 0 #60199a; - text-transform: uppercase; } - -ul { - color: #60199a; - list-style-type: square; - padding-left: 1.5em; } - -li { - margin: 0.7em 0; - color: #f0f0fc; } - -header { - text-align: center; - padding: 1em; - background-color: #60199a; } - header strong { - color: #fcfcfc; } - header a { - color: #fcfcfc; } - -nav { - background-color: #b5ace7; - margin-bottom: 3em; } - nav h2 { - display: none; } - nav ul { - list-style-type: none; - display: flex; - flex-direction: row; - padding: 0; } - nav ul li { - flex: 1 1 100%; - margin: 0; } - nav ul li a { - display: block; - text-align: center; - text-transform: uppercase; - background-color: transparent; - padding: 0.3em; } - nav ul li a:hover { - background-color: #f0f0fc; } - -section { - padding-bottom: 1em; } - section a[href] { - background-color: #eb67c3; - padding: 1px 3px; } - section a[href]:hover { - background-color: #eba6d6; } - section a[name] { - display: none; } - -footer { - text-align: center; - color: #60199a; } - -.overview, nav ul, #main { - max-width: 800px; - min-width: 320px; - padding: 0 1em; - margin: 0 auto; } - -#to-top { - position: fixed; - bottom: 1em; - right: 1em; } - #to-top a { - background-color: #60199a; - padding: 1px 3px; } +*{box-sizing:border-box}body{background-color:#2a0349;color:#f0f0fc;font-family:monospace;font-size:1.1em;line-height:1.4}a{font-weight:bold;color:#2a0349;text-decoration:none;transition:background-color 0.3s ease}small{color:#60199a}h1,h2{font-family:'4Mini', monospace;color:#fcfcfc}h1 .sitename{text-shadow:5px 5px 0 #2a0349}h3{font-family:'4Mini', monospace;text-transform:uppercase;color:#caa7e6}h2{font-family:'4Mini', monospace;text-transform:uppercase;border-bottom:3px solid #60199a;text-shadow:3px 3px 0 #60199a}ul{color:#60199a;list-style-type:square;padding-left:1.5em}li{margin:0.7em 0;color:#f0f0fc}header{text-align:center;padding:1em;background-color:#60199a}header strong{color:#fcfcfc}header a{color:#fcfcfc}nav{background-color:#b5ace7;margin-bottom:3em}nav h2{display:none}nav ul{list-style-type:none;display:flex;flex-direction:row;padding:0}nav ul li{flex:1 1 100%;margin:0}nav ul li a{font-family:'4Mini', monospace;text-transform:uppercase;display:block;text-align:center;background-color:transparent;text-shadow:2px 2px 0 #f0f0fc;padding:0.3em}nav ul li a:hover{background-color:#f0f0fc}section{padding-bottom:1em}section a[href]{background-color:#eb67c3;padding:1px 3px}section a[href]:hover{background-color:#eba6d6}section a[name]{display:none}footer{text-align:center;color:#60199a}.overview,nav ul,#main{max-width:800px;min-width:320px;padding:0 1em;margin:0 auto}#to-top{position:fixed;bottom:1em;right:1em}#to-top a{background-color:#60199a;padding:1px 3px} diff --git a/dist/css/noncrit.css b/dist/css/noncrit.css new file mode 100644 index 0000000..16182d8 --- /dev/null +++ b/dist/css/noncrit.css @@ -0,0 +1 @@ +@font-face{font-family:'4Mini';src:url("../../assets/fonts/4Mini.ttf.woff") format("woff"),url("../../assets/fonts/4Mini.ttf.svg#4Mini") format("svg"),url("../../assets/fonts/4Mini.ttf.eot"),url("../../assets/fonts/4Mini.ttf.eot?#iefix") format("embedded-opentype");font-weight:normal;font-style:normal} diff --git a/index.html b/index.html index f91ee41..d9730a4 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@
-

.:. njmcode .:.

+

.:. njmcode .:.

Neil McCallion - web developer, technical lead and platform evangelist.

Currently Head of Frontend Development at the mighty +rehabstudio.

@@ -39,7 +39,7 @@

Contact

  • @njmcode on Twitter
  • njmcode on CodePen
  • njmcode on GitHub
    • -
  • email: neil at rehabstudio dot com
    • +
  • neil at rehabstudio dot com
    • @@ -118,6 +118,6 @@

    Other info

    ©2016 njmcode.

    - + \ No newline at end of file diff --git a/package.json b/package.json index 107a2a3..8ca5a98 100644 --- 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 new file mode 100644 index 0000000..ee46af2 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/scss/main.scss b/src/scss/main.scss index 7858e5d..8421164 100644 --- 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 new file mode 100644 index 0000000..38fa76b --- /dev/null +++ b/src/scss/noncrit.scss @@ -0,0 +1,3 @@ +@import '_fonts.scss'; + +// meh \ No newline at end of file