Css grid (#77)

* Refactor to postcss and css grid

* Remove postcss plugins

* Add CSS; Update .gitignore

* Updates #77

.editorconfig

@@ -0,0 +1,18 @@
+; This file is for unifying the coding style for different editors and IDEs.
+; More information at http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_size = 4
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[{package.json}]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -7,9 +7,7 @@ _ide_helper*.php
 /node_modules
 /npm-debug.log
 /public/build
-/resources/assets/css
 /public/css
 /public/js
-/public/doc/sass
 /public/media
 /public/mix-manifest.json

.stylelintrc

@@ -0,0 +1,9 @@
+{
+    "extends": "stylelint-config-standard",
+    "ignoreFiles": ["./resources/assets/css/.compiled/*"],
+    "rules": {
+    	"indentation": 4,
+    	"selector-pseudo-element-colon-notation": "single",
+    	"number-leading-zero": "never"
+    }
+}

package.json

@@ -8,7 +8,9 @@
     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "prod": "npm run production",
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "lint": "eslint resources/assets/js --ext .js,.vue"
+    "lint": "npm run lint:css && npm run lint:js",
+    "lint:css": "stylelint resources/assets/css/**/**.css --fix",
+    "lint:js": "eslint resources/assets/js --ext .js,.vue"
   },
   "dependencies": {
     "axios": "^0.16.2",
@@ -21,14 +23,14 @@
     "eslint-config-spatie": "^1.2.2",
     "eslint-plugin-html": "^1.5.3",
     "eslint-plugin-vue": "^0.1.1",
+    "import-glob-loader": "^1.1.0",
     "jest": "^20.0.4",
     "laravel-echo": "^1.0.1",
     "laravel-mix": "0.*",
     "lodash": "^4.17.4",
     "mockdate": "^2.0.1",
     "moment": "^2.13.0",
     "moment-duration-format": "^1.3.0",
-    "node-noop": "^1.0.0",
     "pusher-js": "^3.2.1",
     "stringz": "^0.2.1",
     "svg-url-loader": "^2.0.2",
@@ -39,5 +41,9 @@
   },
   "jest": {
     "testRegex": "test.js$"
+  },
+  "devDependencies": {
+    "stylelint": "^7.11.1",
+    "stylelint-config-standard": "^16.0.0"
   }
 }

resources/assets/css/app.css

@@ -0,0 +1,5 @@
+@import 'settings/*';
+@import 'helpers/*';
+@import 'layout/*';
+@import 'components/*';
+@import 'vendor/*';

resources/assets/css/components/calendar.css

@@ -0,0 +1,15 @@
+.calendar__events {
+    font-size: var(--font-size-s);
+}
+
+.calendar__event {
+    padding-bottom: 1.5vh;
+}
+
+.calendar__event__title {
+    font-weight: var(--font-weight-bold);
+}
+
+.calendar__event__date {
+    color: var(--red-light);
+}

resources/assets/css/components/github-file.css

@@ -0,0 +1,9 @@
+.github-file__title {
+    color: var(--blue-light);
+    text-transform: uppercase;
+    font-size: var(--font-size-m);
+}
+
+.github-file__content {
+    font-size: var(--font-size-s);
+}

resources/assets/css/components/internet-connection.css

@@ -0,0 +1,34 @@
+.internet-connection {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-around;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, .35);
+}
+
+.internet-connection__alert {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: .75em 1.5em;
+    border-radius: 1em 1em 0 0;
+    background-color: var(--red);
+    box-shadow: 0 0 100px rgba(0, 0, 0, .15);
+    font-size: var(--font-size-m);
+}
+
+.internet-connection__icon {
+    --icon-url: url('/images/svg/alert.svg');
+
+    font-size: var(--font-size-l);
+}
+
+.internet-connection__text {
+    padding-left: .5em;
+    color: var(--red-lightest);
+}

resources/assets/css/components/music.css

@@ -0,0 +1,75 @@
+.music {
+    z-index: 1;
+}
+
+.music__icon {
+    --background-icon-url: url('/images/svg/music.svg');
+}
+
+.music__background {
+    position: absolute;
+    top: -50px;
+    right: -50px;
+    bottom: -50px;
+    left: -50px;
+    background-position: center;
+    background-size: cover;
+    opacity: .3;
+    filter: blur(25px);
+}
+
+.music__content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.music__cover {
+    flex-shrink: 0;
+    margin: var(--grid-gap);
+    padding-bottom: 25%;
+    width: 25%;
+    border-radius: .25vw;
+    background-color: rgba(255, 255, 255, .1);
+    background-position: center;
+    background-size: cover;
+    box-shadow: 0 1px 10px rgba(0, 0, 0, .25);
+}
+
+.music__text {
+    margin: var(--grid-gap);
+    max-width: 90%;
+    transition: width .5s linear;
+}
+
+.music___artist {
+    font-weight: var(--font-weight-black);
+    font-size: var(--font-size-m);
+}
+
+.music__track {
+    font-size: var(--font-size-xs);
+}
+
+.music__user {
+    z-index: 3;
+    display: inline-block;
+    margin-top: 1em;
+    padding: .25em .5em;
+    border-radius: .25vw;
+    background: rgba(0, 0, 0, .25);
+    white-space: nowrap;
+    font-size: var(--font-size-xs);
+}
+
+.music__user__icon {
+    --icon-url: url(/images/svg/music.svg);
+
+    margin-right: .25em;
+}

