diff --git a/README.md b/README.md index 693eb4a4..a51cfc93 100644 --- a/README.md +++ b/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 diff --git a/themes/dusk.css b/themes/dusk.css new file mode 100644 index 00000000..46c0c190 --- /dev/null +++ b/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; + } +}