diff --git a/src/styles/blog.sass b/src/styles/blog.sass index 550d1edc..f18e665b 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -87,9 +87,6 @@ @import components/checkbox @import components/overlay -.container-fluid.blog - padding: 0 - #blog_container +media-xs flex-direction: column @@ -244,6 +241,56 @@ #blog_post-edit-container padding: 25px +.blog_index-item + .item-picture + position: relative + width: 100% + max-height: 350px + min-height: 200px + height: auto + overflow: hidden + border-top-left-radius: 3px + border-top-right-radius: 3px + +clearfix + + img + +position-center-translate + width: 100% + border-top-left-radius: 3px + border-top-right-radius: 3px + + +media-xs + min-height: 150px + +media-sm + min-height: 150px + +media-md + min-height: 250px + +media-lg + min-height: 250px + + .item-content + +node-details-description + + +media-xs + padding: + left: 0 + right: 0 + + img + display: block + margin: 0 auto + + .item-meta + color: $color-text-dark-secondary + padding: + left: 25px + right: 25px + + +media-xs + padding: + left: 10px + right: 10px + #blog_index-container, #blog_post-create-container, #blog_post-edit-container @@ -262,117 +309,11 @@ +media-lg width: 100% - .blog_index-header - border-top-left-radius: 3px - border-top-right-radius: 3px - display: block - overflow: hidden - position: relative - text-align: center - width: 100% - - img - width: 100% - - .blog_index-item - max-width: 780px - - &:hover - .item-info a - color: $color-primary - - .item-picture - position: relative - width: 100% - max-height: 350px - min-height: 200px - height: auto - overflow: hidden - border-top-left-radius: 3px - border-top-right-radius: 3px - +clearfix - - img - +position-center-translate - width: 100% - border-top-left-radius: 3px - border-top-right-radius: 3px - - +media-xs - min-height: 150px - +media-sm - min-height: 150px - +media-md - min-height: 250px - +media-lg - min-height: 250px - - ul.meta - +list-meta - font-size: .9em - padding: 0px 25px 5px - - .item-content - +node-details-description - font-size: 1.3em - padding: 15px 25px 25px - - +media-xs - padding: - left: 0 - right: 0 - - img - display: block - margin: 0 auto - - .item-meta - color: $color-text-dark-secondary - padding: - left: 25px - right: 25px - - +media-xs - padding: - left: 10px - right: 10px - - .button-create, - .button-edit - +button($color-success, 3px, true) .item-picture+.button-back+.button-edit right: 20px top: 20px - .comments-container - padding: - left: 20px - right: 20px - max-width: 680px - margin: 0 auto - - +media-lg - padding: - left: 0 - right: 0 - - .comment-reply-container - background-color: transparent - - .comment-reply-field - textarea, .comment-reply-meta - background-color: $color-background-light - - &.filled - .comment-reply-meta - background-color: $color-success - - .comment-reply-form - +media-xs - padding: - left: 0 - #blog_post-edit-form padding: 0 @@ -432,12 +373,6 @@ +media-lg width: 25% - .button-create - display: block - width: 100% - +button($color-success, 6px) - margin: 0 - .button-back +button($color-info, 6px, true) display: block @@ -536,104 +471,6 @@ text-decoration: none color: $color-primary - -#blog_container - &.cloud-blog - #blog_index-container, - #blog_post-create-container, - #blog_post-edit-container - width: 100% - padding: 25px 30px 20px 30px - - #blog_index-container+#blog_index-sidebar - display: none - - #blog_index-container, - &.cloud-blog #blog_index-container - +media-sm - width: 100% - - +media-xs - width: 100% - - padding: 0 0 50px 0 - margin: 0 auto - - .blog_index-item - +media-xs - width: 100% - padding: 10px 25px - - &.list - margin: 0 auto - padding: 15px 0 - margin: 0 auto - border-bottom: thin solid $color-background-dark - - &:last-child - border-bottom: none - - +media-xs - width: 100% - padding: 15px 10px - margin: 0 - - a.item-title - padding: - top: 0 - bottom: 5px - font: - size: 1.6em - weight: 400 - - .item-info - color: $color-text-dark-secondary - font-size: .9em - padding: - left: 25px - right: 25px - - .item-header - width: 50px - height: 50px - position: absolute - top: 20px - border-radius: 3px - background-color: $color-background-dark - overflow: hidden - - img - +position-center-translate - width: 100% - - i - +position-center-translate - font-size: 1.2em - color: $color-text-dark-hint - - &.nothumb - border-radius: 50% - - a.item-title, .item-info - padding-left: 70px - -#blog_index-container - .blog_index-item - position: relative - - +media-xs - padding: 25px 0 20px 0 - - &.list - padding: 15px 10px - margin: 0 - - +media-xs - width: 100% - padding: 15px 10px - margin: 0 - - .blog-archive-navigation +media-xs font-size: 1em @@ -663,16 +500,7 @@ color: $color-text-dark-secondary pointer-events: none -.blog-action - display: flex - padding: 10px - position: absolute - right: 0 - top: 0 - z-index: 1 - - -// Specific tweaks for blogs in the context of a project +// Specific tweaks for blogs in the context of a project. #project_context .blog_index-item +media-xs @@ -697,3 +525,29 @@ .blog-archive-navigation margin-left: 35px + +// Used on the blog. +.comments-compact + .comments-list + border: none + padding: 0 0 15px 0 + + .comments-container + max-width: 680px + margin: 0 auto + + .comment-reply-container + background-color: transparent + + .comment-reply-field + textarea, .comment-reply-meta + background-color: $color-background-light + + &.filled + .comment-reply-meta + background-color: $color-success + + .comment-reply-form + +media-xs + padding: + left: 0