resources/assets/css/components/statistics.css

@@ -0,0 +1,21 @@
+.statistic {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--font-size-s);
+}
+
+.statistic__label {
+    top: .1em;
+    text-transform: uppercase;
+    font-size: var(--font-size-s);
+}
+
+.statistic__stars {
+    --icon-url: url('/images/svg/star.svg');
+}
+
+.statistic__count {
+    color: var(--yellow);
+    vertical-align: top;
+    font-weight: var(--font-weight-black);
+}

resources/assets/css/components/time-weather.css

@@ -0,0 +1,47 @@
+.time-weather {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.time-weather__content {
+    text-align: center;
+}
+
+.time-weather__time {
+    display: block;
+    padding: .1em 0;
+    color: var(--yellow);
+    letter-spacing: .05em;
+    font-weight: var(--font-weight-light);
+    font-size: var(--font-size-l);
+    line-height: 1;
+}
+
+.time-weather__date {
+    display: none;
+    color: var(--gray-light);
+    text-transform: uppercase;
+    font-size: var(--font-size-m);
+}
+
+.time-weather__weather {
+    display: none;
+    color: var(--gray-light);
+    font-size: var(--font-size-m);
+}
+
+.time-weather__weather__temperature:after {
+    content: '°';
+}
+
+.time-weather__weather__description {
+    margin-left: .25em;
+}
+
+@media (min-height: 30em) {
+    .time-weather__date,
+    .time-weather__weather {
+        display: block;
+    }
+}

resources/assets/css/components/tweets.css

@@ -0,0 +1,102 @@
+.tweets {
+    margin: calc(var(--grid-padding) * -1);
+}
+
+.tweets__icon {
+    --background-icon-url: url('/images/svg/twitter.svg');
+}
+
+.tweet {
+    margin-bottom: var(--grid-gap);
+    padding: var(--grid-gap);
+    border-radius: .25vw;
+    background-color: var(--gray-darker);
+}
+
+.tweet--quoted {
+    margin-top: var(--grid-gap);
+    padding: var(--grid-gap) 0;
+    border-top: dotted 2px rgba(255, 255, 255, .15);
+}
+
+.tweet__header {
+    display: flex;
+    align-items: center;
+    margin-bottom: .5em;
+}
+
+.tweet__user {
+    min-width: 0;
+}
+
+.tweet__user__handle {
+    color: var(--gray-light);
+    font-size: var(--font-size-xxs);
+}
+
+.tweet__user__name {
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-xxs);
+    filter: grayscale(1);
+}
+
+.tweet__avatar {
+    display: block;
+    flex-grow: 0;
+    flex-shrink: 0;
+    overflow: hidden;
+    margin-right: .5vw;
+    width: 2.5vw;
+    height: 2.5vw;
+    border-radius: 1.25vw;
+    background-color: white;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    box-shadow: 0 1px 10px rgba(0, 0, 0, .25);
+}
+
+.tweet__body--default {
+    font-size: var(--font-size-s);
+}
+
+.tweet__body--small {
+    font-size: var(--font-size-xxs);
+}
+
+.tweet__body--medium {
+    font-size: var(--font-size);
+}
+
+.tweet__body--large {
+    font-size: var(--font-size-m);
+}
+
+.tweet__body__handle {
+    font-weight: var(--font-weight-black);
+}
+
+.tweet__body__hashtag {
+    color: var(--gray-light);
+}
+
+.tweet__attachment {
+    overflow: hidden;
+    margin-top: var(--grid-gap);
+    text-align: center;
+    opacity: .75;
+}
+
+.tweet__attachment__image {
+    max-width: 100%;
+    max-height: 15vh;
+    border-radius: .25vw;
+    box-shadow: 0 1px 10px rgba(0, 0, 0, .25);
+    vertical-align: middle;
+}
+
+.tweet__meta {
+    margin-top: .5vw;
+    color: var(--gray-light);
+    font-size: var(--font-size-xxs);
+}