summaryrefslogtreecommitdiff
path: root/assets/css/scss/components/_blog.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/scss/components/_blog.scss')
-rw-r--r--assets/css/scss/components/_blog.scss148
1 files changed, 148 insertions, 0 deletions
diff --git a/assets/css/scss/components/_blog.scss b/assets/css/scss/components/_blog.scss
new file mode 100644
index 0000000..22264ec
--- /dev/null
+++ b/assets/css/scss/components/_blog.scss
@@ -0,0 +1,148 @@
+//
+// Blog Styles //
+//
+@include breakpoint-less(md) {
+ .sidebar-wrapper {
+ display: none;
+ }
+}
+
+.sidebar-box {
+ border: 1px solid $border-grey;
+ margin-bottom: 20px;
+ padding: 30px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ h1, h2, h3, h4, h5, h6 {
+ margin-bottom: 30px;
+ text-align: center;
+ }
+ .list-category {
+ list-style-type: none;
+ padding: 0;
+ li {
+ margin: 0;
+ padding: 7px 0;
+ border-bottom: 1px solid $border-grey;
+ &:first-child {
+ padding-top: 0;
+ }
+ &:last-child {
+ padding-bottom: 0;
+ border: 0;
+ }
+ a {
+ display: block;
+ span {
+ float: right;
+ font-size: 14px;
+ }
+ }
+ }
+ }
+ .popular-post {
+ position: relative;
+ margin-bottom: 15px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ img {
+ float: left;
+ width: 80px;
+ }
+ div {
+ padding-left: 100px;
+ h1, h2, h3, h4, h5, h6 {
+ margin-bottom: 0;
+ text-align: left;
+ }
+ a {
+ @include transition(linear 0.1s);
+ }
+ span {
+ font-size: 14px;
+ }
+ }
+ &:after {
+ content: '';
+ display: block;
+ clear: both;
+ }
+ }
+ .tags {
+ padding: 0;
+ li {
+ display: inline-block;
+ margin: 0 3px 6px 0;
+ a {
+ display: inline-block;
+ background: $button-grey-lighter;
+ padding: 5px 10px;
+ font-size: 14px;
+ &:hover, &:focus {
+ background: $button-grey;
+ color: $color-dark;
+ }
+ }
+ }
+ }
+}
+div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
+ .sidebar-box {
+ border-color: $color-white-02;
+ .list-category {
+ li {
+ border-color: $color-white-02;
+ }
+ }
+ .tags {
+ li {
+ a {
+ background: $color-black-08;
+ color: $color-white-07;
+ &:hover, &:focus {
+ background: $color-black-09;
+ color: $color-white;
+ }
+ }
+ }
+ }
+ }
+}
+
+//
+// Comment box //
+//
+.comment-box {
+ position: relative;
+ margin-bottom: 30px;
+ padding-left: 80px;
+ .comment-user-avatar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: $bg-grey;
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 60px;
+ img {
+ width: 60px;
+ height: 60px;
+ }
+ }
+ .comment-content {
+ position: relative;
+ .comment-time {
+ position: absolute;
+ top: 0;
+ right: 0;
+ text-align: right;
+ color: $color-primary-lighter;
+ font-style: italic;
+ font-size: 14px;
+ }
+ }
+} \ No newline at end of file