Reorganize SCSS files

7 files changed, 128 insertions, 123 deletions

diff --git a/assets/css/_base.scss b/assets/css/_base.scss
new file mode 100644
index 0000000..c6e56d6
--- /dev/null
+++ b/assets/css/_base.scss
@@ -0,0 +1,33 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  line-height: 1.6;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: $dark-color;
+  color: $light-color;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: $lightest-color;
+}
+
+a {
+  color: $primary-color;
+  text-decoration: none;
+
+  &:hover {
+    color: $lightest-color;
+    transition: color 0.8s;
+  }
+}
+
+pre {
+  overflow: auto;
+}
+
diff --git a/assets/css/components/_app.scss b/assets/css/components/_app.scss
new file mode 100644
index 0000000..28c7bc9
--- /dev/null
+++ b/assets/css/components/_app.scss
@@ -0,0 +1,40 @@
+.app-header {
+  padding: 2.5em;
+  background: $darkest-color;
+  text-align: center;
+}
+
+.app-header-avatar {
+  max-width: 15rem;
+  max-height: 15rem;
+  border-radius: 100%;
+  border: 0.5rem solid $primary-color;
+}
+
+.app-container {
+  padding: 2.5rem;
+}
+
+.app-header-social {
+  font-size: 2em;
+  color: $lightest-color;
+
+  a {
+    margin: 0 0.1em;
+  }
+}
+
+@media (min-width: 940px) {
+  .app-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 20rem;
+    min-height: 100vh;
+  }
+
+  .app-container {
+    max-width: 65rem;
+    margin-left: 20rem;
+  }
+}
diff --git a/assets/css/components/_icon.scss b/assets/css/components/_icon.scss
new file mode 100644
index 0000000..207d421
--- /dev/null
+++ b/assets/css/components/_icon.scss
@@ -0,0 +1,6 @@
+.icon {
+  display: block-inline;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.125em;
+}
diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
new file mode 100644
index 0000000..8c565a8
--- /dev/null
+++ b/assets/css/components/_post.scss
@@ -0,0 +1,14 @@
+.post-title {
+  color: $lightest-color;
+}
+
+.post-content {
+  pre {
+    border-left: 0.4em solid rgba($primary-color, .8);
+    padding-left: 1em;
+  }
+}
+
+.post-meta {
+  font-size: 0.8em;
+}
diff --git a/assets/css/components/_tag.scss b/assets/css/components/_tag.scss
new file mode 100644
index 0000000..a0655a4
--- /dev/null
+++ b/assets/css/components/_tag.scss
@@ -0,0 +1,14 @@
+.tag {
+  display: inline-block;
+  margin-right: 0.2em;
+  padding: 0 0.6em;
+  font-size: 0.9em;
+  border-radius: 0.2em;
+  white-space: nowrap;
+  background: rgba(255, 255, 255, 0.1);
+  transition: background 0.8s;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+}
diff --git a/assets/css/components/posts_list.scss b/assets/css/components/posts_list.scss
new file mode 100644
index 0000000..b70b32e
--- /dev/null
+++ b/assets/css/components/posts_list.scss
@@ -0,0 +1,15 @@
+.posts-list {
+  padding: 0;
+}
+
+.posts-list-item {
+  list-style: none;
+  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
+  padding: 0.4em 0;
+}
+
+.posts-list-item-description {
+  display: block;
+  font-size: 0.8em;
+}
+
diff --git a/assets/css/main.scss b/assets/css/main.scss
index a8078cb..8635974 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -4,128 +4,11 @@ $light-color: {{ .Site.Params.style.lightColor | default "#afbac4" }};
 $lightest-color: {{ .Site.Params.style.lightestColor | default "#ffffff" }};
 $primary-color: {{ .Site.Params.style.primaryColor | default "#57cc8a" }};
 
-* {
-  box-sizing: border-box;
-}
+@import 'base';
 
-html {
-  line-height: 1.6;
-}
+@import 'components/app';
+@import 'components/icon';
+@import 'components/tag';
+@import 'components/post';
+@import 'components/posts_list';
 
-body {
-  margin: 0;
-  font-family: sans-serif;
-  background: $dark-color;
-  color: $light-color;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  color: $lightest-color;
-}
-
-a {
-  color: $primary-color;
-  text-decoration: none;
-
-  &:hover {
-    color: $lightest-color;
-    transition: color 0.8s;
-  }
-}
-
-pre {
-  overflow: auto;
-}
-
-.app-header {
-  padding: 2.5em;
-  background: $darkest-color;
-  text-align: center;
-}
-
-.app-header-avatar {
-  max-width: 15rem;
-  max-height: 15rem;
-  border-radius: 100%;
-  border: 0.5rem solid $primary-color;
-}
-
-.app-container {
-  padding: 2.5rem;
-}
-
-.app-header-social {
-  font-size: 2em;
-  color: $lightest-color;
-
-  a {
-    margin: 0 0.1em;
-  }
-}
-
-.icon {
-  display: block-inline;
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.125em;
-}
-
-.tag {
-  display: inline-block;
-  margin-right: 0.2em;
-  padding: 0 0.6em;
-  font-size: 0.9em;
-  border-radius: 0.2em;
-  white-space: nowrap;
-  background: rgba(255, 255, 255, 0.1);
-  transition: background 0.8s;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.3);
-  }
-}
-
-.post-title {
-  color: $lightest-color;
-}
-
-.post-content {
-  pre {
-    border-left: 0.4em solid rgba($primary-color, .8);
-    padding-left: 1em;
-  }
-}
-
-.post-meta {
-  font-size: 0.8em;
-}
-
-.posts-list {
-  padding: 0;
-}
-
-.posts-list-item {
-  list-style: none;
-  border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
-  padding: 0.4em 0;
-}
-
-.posts-list-item-description {
-  display: block;
-  font-size: 0.8em;
-}
-
-@media (min-width: 940px) {
-  .app-header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 20rem;
-    min-height: 100vh;
-  }
-
-  .app-container {
-    max-width: 65rem;
-    margin-left: 20rem;
-  }
-}