diff options
author | Fabien CASTERS <fabien@vaga.io> | 2019-03-03 19:48:09 +0300 |
---|---|---|
committer | Fabien CASTERS <fabien@vaga.io> | 2019-03-03 19:48:09 +0300 |
commit | 41e0db683eafb7b3fb7ec09c895df58545069cee (patch) | |
tree | 35f04e6ebbbb12c997c854f99f2bc273d8514996 /assets/css/components | |
parent | 016a12f437c57ccb48427bb7ca0037a06b16e71d (diff) |
Reorganize SCSS files
Diffstat (limited to 'assets/css/components')
-rw-r--r-- | assets/css/components/_app.scss | 40 | ||||
-rw-r--r-- | assets/css/components/_icon.scss | 6 | ||||
-rw-r--r-- | assets/css/components/_post.scss | 14 | ||||
-rw-r--r-- | assets/css/components/_tag.scss | 14 | ||||
-rw-r--r-- | assets/css/components/posts_list.scss | 15 |
5 files changed, 89 insertions, 0 deletions
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; +} + |