archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

CSS: Blog cleanup

Browse Source
This commit is contained in:
Pablo Vazquez 2018-09-06 12:11:18 +02:00
parent 1821bb6b7d
commit b0d8da821f
1 changed files with 77 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

238
src/styles/blog.sass
View File

@ -87,9 +87,6 @@
@import components/checkbox
@import components/overlay
.container-fluid.blog
padding: 0
#blog_container
+media-xs
flex-direction: column
@ -244,43 +241,7 @@
#blog_post-edit-container
padding: 25px
#blog_index-container,
#blog_post-create-container,
#blog_post-edit-container
+container-box
width: 75%
+media-xs
border-radius: 0
width: 100%
clear: both
display: block
+media-sm
width: 100%
+media-md
width: 100%
+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
.blog_index-item
.item-picture
position: relative
width: 100%
@ -307,15 +268,8 @@
+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:
@ -337,42 +291,29 @@
left: 10px
right: 10px
.button-create,
.button-edit
+button($color-success, 3px, true)
#blog_index-container,
#blog_post-create-container,
#blog_post-edit-container
+container-box
width: 75%
+media-xs
border-radius: 0
width: 100%
clear: both
display: block
+media-sm
width: 100%
+media-md
width: 100%
+media-lg
width: 100%
.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