From 2788e64e3b0bbe5d1eff73b791849f3fcdbabcdb Mon Sep 17 00:00:00 2001 From: Ro Date: Mon, 21 Sep 2020 14:19:16 -0700 Subject: [PATCH] converted stylus files to sass, removed stylus dependencies --- .prettierignore | 2 +- brain/data/Utils.js | 2 + package-lock.json | 657 ++++++++++++++++-- package.json | 12 +- src/styles/dash.sass | 43 ++ src/styles/dash.styl | 81 --- src/styles/main/_calendar.sass | 242 +++++++ src/styles/main/_calendar.styl | 245 ------- src/styles/main/_colors.sass | 17 + src/styles/main/_colors.styl | 19 - ...-highlight.styl => _editor-highlight.sass} | 36 +- src/styles/main/_editor.sass | 95 +++ src/styles/main/_editor.styl | 95 --- src/styles/main/_error.sass | 22 + src/styles/main/_error.styl | 22 - src/styles/main/_forms.sass | 58 ++ src/styles/main/_forms.styl | 57 -- src/styles/main/_index.sass | 251 +++++++ src/styles/main/_index.styl | 255 ------- src/styles/main/_mixins.sass | 16 + src/styles/main/_mixins.styl | 11 - src/styles/main/_navigation.sass | 62 ++ src/styles/main/_navigation.styl | 62 -- src/styles/main/_normalize.sass | 197 ++++++ src/styles/main/_normalize.styl | 196 ------ src/styles/main/_posts.sass | 384 ++++++++++ src/styles/main/_posts.styl | 388 ----------- src/styles/main/_settings.sass | 176 +++++ src/styles/main/_settings.styl | 176 ----- src/styles/main/_structure.sass | 161 +++++ src/styles/main/_structure.styl | 164 ----- src/styles/main/_typography.sass | 18 + src/styles/main/_typography.styl | 119 ---- 33 files changed, 2366 insertions(+), 1975 deletions(-) create mode 100644 src/styles/dash.sass delete mode 100644 src/styles/dash.styl create mode 100644 src/styles/main/_calendar.sass delete mode 100644 src/styles/main/_calendar.styl create mode 100644 src/styles/main/_colors.sass delete mode 100644 src/styles/main/_colors.styl rename src/styles/main/{_editor-highlight.styl => _editor-highlight.sass} (63%) create mode 100644 src/styles/main/_editor.sass delete mode 100644 src/styles/main/_editor.styl create mode 100644 src/styles/main/_error.sass delete mode 100644 src/styles/main/_error.styl create mode 100644 src/styles/main/_forms.sass delete mode 100644 src/styles/main/_forms.styl create mode 100644 src/styles/main/_index.sass delete mode 100644 src/styles/main/_index.styl create mode 100644 src/styles/main/_mixins.sass delete mode 100644 src/styles/main/_mixins.styl create mode 100644 src/styles/main/_navigation.sass delete mode 100644 src/styles/main/_navigation.styl create mode 100644 src/styles/main/_normalize.sass delete mode 100644 src/styles/main/_normalize.styl create mode 100644 src/styles/main/_posts.sass delete mode 100644 src/styles/main/_posts.styl create mode 100644 src/styles/main/_settings.sass delete mode 100644 src/styles/main/_settings.styl create mode 100644 src/styles/main/_structure.sass delete mode 100644 src/styles/main/_structure.styl create mode 100644 src/styles/main/_typography.sass delete mode 100644 src/styles/main/_typography.styl diff --git a/.prettierignore b/.prettierignore index c673d93..d63847e 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,6 @@ .babelrc README.md *.pug -*.styl +*.sass *.json diff --git a/brain/data/Utils.js b/brain/data/Utils.js index f4d0d1f..071ab38 100644 --- a/brain/data/Utils.js +++ b/brain/data/Utils.js @@ -98,6 +98,7 @@ export default class Utils { render.publishArchive(archive); } reindexPages(pages) { + conosle.log('PAGES'); //let byDate = _.sortBy(pages, ['created']); } moveAssets() { @@ -128,6 +129,7 @@ export default class Utils { //console.log('Copy completed!'); } ); + //TODO: Add method to move new logo to public from theme upload }) .catch(() => { //console.log('ERROR', err); diff --git a/package-lock.json b/package-lock.json index e917b27..7733c1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1111,6 +1111,75 @@ } } }, + "@eslint/eslintrc": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.1.3.tgz", + "integrity": "sha512-4YVwPkANLeNtRjMekzux1ci8hIaH5eGKktGqR0d3LWsKNn5B2X/1Z6Trxy7jQXl9EBGE6Yj02O+t09FMeRllaA==", + "dev": true, + "requires": { + "ajv": "^6.12.4", + "debug": "^4.1.1", + "espree": "^7.3.0", + "globals": "^12.1.0", + "ignore": "^4.0.6", + "import-fresh": "^3.2.1", + "js-yaml": "^3.13.1", + "lodash": "^4.17.19", + "minimatch": "^3.0.4", + "strip-json-comments": "^3.1.1" + }, + "dependencies": { + "ajv": { + "version": "6.12.5", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.5.tgz", + "integrity": "sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "globals": { + "version": "12.4.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz", + "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==", + "dev": true, + "requires": { + "type-fest": "^0.8.1" + } + }, + "ignore": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", + "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", + "dev": true + }, + "import-fresh": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz", + "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==", + "dev": true, + "requires": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + } + }, + "resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true + }, + "strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true + } + } + }, "@iarna/toml": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz", @@ -1585,6 +1654,12 @@ } } }, + "acorn-jsx": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", + "dev": true + }, "acorn-walk": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.1.0.tgz", @@ -1890,6 +1965,12 @@ "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.11.6.tgz", "integrity": "sha512-nHiuV14upVGl7MWwFUYbzJ6YlfwWS084CU9EA8HajfYQjMSli5TQi3UTRygGF58LFWVkXxS1rbgRhROEqlQkXg==" }, + "astral-regex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz", + "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==", + "dev": true + }, "async": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz", @@ -3214,6 +3295,12 @@ "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=", "dev": true }, + "bulma": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.0.tgz", + "integrity": "sha512-rV75CJkubNUroAt0qCRkjznZLoaXq/ctfMXsMvKSL84UetbSyx5REl96e8GoQ04G4Tkw0XF3STECffTOQrbzOQ==", + "dev": true + }, "bulma.styl": { "version": "0.6.11", "resolved": "https://registry.npmjs.org/bulma.styl/-/bulma.styl-0.6.11.tgz", @@ -3971,18 +4058,6 @@ "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==", "dev": true }, - "css": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", - "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", - "dev": true, - "requires": { - "inherits": "^2.0.3", - "source-map": "^0.6.1", - "source-map-resolve": "^0.5.2", - "urix": "^0.1.0" - } - }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -4074,15 +4149,6 @@ } } }, - "css-parse": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz", - "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=", - "dev": true, - "requires": { - "css": "^2.0.0" - } - }, "css-select": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz", @@ -4817,6 +4883,274 @@ "source-map": "~0.6.1" } }, + "eslint": { + "version": "7.9.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.9.0.tgz", + "integrity": "sha512-V6QyhX21+uXp4T+3nrNfI3hQNBDa/P8ga7LoQOenwrlEFXrEnUEE+ok1dMtaS3b6rmLXhT1TkTIsG75HMLbknA==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "@eslint/eslintrc": "^0.1.3", + "ajv": "^6.10.0", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.0.1", + "doctrine": "^3.0.0", + "enquirer": "^2.3.5", + "eslint-scope": "^5.1.0", + "eslint-utils": "^2.1.0", + "eslint-visitor-keys": "^1.3.0", + "espree": "^7.3.0", + "esquery": "^1.2.0", + "esutils": "^2.0.2", + "file-entry-cache": "^5.0.1", + "functional-red-black-tree": "^1.0.1", + "glob-parent": "^5.0.0", + "globals": "^12.1.0", + "ignore": "^4.0.6", + "import-fresh": "^3.0.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "js-yaml": "^3.13.1", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash": "^4.17.19", + "minimatch": "^3.0.4", + "natural-compare": "^1.4.0", + "optionator": "^0.9.1", + "progress": "^2.0.0", + "regexpp": "^3.1.0", + "semver": "^7.2.1", + "strip-ansi": "^6.0.0", + "strip-json-comments": "^3.1.0", + "table": "^5.2.3", + "text-table": "^0.2.0", + "v8-compile-cache": "^2.0.3" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", + "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", + "dev": true + }, + "ansi-styles": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", + "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "dev": true, + "requires": { + "@types/color-name": "^1.1.1", + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", + "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "doctrine": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", + "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "dev": true, + "requires": { + "esutils": "^2.0.2" + } + }, + "eslint-utils": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz", + "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^1.1.0" + } + }, + "eslint-visitor-keys": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", + "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", + "dev": true + }, + "glob-parent": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", + "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", + "dev": true, + "requires": { + "is-glob": "^4.0.1" + } + }, + "globals": { + "version": "12.4.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz", + "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==", + "dev": true, + "requires": { + "type-fest": "^0.8.1" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "ignore": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", + "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", + "dev": true + }, + "import-fresh": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz", + "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==", + "dev": true, + "requires": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + } + }, + "levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "requires": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + } + }, + "optionator": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", + "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==", + "dev": true, + "requires": { + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0", + "word-wrap": "^1.2.3" + } + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true + }, + "prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true + }, + "resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true + }, + "semver": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", + "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", + "dev": true + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true + }, + "strip-ansi": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", + "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", + "dev": true, + "requires": { + "ansi-regex": "^5.0.0" + } + }, + "strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "requires": { + "prelude-ls": "^1.2.1" + } + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } + } + }, "eslint-import-resolver-node": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.3.tgz", @@ -4919,6 +5253,16 @@ "resolved": "https://registry.npmjs.org/eslint-plugin-standard/-/eslint-plugin-standard-4.0.1.tgz", "integrity": "sha512-v/KBnfyaOMPmZc/dmc6ozOdWqekGp7bBGq4jLAecEfPGmfKiWS4sA8sC0LqiV9w5qmXAtXVn4M3p1jSyhY85SQ==" }, + "eslint-scope": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", + "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", + "dev": true, + "requires": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + } + }, "eslint-utils": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.0.0.tgz", @@ -4937,11 +5281,70 @@ "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz", "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==" }, + "espree": { + "version": "7.3.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.0.tgz", + "integrity": "sha512-dksIWsvKCixn1yrEXO8UosNSxaDoSYpq9reEjZSbHLpT5hpaCAKTLBwq0RHtLrIr+c0ByiYzWT8KTMRzoRCNlw==", + "dev": true, + "requires": { + "acorn": "^7.4.0", + "acorn-jsx": "^5.2.0", + "eslint-visitor-keys": "^1.3.0" + }, + "dependencies": { + "acorn": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz", + "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==", + "dev": true + }, + "eslint-visitor-keys": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz", + "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==", + "dev": true + } + } + }, "esprima": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=" }, + "esquery": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz", + "integrity": "sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==", + "dev": true, + "requires": { + "estraverse": "^5.1.0" + }, + "dependencies": { + "estraverse": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz", + "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==", + "dev": true + } + } + }, + "esrecurse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", + "dev": true, + "requires": { + "estraverse": "^5.2.0" + }, + "dependencies": { + "estraverse": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz", + "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==", + "dev": true + } + } + }, "estraverse": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz", @@ -5312,6 +5715,15 @@ "resolved": "https://registry.npmjs.org/fclone/-/fclone-1.0.11.tgz", "integrity": "sha1-EOhdo4v+p/xZk0HClu4ddyZu5kA=" }, + "file-entry-cache": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz", + "integrity": "sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==", + "dev": true, + "requires": { + "flat-cache": "^2.0.1" + } + }, "file-js": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/file-js/-/file-js-0.3.0.tgz", @@ -5406,6 +5818,34 @@ "locate-path": "^2.0.0" } }, + "flat-cache": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz", + "integrity": "sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==", + "dev": true, + "requires": { + "flatted": "^2.0.0", + "rimraf": "2.6.3", + "write": "1.0.3" + }, + "dependencies": { + "rimraf": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", + "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + } + } + }, + "flatted": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz", + "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==", + "dev": true + }, "follow-redirects": { "version": "1.5.10", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", @@ -5548,6 +5988,12 @@ "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, + "functional-red-black-tree": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", + "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", + "dev": true + }, "gauge": { "version": "2.7.4", "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", @@ -6596,6 +7042,12 @@ "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" }, + "json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=", + "dev": true + }, "json-stringify-safe": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", @@ -7290,6 +7742,12 @@ "to-regex": "^3.0.1" } }, + "natural-compare": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", + "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", + "dev": true + }, "needle": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/needle/-/needle-2.5.0.tgz", @@ -8075,6 +8533,23 @@ } } }, + "parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "requires": { + "callsites": "^3.0.0" + }, + "dependencies": { + "callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true + } + } + }, "parse-asn1": { "version": "5.1.5", "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz", @@ -9128,6 +9603,12 @@ "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==" }, + "progress": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", + "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", + "dev": true + }, "promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", @@ -9864,6 +10345,15 @@ "xtend": "^4.0.1" } }, + "sass": { + "version": "1.26.11", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.11.tgz", + "integrity": "sha512-W1l/+vjGjIamsJ6OnTe0K37U2DBO/dgsv2Z4c89XQ8ZOO6l/VwkqwLSqoYzJeJs6CLuGSTRWc91GbQFL3lvrvw==", + "dev": true, + "requires": { + "chokidar": ">=2.0.0 <4.0.0" + } + }, "sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", @@ -10120,6 +10610,25 @@ "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", "dev": true }, + "slice-ansi": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz", + "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.0", + "astral-regex": "^1.0.0", + "is-fullwidth-code-point": "^2.0.0" + }, + "dependencies": { + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", + "dev": true + } + } + }, "smart-buffer": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.0.1.tgz", @@ -10590,45 +11099,6 @@ } } }, - "stylus": { - "version": "0.54.7", - "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.7.tgz", - "integrity": "sha512-Yw3WMTzVwevT6ZTrLCYNHAFmanMxdylelL3hkWNgPMeTCpMwpV3nXjpOHuBXtFv7aiO2xRuQS6OoAdgkNcSNug==", - "dev": true, - "requires": { - "css-parse": "~2.0.0", - "debug": "~3.1.0", - "glob": "^7.1.3", - "mkdirp": "~0.5.x", - "safer-buffer": "^2.1.2", - "sax": "~1.2.4", - "semver": "^6.0.0", - "source-map": "^0.7.3" - }, - "dependencies": { - "debug": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", - "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", - "dev": true, - "requires": { - "ms": "2.0.0" - } - }, - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true - }, - "source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true - } - } - }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -10669,6 +11139,52 @@ "integrity": "sha512-bO4FIzrjESAfh4KHwkUJym3jvKtJ4oJ2PG0BBQGBmKa0pF2oanpkB7CF4ZsSX7vfp3+GKaLzioVwpV/3Tyk+lQ==", "optional": true }, + "table": { + "version": "5.4.6", + "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", + "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==", + "dev": true, + "requires": { + "ajv": "^6.10.2", + "lodash": "^4.17.14", + "slice-ansi": "^2.1.0", + "string-width": "^3.0.0" + }, + "dependencies": { + "ansi-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "dev": true + }, + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", + "dev": true + }, + "string-width": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", + "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", + "dev": true, + "requires": { + "emoji-regex": "^7.0.1", + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^5.1.0" + } + }, + "strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "dev": true, + "requires": { + "ansi-regex": "^4.1.0" + } + } + } + }, "tar": { "version": "4.4.13", "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz", @@ -10715,6 +11231,12 @@ } } }, + "text-table": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", + "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", + "dev": true + }, "through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", @@ -11664,6 +12186,12 @@ "resolved": "https://registry.npmjs.org/with-callback/-/with-callback-1.0.2.tgz", "integrity": "sha1-oJYpuakgAo1yFAT7Q1vc/1yRvCE=" }, + "word-wrap": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", + "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", + "dev": true + }, "wordwrap": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", @@ -11719,6 +12247,15 @@ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, + "write": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz", + "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==", + "dev": true, + "requires": { + "mkdirp": "^0.5.1" + } + }, "write-file-atomic": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", diff --git a/package.json b/package.json index 1e0a158..2b5c5ae 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,12 @@ "private": true, "description": "The most chill blog framework ever.", "repository": "https://code.playvicio.us/Are0h/Fipamo", - "theme": "default-dark", "scripts": { "start": "pm2 --node-args='-r esm' start init.js", "stop": "pm2 stop init.js", "dev": "nodemon -r esm init.js --ignore node_modules/ -e js", "debug": "nodemon inspect -r esm init.js --ignore node_modules/ -e js", - "watch": "stylus -w -o public/assets/css src/styles/dash.styl & parcel watch src/com/Start.js --out-dir public/assets/scripts --out-file dash.min.js --public-url /assets/scripts" + "watch": "sass --watch src/styles:public/assets/css & parcel watch src/com/Start.js --out-dir public/assets/scripts --out-file dash.min.js --public-url /assets/scripts" }, "engines": { "node": ">=10.16.0" @@ -58,11 +57,12 @@ "@babel/preset-env": "^7.10.2", "animejs": "^3.2.0", "babel-preset-env": "^1.7.0", - "bulma.styl": "^0.6.11", + "bulma": "^0.9.0", + "eslint": "^7.9.0", "nodemon": "^2.0.4", "parcel": "^1.12.4", "prettier": "^2.0.5", - "scramble-text": "0.0.8", - "stylus": "^0.54.7" + "sass": "^1.26.11", + "scramble-text": "0.0.8" } -} \ No newline at end of file +} diff --git a/src/styles/dash.sass b/src/styles/dash.sass new file mode 100644 index 0000000..d007988 --- /dev/null +++ b/src/styles/dash.sass @@ -0,0 +1,43 @@ +@use "sass:color" + +//Bulma +@import '../../node_modules/bulma/sass/utilities/_all' +@import '../../node_modules/bulma/sass/grid/columns' + +//Colors +@import 'main/_colors' + +//Mixins +@import 'main/_mixins' + +//Normalize +@import 'main/_normalize' + +//Typography +@import 'main/_typography' + +//Main Structure +@import 'main/_structure' + +//Index +@import 'main/_index' + +//Settings +@import 'main/_settings' + +//Error +@import 'main/_error' + +//Navigation +@import 'main/_navigation' + +//Forms +@import 'main/_forms' + +//Posts +@import 'main/_posts' + +//Editor +@import 'main/_calendar' +@import 'main/_editor' +@import 'main/_editor-highlight' diff --git a/src/styles/dash.styl b/src/styles/dash.styl deleted file mode 100644 index 6c99863..0000000 --- a/src/styles/dash.styl +++ /dev/null @@ -1,81 +0,0 @@ -/** -------------------------------- --- Bulma -------------------------------- -* */ -@import '../../node_modules/bulma.styl/stylus/utilities/_all' -@import '../../node_modules/bulma.styl/stylus/grid/columns' -/** -------------------------------- --- Colors -------------------------------- -* */ -@import 'main/_colors' -/** -------------------------------- --- Mixins -------------------------------- -* */ -@import 'main/_mixins' -/** -------------------------------- --- Normalize -------------------------------- -* */ -@import 'main/_normalize' -/** -------------------------------- --- Typography -------------------------------- -* */ -@import 'main/_typography' -/** -------------------------------- --- Main Structures -------------------------------- -* */ -@import 'main/_structure' -/** -------------------------------- --- Index -------------------------------- -* */ -@import 'main/_index' -/** -------------------------------- --- Settings -------------------------------- -* */ -@import 'main/_settings' - /** -------------------------------- --- Error -------------------------------- -* */ -@import 'main/_error' -/** -------------------------------- --- Navigation -------------------------------- -* */ -@import 'main/_navigation' -/** -------------------------------- --- Forms -------------------------------- -* */ -@import 'main/_forms' -/** -------------------------------- --- Blog -------------------------------- -* */ -@import 'main/_posts' -/** -------------------------------- --- Editor -------------------------------- -* */ -@import 'main/_calendar' -@import 'main/_editor' -@import 'main/_editor-highlight' diff --git a/src/styles/main/_calendar.sass b/src/styles/main/_calendar.sass new file mode 100644 index 0000000..d1d72dd --- /dev/null +++ b/src/styles/main/_calendar.sass @@ -0,0 +1,242 @@ +// TINY DATE +.dp-modal + position: fixed + top: 0 + left: 0 + right: 0 + bottom: 0 + // background rgba(255, 255, 255, 0.75) + @include background-opacity(color.adjust($primary, $lightness: -70%), 0.75) + z-index: 2000 + +.dp + position: relative + background: $primary + box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25) + line-height: 1.4 + border-radius: 4px + max-height: 400px + z-index: 5000 + padding-top: 6px + overflow: hidden + -webkit-tap-highlight-color: transparent + +.dp:before + content: ' ' + height: 6px + position: absolute + top: 0 + left: 0 + right: 0 + background: $highlight + // background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%) + +.dp-permanent .dp + padding-top: 0 + border: 1px solid #EEE + box-shadow: none + +.dp-permanent .dp:before + display: none + +.dp-cal + min-height: 300px + +.dp-below + position: absolute + font-size: 0.8em + width: 400px + max-width: 90vw + +.dp-permanent + position: relative + font-size: 0.8em + width: 400px + max-width: 100vw + +.dp-permanent .dp + z-index: 0 + +.dp-modal .dp + position: absolute + top: 50% + left: 50% + max-width: 600px + width: calc(100% - 4em) + transform: translate(-50%, -50%) + animation: slide-up 0.3s forwards + +.dp-months + padding: 24px + +.dp-years + box-sizing: border-box + max-height: 400px + padding: 8px 0 + /* HACK for Chrome on Android */ + overflow: auto !important + +.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year + box-sizing: border-box + text-align: center + text-decoration: none + position: relative + color: $white + border-radius: 2px + border: 0 + background: transparent + +.dp-cal-header + position: relative + text-align: center + padding-bottom: 16px + background: color.adjust($primary, $lightness: -10%) + +.dp-next, .dp-prev + position: absolute + width: 30px + height: 30px + overflow: hidden + top: 14px + color: color.adjust($primary, $lightness: -50%) + border-radius: 2px + border: 0 + background: transparent + +.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover + outline: none + color: inherit + +.dp-prev + left: 24px + +.dp-next + right: 24px + +.dp-prev:before, .dp-next:before + content: '' + border: 2px solid + width: 10px + height: 10px + display: inline-block + transform: rotate(-45deg) + transition: border-color 0.2s + margin: 9px 0 40px 4px + +.dp-prev:before + border-right: 0 + border-bottom: 0 + +.dp-next:before + border-left: 0 + border-top: 0 + margin-left: 0 + margin-right: 4px + +.dp-cal-month, .dp-cal-year + display: inline-block + font-size: 1.4em + padding: 16px 8px 8px + outline: none + +.dp-cal-footer + text-align: center + background: color.adjust($primary, $lightness: -10%) + +.dp-day-today:after + content: '' + height: 0 + width: 0 + border: 7px solid $highlight + border-bottom-color: transparent + border-left-color: transparent + position: absolute + top: 0 + right: 0 + +.dp-close, .dp-clear, .dp-today + box-sizing: border-box + display: inline-block + width: 33% + padding: 8px + text-decoration: none + color: color.adjust($primary, $lightness: -50%) + border: 0 + background: transparent + +.dp-permanent .dp-close, .dp-permanent .dp-clear + display: none + +.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active + background: $highlight + color: $white + +@media screen and (min-device-width: 1200px) + .dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus + background: $highlight + color: $white + +.dp-col-header, .dp-day + width: 14.28571429% + display: inline-block + padding: 8px + text-align: center + +.dp-col-header + color: #AAA + text-transform: uppercase + font-weight: 300 + font-size: 0.8em + padding: 8px 0 + +.dp-month + width: 33% + display: inline-block + padding: 8px + +.dp-year + display: block + padding: 8px 40px + width: 100% + +.dp-edge-day + color: #AAA + +.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus + outline: none + background: color.adjust($primary, $lightness: -40%) + color: $white + +.dp-selected:hover, .dp-selected:focus, .dp-selected + background: $highlight + color: color.adjust($primary, $lightness: -60%) + +.dp-day-disabled + background: transparent + color: #DDD + +.dp-day-disabled:focus, .dp-day-disabled:hover + background: #DDD + +.dp-focuser + position: absolute + z-index: 0 + top: 50% + left: 50% + +// Responsive +@media (max-width: 480px), (max-height: 480px) + .dp-modal .dp + font-size: 0.9em + width: auto + width: 100% + + .dp-day-of-week, .dp-day + padding: 8px + +@keyframes slide-up + 0% + transform: translate(-50%, 100%) + + 100% + transform: translate(-50%, -50%) \ No newline at end of file diff --git a/src/styles/main/_calendar.styl b/src/styles/main/_calendar.styl deleted file mode 100644 index cfd3fba..0000000 --- a/src/styles/main/_calendar.styl +++ /dev/null @@ -1,245 +0,0 @@ -// TINY DATE -.dp-modal - position fixed - top 0 - left 0 - right 0 - bottom 0 - // background rgba(255, 255, 255, 0.75) - background-opacity($primary - 70%, 0.75) - z-index 2000 - -.dp - position relative - background $primary // #FFF - box-shadow 2px 2px 16px rgba(0, 0, 0, 0.25) - line-height 1.4 - border-radius 4px - max-height 400px - z-index 5000 - padding-top 6px - overflow hidden - -webkit-tap-highlight-color transparent - -.dp:before - content ' ' - height 6px - position absolute - top 0 - left 0 - right 0 - background $highlight - // background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%) - -.dp-permanent .dp - padding-top 0 - border 1px solid #EEE - box-shadow none - -.dp-permanent .dp:before - display none - -.dp-cal - min-height 300px - -.dp-below - position absolute - font-size 0.8em - width 400px - max-width 90vw - -.dp-permanent - position relative - font-size 0.8em - width 400px - max-width 100vw - -.dp-permanent .dp - z-index 0 - -.dp-modal .dp - position absolute - top 50% - left 50% - max-width 600px - width calc(100% - 4em) - transform translate(-50%, -50%) - animation slide-up 0.3s forwards - -.dp-months - padding 24px - -.dp-years - box-sizing border-box - max-height 400px - padding 8px 0 - overflow auto !important /* HACK for Chrome on Android */ - -.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year - box-sizing border-box - text-align center - text-decoration none - position relative - color $white - border-radius 2px - border 0 - background transparent - -.dp-cal-header - position relative - text-align center - padding-bottom 16px - background $primary - 10% - -.dp-next, .dp-prev - position absolute - width 30px - height 30px - overflow hidden - top 14px - color $primary - 50% - border-radius 2px - border 0 - background transparent - -.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover - outline none - color inherit - -.dp-prev - left 24px - -.dp-next - right 24px - -.dp-prev:before, .dp-next:before - content '' - border 2px solid - width 10px - height 10px - display inline-block - transform rotate(-45deg) - transition border-color 0.2s - margin 9px 0 40px 4px - -.dp-prev:before - border-right 0 - border-bottom 0 - -.dp-next:before - border-left 0 - border-top 0 - margin-left 0 - margin-right 4px - -.dp-cal-month, .dp-cal-year - display inline-block - font-size 1.4em - padding 16px 8px 8px - outline none - -.dp-cal-footer - text-align center - background $primary - 10% - -.dp-day-today:after - content '' - height 0 - width 0 - border 7px solid $highlight - border-bottom-color transparent - border-left-color transparent - position absolute - top 0 - right 0 - -.dp-close, .dp-clear, .dp-today - box-sizing border-box - display inline-block - width 33% - padding 8px - text-decoration none - color $primary - 50% - border 0 - background transparent - -.dp-permanent .dp-close, .dp-permanent .dp-clear - display none - -.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active - background $highlight - color $white - -@media screen and (min-device-width: 1200px) - .dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus - background $highlight - color $white - -.dp-col-header, .dp-day - width 14.28571429% - display inline-block - padding 8px - text-align center - -.dp-col-header - color #AAA - text-transform uppercase - font-weight 300 - font-size 0.8em - padding 8px 0 - -.dp-month - width 33% - display inline-block - padding 8px - -.dp-year - display block - padding 8px 40px - width 100% - -.dp-edge-day - color #AAA - -.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus - outline none - background $primary - 40% - color $white - -.dp-selected:hover, .dp-selected:focus, .dp-selected - background $highlight - color $primary - 60% - -.dp-day-disabled - background transparent - color #DDD - -.dp-day-disabled:focus, .dp-day-disabled:hover - background #DDD - -.dp-focuser - position absolute - z-index 0 - top 50% - left 50% - -/** -------------------------------- --- Responsive -------------------------------- -* */ -@media (max-width: 480px), (max-height: 480px) - .dp-modal .dp - font-size 0.9em - width auto - width 100% - - .dp-day-of-week, .dp-day - padding 8px - -@keyframes slide-up - 0% - transform translate(-50%, 100%) - - 100% - transform translate(-50%, -50%) \ No newline at end of file diff --git a/src/styles/main/_colors.sass b/src/styles/main/_colors.sass new file mode 100644 index 0000000..75d8b08 --- /dev/null +++ b/src/styles/main/_colors.sass @@ -0,0 +1,17 @@ +$primary: #374857 +//$primary = #200317; deep sexy purple +$secondary: #b2cce5 +$tertiary: #f5ab35 +$highlight: #fc6399 +$white: #f2f1ef +$grey: #abb7b7 +$black: #32302f + +//editor colors +$eventCool: #32cd32 +$eventLame: #F64747 + +$editorPrimary: #fde3a7 +$editorSecondary: #ffa07a +$editorTertiary: #89c4f4 +$editorString: #f6dd74 diff --git a/src/styles/main/_colors.styl b/src/styles/main/_colors.styl deleted file mode 100644 index ff59d1d..0000000 --- a/src/styles/main/_colors.styl +++ /dev/null @@ -1,19 +0,0 @@ -$primary = #374857; -//$primary = #200317; deep sexy purple -$secondary = #b2cce5; -$tertiary = #f5ab35; -$highlight = #fc6399; -$white = #f2f1ef; -$grey = #abb7b7; -$black = #32302f; - -//editor colors -$eventCool = #32cd32 -$eventLame = #F64747 - -$editorPrimary = #fde3a7; -$editorSecondary = #ffa07a; -$editorTertiary = #89c4f4; -$editorString = #f6dd74; - -//Bulma overrides diff --git a/src/styles/main/_editor-highlight.styl b/src/styles/main/_editor-highlight.sass similarity index 63% rename from src/styles/main/_editor-highlight.styl rename to src/styles/main/_editor-highlight.sass index 0161aa1..9cf733a 100644 --- a/src/styles/main/_editor-highlight.styl +++ b/src/styles/main/_editor-highlight.sass @@ -1,46 +1,46 @@ .hljs - display block - overflow-x auto - padding 0.5em - background $primary - 5% + display: block + overflow-x: auto + padding: 0.5em + background: color.adjust($primary, $lightness: -6%) .hljs, .hljs-subst - color #ebdbb2 + color: #ebdbb2 .hljs-deletion, .hljs-formula, .hljs-keyword .hljs-selector-tag - color $editorPrimary - font-style italic + color: $editorPrimary + font-style: italic .hljs-link - color $highlight + color: $highlight .hljs-built_in, .hljs-emphasis, .hljs-name, .hljs-quote, .hljs-strong, .hljs-title, .hljs-variable - color $editorSecondary + color: $editorSecondary .hljs-attr, .hljs-params, .hljs-template-tag, .hljs-type - color $editorTertiary + color: $editorTertiary .hljs-builtin-name, .hljs-doctag, .hljs-literal, .hljs-number - color #8f3f71 + color: #8f3f71 .hljs-code, .hljs-meta, .hljs-regexp, .hljs-selector-id, .hljs-template-variable - color $tertiary + color: $tertiary .hljs-addition, .hljs-meta-string, .hljs-section, .hljs-selector-attr, .hljs-selector-class, .hljs-string, .hljs-symbol - color $editorString + color: $editorString .hljs-attribute, .hljs-bullet, .hljs-class, .hljs-function, .hljs-function .hljs-keyword, .hljs-meta-keyword, .hljs-selector-pseudo, .hljs-tag - color $primary + 50% + color: color.adjust($primary, $lightness: 50%) .hljs-comment - color #928374 + color: #928374 .hljs-link_label, .hljs-literal, .hljs-number - color #d3869b + color: #d3869b .hljs-comment, .hljs-emphasis - font-style italic + font-style: italic .hljs-section, .hljs-strong, .hljs-tag - font-weight normal + font-weight: normal diff --git a/src/styles/main/_editor.sass b/src/styles/main/_editor.sass new file mode 100644 index 0000000..782a3e6 --- /dev/null +++ b/src/styles/main/_editor.sass @@ -0,0 +1,95 @@ +#edit-control + // margin 10px + top: 1px + border-radius: 3px + // background-opacity($primary - 10%, 0.50) + width: 100% + max-width: 880px + margin-top: 30px + z-index: 2000 + + button:nth-child(1) + border-radius: 3px 0 0 3px + button:nth-child(10) + border-radius: 0 3px 3px 0 + + button + background: $secondary + width: 10% + height: 39px + @include object-transitions(0.3s) + margin: 0 + border-radius: 0 + display: inline-block + vertical-align: top + text-align: center + button:hover + background: color.adjust($secondary, $lightness: -20%) + + #option-update + padding: 5px 5px 1px 5px + display: inline-block + vertical-align: top + text-align: center + + .icon-hide + display: none + visibility: hidden + + .submit-start + background: $white + + svg + fill: $eventCool + + .submit-cool + background: $eventCool + + svg + fill: $white + + .submit-delete + background: $eventLame !important + + svg + fill: $white !important + + + + #option-date + height: 30px + padding-top: 6px + + svg + margin: -13px 5px 0 0 + display: inline-block + vertical-align: top + fill: $white + + .content-editor-btn-icon + padding: 5px 5px 1px 5px + // border-radius 20px + color: $primary + + svg + fill: $primary + + .content-editor-btn-text + padding: 5px + // border-radius 20px + color: $primary + + #option-bold + font-weight: bold + text-decoration: none + + #option-italic + font-weight: bold + text-decoration: none + font-style: italic + + #option-strikethrough + font-weight: bold + text-decoration: line-through + font-style: italic + diff --git a/src/styles/main/_editor.styl b/src/styles/main/_editor.styl deleted file mode 100644 index a69a29f..0000000 --- a/src/styles/main/_editor.styl +++ /dev/null @@ -1,95 +0,0 @@ -#edit-control - // margin 10px - top 1px - border-radius 3px - // background-opacity($primary - 10%, 0.50) - width 100% - max-width 880px - margin-top 30px - z-index 2000 - - button:nth-child(1) - border-radius 3px 0 0 3px - button:nth-child(10) - border-radius 0 3px 3px 0 - - button - background $secondary - width 10% - height 39px - object-transitions(0.3s) - margin 0 - border-radius 0 - display inline-block - vertical-align top - text-align center - button:hover - background: $secondary - 20% - - #option-update - padding 5px 5px 1px 5px - display inline-block - vertical-align top - text-align center - - .icon-hide - display none - visibility hidden - - .submit-start - background $white - - svg - fill $eventCool - - .submit-cool - background $eventCool - - svg - fill $white - - .submit-delete - background $eventLame !important - - svg - fill $white !important - - - - #option-date - height 30px - padding-top 6px - - svg - margin -13px 5px 0 0 - display inline-block - vertical-align top - fill $white - - .content-editor-btn-icon - padding 5px 5px 1px 5px - // border-radius 20px - color $primary - - svg - fill $primary - - .content-editor-btn-text - padding 5px - // border-radius 20px - color $primary - - #option-bold - font-weight bold - text-decoration none - - #option-italic - font-weight bold - text-decoration none - font-style italic - - #option-strikethrough - font-weight bold - text-decoration line-through - font-style italic - diff --git a/src/styles/main/_error.sass b/src/styles/main/_error.sass new file mode 100644 index 0000000..448b4cb --- /dev/null +++ b/src/styles/main/_error.sass @@ -0,0 +1,22 @@ +#error-index + width: 100% + max-width: 900px + margin: 0 auto + padding: 10px + height: 100% + z-index: 10 + position: relative + label#title + font-size: 100px + color: $highlight + font-weight: 500 + + label#message + font-size: 50px + color: $tertiary + font-weight: 500 + + label#error + font-size: 25px + color: $eventLame + font-weight: 500 \ No newline at end of file diff --git a/src/styles/main/_error.styl b/src/styles/main/_error.styl deleted file mode 100644 index 25dbf64..0000000 --- a/src/styles/main/_error.styl +++ /dev/null @@ -1,22 +0,0 @@ - #error-index - width 100% - max-width 900px - margin 0 auto; - padding: 10px - height 100% - z-index 10 - position relative - label#title - font-size 100px - color $highlight - font-weight: 500 - - label#message - font-size 50px - color $tertiary - font-weight: 500 - - label#error - font-size 25px - color $eventLame - font-weight: 500 \ No newline at end of file diff --git a/src/styles/main/_forms.sass b/src/styles/main/_forms.sass new file mode 100644 index 0000000..690e242 --- /dev/null +++ b/src/styles/main/_forms.sass @@ -0,0 +1,58 @@ +form + display: inline-block + +input[type=email], input[type=password], input[type=text] + border: 0 + border-radius: 5px + padding: 5px + margin: 10px 5px 0 0 + font: 15px monospace + display: inline-block + background: color.adjust($primary, $lightness: -50%) + color: $white + +textarea + border: 0 + border-radius: 3px + color: $white + font: 15px monospace + +button, input[type=submit] + background: $highlight + color: color.adjust($primary, $lightness: -30%) + font: 14px $baseType + border-radius: 5px + position: relative + cursor: pointer + border: 0 + padding: 5px 5px 0 5px + @include object_transitions(.3s) + font: 15px monospace + +select + font: 14px monospace + border: 1px solid $secondary + -webkit-appearance: none + -moz-appearance: none + appearance: none + color: $primary + +::-webkit-input-placeholder + font: 14px monospace + color: color.adjust($primary, $lightness: 50%) + +:-moz-placeholder + /* Firefox 18- */ + font: 14px monospace + color: color.adjust($primary, $lightness: 50%) + +::-moz-placeholder + /* Firefox 19+ */ + font: 14px monospace + color: color.adjust($primary, $lightness: 50%) + +:-ms-input-placeholder + font: 14px monospace + color: color.adjust($primary, $lightness: 50%) + + diff --git a/src/styles/main/_forms.styl b/src/styles/main/_forms.styl deleted file mode 100644 index 3f60c8e..0000000 --- a/src/styles/main/_forms.styl +++ /dev/null @@ -1,57 +0,0 @@ -form - display inline-block - -input[type=email], input[type=password], input[type=text] - border 0 - border-radius 3px - padding 5px - font 1em $monoType - display inline-block - background-color $primary - 60% - color $secondary - -textarea - border 0 - border-radius 3px - color $type02 - font 1em $monoType - -button, input[type=submit] - background $highlight - color $primary - 60% - font 1em $monoType - border-radius 3px - position relative - cursor pointer - border 0 - -input.large - font-size 1.4em - padding 10px - -select - font 1em $monoType - border 1px solid $secondary - -webkit-appearance none - -moz-appearance none - appearance none - // background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #000; - color $primary - -::-webkit-input-placeholder - font 1em $monoType - color $secondary - -:-moz-placeholder - /* Firefox 18- */ - font 1em $monoType - color $secondary - -::-moz-placeholder - /* Firefox 19+ */ - font 1em $monoType - color $secondary - -:-ms-input-placeholder - font 1em $monoType - color $secondary diff --git a/src/styles/main/_index.sass b/src/styles/main/_index.sass new file mode 100644 index 0000000..fd7bcd6 --- /dev/null +++ b/src/styles/main/_index.sass @@ -0,0 +1,251 @@ +#dash-index-content + width: 100% + height: 100% + margin: 0 auto + + #dash-index + width: 100% + height: 100% + z-index: 10 + position: relative + + #dash-index-wrapper + width: 100% + height: 100% + margin: 0 auto + + .dash-init, .dash-restore + width: 100% + max-width: 900px + margin: 0 auto + color: $secondary + label + color: $primary + + form + background: $white + padding: 15px + h1 + color: $primary + p + color: color.adjust($primary, $lightness: -60%) + border-top: 1px solid $primary + border-bottom: 1px solid $primary + padding: 10px 0 10px 0 + input.large[type=email], input[type=password], input[type=text] + margin-bottom: 15px + margin-top: 5px + button + height: 30px + width: 120px + margin: 0 auto + display: block + .dash-restore + display: none + visibility: hidden + + #dash-login + width: 100% + max-width: 900px + margin: 0 auto + + #dash-form + width: 300px + padding: 0.75em + background: $primary + border-radius: 3px + + input + width: 290px + margin: 0 0 10px 0 + height: 30px + + button + width: 300px + + #dash-menu + padding: 10px + width: 90% + max-width: 900px + margin: 50px auto + + a + display: inline-block + vertical-align: top + background: color.adjust($primary, $lightness: -60%) + width: 30% + padding: 5px + border-radius: 3px + color: $white + margin: 0 10px 10px 0 + + &:hover + background: color.adjust($primary, $lightness: -60%) + + svg + display: inline-block + vertical-align: top + fill: $white + + label + display: inline-block + margin-top: 5px + width: 85% + text-align: center + cursor: pointer + + #dash-recent + width: 100% + max-width: 900px + height: 100% + padding: 5px 0 0 0 + margin: 0 auto + + #recent-list + padding: 0.75em + position: relative + + .recent-header + height: 50px + + h3 + vertical-align: top + display: inline-block + width: 50% + + .index-menu + width: 50% + text-align: right + vertical-align: top + display: inline-block + margin: 24px 0 24px 0 + right: 10px + color: $white + + a + text-decoration-color: $highlight + + a.post-link + font-size: 1.5em + font-weight: 300 + display: inline-block + border-radius: 3px + vertical-align: top + text-decoration: none + position: relative + + label + font-size: 1.4em + font-weight: 700 + color: $white + padding: 5px + vertical-align: top + display: inline-block + word-wrap: break-word + width: 100% + text-align: center + @include text-drop-shadow($black, 1, 2px, 2px, 0) + + span + vertical-align: top + margin: 0 auto + width: 300px + display: block + font-family: $monoType + font-size: 0.5em + padding: 7px + color: $white + text-align: center + //background $primary - 60% + border-radius: 0 0 3px 3px + + div + width: 100% + position: absolute + bottom: 0 + border-radius: 0 0 3px 3px + //background-opacity($black, .35) + background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%) + + #options + display: block + vertical-align: top + width: 300px + position: relative + text-align: center + margin: 0 auto + background: none + .item-options + border-radius: 3px + margin: 5px + display: inline-block + .item-options[data-active='false'] + width: 65px + background: color.adjust($primary, $lightness: -60%) + color: $white + + .item-options[data-active='true'] + width: 70px + background: color.adjust($tertiary, $lightness: 20%) + color: color.adjust($primary, $lightness: -60%) + + a:nth-child(3) + width: 100% + margin-bottom: 20px + height: 500px + + a:nth-child(4) + width: 49% + height: 275px + margin: 0 15px 15px 0 + + a:nth-child(5) + width: 49% + height: 550px + + a:nth-child(6) + width: 49% + height: 550px + margin :-260px 15px 0 0 + + a:nth-child(7) + width: 49% + height: 275px + margin: 15px 0 0 0 + +//Reponsive +@media only screen and (max-width: 768px) + #dash-index-content + #dash-index + #dash-index-wrapper + #dash-recent + #recent-list + a:nth-child(4), a:nth-child(6) + width: 48.9% + +@media only screen and (max-width: 640px) + #dash-index-content + #dash-index + #dash-index-wrapper + #dash-recent + #recent-list + a:nth-child(4), a:nth-child(6) + width: 48.5% + +@media only screen and (max-width: 480px) + #dash-index-content + #dash-index + #dash-index-wrapper + #dash-recent + #recent-list + .recent-header + h3 + width: 40% + + .index-menu + width: 60% + + a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7) + width: 100% + margin: 15px 0 0 0 + height: 400px diff --git a/src/styles/main/_index.styl b/src/styles/main/_index.styl deleted file mode 100644 index 03d905f..0000000 --- a/src/styles/main/_index.styl +++ /dev/null @@ -1,255 +0,0 @@ -#dash-index-content - width 100% - height 100% - margin 0 auto - - #dash-index - width 100% - height 100% - z-index 10 - position relative - - #dash-index-wrapper - width 100% - height 100% - margin 0 auto - - .dash-init, .dash-restore - width 100% - max-width 900px - margin 0 auto - color $secondary - label - color $primary - - form - background $white - padding 15px - h1 - color $primary - p - color $primary - 60% - border-top 1px solid $primary - border-bottom 1px solid $primary - padding 10px 0 10px 0 - input.large[type=email], input[type=password], input[type=text] - margin-bottom 15px - margin-top 5px - button - height 30px - width 120px - margin 0 auto - display block - .dash-restore - display: none; - visibility hidden; - - #dash-login - width 100% - max-width 900px - margin 0 auto - - #dash-form - width 300px - padding 0.75em - background $primary - border-radius 3px - - input - width 290px - margin 0 0 10px 0 - height 30px - - button - width 300px - - #dash-menu - padding 10px - width 90% - max-width 900px - margin 50px auto - - a - display inline-block - vertical-align top - background $primary - 60% - width 30% - padding 5px - border-radius 3px - color $white - margin 0 10px 10px 0 - - &:hover - background $primary - 50% - - svg - display inline-block - vertical-align top - fill $white - - label - display inline-block - margin-top 5px - width 85% - text-align center - cursor pointer - - #dash-recent - width 100% - max-width 900px - height 100% - padding 5px 0 0 0 - margin 0 auto - - #recent-list - padding 0.75em - position relative - - .recent-header - height 50px - - h3 - vertical-align top - display inline-block - width 50% - - .index-menu - width 50% - text-align right - vertical-align top - display inline-block - margin 24px 0 24px 0 - right 10px - color $white - - a - text-decoration-color $highlight - - a.post-link - font-size 1.5em - font-weight 300 - display inline-block - border-radius 3px - vertical-align top - text-decoration none - position relative - - label - font-size 1.4em - font-weight 700 - color $white - padding 5px - vertical-align top - display inline-block - word-wrap break-word - width 100% - text-align center - text-drop-shadow($black, 1, 2px, 2px, 0) - - span - vertical-align top - margin 0 auto - width 300px - display block - font-family $monoType - font-size 0.5em - padding 7px - color $white - text-align: center - //background $primary - 60% - border-radius 0 0 3px 3px - - div - width 100% - position absolute - bottom 0 - border-radius 0 0 3px 3px - //background-opacity($black, .35) - background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); - - #options - display block - vertical-align: top - width 300px - position relative - text-align: center - margin 0 auto - background none - .item-options - border-radius 3px - margin 5px - display inline-block - .item-options[data-active='false'] - width 65px - background $primary - 60% - color $white - - .item-options[data-active='true'] - width 70px - background $tertiary + 50% - color $primary - 60% - - a:nth-child(3) - width 100% - margin-bottom 20px - height 500px - - a:nth-child(4) - width 49% - height 275px - margin 0 15px 15px 0 - - a:nth-child(5) - width 49% - height 550px - - a:nth-child(6) - width 49% - height 550px - margin -260px 15px 0 0 - - a:nth-child(7) - width 49% - height 275px - margin 15px 0 0 0 - -/** -------------------------------- --- Responsive -------------------------------- -* */ -@media only screen and (max-width: 768px) - #dash-index-content - #dash-index - #dash-index-wrapper - #dash-recent - #recent-list - a:nth-child(4), a:nth-child(6) - width 48.9% - -@media only screen and (max-width: 640px) - #dash-index-content - #dash-index - #dash-index-wrapper - #dash-recent - #recent-list - a:nth-child(4), a:nth-child(6) - width 48.5% - -@media only screen and (max-width: 480px) - #dash-index-content - #dash-index - #dash-index-wrapper - #dash-recent - #recent-list - .recent-header - h3 - width 40% - - .index-menu - width 60% - - a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7) - width 100% - margin 15px 0 0 0 - height 400px diff --git a/src/styles/main/_mixins.sass b/src/styles/main/_mixins.sass new file mode 100644 index 0000000..b3af067 --- /dev/null +++ b/src/styles/main/_mixins.sass @@ -0,0 +1,16 @@ +@mixin text-drop-shadow($rgb_value, $opacity, $offsetX, $offsetY, $blur) + text-shadow: $offsetX $offsetY $blur rgba($rgb_value, $opacity) + +@mixin object-transitions($rate) + -moz-transition: all $rate linear + -webkit-transition: all $rate linear + -o-transition: all $rate linear + transition: all $rate linear + + +@mixin background-opacity($rgb_value, $opacity) + background: rgba($rgb_value, $opacity) + +@mixin custom-header($weight, $size, $line_height, $color) + font: $weight $size/$line_height $bodyTypeSans + color: $color \ No newline at end of file diff --git a/src/styles/main/_mixins.styl b/src/styles/main/_mixins.styl deleted file mode 100644 index 92fc286..0000000 --- a/src/styles/main/_mixins.styl +++ /dev/null @@ -1,11 +0,0 @@ -text-drop-shadow(rgb-value, opacity, offsetX, offsetY, blur) - text-shadow offsetX offsetY blur rgba(rgb-value, opacity) - -object-transitions(rate) - -moz-transition all rate linear - -webkit-transition all rate linear - -o-transition all rate linear - transition all rate linear - -background-opacity(rgb-value, opacity) - background rgba(rgb-value, opacity) diff --git a/src/styles/main/_navigation.sass b/src/styles/main/_navigation.sass new file mode 100644 index 0000000..1c57a11 --- /dev/null +++ b/src/styles/main/_navigation.sass @@ -0,0 +1,62 @@ +#nav-index + width: 100% + max-width: 900px + margin: 0 auto + + #nav-index-wrapper + padding: 0.75rem + + #nav-pages + .nav-item + display: block + width: 98% + background: $primary + border-radius: 3px + color: $white + height: 30px + padding: 10px + margin: 0 0 10px 0 + font-size: 1.5em + cursor: move + + label + display: inline-block + vertical-align: middle + padding: 0 + margin: -15px 0 0 10px + cursor: move + + #nav-btns + float: right + + button + font-size: 0.8em + margin: 0 0 0 10px + +@media only screen and (max-width: 375px) + #nav-index + #nav-index-wrapper + #nav-pages + .nav-item + width: 94.5% + font-size: 1em + + label + width: 47% + vertical-align: top + margin-top: 0px + line-height: 1em + +@media only screen and (max-width: 320px) + #nav-index + #nav-index-wrapper + #nav-pages + .nav-item + width: 94.5% + font-size: 1em + + label + width: 37% + vertical-align: top + margin-top: 0px + line-height: 1em diff --git a/src/styles/main/_navigation.styl b/src/styles/main/_navigation.styl deleted file mode 100644 index 4bffd84..0000000 --- a/src/styles/main/_navigation.styl +++ /dev/null @@ -1,62 +0,0 @@ -#nav-index - width 100% - max-width 900px - margin 0 auto - - #nav-index-wrapper - padding 0.75rem - - #nav-pages - .nav-item - display block - width 98% - background $primary - border-radius 3px - color $white - height 30px - padding 10px - margin 0 0 10px 0 - font-size 1.5em - cursor move - - label - display inline-block - vertical-align middle - padding 0 - margin -15px 0 0 10px - cursor move - - #nav-btns - float right - - button - font-size 0.8em - margin 0 0 0 10px - -@media only screen and (max-width: 375px) - #nav-index - #nav-index-wrapper - #nav-pages - .nav-item - width 94.5% - font-size 1em - - label - width 47% - vertical-align top - margin-top 0px - line-height 1em - -@media only screen and (max-width: 320px) - #nav-index - #nav-index-wrapper - #nav-pages - .nav-item - width 94.5% - font-size 1em - - label - width 37% - vertical-align top - margin-top 0px - line-height 1em diff --git a/src/styles/main/_normalize.sass b/src/styles/main/_normalize.sass new file mode 100644 index 0000000..a751a9c --- /dev/null +++ b/src/styles/main/_normalize.sass @@ -0,0 +1,197 @@ +html + line-height: 1.15 + -ms-text-size-adjust: 100% + -webkit-text-size-adjust: 100% + +body + margin: 0 + +article, +aside, +footer, +header, +nav, +section + display: block + +h1 + font-size: 2em + margin: 0.67em 0 + line-height: 1em + +figcaption, +figure, +main + display: block + +figure + margin: 1em 40px + +hr + box-sizing: content-box + height: 0 + overflow: visible + +pre + font-family: monospace, monospace + font-size: 1em +a + background-color: transparent + -webkit-text-decoration-skip: objects + +a:active, +a:hover + outline-width: 0 + +abbr[title] + border-bottom: none + text-decoration: underline + text-decoration: underline dotted + +b, +strong + font-weight: inherit + font-weight: bolder + +code, +kbd, +samp + font-family: monospace, monospace + font-size: 1em + +dfn + font-style: italic + +mark + background-color: #ff0 + color: #000 + +small + font-size: 80% + +sub, +sup + font-size: 60% + line-height: 0 + position: relative + vertical-align: baseline + +sub + bottom: -0.25em + +sup + top: -0.55em + background: $primary + color: $primary + border-radius: 2px + padding: 0 2px 0 2px + margin: 0 2px 0 0 + +audio, +video + display: inline-block + +audio + &:not([controls]) + display: none + height: 0 + +img + border-style: none + +svg + &:not(:root) + overflow: hidden + +button, +input, +optgroup, +select, +textarea + font-family: sans-serif + font-size: 100% + line-height: 1.15 + margin: 0 + +button, +input + overflow: visible + +button, +select + text-transform: none + +button, html [type="button"], +[type="reset"], +[type="submit"] + -webkit-appearance: button + +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner, +button::-moz-focus-inner + border-style: none + padding: 0 + +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring, +button:-moz-focusring + outline: 1px dotted ButtonText + +fieldset + border: 1px solid #c0c0c0 + margin: 0 2px + padding: 0.35em 0.625em 0.75em + +legend + box-sizing: border-box + color: inherit + display: table + max-width: 100% + padding: 0 + white-space: normal + +progress + display: inline-block + vertical-align: baseline + +textarea + overflow: auto + +[type="checkbox"], +[type="radio"] + box-sizing: border-box + padding: 0 + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button + height: auto + +[type="search"] + -webkit-appearance: textfield + outline-offset: -2px + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration + -webkit-appearance: none + +::-webkit-file-upload-button + -webkit-appearance: button + font: inherit + +details, +menu + display: block + +summary + display: list-item + +canvas + display: inline-block + +template + display: none + +[hidden] + display: none diff --git a/src/styles/main/_normalize.styl b/src/styles/main/_normalize.styl deleted file mode 100644 index 87daf2c..0000000 --- a/src/styles/main/_normalize.styl +++ /dev/null @@ -1,196 +0,0 @@ -html - line-height 1.15 - -ms-text-size-adjust 100% - -webkit-text-size-adjust 100% - -body - margin 0 - -article, -aside, -footer, -header, -nav, -section - display block - -h1 - font-size 2em - margin 0.67em 0 - -figcaption, -figure, -main - display block - -figure - margin 1em 40px - -hr - box-sizing content-box - height 0 - overflow visible - -pre - font-family monospace, monospace - font-size 1em -a - background-color transparent - -webkit-text-decoration-skip objects - -a:active, -a:hover - outline-width 0 - -abbr[title] - border-bottom none - text-decoration underline - text-decoration underline dotted - -b, -strong - font-weight inherit - font-weight bolder - -code, -kbd, -samp - font-family monospace, monospace - font-size 1em - -dfn - font-style italic - -mark - background-color #ff0 - color #000 - -small - font-size 80% - -sub, -sup - font-size 60% - line-height 0 - position relative - vertical-align baseline - -sub - bottom -0.25em - -sup - top -0.55em - background lightness($primary, 80%) - color $primary - border-radius: 2px; - padding 0 2px 0 2px - margin: 0 2px 0 0 - -audio, -video - display inline-block - -audio - &:not([controls]) - display none - height 0 - -img - border-style none - -svg - &:not(:root) - overflow hidden - -button, -input, -optgroup, -select, -textarea - font-family sans-serif - font-size 100% - line-height 1.15 - margin 0 - -button, -input - overflow visible - -button, -select - text-transform none - -button, html [type="button"], -[type="reset"], -[type="submit"] - -webkit-appearance button - -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner, -button::-moz-focus-inner - border-style none - padding 0 - -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring, -button:-moz-focusring - outline 1px dotted ButtonText - -fieldset - border 1px solid #c0c0c0 - margin 0 2px - padding 0.35em 0.625em 0.75em - -legend - box-sizing border-box - color inherit - display table - max-width 100% - padding 0 - white-space normal - -progress - display inline-block - vertical-align baseline - -textarea - overflow auto - -[type="checkbox"], -[type="radio"] - box-sizing border-box - padding 0 - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button - height auto - -[type="search"] - -webkit-appearance textfield - outline-offset -2px - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration - -webkit-appearance none - -::-webkit-file-upload-button - -webkit-appearance button - font inherit - -details, -menu - display block - -summary - display list-item - -canvas - display inline-block - -template - display none - -[hidden] - display none diff --git a/src/styles/main/_posts.sass b/src/styles/main/_posts.sass new file mode 100644 index 0000000..38526e8 --- /dev/null +++ b/src/styles/main/_posts.sass @@ -0,0 +1,384 @@ +#post-index + width: 100% + max-width: 900px + margin: 0 auto + + #post-index-wrapper + padding: 0.75rem + overflow: hidden + + #post-index-menu + color: $white + + a + text-decoration-color: $highlight + + a.add-new-post + display: inline-block + background: $highlight + border-radius: 3px + padding: 3px + color: $white + text-align: center + margin-bottom: 10px + float: right + + .current-filter + color: $highlight + text-decoration-color: $secondary + + #posts-list + margin: 20px 0 0 0 + + a.page-link + background: $white + display: inline-block + vertical-align: top + width: 100% + text-decoration: none + margin: 0 0 20px 0 + border-radius: 3px + overflow: hidden + color: color.adjust($primary, $lightness: -60%) + + label + font-size: 2em + font-weight: 500 + padding: 10px + display: inline-block + vertical-align: top + width: 100% + + span + display: inline-block + vertical-align: top + font-size: 0.8em + font-family: $monoType + width: 50% + padding: 0 0 0 10px + + div.page-bg + width: 100% + height: 350px + background-color: $highlight + position: relative + #meta + width: 100% + background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%) + border-radius: 3px + margin: auto + bottom: 0 + position: absolute + padding: 0 0 20px 0 + span + color: $white + text-align: center + margin: 0 auto + display: block + + label + font-size: 1.4em + font-weight: 700 + color: $white + padding: 5px + vertical-align: top + display: inline-block + word-wrap: break-word + width: 100% + text-align: center + @include text-drop-shadow($black, 1, 2px, 2px, 0) + #options + margin: 0 auto + width: 275px + .meta-options + border-radius: 3px + margin: 5px + display: inline-block + text-align: center + padding: 2px + .meta-options[data-active='false'] + width: 70px + background: color.adjust($primary, $lightness: -60%) + color: $white + + .meta-options[data-active='true'] + width: 75px + background: color.adjust($tertiary, $lightness: 60%) + color: color.adjust($primary, $lightness: -60%) + + p + padding: 5px 10px 5px 10px + font-size: 1.2em + font-weight: 400 + .paginate + width: 260px + display: block + margin: 0 auto + a + display: inline-block + vertical-align: top + span.count + text-align: center + padding: 5px + margin-top: -2px + display: inline-block + width: 200px + font-size: 1.5em + color: $tertiary + + +#post-edit-index + width: 100% + overflow: hidden + + #post-edit-index-wrapper + width: 100% + + #post-header + // width 100% + + background: $highlight + #post-header-wrapper + max-width: 900px + margin: 0 auto + padding: 0.75rem + label + color: $white + font-size: 0.8em + font-family: $monoType + font-weight: 600 + span + color: color.adjust($primary, $lightness: -60%) + font-size: 1.5em + + #post-title + #post_title + background: color.adjust($highlight, $lightness: 10%) + font-family: $baseType + width: 97.6% + height: 80px + font-size: 2em + color: color.adjust($primary, $lightness: -60%) + padding: 5px + margin: 0 0 5px 0 + + + #calendar-icon + background: color.adjust($primary, $lightness: -15%) + border-radius: 3px 0 0 3px + display: inline-block + padding: 5.2px + color: $secondary + + #post-meta + #post_tags + background: color.adjust($highlight, $lightness: 10%) + font-family: $baseType + width: 97.6% + height: 80px + color: color.adjust($primary, $lightness: -60%) + padding: 5px + margin: 0 0 5px 0 + + #post-options + display: inline-block + vertical-align: top + width: 100% + padding: 0 + + button:nth-child(1) + border-radius: 3px 0 0 3px + + button:nth-child(4) + border-radius: 0 3px 3px 0 + + button + width: 33.3% + height: 39px + @include object-transitions(0.3s) + margin: 0 + border-radius: 0 + display: inline-block + vertical-align: top + text-align: center + + button[data-active='false'] + background: color.adjust($primary, $lightness: -60%) + svg + fill: $white + + button[data-active='true'] + background: color.adjust($tertiary, $lightness: 5%) + svg + fill: color.adjust($primary, $lightness: -60%) + + #featured-image-upload, #post-image-upload + display: none + + #post-feature + width: 100% + + #featured-image-drop + display: flex + align-items: center + justify-content: center + width: 100% + min-height: 200px + background: color.adjust($primary, $lightness: -50%) + color: $primary + vertical-align: middle + font-family: $monoType + + label + cursor: pointer + + img + width: 100% + margin: 0 + padding: 0 + + #featured-new-image-btn + position: absolute + margin: 20px + + #new-feature-upload + padding-top: 4px + background: $white + + svg + fill: $highlight + + #edit-post + width: 100% + max-width: 880px + margin: 0 auto + + #edit-post-wrapper + //width 98.7% + max-width: 900px + border-radius: 5px + //background $primary - 10% + margin: 40px 0 40px 0 + overflow: hidden + + pre + margin: 0 + code + font-family: $monoType + padding: 5px + border-radius: 5px + line-height: 1.6em + font-size: 1.25em + color: $editorPrimary + word-wrap: normal + white-space: pre-wrap + line-break: normal + -webkit-line-break: normal + -o-line-break: normal + -moz-line-break: normal + display: inline-block + width: 100% + max-width: 900px + min-height: 200px + +//Responsive +@media only screen and (max-width: 800px) + #post-edit-index + #post-edit-index-wrapper + #post-header + #post-title + #post-date + width: 37.6% + +@media only screen and (max-width: 768px) + #post-edit-index + #post-edit-index-wrapper + #post-header + #post-title + #post-date + width: 43.1% + + #post-meta + #edit-control + max-width: 100% + + button + width: 9.91% + +@media only screen and (max-width: 640px) + #post-edit-index + #post-edit-index-wrapper + #post-header + #post-title + #post-date + width: 42% + +@media only screen and (max-width: 480px) + #post-index + #post-index-wrapper + #post-index-menu + a + font-size: 0.95em + + label + display: none + visibility: hidden + + #post-edit-index + #post-edit-index-wrapper + #post-header + #post-title + #post-options + margin: 5px 0 0 0 + width: 100% + padding: 0 + + #post-date + width: 89.2% + + #post-meta + #edit-control + button + width: 9.91% + +@media only screen and (max-width: 320px) + #post-index + #post-index-wrapper + #post-index-menu + a + font-size: 0.95em + + label + display: none + visibility: hidden + + #post-edit-index + #post-edit-index-wrapper + #post-header + #post-title + #post_title + width: 96.4% + + #post-options + margin: 5px 0 0 0 + width: 100% + padding: 0 + + #post-date + width: 83.1% + + #post-meta + #post_tags + width: 96.4% + + #edit-control + .content-editor-btn-icon + svg.icons + width: 20px + + .post-sumbit-btn + svg.icons + width: 20px + + button + width: 10% diff --git a/src/styles/main/_posts.styl b/src/styles/main/_posts.styl deleted file mode 100644 index 852d723..0000000 --- a/src/styles/main/_posts.styl +++ /dev/null @@ -1,388 +0,0 @@ -#post-index - width 100% - max-width 900px - margin 0 auto - - #post-index-wrapper - padding 0.75rem - overflow hidden - - #post-index-menu - color $white - - a - text-decoration-color $highlight - - a.add-new-post - display inline-block - background $highlight - border-radius 3px - padding 3px - color $white - text-align center - margin-bottom 10px - float right - - .current-filter - color $highlight - text-decoration-color $secondary - - #posts-list - margin 20px 0 0 0 - - a.page-link - background $white - display inline-block - vertical-align top - width 100% - text-decoration none - margin 0 0 20px 0 - border-radius 3px - overflow hidden - color $primary - 60% - - label - font-size 2em - font-weight 500 - padding 10px - display inline-block - vertical-align top - width 100% - - span - display inline-block - vertical-align top - font-size 0.8em - font-family $monoType - width 50% - padding 0 0 0 10px - - div.page-bg - width 100% - height 350px - background-color $highlight - position relative - #meta - width 100% - background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); - border-radius 3px - margin auto - bottom 0 - position absolute - padding 0 0 20px 0 - span - color $white - text-align center - margin 0 auto - display block - - label - font-size 1.4em - font-weight 700 - color $white - padding 5px - vertical-align top - display inline-block - word-wrap break-word - width 100% - text-align center - text-drop-shadow($black, 1, 2px, 2px, 0) - #options - margin 0 auto - width: 275px - .meta-options - border-radius 3px - margin 5px - display inline-block - text-align: center - padding 2px - .meta-options[data-active='false'] - width 70px - background $primary - 60% - color $white - - .meta-options[data-active='true'] - width 75px - background $tertiary + 50% - color $primary - 60% - - p - padding 5px 10px 5px 10px - font-size 1.2em - font-weight 400 - .paginate - width 260px - display block - margin 0 auto - a - display inline-block - vertical-align: top - span.count - text-align center - padding 5px - margin-top -2px - display inline-block - width 200px - font-size: 1.5em - color $tertiary - - -#post-edit-index - width 100% - overflow hidden - - #post-edit-index-wrapper - width 100% - - #post-header - // width 100% - - background $highlight - #post-header-wrapper - max-width 900px - margin 0 auto - padding 0.75rem - label - color: $white - font-size: 0.8em - font-family $monoType - font-weight 600 - span - color color $primary - 60% - font-size 1.5em - - #post-title - #post_title - background $highlight + 10% - font-family $baseType - width 97.6% - height 80px - font-size 2em - color $primary - 60% - padding 5px - margin 0 0 5px 0 - - - #calendar-icon - background $primary - 15% - border-radius 3px 0 0 3px - display inline-block - padding 5.2px - color $secondary - - #post-meta - #post_tags - background $highlight + 10% - font-family $baseType - width 97.6% - height 80px - color $primary - 60% - padding 5px - margin 0 0 5px 0 - - #post-options - display inline-block - vertical-align top - width 100% - padding 0 - - button:nth-child(1) - border-radius 3px 0 0 3px - - button:nth-child(4) - border-radius 0 3px 3px 0 - - button - width 33.3% - height 39px - object-transitions(0.3s) - margin 0 - border-radius 0 - display inline-block - vertical-align top - text-align center - - button[data-active='false'] - background $primary - 60% - svg - fill $white - - button[data-active='true'] - background $tertiary + 50% - svg - fill $primary - 60% - - #featured-image-upload, #post-image-upload - display none - - #post-feature - width 100% - - #featured-image-drop - display flex - align-items center - justify-content center - width 100% - min-height 200px - background $primary - 50% - color $primary - vertical-align middle - font-family $monoType - - label - cursor pointer - - img - width 100% - margin 0 - padding 0 - - #featured-new-image-btn - position absolute - margin 20px - - #new-feature-upload - padding-top 4px - background $white - - svg - fill $highlight - - #edit-post - width 100% - max-width 880px - margin 0 auto - - #edit-post-wrapper - //width 98.7% - max-width 900px - border-radius 5px - //background $primary - 10% - margin: 40px 0 40px 0 - overflow hidden - - pre - margin 0 - code - font-family $monoType - padding 5px - border-radius 5px - line-height 1.6em - font-size 1.25em - color $editorPrimary - word-wrap normal - white-space pre-wrap - line-break normal - -webkit-line-break normal - -o-line-break normal - -moz-line-break normal - display inline-block - width 100% - max-width 900px - min-height 200px - -/** -------------------------------- --- Responsive -------------------------------- -* */ -@media only screen and (max-width: 800px) - #post-edit-index - #post-edit-index-wrapper - #post-header - #post-title - #post-date - width 37.6% - -@media only screen and (max-width: 768px) - #post-edit-index - #post-edit-index-wrapper - #post-header - #post-title - #post-date - width 43.1% - - #post-meta - #edit-control - max-width 100% - - button - width 9.91% - -@media only screen and (max-width: 640px) - #post-edit-index - #post-edit-index-wrapper - #post-header - #post-title - #post-date - width 42% - -@media only screen and (max-width: 480px) - #post-index - #post-index-wrapper - #post-index-menu - a - font-size 0.95em - - label - display none - visibility hidden - - #post-edit-index - #post-edit-index-wrapper - #post-header - #post-title - #post-options - margin 5px 0 0 0 - width 100% - padding 0 - - #post-date - width 89.2% - - #post-meta - #edit-control - button - width 9.91% - -@media only screen and (max-width: 320px) - #post-index - #post-index-wrapper - #post-index-menu - a - font-size 0.95em - - label - display none - visibility hidden - - #post-edit-index - #post-edit-index-wrapper - #post-header - #post-title - #post_title - width 96.4% - - #post-options - margin 5px 0 0 0 - width 100% - padding 0 - - #post-date - width 83.1% - - #post-meta - #post_tags - width 96.4% - - #edit-control - .content-editor-btn-icon - svg.icons - width 20px - - .post-sumbit-btn - svg.icons - width 20px - - button - width 10% diff --git a/src/styles/main/_settings.sass b/src/styles/main/_settings.sass new file mode 100644 index 0000000..4d53d12 --- /dev/null +++ b/src/styles/main/_settings.sass @@ -0,0 +1,176 @@ +#settings-actions + position: fixed + width: 40% + margin-top: -85px + left: 50% + margin-left: -20% + #buttons + width: 155px + margin: 0 auto + button + //width 30% + margin: 5px + svg + fill: $white + button[data-render='false'] + background: color.adjust($primary, $lightness: -60%) + svg + fill: $white + + button[data-render='true'] + background: color.adjust($tertiary, $lightness: 60%) + svg + fill: color.adjust($primary, $lightness: -60%) + + +#site-background + margin: 0 0 10px 0 + + img + width: 100% + // border 5px solid $white + border-radius: 0 + overflow: hidden + cursor: pointer + + label + position: absolute + color: $white + margin: 5px + background: color.adjust($primary, $lightness: -60%) + padding: 5px + border-radius: 3px + + input + visibility: hidden + display: none + +#settings-index + width: 94% + max-width: 900px + margin: 0 auto + + #settings-index-wrapper + padding: 0.75rem + + button + margin-top: 5px + width: 100% + height: 45px + + #member-settings, #site-settings, #option-settings, #member-utils + background: $primary + padding: 5px + border-radius: 5px 0 5px 0 + + label + font-family: $monoType + color: $white + span + color: $secondary + + input + width: 95% + margin: 0 5px 10px 0 + height: 30px + padding: 10px + input#backup-upload + visibility: hidden + display: none + .backup-meta + background: color.adjust($primary, $lightness: -60%) + color: $white + padding: 8px + border-radius: 3px + margin: 5px 0 0 0 + + width: 100% + margin: 20px auto + + #member-avatar-drop + display: inline-block + margin: 0 0 10px 0 + + img + width: 100% + // border 5px solid $white + border-radius: 5px + overflow: hidden + cursor: pointer + display: block + margin-bottom: 2px + + input + visibility: hidden + display: none + #privacy-toggle + width: 50% + #render-toggle + width: 50% + + #member-info + vertical-align: top + display: inline-block + width: 100% + + input + width: 95% + margin: 0 5px 10px 0 + + textarea + background: color.adjust($primary, $lightness: -60%) + width: 95% + height: 155px + color: $secondary + padding: 10px + + #option-settings + #theme-settings + a + width: 95% + margin: 0 5px 5px 0 + height: 25px + padding: 10px + display: inline-block + + a[data-enabled='false'] + background: color.adjust($primary, $lightness: -60%) + color: $secondary + border-radius: 3px + + a[data-enabled='true'] + background: $secondary + color: $primary + border-radius: 3px + + svg + fill: $primary + display: inline-block + float: right + + #mail-settings + min-height: 240px + + a.mail-option + float: right + font-family: $monoType + font-size: 0.9em + border-radius: 3px + text-decoration: none + margin: 0 0 0 5px + // padding: 1px + + a.mail-option[data-enabled='true'] + color: $highlight + + a.mail-option[data-enabled='false'] + color: $white + + input + // width 94% + margin: 0 5px 5px 0 + vertical-align: top + + div[data-enabled='false'] + display: none + visibility: hidden \ No newline at end of file diff --git a/src/styles/main/_settings.styl b/src/styles/main/_settings.styl deleted file mode 100644 index a8910e7..0000000 --- a/src/styles/main/_settings.styl +++ /dev/null @@ -1,176 +0,0 @@ -#settings-actions - position fixed - width 40% - margin-top -85px - left 50% - margin-left -20% - #buttons - width 155px - margin 0 auto - button - //width 30% - margin 5px - svg - fill $white - button[data-render='false'] - background $primary - 60% - svg - fill $white - - button[data-render='true'] - background $tertiary + 50% - svg - fill $primary - 60% - - -#site-background - margin 0 0 10px 0 - - img - width 100% - // border 5px solid $white - border-radius 0 - overflow hidden - cursor pointer - - label - position absolute - color $white - margin 5px - background $primary - 60% - padding 5px - border-radius 3px - - input - visibility hidden - display none - -#settings-index - width 94% - max-width 900px - margin 0 auto - - #settings-index-wrapper - padding 0.75rem - - button - margin-top 5px - width 100% - height 45px - - #member-settings, #site-settings, #option-settings, #member-utils - background $primary - padding 5px - border-radius 5px 0 5px 0 - - label - font-family $monoType - color $white - span - color $secondary - - input - width 95% - margin 0 5px 10px 0 - height 30px - padding 10px - input#backup-upload - visibility hidden - display none - .backup-meta - background $primary - 60% - color $white - padding 8px - border-radius 3px - margin 5px 0 0 0 - - width 100% - margin 20px auto - - #member-avatar-drop - display inline-block - margin 0 0 10px 0 - - img - width 100% - // border 5px solid $white - border-radius 5px - overflow hidden - cursor pointer - display block - margin-bottom 2px - - input - visibility hidden - display none - #privacy-toggle - width 50% - #render-toggle - width 50% - - #member-info - vertical-align top - display inline-block - width 100% - - input - width 95% - margin 0 5px 10px 0 - - textarea - background $primary - 60% - width 95% - height 155px - color $secondary - padding 10px - - #option-settings - #theme-settings - a - width 95% - margin 0 5px 5px 0 - height 25px - padding 10px - display inline-block - - a[data-enabled='false'] - background $primary - 60% - color $secondary - border-radius 3px - - a[data-enabled='true'] - background $secondary - color $primary - border-radius 3px - - svg - fill $primary - display inline-block - float right - - #mail-settings - min-height 240px - - a.mail-option - float right - font-family $monoType - font-size 0.9em - border-radius 3px - text-decoration none - margin 0 0 0 5px - // padding: 1px - - a.mail-option[data-enabled='true'] - color $highlight - - a.mail-option[data-enabled='false'] - color $white - - input - // width 94% - margin 0 5px 5px 0 - vertical-align top - - div[data-enabled='false'] - display none - visibility hidden \ No newline at end of file diff --git a/src/styles/main/_structure.sass b/src/styles/main/_structure.sass new file mode 100644 index 0000000..33d5ebd --- /dev/null +++ b/src/styles/main/_structure.sass @@ -0,0 +1,161 @@ +html, body + background-color: color.adjust($primary, $lightness: -20%) + font: 400 1em $baseType + height: 100% + +a + font: 300 1em $baseType + color: $secondary + text-decoration: underline + @include object-transitions(0.1s) + + &:hover + color: color.adjust($secondary, $lightness: 10%) + +svg.icons + width: 25px + fill: $secondary + +#notifications + perspective: 1000px + position: fixed + z-index: 2000 + height: 55px + width: 100% + display: block + align-items: center + justify-content: center + padding: 0 + margin-top: -55px + #notifyMessage + margin: 0 auto + //ks-easing( "out-back" ); + transition: all 0.6s cubic-bezier(.83,.05,.28,1.0) + //padding-top -125px + height: 50px + width: 500px + display: flex + align-items: center + justify-content: center + opacity: 1 + transform-style: preserve-3d + transform: rotateX(-120deg) + transform-origin: 50% 0 + #notify-good, #notify-lame, #notify-working + display: none + .notify-icon + background: $black + padding: 8px 5px 5px 5px + border-radius: 5px 0 0 5px + height: 30px + width: 30px + text-align: center + border: 2px solid $white + p + color: $white + background: color.adjust($primary, $lightness: -60%) + width: 400px + height: 28px + padding: 15px 0 0 5px + border-radius: 0 5px 5px 0 + border: 2px solid $white + text-align: center + + .icons + fill: $white + +.notify-close + transform-style: preserve-3d + transform: rotateX(-120deg) + +.notify-open + transform-style: preserve-3d + transform: rotateX(0deg) +.blog-container + width: 100% + +.main-container + margin: 0 auto + z-index: 10 + position: relative + + section + header + width: 100% + max-width: 900px + margin: 0 auto + + #wrapper + padding: 0.75rem + + #left, #right + width: 50% + display: inline-block + vertical-align: top + + #the-logo + width: 40px + + #right + text-align: right + color: $white + + a + text-decoration-color: $highlight + font-weight: 400 + + label#the-title + font-size: 1.2em + font-weight: 400 + color: $tertiary + text-decoration: none + display: block + line-height: 0.8 + // word-break: break-all; + + #dash-menu + text-align: right + +/* Mozilla based browsers */ +::-moz-selection + background-color: $highlight + color: $white + +/* Works in Safari */ +::selection + background-color: $highlight + color: $white + +/* Works in Opera */ +::-o-selection + background-color: $highlight + color: $white + +::-ms-selection + background-color: $highlight + color: $white + +/* Works in Internet Explorer */ +::-webkit-selection + background-color: $highlight + color: $white + +//Responsive +@media only screen and (max-width: 800px) + .main-container + section + header + #wrapper + #left, #right + display: inline-block + +@media only screen and (max-width: 480px) + .main-container + section + header + #wrapper + #left + width: 30% + + #right + width: 70% diff --git a/src/styles/main/_structure.styl b/src/styles/main/_structure.styl deleted file mode 100644 index 1eec698..0000000 --- a/src/styles/main/_structure.styl +++ /dev/null @@ -1,164 +0,0 @@ -html, body - background-color $primary - 60% - font 400 1em $baseType - height 100% - -a - font 300 1em $baseType - color $secondary - text-decoration underline - object-transitions(0.1s) - - &:hover - color $secondary + 10% - -svg.icons - width 25px - fill $secondary - -#notifications - perspective 1000px - position fixed - z-index 2000 - height 55px - width 100% - display block - align-items center - justify-content center - padding 0 - margin-top: -55px - #notifyMessage - margin 0 auto - transition all 0.6s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" ); - //padding-top -125px - height 50px; - width 500px - display: flex; - align-items center - justify-content center - opacity: 1 - transform-style preserve-3d - transform: rotateX(-120deg) - transform-origin: 50% 0; - #notify-good, #notify-lame, #notify-working - display: none - .notify-icon - background $black - padding 8px 5px 5px 5px - border-radius 5px 0 0 5px - height 30px - width 30px - text-align center - border 2px solid $white - p - color $white - background $primary - 60% - width 400px - height 28px - padding 15px 0 0 5px - border-radius 0 5px 5px 0 - border 2px solid $white - text-align center - - .icons - fill $white - -.notify-close - transform-style preserve-3d - transform: rotateX(-120deg) - -.notify-open - transform-style preserve-3d - transform: rotateX(0deg) -.blog-container - width 100% - -.main-container - margin 0 auto - z-index 10 - position relative - - section - header - width 100% - max-width 900px - margin 0 auto - - #wrapper - padding 0.75rem - - #left, #right - width 50% - display inline-block - vertical-align top - - #the-logo - width 40px - - #right - text-align right - color $white - - a - text-decoration-color $highlight - font-weight: 400 - - label#the-title - font-size 1.2em - font-weight 400 - color $tertiary - text-decoration none - display block - line-height 0.8 - // word-break: break-all; - - #dash-menu - text-align right - -/* Mozilla based browsers */ -::-moz-selection - background-color $highlight - color $white - -/* Works in Safari */ -::selection - background-color $highlight - color $white - -/* Works in Opera */ -::-o-selection - background-color $highlight - color $white - -::-ms-selection - background-color $highlight - color $white - -/* Works in Internet Explorer */ -::-webkit-selection - background-color $highlight - color $white - -/** -------------------------------- --- Responsive -------------------------------- -* */ -@media only screen and (max-width: 800px) - .main-container - section - header - #wrapper - #left, #right - display inline-block - -@media only screen and (max-width: 480px) - .main-container - section - header - #wrapper - #left - width 30% - - #right - width 70% diff --git a/src/styles/main/_typography.sass b/src/styles/main/_typography.sass new file mode 100644 index 0000000..f570246 --- /dev/null +++ b/src/styles/main/_typography.sass @@ -0,0 +1,18 @@ +$baseType: Helvetica, Arial, sans-serif +$monoType: monospace, courier + +h1, h2, h3 + color: $white + +h1 + font-size: 2em + font-weight: 400 + +h2 + font-size: 1.75em + font-weight: 400 + +h3 + font-size: 1.5em + font-weight: 300 + diff --git a/src/styles/main/_typography.styl b/src/styles/main/_typography.styl deleted file mode 100644 index 444889f..0000000 --- a/src/styles/main/_typography.styl +++ /dev/null @@ -1,119 +0,0 @@ -@font-face - font-weight 300 - font-style normal - font-family 'Apercu' - src url('fonts/Apercu-Light.eot'), - url('fonts/Apercu-Light.eot?#iefix') format('embedded-opentype'), - url('fonts/Apercu-Light.woff2') format('woff2'), - url('fonts/Apercu-Light.woff') format('woff'), - url('fonts/Apercu-Light.ttf') format('truetype'), - url('fonts/Apercu-Light.svg?#Apercu') format('svg') - -@font-face - font-weight 300 - font-style italic - font-family 'Apercu' - src url('fonts/Apercu-LightItalic.eot'), - url('fonts/Apercu-LightItalic.eot?#iefix') format('embedded-opentype'), - url('fonts/Apercu-LightItalic.woff2') format('woff2'), - url('fonts/Apercu-LightItalic.woff') format('woff'), - url('fonts/Apercu-LightItalic.ttf') format('truetype'), - url('fonts/Apercu-LightItalic.svg?#Apercu') format('svg') - -@font-face - font-weight 400 - font-style normal - font-family 'Apercu' - src url('fonts/Apercu.eot'), - url('fonts/Apercu.eot?#iefix') format('embedded-opentype'), - url('fonts/Apercu.woff2') format('woff2'), - url('fonts/Apercu.woff') format('woff'), - url('fonts/Apercu.ttf') format('truetype'), - url('fonts/Apercu.svg?#Apercu') format('svg') - -@font-face - font-weight 400 - font-style italic - font-family 'Apercu' - src url('fonts/Apercu-Italic.eot'), - url('fonts/Apercu-Italic.eot?#iefix') format('embedded-opentype'), - url('fonts/Apercu-Italic.woff2') format('woff2'), - url('fonts/Apercu-Italic.woff') format('woff'), - url('fonts/Apercu-Italic.ttf') format('truetype'), - url('fonts/Apercu-Italic.svg?#Apercu') format('svg') - -@font-face - font-weight 500 - font-style normal - font-family 'Apercu' - src url('fonts/Apercu-Medium.eot'), - url('fonts/Apercu-Medium.eot?#iefix') format('embedded-opentype'), - url('fonts/Apercu-Medium.woff2') format('woff2'), - url('fonts/Apercu-Medium.woff') format('woff'), - url('fonts/Apercu-Medium.ttf') format('truetype'), - url('fonts/Apercu-Medium.svg?#Apercu') format('svg') - -@font-face - font-weight 500 - font-style italic - font-family 'Apercu' - src url('fonts/Apercu-MediumItalic.eot'), - url('fonts/Apercu-MediumItalic.eot?#iefix') format('embedded-opentype'), - url('fonts/Apercu-MediumItalic.woff2') format('woff2'), - url('fonts/Apercu-MediumItalic.woff') format('woff'), - url('fonts/Apercu-MediumItalic.ttf') format('truetype'), - url('fonts/Apercu-MediumItalic.svg?#Apercu') format('svg') - -@font-face - font-weight 600 - font-style normal - font-weight bold - font-family 'Apercu' - src url('fonts/Apercu-Bold.eot'), - url('fonts/Apercu-Bold.eot?#iefix') format('embedded-opentype'), - url('fonts/Apercu-Bold.woff2') format('woff2'), - url('fonts/Apercu-Bold.woff') format('woff'), - url('fonts/Apercu-Bold.ttf') format('truetype'), - url('fonts/Apercu-Bold.svg?#Apercu') format('svg') - -@font-face - font-weight 600 - font-style italic - font-weight bold - font-family 'Apercu' - src url('fonts/Apercu-BoldItalic.eot'), - url('fonts/Apercu-BoldItalic.eot?#iefix') format('embedded-opentype'), - url('fonts/Apercu-BoldItalic.woff2') format('woff2'), - url('fonts/Apercu-BoldItalic.woff') format('woff'), - url('fonts/Apercu-BoldItalic.ttf') format('truetype'), - url('fonts/Apercu-Bold.svg?#Apercu') format('svg') - -@font-face - font-weight 400 - font-style normal - font-family 'Apercu-Mono' - src url('fonts/Apercu-Mono.eot'), - url('fonts/Apercu-Mono.eot?#iefix') format('embedded-opentype'), - url('fonts/Apercu-Mono.woff2') format('woff2'), - url('fonts/Apercu-Mono.woff') format('woff'), - url('fonts/Apercu-Mono.ttf') format('truetype'), - url('fonts/Apercu-Mono.svg?#Apercu') format('svg') - -$baseType = Helvetica, Arial, sans-serif; -$monoType = monospace, courier - -h1, h2, h3 - color $white - -h1 - font-size 2em - font-weight 400 - -h2 - font-size 1.75em - font-weight 400 - -h3 - font-size 1.5em - font-weight 300 -