< /div>
27 | );
28 | }
29 | });
30 |
31 | module.exports = Loader;
32 |
--------------------------------------------------------------------------------
/content/themes/blablabla/assets/scss/_helpers.scss:
--------------------------------------------------------------------------------
1 | %center {
2 | margin-right: auto;
3 | margin-left: auto;
4 | }
5 |
6 | %text-center {
7 | text-align:center;
8 | }
9 |
10 | %clearfix {
11 | &::before,
12 | &::after {
13 | content: "";
14 | display: table;
15 | }
16 | &::after {
17 | clear: both;
18 | }
19 | }
20 |
21 | .text-center{
22 | @extend %text-center;
23 | }
24 |
25 | @function rem-calc($size, $context: $base-root-size) {
26 | @return ($size / $base-root-size) + rem;
27 | }
28 |
29 | .videoWrapper {
30 | position: relative;
31 | padding-bottom: 56.25%; /* 16:9 */
32 | padding-top: 25px;
33 | height: 0;
34 | }
35 | .videoWrapper iframe {
36 | position: absolute;
37 | top: -20px;
38 | left: 0;
39 | width: 100%;
40 | height: 100%;
41 | }
42 |
--------------------------------------------------------------------------------
/client/client-routes.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var config = require('../shared/config');
4 |
5 | function getRoutes() {
6 | var routes = {
7 | home: {
8 | path: '/',
9 | method: 'get',
10 | page: 'home'
11 | },
12 | static: {
13 | path: '/:title/',
14 | method: 'get',
15 | page: 'static'
16 | },
17 | tag: {
18 | path: '/tag/:tag/',
19 | method: 'get',
20 | page: 'tag'
21 | },
22 | page: {
23 | path: '/page/:page/',
24 | method: 'get',
25 | page: 'page'
26 | }
27 | };
28 |
29 | if (config.permalinkStructure !== '/:title/') {
30 | routes.post = {
31 | path: config.permalinkStructure,
32 | method: 'get',
33 | page: 'post'
34 | };
35 | }
36 | return routes;
37 | }
38 |
39 | module.exports = getRoutes();
40 |
--------------------------------------------------------------------------------
/content/themes/blablabla/Tags.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var React = require('react');
4 | var Tag = require('./Tag');
5 | var clientUtils = require('../../../client/utils');
6 |
7 | var Tags = React.createClass({
8 | propTypes:{
9 | tags: React.PropTypes.array.isRequired,
10 | context: React.PropTypes.object.isRequired
11 | },
12 | render: function() {
13 | var tags = [];
14 | var pre = '';
15 | this.props.tags.forEach(function(tag, index){
16 | tags.push(
);
17 | }.bind(this));
18 | tags = clientUtils.intersperse(tags, ', ');
19 | if (this.props.tags.length > 0) {
20 | pre = on ;
21 | }
22 | return (
23 |
24 | {pre}
25 | {tags}
26 |
27 | );
28 | }
29 | });
30 |
31 | module.exports = Tags;
32 |
--------------------------------------------------------------------------------
/content/themes/blablabla/GoogleAnalytics.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var React = require('react');
4 | var added = false;
5 |
6 | var GoogleAnalytics = React.createClass({
7 | propTypes:{
8 | code: React.PropTypes.string.isRequired
9 | },
10 | componentDidMount: function() {
11 | if (!added){
12 | return this.addScript();
13 | }
14 | },
15 | addScript: function() {
16 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
17 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
18 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
19 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
20 |
21 | ga('create', this.props.code, 'auto'); // Replace with your property ID.
22 | },
23 | render: function() {
24 | return null;
25 | }
26 | });
27 |
28 | module.exports = GoogleAnalytics;
29 |
--------------------------------------------------------------------------------
/server/abstract-repository.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | function throwMethodUndefined(methodName) {
4 | throw new Error('The method ' + methodName + ' is not defined! Please overridde it.');
5 | }
6 |
7 | function AbstractRepository() {}
8 |
9 | AbstractRepository.prototype.find = function(options) { //jshint ignore:line
10 | throwMethodUndefined('find');
11 | };
12 |
13 | AbstractRepository.prototype.findOne = function(options) { //jshint ignore:line
14 | throwMethodUndefined('findOne');
15 | };
16 |
17 | AbstractRepository.prototype.findPage = function(options) { //jshint ignore:line
18 | throwMethodUndefined('findPage');
19 | };
20 |
21 | AbstractRepository.prototype.findTag = function(options) { //jshint ignore:line
22 | throwMethodUndefined('findTag');
23 | };
24 |
25 | AbstractRepository.prototype.getPostsForFeed = function(options) { //jshint ignore:line
26 | throwMethodUndefined('getPostsForFeed');
27 | };
28 |
29 | module.exports = AbstractRepository;
30 |
--------------------------------------------------------------------------------
/shared/stores/ContentStore.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var createStore = require('fluxible/utils/createStore');
4 |
5 | var ContentStore = createStore({
6 | storeName: 'ContentStore',
7 | handlers: {
8 | 'GET_CONTENT_SUCCESS': 'getContentSuccess',
9 | 'RESET_CONTENT': 'resetContent'
10 |
11 | },
12 | initialize: function(dispatcher) { //jshint ignore:line
13 | this.content = {};
14 | },
15 | resetContent: function(){
16 | this.initialize();
17 | this.emitChange();
18 | },
19 | getContentSuccess: function(content) {
20 | this.content = content;
21 | this.emitChange();
22 | },
23 | getAll: function() {
24 | return this.posts;
25 | },
26 | getState: function() {
27 | return {
28 | content: this.content
29 | };
30 | },
31 | dehydrate: function() {
32 | return this.getState();
33 | },
34 | rehydrate: function(state) {
35 | this.content = state.content;
36 | }
37 | });
38 |
39 | module.exports = ContentStore;
40 |
--------------------------------------------------------------------------------
/shared/stores/ContentListStore.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var createStore = require('fluxible/utils/createStore');
4 |
5 | var ContentListStore = createStore({
6 | storeName: 'ContentListStore',
7 | handlers: {
8 | 'GET_CONTENT_LIST_SUCCESS': 'getContentListSuccess',
9 | 'RESET_CONTENT_LIST': 'resetContentList'
10 |
11 | },
12 | initialize: function(dispatcher) { //jshint ignore:line
13 | this.contentList = null;
14 | },
15 | resetContentList: function(){
16 | this.initialize();
17 | this.emitChange();
18 | },
19 | getContentListSuccess: function(contentList) {
20 | this.contentList = contentList;
21 | this.emitChange();
22 | },
23 | getState: function() {
24 | return {
25 | contentList: this.contentList
26 | };
27 | },
28 | dehydrate: function() {
29 | return this.getState();
30 | },
31 | rehydrate: function(state) {
32 | this.contentList = state.contentList;
33 | }
34 | });
35 |
36 | module.exports = ContentListStore;
37 |
--------------------------------------------------------------------------------
/content/themes/blablabla/TagPage.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var React = require('react');
4 | var ContentListStore = require('../../../shared/stores/ContentListStore');
5 | var HeaderSingle = require('./HeaderSingle');
6 | var Footer = require('./Footer');
7 | var StoreMixin = require('fluxible').StoreMixin;
8 |
9 |
10 | var Single = React.createClass({
11 | mixins: [StoreMixin],
12 | statics: {
13 | storeListeners: {
14 | _onChange: [ContentListStore]
15 | }
16 | },
17 | propTypes:{
18 | tag: React.PropTypes.object.isRequired
19 | },
20 | _onChange: function() {
21 | this.setState({});
22 | },
23 | render: function() {
24 | return (
25 |
26 |
27 |
28 |
29 | this page has to be implemented
30 |
31 |
89 |
90 |
91 |
92 | Have fun :)
93 |
--------------------------------------------------------------------------------
/content/themes/blablabla/assets/scss/layouts/_author.scss:
--------------------------------------------------------------------------------
1 | .post-head.main-header {
2 | height: 65%;
3 | min-height: 180px;
4 | }
5 | .no-cover.post-head.main-header {
6 | height: 85px;
7 | min-height: 0;
8 | margin-bottom: 0;
9 | background: transparent;
10 | }
11 | .tag-head.main-header {
12 | height: 40%;
13 | min-height: 180px;
14 | }
15 | .author-head.main-header {
16 | height: 40%;
17 | min-height: 180px;
18 | }
19 | .no-cover.author-head.main-header {
20 | height: 10%;
21 | min-height: 100px;
22 | background: transparent;
23 | }
24 | .author-profile {
25 | padding: 0 15px 5rem;
26 | border-bottom: #ebf2f6 1px solid;
27 | text-align: center;
28 |
29 | }
30 | /* Add a little circle in the middle of the border-bottom */
31 | .author-profile:after {
32 | display: block;
33 | content: "";
34 | width: 7px;
35 | height: 7px;
36 | border: #e7eef2 1px solid;
37 | position: absolute;
38 | bottom: -5px;
39 | left: 50%;
40 | margin-left: -5px;
41 | background: #fff;
42 | -webkit-border-radius: 100%;
43 | -moz-border-radius: 100%;
44 | border-radius: 100%;
45 | box-shadow: #fff 0 0 0 5px;
46 | }
47 | .author-image {
48 | -webkit-box-sizing: border-box;
49 | -moz-box-sizing: border-box;
50 | box-sizing: border-box;
51 | display: block;
52 | position: absolute;
53 | top: -55px;
54 | left: 50%;
55 | margin-left: -40px;
56 | width: 80px;
57 | height: 80px;
58 | border-radius: 100%;
59 | overflow: hidden;
60 | padding: 6px;
61 | background: #fff;
62 | z-index: 2;
63 | box-shadow: #e7eef2 0 0 0 1px;
64 | }
65 | .author-image .img {
66 | position: relative;
67 | display: block;
68 | width: 100%;
69 | height: 100%;
70 | background-size: cover;
71 | background-position: center center;
72 | border-radius: 100%;
73 | }
74 | .author-profile .author-image {
75 | position: relative;
76 | left: auto;
77 | top: auto;
78 | width: 120px;
79 | height: 120px;
80 | padding: 3px;
81 | margin: -100px auto 0;
82 | box-shadow: none;
83 | }
84 | .author-title {
85 | margin: 1.5rem 0 1rem;
86 | }
87 | .author-bio {
88 | @include font-size(18);
89 | line-height: 1.5em;
90 | font-weight: 200;
91 | color: #50585d;
92 | letter-spacing: 0;
93 | text-indent: 0;
94 | }
95 | .author-meta {
96 | margin: 1.6rem 0;
97 |
98 | }
99 | /* Location, website, and link */
100 | .author-profile .author-meta {
101 | margin: 2rem 0;
102 | font-family: "Merriweather", serif;
103 | letter-spacing: 0.01rem;
104 | @include font-size(17);
105 | }
106 | .author-meta span {
107 | display: inline-block;
108 | margin: 0 2rem 1rem 0;
109 | word-wrap: break-word;
110 | }
111 | .author-meta a {
112 | text-decoration: none;
113 |
114 | }
115 | /* Turn off meta for page2+ to make room for extra
116 | pagination prev/next links */
117 | .archive-template .author-profile .author-meta {
118 | display: none;
119 |
120 | }
121 |
--------------------------------------------------------------------------------
/server/services/content.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var Promise = require('es6-promise').Promise; //jshint ignore:line
4 | var _s = require('underscore.string');
5 | var serverUtils = require('../../server/utils');
6 | var assign = require('object-assign');
7 | var path = require('path');
8 | var Promise = require('es6-promise').Promise; // jshint ignore:line
9 |
10 | function buildContent(item, siteUrl) {
11 | return new Promise(function(resolve, reject) {
12 | var tags = [];
13 | item.tags.forEach(function(tag) {
14 | tags.push({
15 | path: _s.slugify(tag),
16 | name: tag
17 | });
18 | });
19 | item.tags = tags;
20 | item.fullUrl = siteUrl + item.permalink;
21 | serverUtils.md2html(item.body).then(function(content){
22 | item.excerpt = serverUtils.excerpt(content);
23 | serverUtils.md2html(item.body).then(function(bodyContent){
24 | item.content = bodyContent;
25 | delete item.body;
26 | resolve(item);
27 | });
28 | }).catch(function(err){
29 | reject(err);
30 | });
31 | });
32 | }
33 |
34 | var actions = {
35 | single: function(repository, params, config, callback) {
36 | repository.findOne({
37 | slug: params.slug,
38 | siteUrl: config.siteUrl,
39 | contentPath: config.contentPath,
40 | permalinkStructure: config.permalinkStructure
41 | }).then(function(result) {
42 | buildContent(result.content, config.siteUrl).then(function(content){
43 | delete result.content;
44 | result.data = content;
45 | callback(null, result);
46 | }).catch(function(err){
47 | callback(err);
48 | });
49 | }).catch(function(err) {
50 | callback(err);
51 | });
52 | },
53 | list: function(repository, params, config, callback) {
54 | repository.find(assign(params, {
55 | postPerPage: config.postPerPage,
56 | contentPath: config.contentPath,
57 | permalinkStructure: config.permalinkStructure
58 | })).then(function(result) {
59 | var promiseArray = [];
60 | result.content.forEach(function(el) {
61 | promiseArray.push(buildContent(el, config.siteUrl));
62 | });
63 | Promise.all(promiseArray).then(function(data) {
64 | delete result.content;
65 | result.data = data;
66 | callback(null, result);
67 | }).catch(function(err){
68 | callback(err);
69 | });
70 | }).catch(function(err) {
71 | callback(err);
72 | });
73 | },
74 | tag: function(repository, params, config, callback) {
75 | repository.findTag({
76 | tag: params.tag
77 | }).then(function(data) {
78 | callback(null, data);
79 | }).catch(function(err) {
80 | callback(err);
81 | });
82 | }
83 | };
84 |
85 | var contentService = function(config) {
86 | var repositories = require(path.resolve(config.appRoot, 'server', config.repositoryStrategy.type))();
87 | return {
88 | name: 'content',
89 | read: function(req, resource, params, conf, callback) {
90 | actions[params.actionType](repositories.content, params || {}, config, callback);
91 | }
92 | };
93 | };
94 |
95 | module.exports = contentService;
96 |
--------------------------------------------------------------------------------
/content/themes/blablabla/assets/scss/modules/_highlight.scss:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Railscasts-like style (c) Visoft, Inc. (Damien White)
4 |
5 | */
6 |
7 | pre code {
8 | display: block;
9 | overflow-x: auto;
10 | padding: 0.5em;
11 | background: #232323;
12 | color: #e6e1dc;
13 | -webkit-text-size-adjust: none;
14 | }
15 |
16 | .hljs-comment,
17 | .hljs-template_comment,
18 | .hljs-javadoc,
19 | .hljs-shebang {
20 | color: #bc9458;
21 | font-style: italic;
22 | }
23 |
24 | .hljs-keyword,
25 | .ruby .hljs-function .hljs-keyword,
26 | .hljs-request,
27 | .hljs-status,
28 | .nginx .hljs-title,
29 | .method,
30 | .hljs-list .hljs-title {
31 | color: #c26230;
32 | }
33 |
34 | .hljs-string,
35 | .hljs-number,
36 | .hljs-regexp,
37 | .hljs-tag .hljs-value,
38 | .hljs-cdata,
39 | .hljs-filter .hljs-argument,
40 | .hljs-attr_selector,
41 | .apache .hljs-cbracket,
42 | .hljs-date,
43 | .tex .hljs-command,
44 | .asciidoc .hljs-link_label,
45 | .markdown .hljs-link_label {
46 | color: #a5c261;
47 | }
48 |
49 | .hljs-subst {
50 | color: #519f50;
51 | }
52 |
53 | .hljs-tag,
54 | .hljs-tag .hljs-keyword,
55 | .hljs-tag .hljs-title,
56 | .hljs-doctype,
57 | .hljs-sub .hljs-identifier,
58 | .hljs-pi,
59 | .input_number {
60 | color: #e8bf6a;
61 | }
62 |
63 | .hljs-identifier {
64 | color: #d0d0ff;
65 | }
66 |
67 | .hljs-class .hljs-title,
68 | .hljs-type,
69 | .smalltalk .hljs-class,
70 | .hljs-javadoctag,
71 | .hljs-yardoctag,
72 | .hljs-phpdoc,
73 | .hljs-dartdoc {
74 | text-decoration: none;
75 | }
76 |
77 | .hljs-constant {
78 | color: #da4939;
79 | }
80 |
81 |
82 | .hljs-symbol,
83 | .hljs-built_in,
84 | .ruby .hljs-symbol .hljs-string,
85 | .ruby .hljs-symbol .hljs-identifier,
86 | .asciidoc .hljs-link_url,
87 | .markdown .hljs-link_url,
88 | .hljs-attribute {
89 | color: #6d9cbe;
90 | }
91 |
92 | .asciidoc .hljs-link_url,
93 | .markdown .hljs-link_url {
94 | text-decoration: underline;
95 | }
96 |
97 |
98 |
99 | .hljs-params,
100 | .hljs-variable,
101 | .clojure .hljs-attribute {
102 | color: #d0d0ff;
103 | }
104 |
105 | .css .hljs-tag,
106 | .hljs-rules .hljs-property,
107 | .hljs-pseudo,
108 | .tex .hljs-special {
109 | color: #cda869;
110 | }
111 |
112 | .css .hljs-class {
113 | color: #9b703f;
114 | }
115 |
116 | .hljs-rules .hljs-keyword {
117 | color: #c5af75;
118 | }
119 |
120 | .hljs-rules .hljs-value {
121 | color: #cf6a4c;
122 | }
123 |
124 | .css .hljs-id {
125 | color: #8b98ab;
126 | }
127 |
128 | .hljs-annotation,
129 | .apache .hljs-sqbracket,
130 | .nginx .hljs-built_in {
131 | color: #9b859d;
132 | }
133 |
134 | .hljs-preprocessor,
135 | .hljs-preprocessor *,
136 | .hljs-pragma {
137 | color: #8996a8 !important;
138 | }
139 |
140 | .hljs-hexcolor,
141 | .css .hljs-value .hljs-number {
142 | color: #a5c261;
143 | }
144 |
145 | .hljs-title,
146 | .hljs-decorator,
147 | .css .hljs-function {
148 | color: #ffc66d;
149 | }
150 |
151 | .diff .hljs-header,
152 | .hljs-chunk {
153 | background-color: #2f33ab;
154 | color: #e6e1dc;
155 | display: inline-block;
156 | width: 100%;
157 | }
158 |
159 | .diff .hljs-change {
160 | background-color: #4a410d;
161 | color: #f8f8f8;
162 | display: inline-block;
163 | width: 100%;
164 | }
165 |
166 | .hljs-addition {
167 | background-color: #144212;
168 | color: #e6e1dc;
169 | display: inline-block;
170 | width: 100%;
171 | }
172 |
173 | .hljs-deletion {
174 | background-color: #600;
175 | color: #e6e1dc;
176 | display: inline-block;
177 | width: 100%;
178 | }
179 |
180 | .coffeescript .javascript,
181 | .javascript .xml,
182 | .tex .hljs-formula,
183 | .xml .javascript,
184 | .xml .vbscript,
185 | .xml .css,
186 | .xml .hljs-cdata {
187 | opacity: 0.7;
188 | }
189 |
--------------------------------------------------------------------------------
/content/themes/blablabla/App.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var React = require('react');
4 | var PostList = require('./PostList');
5 | var Single = require('./Single');
6 | var ErrorPage = require('./Error');
7 | var ApplicationStore = require('../../../shared/stores/ApplicationStore');
8 | var MetaStore = require('../../../shared/stores/MetaStore');
9 | var RouterMixin = require('flux-router-component').RouterMixin;
10 | var StoreMixin = require('fluxible').StoreMixin;
11 | var GoogleAnalytics = require('./GoogleAnalytics');
12 | var assign = require('object-assign');
13 |
14 | var App = React.createClass({
15 | mixins: [RouterMixin, StoreMixin],
16 | statics: {
17 | storeListeners: [ApplicationStore, MetaStore]
18 | },
19 | propTypes:{
20 | context:React.PropTypes.object.isRequired
21 | },
22 | getInitialState: function () {
23 | return assign(this.getStore(ApplicationStore).getState(), this.getStore(MetaStore).getState());
24 | },
25 | onChange: function () {
26 | this.setState(assign(this.getStore(ApplicationStore).getState(), this.getStore(MetaStore).getState()));
27 | },
28 | sendGoogleAnalytics: function() {
29 | if (this.state.globals.googleAnalytics) {
30 | //ga
31 | window.ga('send', 'pageview', window.location.pathname);
32 | }
33 | },
34 | highlightBlock: function() {
35 | //hljs
36 | var aCodes = document.getElementsByTagName('code');
37 | for (var i=0; i < aCodes.length; i+=1) {
38 | window.hljs.highlightBlock(aCodes[i]);
39 | }
40 | },
41 | componentDidMount: function() {
42 | this.highlightBlock();
43 | this.sendGoogleAnalytics();
44 | },
45 | componentDidUpdate: function(prevProps, prevState) {// jshint ignore:line
46 | var newState = this.state;
47 | if (document.title !== (newState.meta.title || newState.globals.siteTitle)) {
48 | document.title = this.state.meta.title || this.state.globals.siteTitle;
49 | window.scrollTo(0,0);
50 |
51 | //handle metas
52 | var metaTag = document.getElementsByTagName('meta');
53 | [].forEach.call(metaTag, function(meta){
54 | if (meta.getAttribute('name') === 'description') {
55 | meta.content = this.state.meta.description;
56 | }
57 | }.bind(this));
58 |
59 | this.highlightBlock();
60 | this.sendGoogleAnalytics();
61 | }
62 | },
63 | render: function(){
64 | var ga = this.state.globals.googleAnalytics ? : null;
65 |
66 | if (this.state.error) {
67 | return (
68 |
69 |
70 | {ga}
71 |
72 | );
73 | }
74 | if (this.state.route.name === 'home' || this.state.route.name === 'page') {
75 | return (
76 |
80 | );
81 | }
82 | if (this.state.route.name === 'post' || this.state.route.name === 'static') {
83 | return (
84 |
85 |
86 | {ga}
87 |
88 | );
89 | }
90 | /*
91 | if (this.state.route.name === 'tag') {
92 | return (
93 |
94 |
95 | {clicky}
96 |
97 | );
98 | }
99 | */
100 | return null;
101 | }
102 | });
103 |
104 | module.exports = App;
105 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var gulp = require('gulp');
4 | var $ = require('gulp-load-plugins')();
5 | var del = require('del');
6 | var runSequence = require('run-sequence');
7 | var argv = require('minimist')(process.argv.slice(2));
8 | var moment = require('moment');
9 | var webpack = require('webpack');
10 |
11 | process.env.NODE_ENV = argv.env || 'development';
12 | var configuration = require('./shared/config');
13 |
14 | var config = {
15 | draft: './content/drafts/welcome-to-morpheus.md',
16 | posts: './content/posts/',
17 | client: './client/client.js',
18 | mainScss: './content/themes/' + configuration.theme + '/assets/scss/main.scss',
19 | scss: './content/themes/' + configuration.theme + '/assets/scss/**/*.scss',
20 | bundle: 'bundle.js',
21 | dist: './content/themes/' + configuration.theme + '/assets/dist',
22 | clientFiles: ['./client/**', './shared/**', './content/**']
23 | };
24 |
25 | gulp.task('clean', function(cb) {
26 | del([config.dist], cb);
27 | });
28 |
29 | gulp.task('replace', function() {
30 | var manifestCss = require(config.dist + '/manifest-css.json');
31 | var manifestJs = require(config.dist + '/manifest-js.json');
32 | return gulp.src('./content/themes/' + configuration.theme + '/Html.js')
33 | .pipe($.replace(/bundle.*\.js/, manifestJs['bundle.js']))
34 | .pipe($.replace(/main.*\.css/, manifestCss['main.css']))
35 | .pipe(gulp.dest('./content/themes/' + configuration.theme));
36 | });
37 |
38 | gulp.task('replaceDev', function() {
39 | return gulp.src('./content/themes/' + configuration.theme + '/Html.js')
40 | .pipe($.replace(/bundle.*\.js/, 'bundle.js'))
41 | .pipe($.replace(/main.*\.css/, 'main.css'))
42 | .pipe(gulp.dest('./content/themes/' + configuration.theme));
43 | });
44 |
45 | gulp.task('styles', function() {
46 | return gulp.src(config.mainScss)
47 | .pipe($.changed(config.dist))
48 | .pipe($.rubySass({
49 | sourceMap: false
50 | }))
51 | .on('error', function(err) {
52 | $.util.log($.util.colors.red(err.message));
53 | })
54 | .pipe($.if(argv.env === 'production', $.cssmin()))
55 | .pipe($.if(argv.env === 'production', $.rev()))
56 | .pipe($.if(argv.env === 'production', $.rename(function(path) {
57 | path.basename += '.min';
58 | })))
59 | .pipe(gulp.dest(config.dist))
60 | .pipe($.if(argv.env === 'production', $.rev.manifest({
61 | path: 'manifest-css.json'
62 | })))
63 | .pipe($.if(argv.env === 'production', gulp.dest(config.dist)));
64 | });
65 |
66 | gulp.task('watchers', function() {
67 | gulp.watch(config.scss, ['styles']);
68 | gulp.watch(config.clientFiles, ['webpack']);
69 | });
70 |
71 | var task = webpack(require('./webpack.config.' + process.env.NODE_ENV));
72 | gulp.task('webpack', function(cb) {
73 | task.run(function(err, stats) {
74 | if (err) {
75 | throw new $.util.PluginError('webpack', err);
76 | }
77 | $.util.log('[webpack]', stats.toString({
78 | colors: true,
79 | hash: false,
80 | timings: false,
81 | assets: true,
82 | chunks: false,
83 | chunkModules: false,
84 | modules: false,
85 | children: true
86 | }));
87 | cb();
88 | });
89 | });
90 |
91 | gulp.task('server', function() {
92 | $.nodemon({
93 | script: 'server.js',
94 | ext: 'js',
95 | ignore: ['client/*', 'content/*'],
96 | })
97 | .on('restart', function() {
98 | $.util.log($.util.colors.red('restarted'));
99 | });
100 | });
101 |
102 | gulp.task('test', function() {
103 | return gulp.src(['test/*.js'], {
104 | read: false
105 | })
106 | .pipe($.mocha({
107 | reporter: 'spec'
108 | }))
109 | .on('error', $.util.log);
110 | });
111 |
112 | gulp.task('install', function() {
113 | gulp.src(config.draft)
114 | .pipe($.rename({
115 | prefix: moment().format('YYYY-MM-DD-HHmmss-')
116 | }))
117 | .pipe(gulp.dest(config.posts));
118 | $.util.log($.util.colors.green('you are ready to go, run gulp watch'));
119 | });
120 |
121 | gulp.task('build', ['clean'], function(cb) {
122 | runSequence('styles', 'webpack', 'replace', 'server', cb);
123 | });
124 |
125 | gulp.task('watch', ['clean'], function(cb) {
126 | runSequence('styles', 'webpack', 'replaceDev', 'server', 'watchers', cb);
127 | });
128 |
129 | gulp.task('default', function() {
130 | $.util.log($.util.colors.green('run gulp build || gulp watch'));
131 | });
132 |
--------------------------------------------------------------------------------
/content/themes/blablabla/assets/scss/_base.scss:
--------------------------------------------------------------------------------
1 | @import 'normalize';
2 |
3 | html {
4 | height: 100%;
5 | max-height: 100%;
6 | @include font-size($base-root-size);
7 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
8 | height: 100%;
9 | }
10 | body {
11 | height: 100%;
12 | max-height: 100%;
13 | font-family: "Merriweather", serif;
14 | letter-spacing: 0.01rem;
15 | @include font-size(18);
16 | line-height: 1.75em;
17 | color: #3a4145;
18 | -webkit-font-feature-settings: 'kern' 1;
19 | -moz-font-feature-settings: 'kern' 1;
20 | -o-font-feature-settings: 'kern' 1;
21 | height: 100%;
22 | }
23 | ::-moz-selection {
24 |
25 | background: #d6edff;
26 | }
27 | ::selection {
28 |
29 | background: #d6edff;
30 | }
31 | h1,
32 | h2,
33 | h3,
34 | h4,
35 | h5,
36 | h6 {
37 | -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
38 | -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
39 | -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
40 | color: $light-black;
41 | line-height: 1.15em;
42 | margin: 0 0 0.4em;
43 | font-family: "Open Sans", sans-serif;
44 | }
45 | h1 {
46 | @include font-size(50);
47 | letter-spacing: -2px;
48 | text-indent: -3px;
49 | }
50 | h2 {
51 | @include font-size(36);
52 | letter-spacing: -1px;
53 | }
54 | h3 {
55 | @include font-size(30);
56 | }
57 | h4 {
58 | @include font-size(25);
59 | }
60 | h5 {
61 | @include font-size(20);
62 | }
63 | h6 {
64 | @include font-size(20);
65 | }
66 | a {
67 | color: $blue;
68 | transition: color ease 0.3s;
69 | }
70 | a:hover {
71 | color: darken($blue,10);
72 | }
73 | p,
74 | ul,
75 | ol,
76 | dl {
77 | -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
78 | -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
79 | -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
80 | margin: 0 0 rem-calc(17.5);
81 | }
82 | ol,
83 | ul {
84 | padding-left: rem-calc(30)
85 | }
86 | ol ol,
87 | ul ul,
88 | ul ol,
89 | ol ul {
90 | margin: 0 0 rem-calc(4);
91 | padding-left: rem-calc(20);
92 | }
93 | dl dt {
94 | float: left;
95 | width: 180px;
96 | overflow: hidden;
97 | clear: left;
98 | text-align: right;
99 | text-overflow: ellipsis;
100 | white-space: nowrap;
101 | font-weight: 700;
102 | margin-bottom: 1em;
103 | }
104 | dl dd {
105 | margin-left: rem-calc(200);
106 | margin-bottom: rem-calc(10);
107 | }
108 | li {
109 | margin: rem-calc(4) 0;
110 | }
111 | li li {
112 | margin: 0;
113 | }
114 | hr {
115 | display: block;
116 | height: 1px;
117 | border: 0;
118 | border-top: #efefef 1px solid;
119 | margin: rem-calc(32) 0;
120 | padding: 0;
121 | }
122 | blockquote {
123 | box-sizing: border-box;
124 | margin: 1.75em 0px 1.75em -2.2em;
125 | padding: 0px 0px 0px 1.75em;
126 | border-left: 0.4em solid #4A4A4A;
127 | }
128 | blockquote p {
129 | margin: rem-calc(8) 0;
130 | font-style: italic;
131 | }
132 | blockquote small {
133 | display: inline-block;
134 | margin: 0.8em 0 0.8em 1.5em;
135 | @include font-size(9);
136 | color: #ccc;
137 | }
138 | blockquote small:before {
139 | content: "\2014 \00A0";
140 | }
141 | blockquote cite {
142 | font-weight: 700;
143 | }
144 | blockquote cite a {
145 | font-weight: normal;
146 | }
147 | mark {
148 | background-color: #ffc336;
149 | }
150 | code,
151 | tt {
152 | padding: 1px 3px;
153 | font-family: Inconsolata, monospace, sans-serif;
154 | @include font-size(16);
155 | white-space: pre-wrap;
156 | border: #e3edf3 1px solid;
157 | background: #f7fafb;
158 | border-radius: 2px;
159 | }
160 | pre {
161 | -moz-box-sizing: border-box;
162 | box-sizing: border-box;
163 | margin: 0 0 1.75em;
164 | border: #e3edf3 1px solid;
165 | width: 100%;
166 | font-family: Inconsolata, monospace, sans-serif;
167 | @include font-size(16);
168 | white-space: pre;
169 | overflow: auto;
170 | background: #f7fafb;
171 | border-radius: 3px;
172 | }
173 | pre code,
174 | tt {
175 | font-size: inherit;
176 | white-space: pre-wrap;
177 | background: transparent;
178 | border: none;
179 | padding: 0;
180 | }
181 | kbd {
182 | display: inline-block;
183 | margin-bottom: 0.4em;
184 | padding: 1px 8px;
185 | border: #ccc 1px solid;
186 | color: #666;
187 | text-shadow: #fff 0 1px 0;
188 | @include font-size(16);
189 | font-weight: 700;
190 | background: #f4f4f4;
191 | border-radius: 4px;
192 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #fff inset;
193 | }
194 | table {
195 | -moz-box-sizing: border-box;
196 | box-sizing: border-box;
197 | margin: 1.75em 0;
198 | width: 100%;
199 | max-width: 100%;
200 | background-color: transparent;
201 | }
202 | table th,
203 | table td {
204 | padding: 8px;
205 | line-height: 20px;
206 | text-align: left;
207 | vertical-align: top;
208 | border-top: #efefef 1px solid;
209 | }
210 | table th {
211 | color: #000;
212 | }
213 | table caption + thead tr:first-child th,
214 | table caption + thead tr:first-child td,
215 | table colgroup + thead tr:first-child th,
216 | table colgroup + thead tr:first-child td,
217 | table thead:first-child tr:first-child th,
218 | table thead:first-child tr:first-child td {
219 | border-top: 0;
220 | }
221 | table tbody + tbody {
222 | border-top: #efefef 2px solid;
223 | }
224 | table table table {
225 | background-color: #fff;
226 | }
227 | table tbody > tr:nth-child(odd) > td,
228 | table tbody > tr:nth-child(odd) > th {
229 | background-color: #f6f6f6;
230 | }
231 | table.plain tbody > tr:nth-child(odd) > td,
232 | table.plain tbody > tr:nth-child(odd) > th {
233 | background: transparent;
234 | }
235 | iframe,
236 | .fluid-width-video-wrapper {
237 | display: block;
238 | margin: 1.75em 0;
239 | }
240 |
241 | .tag-text {
242 | font-weight: bold;
243 | }
244 |
--------------------------------------------------------------------------------
/content/themes/blablabla/Single.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var React = require('react');
4 | var cx = require('react/lib/cx');
5 | var PostListElement = require('./PostListElement');
6 | var ContentActions = require('../../../shared/actions/ContentActions');
7 | var ContentStore = require('../../../shared/stores/ContentStore');
8 | var InitialStateMixin = require('../../../shared/mixins/InitialStateMixin');
9 | var Loader = require('./Loader');
10 | var HeaderSingle = require('./HeaderSingle');
11 | var Footer = require('./Footer');
12 | var Tags = require('./Tags');
13 | var StoreMixin = require('fluxible').StoreMixin;
14 | var gravatar = require('gravatar');
15 | var NavLink = require('flux-router-component').NavLink;
16 | var ApplicationStore = require('../../../shared/stores/ApplicationStore');
17 | var Disqus = require('./Disqus');
18 | var Gravatar = require('./Gravatar');
19 |
20 | var Single = React.createClass({
21 | mixins: [StoreMixin],
22 | statics: {
23 | storeListeners: {
24 | _onChange: [ContentStore]
25 | }
26 | },
27 | propTypes: {
28 | context: React.PropTypes.object.isRequired,
29 | params: React.PropTypes.object.isRequired
30 | },
31 | getInitialState: function() {
32 | return this.getStateFromStores();
33 | },
34 | getStateFromStores: function () {
35 | return {
36 | single: this.getStore(ContentStore).getState().content,
37 | cssClass: 'single'
38 | };
39 | },
40 | _onChange: function() {
41 | this.setState(this.getStateFromStores());
42 | },
43 | componentDidMount: function() {
44 | if(!this.state.single.title){
45 | this.props.context.executeAction(ContentActions.single, {
46 | slug: this.props.params.title
47 | });
48 | }
49 | },
50 | componentWillReceiveProps: function(props){
51 | if (props.page !== this.props.page) {
52 | this.props.context.executeAction(ContentActions.single, {
53 | slug: props.params.title
54 | });
55 | }
56 | },
57 | componentWillUnmount: function(){
58 | this.getStore(ContentStore).initialize();
59 | },
60 | render: function() {
61 | var showLoader = !this.state.single.title;
62 | var date = this.state.single.date;
63 | var style = {
64 | 'backgroundImage': 'url('+gravatar.url(this.state.single.email, {s:250}, true)+')'
65 | };
66 | var classesMap = {};
67 | classesMap.wrapper = true;
68 | classesMap[this.state.cssClass] = true;
69 | var classes = cx(classesMap);
70 | var footer = '';
71 | var header = '';
72 | var disqus = null;
73 | var siteGlobals = this.props.context.getStore(ApplicationStore).getState().globals;
74 | var authors = siteGlobals.authors;
75 | var authorMeta = authors[this.state.single.email] && authors[this.state.single.email].meta;
76 | var disqusComments = siteGlobals.disqusComments;
77 | if (this.state.single.type === 'post') {
78 | if (disqusComments) {
79 | disqus = ;
80 | }
81 | footer =
82 |
108 |
109 | header =
110 |
111 | {this.state.single.title}
112 |
113 |
114 | {this.state.single.author}
115 |
116 |
117 |
118 |
119 | }
120 | return (
121 |
122 |
123 |
124 |
125 |
126 |
127 | {header}
128 |
129 | {footer}
130 | {disqus}
131 |
132 |
133 |
4 | 
5 |
6 | [](http://travis-ci.org/vesparny/morpheus) [](https://david-dm.org/vesparny/morpheus#info=devDependencies "Dependency status") [](https://david-dm.org/vesparny/morpheus#info=dependencies "Dependency status")
7 |
8 | **The idea is to create a new isomorphic web publishing platform, with the speed of a single page application, but server side rendered on the first load.**
9 |
10 | **Built with [React](http://facebook.github.io/react/), [express](http://expressjs.com/) and [browserify](http://browserify.org/).**
11 |
12 | ### Working demo
13 |
14 | You can see **Morpheus** running on my own [website](http://alessandro.arnodo.net).
15 |
16 | ### Articles
17 |
18 | * [Introducing Morpheus](http://alessandro.arnodo.net/2015/01/07/introducing-morpheus)
19 |
20 | ### What and Why
21 |
22 | At the time being, developers are building entire applications in the browser using JavaScript. The big part of the logic is living on the client and it talks to the server to an API.
23 |
24 | Once the application is fully loaded, the user can gain a good experience navigating between pages without the need of fully reloading each time.
25 |
26 | This is good, what happens when your website is run by a crawler (google bot or whatever)? If the website can only be executed on the client it won't be able to serve HTML to crawlers, and this will have negative impacts on SEO.
27 |
28 | This is why Morpheus is totally rendered on the server on the first load. Once done, React will attach events to the DOM, and the user will feel the benefits of a single page application, without having to wait for tedious spinners before seeing the content.
29 |
30 |
31 | ### Getting started
32 |
33 | Morpheus doesn't need a database, it just renders static markdown files.
34 |
35 | * Choose a name for you website, for this example we will call it `my-website`. Replace it with your name in the following commands.
36 | * Create a directory for your blog and create a new git repo
37 |
38 | ```shell
39 | mkdir my-website && cd my-website
40 | git init
41 | ```
42 |
43 | * Checkout the `Morpheus` repository
44 |
45 | ```shell
46 | git remote add morpheus -m master https://github.com/vesparny/morpheus.git
47 | git pull -s recursive -X theirs morpheus master
48 | ```
49 |
50 | * Install the dependencies, create the example post and run the application
51 |
52 | ```shell
53 | npm install
54 | gulp install #this is important, it will create an example post.
55 | gulp watch
56 | ```
57 |
58 | * Access your fresh-new website at [http://localhost:3000](http://localhost:3000)
59 |
60 | * Create a new post or page inside the `content/posts` or `content/pages` folder, then commit changes.
61 | Please note that the filename structure must follow the convention `yyyy-mm-dd-HHmmss-post-title.md`
62 | Any page or post that contains a YAML front matter block will be processed by Morpheus as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines. Take a look at the example post and page for more details.
63 |
64 | If you have an existing repository
65 |
66 | * Add the Morpheus remote to your local repository, then merge its master branch with your local branch.
67 |
68 |
69 | ```shell
70 | git remote add morpheus https://github.com/vesparny/morpheus.git
71 | git fetch morpheus
72 | git checkout master
73 | git merge morpheus/master
74 | ```
75 |
76 | ### What’s done
77 |
78 | - [x] The basic technology stack (React express and browserify)
79 | - [x] Post and pages displaying, markdown render, posts pagination.
80 | - [x] Server side rendering.
81 | - [x] Comments managed with [Disqus](https://disqus.com/).
82 | - [x] Configurable permalinks.
83 | - [x] fully working default theme (it's called **blablabla**)
84 | - [x] RSS support
85 |
86 |
87 | ### What’s next
88 |
89 | Below is a list of the things to work on immediately, with links to the relevant discussion.
90 |
91 | - [ ] Logo design ([#3](https://github.com/vesparny/morpheus/issues/3))
92 | - [ ] Sitemap generation ([#5](https://github.com/vesparny/morpheus/issues/5))
93 | - [ ] Authors page ([#6](https://github.com/vesparny/morpheus/issues/6))
94 | - [ ] Tag listing page ([#7](https://github.com/vesparny/morpheus/issues/7))
95 | - [ ] Setup testing ([#8](https://github.com/vesparny/morpheus/issues/8))
96 | - [ ] Reserve some routes for future development ([#9](https://github.com/vesparny/morpheus/issues/9))
97 | - [ ] Split react components ([#10](https://github.com/vesparny/morpheus/issues/10))
98 | - [ ] Create wiki taking inspiration from [Jekyll](http://jekyllrb.com/docs/home/) ([#11](https://github.com/vesparny/morpheus/issues/11))
99 | - [ ] Create beautiful 404 and 500 pages and handle error also on the frontend ([#12](https://github.com/vesparny/morpheus/issues/12))
100 | - [ ] Split Morpheus in smaller npm packages ([#13](https://github.com/vesparny/morpheus/issues/13))
101 | - [ ] Publish to npm ([#14](https://github.com/vesparny/morpheus/issues/14))
102 |
103 |
104 | Please feel free to join the discussions ;)
105 |
106 |
107 |
108 | ### Run in production
109 |
110 | * build the app for production, commit your production ready build, and run it.
111 |
112 | ```shell
113 | gulp build --env=production
114 | git add -A
115 | git commit -m "ready"
116 | NODE_ENV=production node server.js
117 | ```
118 |
119 | ### Configuration
120 |
121 | You can also override configuration in the proper environment-specific configuration file inside the `config` folder.
122 | Below the production config file I use for hosting my website on OpenShift PaaS.
123 |
124 | ```javascript
125 | 'use strict';
126 |
127 | var path = require('path');
128 |
129 | module.exports = {
130 | log: {
131 | level: 'error',
132 | file: path.resolve(process.env.OPENSHIFT_DATA_DIR || '', 'log.log'),
133 | },
134 | debug: false,
135 | siteUrl: 'https://alessandro.arnodo.net',
136 | useSSL: true,
137 | port: process.env.OPENSHIFT_NODEJS_PORT || 3000,
138 | ip: process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1',
139 | disqusComments: 'arnodo',
140 | siteTitle: 'Alessandro Arnodo',
141 | siteDescription: '- Just another code monkey -',
142 | };
143 | ```
144 |
145 | ### Contributing
146 |
147 | PR and issues reporting are always welcome :) See more in CONTRIBUTING.md file.
148 |
149 | ### Contributors
150 |
151 | All this wouldn't have been possible without these great [contributors](https://github.com/vesparny/morpheus/graphs/contributors)! So THANK YOU!
152 |
153 | ### License
154 |
155 | Morpheus is open-source software released under the [MIT license](https://github.com/vesparny/morpheus/blob/master/LICENSE).
156 |
157 | ### Changelog
158 |
159 | See CHANGELOG.md file.
160 |
161 | ### Stability
162 |
163 | Currently Morpheus is in its very early stages, and it isn’t pretty. **It is far from usable.** Set it up only if you know what you’re doing, and expect it to break a lot.
164 |
--------------------------------------------------------------------------------
/server/file-system-repository-strategy/content-repository.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var AbstractRepository = require('../abstract-repository');
4 | var Promise = require('es6-promise').Promise; // jshint ignore:line
5 | var glob = require('glob');
6 | var path = require('path');
7 | var fs = require('fs');
8 | var fm = require('front-matter');
9 | var inherits = require('inherits');
10 | var errors = require('../errors');
11 | var moment = require('moment');
12 | var assign = require('object-assign');
13 |
14 | function buildContent(item, permalinkStructure) {
15 | var content = assign({}, item.attributes);
16 | content.permalink = '/' + content.slug + '/';
17 |
18 | //sanitize
19 | content.body = item.body || '';
20 | content.tags = content.tags ? content.tags.split(',') : [];
21 | if (content.type === 'post') {
22 | content.date = content.rawDate.format('DD MMMM YYYY');
23 | var availablePatterns = {
24 | year: 'YYYY',
25 | month: 'MM',
26 | day: 'DD'
27 | };
28 | var splitted = permalinkStructure.replace(/[\/]|[\/:]/g, ' ').split(' ');
29 | var pre = '';
30 | splitted.forEach(function(el) {
31 | if (availablePatterns[el]) {
32 | pre += content.rawDate.format(availablePatterns[el]) + '/';
33 | }
34 | });
35 | content.permalink = '/' + pre + item.attributes.slug + '/';
36 | }
37 | return content;
38 | }
39 |
40 | function readFile(file, permalinkStructure) {
41 | return new Promise(function(resolve, reject) {
42 | fs.readFile(file, {
43 | encoding: 'utf-8'
44 | }, function(err, data) {
45 | if (err) {
46 | reject(err);
47 | } else {
48 | var parsed = fm(data);
49 | var filename = path.basename(file);
50 | parsed.attributes.rawDate = moment(filename.substring(0, 17), 'YYYY-MM-DD-HHmmss');
51 | var content = buildContent(parsed, permalinkStructure);
52 | resolve(content);
53 | }
54 | });
55 | });
56 | }
57 |
58 |
59 | function ContentRepository() {
60 | AbstractRepository.call(this);
61 | this.name = 'content-repository';
62 | }
63 |
64 | inherits(ContentRepository, AbstractRepository);
65 |
66 | ContentRepository.prototype.find = function(options) {
67 | options = options || {};
68 | var response = {
69 | meta: {
70 | page: options.page,
71 | perPage: options.postPerPage,
72 | pageCount: 0,
73 | totalCount: 0
74 | },
75 | content: undefined
76 | };
77 | return new Promise(function(resolve, reject) {
78 | glob(path.resolve(options.contentPath, 'posts') + '/**/*.md', function(err, files) {
79 | if (err) {
80 | reject(new errors.InternalServer());
81 | }
82 | if (files.length === 0) {
83 | if (options.page === '1') {
84 | response.rawData = [];
85 | resolve(response);
86 | } else {
87 | reject(new errors.NotFound());
88 | }
89 | } else {
90 | response.meta.totalCount = files.length;
91 | response.meta.pageCount = Math.ceil(files.length / response.meta.perPage);
92 | files.sort(function(a, b) {
93 | var filenameA = path.basename(a);
94 | var filenameB = path.basename(b);
95 | var dateA = moment(filenameA.substring(0, 17), 'YYYY-MM-DD-HHmmss');
96 | var dateB = moment(filenameB.substring(0, 17), 'YYYY-MM-DD-HHmmss');
97 | return dateB.unix() - dateA.unix();
98 | });
99 | var sliced = files.slice((response.meta.page - 1) * response.meta.perPage, response.meta.page * response.meta.perPage);
100 | if (sliced.length === 0) {
101 | reject(new errors.NotFound());
102 | }
103 | var promiseArray = [];
104 | sliced.forEach(function(file) {
105 | promiseArray.push(readFile(file, options.permalinkStructure));
106 | });
107 |
108 | Promise.all(promiseArray).then(function(data) {
109 | response.content = data;
110 | resolve(response);
111 | }).catch(function(err) {
112 | reject(new errors.InternalServer(err.message));
113 | });
114 | }
115 |
116 | });
117 | });
118 | };
119 |
120 | ContentRepository.prototype.getPostsForFeed = function(options) {
121 | options = options || {};
122 | return new Promise(function(resolve, reject) {
123 | glob(path.resolve(options.contentPath, 'posts') + '/**/*.md', function(err, files) {
124 | if (err) {
125 | reject(new errors.InternalServer());
126 | }
127 | files.sort(function(a, b) {
128 | var filenameA = path.basename(a);
129 | var filenameB = path.basename(b);
130 | var dateA = moment(filenameA.substring(0, 17), 'YYYY-MM-DD-HHmmss');
131 | var dateB = moment(filenameB.substring(0, 17), 'YYYY-MM-DD-HHmmss');
132 | return dateB.unix() - dateA.unix();
133 | });
134 | var sliced = files.slice(0, 10);
135 | var promiseArray = [];
136 | sliced.forEach(function(file) {
137 | promiseArray.push(readFile(file, options.permalinkStructure));
138 | });
139 | Promise.all(promiseArray).then(function(data) {
140 | resolve(data);
141 | }).catch(function(err) {
142 | reject(new errors.InternalServer(err.message));
143 | });
144 | });
145 | });
146 | };
147 |
148 | ContentRepository.prototype.findOne = function(options) {
149 | options = options || {};
150 | var that = this;
151 | var response = {
152 | meta: {},
153 | content: undefined
154 | };
155 | return new Promise(function(resolve, reject) {
156 | glob(path.resolve(options.contentPath, 'posts') + '/*[0-9][0-9][0-9][0-9][0-9][0-9]-' + options.slug + '.md', function(err, files) {
157 | if (err) {
158 | reject(new errors.InternalServer());
159 | }
160 | if (files.length === 0) {
161 | that.findPage(options).then(function(data) {
162 | resolve(data);
163 | }).catch(function(err) {
164 | reject(err);
165 | });
166 | } else {
167 | readFile(files[0], options.permalinkStructure).then(function(data) {
168 | response.content = data;
169 | resolve(response);
170 | }).catch(function(err) {
171 | reject(new errors.InternalServer(err.message));
172 | });
173 | }
174 | });
175 | });
176 | };
177 |
178 | ContentRepository.prototype.findPage = function(options) {
179 | options = options || {};
180 | var response = {
181 | meta: {},
182 | content: undefined
183 | };
184 | return new Promise(function(resolve, reject) {
185 | glob(path.resolve(options.contentPath, 'pages') + '/' + options.slug + '.md', function(err, files) {
186 | if (err) {
187 | reject(new errors.InternalServer(err.message));
188 | }
189 | if (files.length === 0) {
190 | reject(new errors.NotFound());
191 | } else {
192 | readFile(files[0]).then(function(data) {
193 | response.content = data;
194 | resolve(response);
195 | }).catch(function(err) {
196 | reject(new errors.InternalServer(err.message));
197 | });
198 | }
199 | });
200 | });
201 | };
202 |
203 | ContentRepository.prototype.findTag = function(options) {
204 | var tag = options.tag;
205 | return Promise.resolve(tag);
206 | };
207 |
208 |
209 | module.exports = ContentRepository;
210 |
--------------------------------------------------------------------------------
/content/themes/blablabla/assets/scss/_media_queries.scss:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | 10. Media Queries - Smaller than 900px
3 | ========================================================================== */
4 | @media only screen and (max-width: 900px) {
5 | .main-nav {
6 | padding: 15px;
7 | }
8 | blockquote {
9 | margin-left: 0;
10 | }
11 | .main-header {
12 | -webkit-box-sizing: border-box;
13 | -moz-box-sizing: border-box;
14 | box-sizing: border-box;
15 | height: auto;
16 | min-height: 240px;
17 | height: 60%;
18 | padding: 15% 0;
19 | }
20 | .scroll-down,
21 | .home .main-header:after {
22 | display: none;
23 | }
24 | .archive-template .main-header {
25 | min-height: 180px;
26 | padding: 10% 0;
27 | }
28 | .blog-logo img {
29 | padding: 4px 0;
30 | }
31 | .page-title {
32 | @include font-size(40);
33 | letter-spacing: -1px;
34 | }
35 | .page-description {
36 | @include font-size(18);
37 | line-height: 1.5em;
38 | }
39 | .post {
40 | @include font-size(16);
41 | }
42 | :not(.single) .post-title {
43 | @include font-size(32);
44 | }
45 | hr {
46 | margin: 2.4em 0;
47 | }
48 | ol,
49 | ul {
50 | padding-left: 2em;
51 | }
52 | h1 {
53 | @include font-size(45);
54 | text-indent: -2px;
55 | }
56 | h2 {
57 | @include font-size(36);
58 | }
59 | h3 {
60 | @include font-size(31);
61 | }
62 | h4 {
63 | @include font-size(25);
64 | }
65 | h5 {
66 | @include font-size(22);
67 | }
68 | h6 {
69 | @include font-size(18);
70 | }
71 | .author-profile {
72 | padding-bottom: rem-calc(40);
73 | }
74 | .author-profile .author-bio {
75 | @include font-size(16);
76 | }
77 | .author-meta span {
78 | display: block;
79 | margin: rem-calc(15) 0;
80 | }
81 | .author-profile .author-meta span {
82 | @include font-size(16);
83 | }
84 | .post-head.main-header {
85 | height: 45%;
86 | }
87 | .tag-head.main-header,
88 | .author-head.main-header {
89 | height: 30%;
90 | }
91 | .no-cover.post-head.main-header {
92 | height: 55px;
93 | padding: 0;
94 | }
95 | .no-cover.author-head.main-header {
96 | padding: 0;
97 | }
98 |
99 | }
100 | /* ==========================================================================
101 | 11. Media Queries - Smaller than 500px
102 | ========================================================================== */
103 | @media only screen and (max-width: 500px) {
104 | .main-header {
105 | margin-bottom: 15px;
106 | height: 40%;
107 | }
108 | .no-cover.main-header {
109 | height: 30%;
110 | }
111 | .archive-template .main-header {
112 | max-height: 20%;
113 | min-height: 160px;
114 | padding: 10% 0;
115 | }
116 | .main-nav {
117 | padding: 0;
118 | margin-bottom: rem-calc(20);
119 | border-bottom: #e0e4e7 1px solid;
120 | }
121 | .blog-logo {
122 | display: none;
123 | }
124 | .blog-logo img {
125 | height: 26px;
126 | }
127 | .menu-button {
128 | width: 100%;
129 | border-radius: 0;
130 | font-size: rem-calc(12);
131 | float: none;
132 | }
133 | .menu-button.fright {
134 | width: 100%;
135 | float: none;
136 | }
137 | .menu-button:hover {
138 | border-color: #ebeef0;
139 | color: #2e2e2e;
140 | background: #ebeef0;
141 | }
142 | .menu-button.back-button {
143 | padding: 0 15px 0 10px;
144 | }
145 | .menu-button.subscribe-button.inverted,
146 | .menu-button.menu-button.inverted {
147 | padding: 0 12px;
148 | }
149 | .main-nav.overlay a:hover {
150 | color: #fff;
151 | border-color: transparent;
152 | background: transparent;
153 | }
154 | .no-cover .main-nav.overlay {
155 | background: none;
156 | }
157 | .no-cover .main-nav.overlay .back-button,
158 | .no-cover .main-nav.overlay .subscribe-button,
159 | .no-cover .main-nav.overlay .menu-button {
160 | border: none;
161 | }
162 | .main-nav.overlay .back-button,
163 | .main-nav.overlay .subscribe-button,
164 | .main-nav.overlay .menu-button {
165 | border-color: transparent;
166 | }
167 | .blog-logo img {
168 | max-height: 80px;
169 | }
170 | .inner,
171 | .pagination {
172 | width: auto;
173 | margin: rem-calc(20) auto;
174 | }
175 | .post {
176 | width: auto;
177 | margin: rem-calc(20);
178 | padding-bottom: rem-calc(20);
179 | line-height: rem-calc(29);
180 | }
181 | .post-date {
182 | display: none;
183 | }
184 | .single .post-header {
185 | margin-bottom: rem-calc(20);
186 | }
187 | .single .post-date {
188 | display: inline-block;
189 | }
190 | hr {
191 | margin: rem-calc(17) 0;
192 | }
193 | p,
194 | ul,
195 | ol,
196 | dl {
197 | @include font-size(16);
198 | margin: 0 0 rem-calc(25);
199 | }
200 | .page-title {
201 | @include font-size(30);
202 | }
203 | .post-excerpt p {
204 | @include font-size(15);
205 | }
206 | .page-description {
207 | @include font-size(16);
208 | }
209 | h1,
210 | h2,
211 | h3,
212 | h4,
213 | h5,
214 | h6 {
215 | margin: 0 0 0.3em;
216 | }
217 | h1 {
218 | @include font-size(28);
219 | letter-spacing: -1px;
220 | }
221 | h2 {
222 | @include font-size(24);
223 | letter-spacing: 0;
224 | }
225 | h3 {
226 | @include font-size(21);
227 | }
228 | h4 {
229 | @include font-size(19);
230 | }
231 | h5 {
232 | @include font-size(18);
233 | }
234 | h6 {
235 | @include font-size(18);
236 | }
237 | body:not(.single) .post-title {
238 | @include font-size(25);
239 | }
240 | .single .post {
241 | padding-bottom: 0;
242 | margin-bottom: 0;
243 | }
244 | .single .site-footer {
245 | margin-top: 0;
246 | }
247 | .post-content img {
248 | padding: 0;
249 | }
250 | .post-content .full-img {
251 | width: calc(100% + 32px);
252 | /* expand with to image + margins */
253 | margin: 0 -16px;
254 | /* get rid of margins */
255 | min-width: 0;
256 | max-width: 112%;
257 | /* fallback when calc doesn't work */
258 | }
259 | .post-meta {
260 | @include font-size(13);
261 | margin-top: rem-calc(10);
262 | }
263 | .post-footer {
264 | padding: rem-calc(50) 0 rem-calc(30);
265 | text-align: center;
266 | }
267 | .post-footer .author {
268 | margin: 0 0 2rem;
269 | padding: 0 0 1.6rem;
270 | border-bottom: #ebf2f6 1px dashed;
271 | }
272 | .post-footer .share {
273 | position: static;
274 | width: auto;
275 | }
276 | .post-footer .share a {
277 | margin: rem-calc(14) rem-calc(8) 0;
278 | }
279 | .author-meta li {
280 | float: none;
281 | margin: 0;
282 | line-height: 1.75em;
283 | }
284 | .author-meta li:before {
285 | display: none;
286 | }
287 | .older-posts,
288 | .newer-posts {
289 | position: static;
290 | margin: 10px 0;
291 | }
292 | .page-number {
293 | display: block;
294 | }
295 | .site-footer {
296 | margin-top: rem-calc(30);
297 | }
298 | .author-profile {
299 | padding-bottom: rem-calc(20);
300 | }
301 | .post-head.main-header {
302 | height: 30%;
303 | }
304 | .tag-head.main-header,
305 | .author-head.main-header {
306 | height: 20%;
307 | }
308 | .author-profile .author-image {
309 | margin-top: -70px;
310 | }
311 | .author-profile .author-meta span {
312 | @include font-size(14);
313 | }
314 | .archive-template .main-header .page-description {
315 | display: none;
316 | }
317 |
318 | footer .theme {
319 | display: none;
320 | }
321 |
322 | footer .copyright, footer .poweredby {
323 | width: 100%;
324 | float: none;
325 | text-align: center;
326 | }
327 | }
328 |
--------------------------------------------------------------------------------
/content/themes/blablabla/assets/scss/layouts/_page.scss:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | height: 100%;
3 | }
4 | .container {
5 | min-height: 100%;
6 | /* equal to footer height */
7 | margin-bottom: -50px;
8 | }
9 | .container:after {
10 | content: "";
11 | display: block;
12 | }
13 | .footer,
14 | .container:after {
15 | height: 50px;
16 |
17 | }
18 |
19 | .page-title {
20 | margin: 10px 0;
21 | @include font-size(50);
22 | letter-spacing: -1px;
23 | font-weight: 700;
24 | font-family: "Open Sans", sans-serif;
25 | color: #fff;
26 | text-transform: uppercase;
27 | }
28 | .page-description {
29 | margin: 0;
30 | @include font-size(20);
31 | line-height: 1.5em;
32 | font-weight: 400;
33 | font-family: "Merriweather", serif;
34 | letter-spacing: 0.01rem;
35 | color: rgba(255,255,255,0.8);
36 | }
37 | .no-cover .page-title {
38 | color: rgba(0,0,0,0.8);
39 | }
40 | .no-cover .page-description {
41 | color: rgba(0,0,0,0.5);
42 | }
43 | .no-cover .main-nav.overlay .back-button,
44 | .no-cover .main-nav.overlay .subscribe-button,
45 | .no-cover .main-nav.overlay .menu-button {
46 | color: rgba(0,0,0,0.4);
47 | border-color: rgba(0,0,0,0.3);
48 |
49 | }
50 | /* Add subtle load-in animation for content on the home page */
51 | .home .page-title {
52 | -webkit-animation: fadeInDown 0.9s;
53 | animation: fadeInDown 0.9s;
54 | -webkit-animation-delay: 0.1s;
55 | animation-delay: 0.1s;
56 | }
57 | .home .page-description {
58 | -webkit-animation: fadeInDown 0.9s;
59 | animation: fadeInDown 0.9s;
60 | -webkit-animation-delay: 0.1s;
61 | animation-delay: 0.1s;
62 |
63 | }
64 | /* Every post, on every page, gets this style on its tag */
65 | .post {
66 | position: relative;
67 | width: 80%;
68 | max-width: 710px;
69 | margin: 4rem auto;
70 | padding-bottom: 4rem;
71 | border-bottom: #ebf2f6 1px solid;
72 | word-break: break-word;
73 | hyphens: auto;
74 |
75 | }
76 | /* Add a little circle in the middle of the border-bottom on our .post
77 | just for the lolz and stylepoints. */
78 | .post:after {
79 | display: block;
80 | content: "";
81 | width: 7px;
82 | height: 7px;
83 | border: #e7eef2 1px solid;
84 | position: absolute;
85 | bottom: -5px;
86 | left: 50%;
87 | margin-left: -5px;
88 | background: #fff;
89 | -webkit-border-radius: 100%;
90 | -moz-border-radius: 100%;
91 | border-radius: 100%;
92 | box-shadow: #fff 0 0 0 5px;
93 | }
94 | .post-title {
95 | @include font-size(36);
96 | }
97 | .single {
98 | .post-title{
99 | @include font-size(50);
100 | }
101 | }
102 | .post-title a {
103 | text-decoration: none;
104 | }
105 | .post-excerpt p {
106 | margin: 0;
107 | @include font-size(16);
108 | line-height: 1.7em;
109 | }
110 | .read-more {
111 | text-decoration: none;
112 | }
113 | .post-meta {
114 | display: block;
115 | margin: 1.75rem 0 0;
116 | font-family: "Open Sans", sans-serif;
117 | @include font-size(15);
118 | line-height: rem-calc(23);
119 | color: #9eabb3;
120 | }
121 | .author-thumb {
122 | width: 24px;
123 | height: 24px;
124 | float: left;
125 | margin-right: 9px;
126 | border-radius: 100%;
127 | }
128 | .post-meta a {
129 | text-decoration: none;
130 | }
131 | .user-meta {
132 | position: relative;
133 | padding: 0.3rem 40px 0 100px;
134 | min-height: 77px;
135 | }
136 | .post-date {
137 | display: inline-block;
138 | margin-left: 8px;
139 | padding-left: 12px;
140 | border-left: #d5dbde 1px solid;
141 | text-transform: uppercase;
142 | @include font-size(13);
143 | white-space: nowrap;
144 | }
145 | .user-image {
146 | position: absolute;
147 | top: 0;
148 | left: 0;
149 | }
150 | .user-name {
151 | display: block;
152 | font-weight: 700;
153 | }
154 | .user-bio {
155 | display: block;
156 | max-width: 440px;
157 | @include font-size(14);
158 | line-height: 1.5em;
159 | }
160 | .publish-meta {
161 | position: absolute;
162 | top: 0;
163 | right: 0;
164 | padding: 4.3rem 0 4rem;
165 | text-align: right;
166 | }
167 | .publish-heading {
168 | display: block;
169 | font-weight: 700;
170 | }
171 | .publish-date {
172 | display: block;
173 | @include font-size(14);
174 | line-height: 1.5em;
175 |
176 | }
177 |
178 | .single .post-header {
179 | margin-bottom: 3.4rem;
180 | }
181 | .single .post-title {
182 | margin-bottom: 0;
183 | }
184 | .single .post-meta {
185 | margin: 0;
186 | }
187 |
188 | /* Stop .full-img from creating horizontal scroll - slight hack due to
189 | imperfections with browser width % calculations and rounding */
190 | .single .content {
191 | overflow: hidden;
192 |
193 | }
194 | /* Tweak the .post wrapper style */
195 | .single .post {
196 | margin-top: 0;
197 | border-bottom: none;
198 | padding-bottom: 0;
199 |
200 | }
201 | /* Kill that stylish little circle that was on the border, too */
202 | .single .post:after {
203 | display: none;
204 |
205 | }
206 | /* Keep images centred and within the bounds of the post-width */
207 | .post-content img {
208 | display: block;
209 | max-width: 100%;
210 | height: auto;
211 | margin: 0 auto;
212 | padding: 0.6em 0;
213 |
214 | }
215 | /* Break out larger images to be wider than the main text column
216 | the class is applied with jQuery */
217 | .post-content .full-img {
218 | width: 126%;
219 | max-width: none;
220 | margin: 0 -13%;
221 |
222 | }
223 | /* The author credit area after the post */
224 | .post-footer {
225 | position: relative;
226 | margin: 6rem 0 0;
227 | padding: 6rem 0 0;
228 | border-top: #ebf2f6 1px solid;
229 | }
230 | .post-footer h4 {
231 | @include font-size(18);
232 | margin: 0;
233 | }
234 | .post-footer p {
235 | margin: 1rem 0;
236 | @include font-size(14);
237 | line-height: 1.75em;
238 |
239 | }
240 | /* list of author links - location / url */
241 | .author-meta {
242 | padding: 0;
243 | margin: 0;
244 | list-style: none;
245 | @include font-size(14);
246 | line-height: 1;
247 | font-style: italic;
248 | color: #9eabb3;
249 | }
250 | .author-meta a {
251 | color: #9eabb3;
252 | }
253 | .author-meta a:hover {
254 | color: #111;
255 |
256 | }
257 | /* Create some space to the right for the share links */
258 | .post-footer .author {
259 | margin-right: 180px;
260 | }
261 | .post-footer h4 a {
262 | text-decoration: none;
263 | }
264 | .post-footer h4 a:hover {
265 | text-decoration: underline;
266 |
267 | }
268 | /* Drop the share links in the space to the right.
269 | Doing it like this means it's easier for the author bio
270 | to be flexible at smaller screen sizes while the share
271 | links remain at a fixed width the whole time */
272 | .post-footer .share {
273 | position: absolute;
274 | top: 6rem;
275 | right: 0;
276 | width: 140px;
277 | }
278 | .post-footer .share a {
279 | @include font-size(22);
280 | display: inline-block;
281 | margin: 1rem 1.6rem 1.6rem 0;
282 | color: $gray;
283 | text-decoration: none;
284 | }
285 | .post-footer .share a:hover {
286 | color: $blue;
287 |
288 | }
289 | /* The subscribe icon on the footer */
290 | .subscribe {
291 | width: 28px;
292 | height: 28px;
293 | position: absolute;
294 | top: -14px;
295 | left: 50%;
296 | margin-left: -15px;
297 | border: #ebf2f6 1px solid;
298 | text-align: center;
299 | line-height: 2.4rem;
300 | border-radius: 50px;
301 | background: #fff;
302 | transition: box-shadow 0.5s;
303 |
304 | }
305 | /* The RSS icon, inserted via icon font */
306 | .subscribe:before {
307 | color: #d2dee3;
308 | @include font-size(10);
309 | position: absolute;
310 | top: 2px;
311 | left: 9px;
312 | font-weight: 700;
313 | transition: color 0.5s ease;
314 |
315 | }
316 | /* Add a box shadow to on hover */
317 | .subscribe:hover {
318 | box-shadow: rgba(0,0,0,0.05) 0 0 0 3px;
319 | transition: box-shadow 0.25s;
320 | }
321 | .subscribe:hover:before {
322 | color: #50585d;
323 |
324 | }
325 | /* CSS tooltip saying "Subscribe!" - initially hidden */
326 | .tooltip {
327 | opacity: 0;
328 | display: block;
329 | width: 53px;
330 | padding: 4px 8px 5px;
331 | position: absolute;
332 | top: -23px;
333 | left: -21px;
334 | color: rgba(255,255,255,0.9);
335 | @include font-size(11);
336 | line-height: 1em;
337 | text-align: center;
338 | background: #50585d;
339 | border-radius: 20px;
340 | box-shadow: 0 1px 4px rgba(0,0,0,0.1);
341 | transition: opacity 0.3s ease, top 0.3s ease;
342 |
343 | }
344 | /* The little chiclet arrow under the tooltip, pointing down */
345 | .tooltip:after {
346 | content: " ";
347 | border-width: 5px 5px 0 5px;
348 | border-style: solid;
349 | border-color: #50585d transparent;
350 | display: block;
351 | position: absolute;
352 | bottom: -4px;
353 | left: 50%;
354 | margin-left: -5px;
355 | z-index: 220;
356 | width: 0;
357 |
358 | }
359 | /* On hover, show the tooltip! */
360 | .subscribe:hover .tooltip {
361 | opacity: 1;
362 | top: -33px;
363 | }
364 |
365 | .loader {
366 | background: url("../img/loader.svg");
367 | height: 24px;
368 | width: 30px;
369 | background-size: 30px 24px;
370 | position: relative;
371 | top: 30%;
372 | margin: 0 auto;
373 | }
374 |
375 | .tags {
376 | display: inline-block;
377 | margin-left: 5px;
378 | }
379 |
380 | .no-posts {
381 | color: $gray;
382 | font-weight: bold;
383 | }
384 |
--------------------------------------------------------------------------------
/content/themes/blablabla/assets/scss/_normalize.scss:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
2 |
3 | /**
4 | * 1. Set default font family to sans-serif.
5 | * 2. Prevent iOS text size adjust after orientation change, without disabling
6 | * user zoom.
7 | */
8 |
9 | html {
10 | font-family: sans-serif; /* 1 */
11 | -ms-text-size-adjust: 100%; /* 2 */
12 | -webkit-text-size-adjust: 100%; /* 2 */
13 | }
14 |
15 | /**
16 | * Remove default margin.
17 | */
18 |
19 | body {
20 | margin: 0;
21 | }
22 |
23 | /* HTML5 display definitions
24 | ========================================================================== */
25 |
26 | /**
27 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11
29 | * and Firefox.
30 | * Correct `block` display not defined for `main` in IE 11.
31 | */
32 |
33 | article,
34 | aside,
35 | details,
36 | figcaption,
37 | figure,
38 | footer,
39 | header,
40 | hgroup,
41 | main,
42 | menu,
43 | nav,
44 | section,
45 | summary {
46 | display: block;
47 | }
48 |
49 | /**
50 | * 1. Correct `inline-block` display not defined in IE 8/9.
51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52 | */
53 |
54 | audio,
55 | canvas,
56 | progress,
57 | video {
58 | display: inline-block; /* 1 */
59 | vertical-align: baseline; /* 2 */
60 | }
61 |
62 | /**
63 | * Prevent modern browsers from displaying `audio` without controls.
64 | * Remove excess height in iOS 5 devices.
65 | */
66 |
67 | audio:not([controls]) {
68 | display: none;
69 | height: 0;
70 | }
71 |
72 | /**
73 | * Address `[hidden]` styling not present in IE 8/9/10.
74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
75 | */
76 |
77 | [hidden],
78 | template {
79 | display: none;
80 | }
81 |
82 | /* Links
83 | ========================================================================== */
84 |
85 | /**
86 | * Remove the gray background color from active links in IE 10.
87 | */
88 |
89 | a {
90 | background-color: transparent;
91 | }
92 |
93 | /**
94 | * Improve readability when focused and also mouse hovered in all browsers.
95 | */
96 |
97 | a:active,
98 | a:hover {
99 | outline: 0;
100 | }
101 |
102 | /* Text-level semantics
103 | ========================================================================== */
104 |
105 | /**
106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 | */
108 |
109 | abbr[title] {
110 | border-bottom: 1px dotted;
111 | }
112 |
113 | /**
114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 | */
116 |
117 | b,
118 | strong {
119 | font-weight: bold;
120 | }
121 |
122 | /**
123 | * Address styling not present in Safari and Chrome.
124 | */
125 |
126 | dfn {
127 | font-style: italic;
128 | }
129 |
130 | /**
131 | * Address variable `h1` font-size and margin within `section` and `article`
132 | * contexts in Firefox 4+, Safari, and Chrome.
133 | */
134 |
135 | h1 {
136 | font-size: 2em;
137 | margin: 0.67em 0;
138 | }
139 |
140 | /**
141 | * Address styling not present in IE 8/9.
142 | */
143 |
144 | mark {
145 | background: #ff0;
146 | color: #000;
147 | }
148 |
149 | /**
150 | * Address inconsistent and variable font size in all browsers.
151 | */
152 |
153 | small {
154 | font-size: 80%;
155 | }
156 |
157 | /**
158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 | */
160 |
161 | sub,
162 | sup {
163 | font-size: 75%;
164 | line-height: 0;
165 | position: relative;
166 | vertical-align: baseline;
167 | }
168 |
169 | sup {
170 | top: -0.5em;
171 | }
172 |
173 | sub {
174 | bottom: -0.25em;
175 | }
176 |
177 | /* Embedded content
178 | ========================================================================== */
179 |
180 | /**
181 | * Remove border when inside `a` element in IE 8/9/10.
182 | */
183 |
184 | img {
185 | border: 0;
186 | }
187 |
188 | /**
189 | * Correct overflow not hidden in IE 9/10/11.
190 | */
191 |
192 | svg:not(:root) {
193 | overflow: hidden;
194 | }
195 |
196 | /* Grouping content
197 | ========================================================================== */
198 |
199 | /**
200 | * Address margin not present in IE 8/9 and Safari.
201 | */
202 |
203 | figure {
204 | margin: 1em 40px;
205 | }
206 |
207 | /**
208 | * Address differences between Firefox and other browsers.
209 | */
210 |
211 | hr {
212 | -moz-box-sizing: content-box;
213 | box-sizing: content-box;
214 | height: 0;
215 | }
216 |
217 | /**
218 | * Contain overflow in all browsers.
219 | */
220 |
221 | pre {
222 | overflow: auto;
223 | }
224 |
225 | /**
226 | * Address odd `em`-unit font size rendering in all browsers.
227 | */
228 |
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 | font-family: monospace, monospace;
234 | font-size: 1em;
235 | }
236 |
237 | /* Forms
238 | ========================================================================== */
239 |
240 | /**
241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 | * styling of `select`, unless a `border` property is set.
243 | */
244 |
245 | /**
246 | * 1. Correct color not being inherited.
247 | * Known issue: affects color of disabled elements.
248 | * 2. Correct font properties not being inherited.
249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 | */
251 |
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 | color: inherit; /* 1 */
258 | font: inherit; /* 2 */
259 | margin: 0; /* 3 */
260 | }
261 |
262 | /**
263 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 | */
265 |
266 | button {
267 | overflow: visible;
268 | }
269 |
270 | /**
271 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 | * All other form control elements do not inherit `text-transform` values.
273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 | * Correct `select` style inheritance in Firefox.
275 | */
276 |
277 | button,
278 | select {
279 | text-transform: none;
280 | }
281 |
282 | /**
283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 | * and `video` controls.
285 | * 2. Correct inability to style clickable `input` types in iOS.
286 | * 3. Improve usability and consistency of cursor style between image-type
287 | * `input` and others.
288 | */
289 |
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 | -webkit-appearance: button; /* 2 */
295 | cursor: pointer; /* 3 */
296 | }
297 |
298 | /**
299 | * Re-set default cursor for disabled elements.
300 | */
301 |
302 | button[disabled],
303 | html input[disabled] {
304 | cursor: default;
305 | }
306 |
307 | /**
308 | * Remove inner padding and border in Firefox 4+.
309 | */
310 |
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 | border: 0;
314 | padding: 0;
315 | }
316 |
317 | /**
318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 | * the UA stylesheet.
320 | */
321 |
322 | input {
323 | line-height: normal;
324 | }
325 |
326 | /**
327 | * It's recommended that you don't attempt to style these elements.
328 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 | *
330 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 | * 2. Remove excess padding in IE 8/9/10.
332 | */
333 |
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 | box-sizing: border-box; /* 1 */
337 | padding: 0; /* 2 */
338 | }
339 |
340 | /**
341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 | * `font-size` values of the `input`, it causes the cursor style of the
343 | * decrement button to change from `default` to `text`.
344 | */
345 |
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 | height: auto;
349 | }
350 |
351 | /**
352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
354 | * (include `-moz` to future-proof).
355 | */
356 |
357 | input[type="search"] {
358 | -webkit-appearance: textfield; /* 1 */
359 | -moz-box-sizing: content-box;
360 | -webkit-box-sizing: content-box; /* 2 */
361 | box-sizing: content-box;
362 | }
363 |
364 | /**
365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
366 | * Safari (but not Chrome) clips the cancel button when the search input has
367 | * padding (and `textfield` appearance).
368 | */
369 |
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 | -webkit-appearance: none;
373 | }
374 |
375 | /**
376 | * Define consistent border, margin, and padding.
377 | */
378 |
379 | fieldset {
380 | border: 1px solid #c0c0c0;
381 | margin: 0 2px;
382 | padding: 0.35em 0.625em 0.75em;
383 | }
384 |
385 | /**
386 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
388 | */
389 |
390 | legend {
391 | border: 0; /* 1 */
392 | padding: 0; /* 2 */
393 | }
394 |
395 | /**
396 | * Remove default vertical scrollbar in IE 8/9/10/11.
397 | */
398 |
399 | textarea {
400 | overflow: auto;
401 | }
402 |
403 | /**
404 | * Don't inherit the `font-weight` (applied by a rule above).
405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
406 | */
407 |
408 | optgroup {
409 | font-weight: bold;
410 | }
411 |
412 | /* Tables
413 | ========================================================================== */
414 |
415 | /**
416 | * Remove most spacing between table cells.
417 | */
418 |
419 | table {
420 | border-collapse: collapse;
421 | border-spacing: 0;
422 | }
423 |
424 | td,
425 | th {
426 | padding: 0;
427 | }
428 |
--------------------------------------------------------------------------------
/branding/morpheus wide nobg.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/branding/morpheus center nobg.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/branding/morpheus center light.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/branding/morpheus wide dark.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------