Add "Dusk" theme

README.md

@@ -174,6 +174,7 @@ Current available themes:
 * mitserrat - [preview](http://jsbin.com/xeqekutuwe/1) (by [@WouterJanson](https://github.com/WouterJanson))
 * material - [preview](http://ahaasler.github.io/mit-license-material-theme/) (by [@ahaasler](https://github.com/ahaasler)). *Available colours: blue gray (default), red, pink, purple, deep purple, indigo, blue, light blue, cyan, teal, green, light green, lime, yellow, amber, orange, deep orange, brown and grey. To use a specific colour, add it as a dash-separated suffix on the theme name, such as `material-deep-orange`.*
 * hmt-blue - [preview](https://jsbin.com/naqorar/) (by [@J2TeaM](https://github.com/J2TeaM))
+* dusk - [preview](https://output.jsbin.com/giqivoh) (by [@georapbox](https://github.com/georapbox))
 
 ## Formats & URLs
 

themes/dusk.css

@@ -0,0 +1,133 @@
+/* Dusk theme v1.0.0 by @georapbox */
+
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
+
+*::selection {
+  background: #de5833;
+  color: #eff7ff;
+}
+
+*::-moz-selection {
+  background: #de5833;
+  color: #eff7ff;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Open Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.1em;
+  background: #272b35;
+  color: #67778a;
+  margin: 86px 0;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+a:link, a:visited, a:hover {
+  position: relative;
+  text-decoration: none;
+  color: #de5833;
+  -webkit-transition: color 0.3s ease-in-out;
+  transition: color 0.3s ease-in-out;
+  -webkit-transform: scaleX(0);
+  transform: scaleX(0);
+}
+
+a:hover {
+  color: #eff7ff;
+}
+
+a:before {
+  content: " ";
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: #de5833;
+  visibility: hidden;
+  -webkit-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+a:hover:before {
+  visibility: visible;
+  -webkit-transform: scaleX(1);
+  transform: scaleX(1);
+}
+
+article {
+  display: block;
+  margin: 1.0em;
+  position: relative;
+  margin: 0 auto;
+}
+
+article h1 {
+  margin: 0;
+  padding: 60px 0.4em 0 0.4em;
+  color: #eff7ff;
+  font-size: 2.0em;
+  font-weight: 300;
+  text-align: center;
+  background: #1F222A;
+}
+
+article h1 + p {
+  max-width: 100%;
+  margin-top: 0;
+  padding-top: 0.1em;
+  padding-bottom: 60px;
+  font-size: 1.0em;
+  text-align: center;
+  background: #1F222A;
+}
+
+article h1 + p + p {
+  margin-top: 1.6em;
+}
+
+article p {
+  padding: 0 1.4em;
+  text-align: justify;
+  line-height: 1.5;
+  max-width: 960px;
+  margin: 1.0em auto;
+}
+
+article p:last-child {
+  padding-bottom: 1.8em;
+  font-size: 0.9em;
+}
+
+footer {
+  margin: 0 auto;
+  font-size: 0.8em;
+  text-align: center;
+}
+
+footer p {
+  padding: 0 1.4em;
+}
+
+#gravatar {
+  display: block;
+  position: absolute;
+  top: -43px;
+  left: 50%;
+  margin-left: -43px;
+  border-radius: 100%;
+  border: 3px solid #272b35;
+}
+
+@media (max-width: 750px) {
+  article h1 + p {
+    font-size: 0.8em;
+  }
+}